stuymedova

Performance

ContentsRenderingHardware accelerationConclusionThere are two primary factors that contribute to the performance of a web animation: rendering, and hardware acceleration.Rendering is the process of taking an update to the DOM and reflecting that change on screen. This affects the performance of all animations.Hardware acceleration is th

stuymedova

// Node.js
const fs = require('fs');

const sum = (a, b) => {
  return Number(a) + Number(b);
};

const fileContent = fs.readFileSync("input.txt", "utf8");
const [a, b] = fileContent.toString().split(' ');
const result = sum(a, b);

stuymedova

When first confronted with node.js, you are not only presented with a completely new programming environment. You also encounter what is often referred to as callback hell accompanied by weird unfamiliar programming patterns. One of these is the way node treats callback functions.

The following post explains the conventions that node.js uses for its callback patterns (referred to as Continuation-passing style) and how you should implement them in order to comply.

First argument is an error object pattern

Node expects - almost - all callback functions to accept an Error object as the first argument. If no error occurred, the first argument should be null. If you use inline anonymous functions, this is a typical code snippet that you will encounter using node:

// include the filesystem module
var fs = require('fs');

stuymedova

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

stuymedova

html, body, div, form, fieldset, legend, label { margin: 0; padding: 0;  }
table { border-collapse: collapse; border-spacing: 0; }
th, td { text-align: left; vertical-align: top; }
h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }
img { border: 0; }

stuymedova

// Node.js
const sum = (a, b) => {
  return Number(a) + Number(b);
};

process.stdin.on('data', (data) => {
  const [a, b] = data.toString().split(' ');
  const result = sum(a, b);
  process.stdout.write(result.toString());
  process.exit(0);

stuymedova

// Node.js
const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
});

rl.on('line', (input) => {
	if (input === 'ping') {

stuymedova

Simple public APIs

REST

• https://randomuser.me/api
• https://pokeapi.co/api/v2/pokemon/
• https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json

GraphQL

stuymedova

[Google SRE Books](https://www.typescriptlang.org/play?#code/PTAEBUAsFMCdtAQ3qALgdwPagLaIJYB2ammANgM4mgAm0AxmcgqjKBZIgA4KYBmSQgCgQoTACMAVg1QAuUEVRw+ietCqJCNNAE8eSMvkQV1AOhHALEGDqQoAbnFsV8OfE1gAaQdr6ZYaGw4mBSooPSYOMHE9MbqVqphrAgUiDjQ5kKoeggAQviwNOA5oAC8oADeQqCg6EQA5hTyAEwA3EIAvu1CisqqeQU0AJKESrAqapXVtQ1NoG2dQkIRhKGg4oMAjPL5hcX65RUzhI0toF3LmKthG4XNO4MjYxMIh8en8+fdorkMiACuJggOQAyvRYPguGF8Bp2KhYP96Kh-rBEGRdPoKDpQtAcJ4rPhUAByKhcEIucRkFjYXqwNwAD0C0AKoEB1MwmRWa1uNAAzA9Ck8+pNyjzNt8wFBoLZxJhWOx-lwybAwtB6UotA0xMkArSXhotBizFZ9gg0UYTFQaNhWDDQPYjApRnATEj8FcjRRvOhIO5oATneN+lROI4kKAANbSrCFTLZfQAeXQ6LehEwSJRhDR8nh-wQHVAADJQLsijl2vGEAAlCREMqVUBpjOwLNkeQqSj5oslx6Bl7dPX9UAABWgqnTEdAao1NCopdNUxqETImBRfH+bbQCOg7RqfEM6nbaJM7Q6PT7Q4Awr76FHiNPoFo573nkOqkvyKvxhuj53d6B93wQ8AOPHdFiEKkwkwZN5CTFMGzqE45mabwm2RFtsy3PMvgg6AwnoG873ka98FvR96yORCPhQ8JPzXH8QM7bxAOAjsgQuE1ODCVJ8Bob0EHgCIokfbQdFXVkgUHNQqEwRwAkrBJDDiChTFAEEeHofA+FItEyB0bxxD+NlQDE-4ZjIdF6jw9Y8LGKdYFgfwrHSChUislTQCGARTNASBZLgMQ5KZADyBXKj7Mc2AvRM8TYmEUQTAQPz0GBHgwQhKFwk0UAuEch06DQF0A