victor-homyakov

// To avoid slowdown from GC, run node with the following keys:
// --expose-gc --initial-old-space-size=1024

const fs = require('fs');
//const heapdump = require('heapdump');

const buffers = fs.readFileSync('buffers.txt').toString().split('\n');

const parse0 = line => {
    return {};

victor-homyakov

/*
 * Wrapper for https://www.npmjs.com/package/benchmark
 * Calculates minimum, median, maximum values of the sample
 */

const Benchmark = require('benchmark');

const units = ['s/op', 'ms/op', 'μs/op', 'ns/op'];

/**

victor-homyakov

Бенчмарки и performance-тесты для JavaScript/TypeScript

Performance optimisation cases

• Web performance optimization stats https://wpostats.com
• PerfPerfPerf (Ivan Akulov) Client Cases https://3perf.com/#clients
• web.dev Case Study https://web.dev/tags/case-study/

Tools

victor-homyakov

const estraverse = require('estraverse');
const espree = require('espree');
const escodegen = require('escodegen');
const fs = require('fs');
const path = require('path');

function getNameProp(prop) {
    if (prop.type === 'SpreadElement') {
        return prop;
    }

victor-homyakov

Планировщик задач: не замораживаем страницу

Event loop

• Михаил Башуров. Иван Тулуп. Асинхронщина в JS под капотом https://www.youtube.com/watch?v=JrmDTZPsla4
• Филипп Робертс. Что за чертовщина такая event loop? https://www.youtube.com/watch?v=8aGhZQkoFbQ
• Джейк Арчибальд. В цикле https://www.youtube.com/watch?v=cCOL7MC4Pl0&t=424s
• Демо: Влияние JS на UI страницы (воспроизведение видео, выделение текста): https://event-loop-tests.glitch.me/while-true-test.html

Метрики скорости: TTI, TBT

• Addy Osmani. Are long JavaScript tasks delaying your Time to Interactive? https://web.dev/long-tasks-devtools/

victor-homyakov

Ограничения на размер типов данных в Node.js и браузерах

Heap

• Википедия, Сборка мусора: https://ru.wikipedia.org/wiki/Сборка_мусора
• Википедия, Куча (Heap): https://ru.wikipedia.org/wiki/Куча_(память)
• Memory management in V8: https://deepu.tech/memory-management-in-v8/
• performance.memory на MDN: https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
• performance.memory на CanIUse: https://caniuse.com/mdn-api_performance_memory
• Как performance.memory появился в Chromium: https://www.html5rocks.com/en/tutorials/memory/effectivemanagement/

victor-homyakov

Планировщик задач: не замораживаем страницу

Код

• postMessage в планировщике React: react/react#14234
• Планировщик React: https://github.com/facebook/react/blob/76bbad3e34bc3403ddbe59e12845e8643dbb8d9f/packages/scheduler/src/forks/Scheduler.js#L550-L580
• Планировщик LRT: https://github.com/dfilatov/lrt
• $mol_fiber: https://github.com/hyoo-ru/mam_mol/tree/master/fiber

Event loop

• Михаил Башуров. Иван Тулуп. Асинхронщина в JS под капотом https://www.youtube.com/watch?v=JrmDTZPsla4

victor-homyakov

Память и её утечки в Chrome и Node.js. Нестандартные способы оптимизации памяти в Node.js.

Ограничения по памяти

• Определение глубины стека: https://jsfiddle.net/c1g9whdq/
• Определение макс. длины строки: https://jsfiddle.net/2mL7os5r/5/
• Определение макс. размера Map и Set: https://jsfiddle.net/31fvjp0o/4/
• Browser heap: https://caniuse.com/mdn-api_performance_memory
• Node.js heap: https://nodejs.org/api/process.html#process_process_memoryusage
• Лимиты на heap в Node.js: nodejs/node#25576 (comment)
• Как устроена память в V8: https://deepu.tech/memory-management-in-v8/

victor-homyakov

Приёмы оптимизации кода по скорости

Организационные

• Культура разработки performance-first: https://tonsky.me/blog/performance-first/
• Бюджет скорости: https://wp-rocket.me/blog/performance-budgets/
• Performance mantra: http://www.brendangregg.com/blog/2018-06-30/benchmarking-checklist.html

Не зависящие от языка и его реализации

• Rosetta Code - реализации задач на разных языках: http://rosettacode.org/wiki/Collections
• Статьи по основным структурам данных:

victor-homyakov

Код на React и TypeScript, который работает быстро

React

• Документация по React.memo: https://reactjs.org/docs/react-api.html#reactmemo
• Документация по useState: https://reactjs.org/docs/hooks-reference.html#usestate
• Исходный код ReactFiberBeginWork: https://github.com/facebook/react/blob/56e9feead0f91075ba0a4f725c9e4e343bca1c67/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L3219
• React.js pure render performance anti-pattern: https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f
• Avoiding unnecessary renders with React context: https://frontarm.com/james-k-nelson/react-context-performance/
• The Secret parts of React New Context API: https://medium.com/@koba04/a-secret-parts-of-react-new-context-api-e9506a4578aa
• Why Did You Render: https://www.npmjs.com/package/@welldone-software/why-did-you-render