victor-homyakov

BFCache, или Туда и обратно

API и поддержка браузерами

PageTransitionEvent API

• CanIUse PageTransitionEvent: https://caniuse.com/#feat=page-transition-events
• CanIUse PageTransitionEvent persisted: https://caniuse.com/#feat=mdn-api_pagetransitionevent_persisted
• Описание pageshow event на MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
• Описание pagehide event на MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event

victor-homyakov

• ✔︎ - не мешает попаданию страницы в bfcache
• ✘ - запрещает попадание страницы в bfcache
• пустая ячейка - влияние неизвестно

API	Firefox	Safari	Chromium	IE
Подписка на beforeunload	✘	✔	✔	✘
Подписка на unload	✘	✔	✔
Незавершённые запросы XHR/fetch	✘	✔	✘ в планах прерывать запрос и вызывать onerror при восстановлении страницы
Незавершённые запросы за ресурсами	✘ кроме favicon

victor-homyakov

/**
 * Detect resized images.
 */
(function() {
    var Img = function(imgElement) {
        this.img = imgElement;
        this.src = this.img.src;
        this.className = this.img.className;
    };

victor-homyakov

/* eslint-disable no-var,no-console */
/**
 * Проверка на масштабирование изображений в браузере.
 * Срабатывает, если натуральный размер изображения намного больше отображаемого на странице,
 * то есть браузер грузит большую картинку и масштабирует её до маленькой.
 */
(function() {
    if (!window.Promise || !String.prototype.startsWith || window.MSInputMethodContext) {
        // Не запускаем проверку в IE11 и браузерах, не поддерживающих нужные API
        return;

victor-homyakov

// Measure page scroll speed
(function() {
    if (document.body.scrollHeight <= window.innerHeight) {
        console.log('Scrolling measurement is only possible if the window can actually be scrolled!');
        return;
    }

    function calcScrollTime(startTime, iterations) {
        return Math.round((Date.now() - startTime) / iterations) / 1000;
    }

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

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

Память и её утечки в 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

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

Код

• postMessage в планировщике React: facebook/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

Ограничения на размер типов данных в 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/