С чего начать оптимизацию перфоманса? (часть 2)

6. Runtime
Выполнение скриптов (особенно в начале работы приложения) может занимать много времени (типа 200мс это много), при этом браузер висит и не может обрабатывать пользовательский ввод. Как вариант, обмазать некоторые вещи setTimeout, сделав их асинхронным и дать возможность браузеру прорендерить и тп.
Как минус - суммарное время выполнения будет больше
Как плюс - UX будет значительно лучше
Подробнее - https://philipwalton.com/articles/idle-until-urgent/

7. Render
Рендерим только то, что видит юзер (Lazy Rendering)

8. Data Fetching Flow
По url понимать какие данные нужны и при загрузке js делать сразу загрузку данных и класть куда-нибудь в window (миллениалы изобрели SSR). Отличие от SSR - не нужно полностью вкореживать в архитектуру приложения SSR (не маяться с гидрацией и тп)

9. Сжатие
brotli, gzip
Подробнее: https://tech.oyorooms.com/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4

10. Кеширование
Http-cache + инвалидация кеша

11. Не забывать про алгоритмы и структуры данных 🙂

Большая статья про оптимизацию https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/#top

Статья про runtime https://habr.com/ru/company/hh/blog/517594/

Цена абстракций и фреймворков: https://javascript.plainenglish.io/javascript-frameworks-performance-comparison-2020-cd881ac21fce

Для мониторинга runtime можно использовать https://speedcurve.com/
Либо кастомно через https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark

5 способов предотвратить внедрение кода в JavaScript и Node.js

https://snyk.io/blog/5-ways-to-prevent-code-injection-in-javascript-and-node-js/

Полезные консольные Linux утилиты

https://habr.com/ru/post/553000/

Полное руководство по созданию шаблонов HTML-писем

https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/

https://webformyself.com/polnoe-rukovodstvo-po-elektronnym-pismam-v-formate-html/

Разбираем, что такое Shadow dom (теневой dom) в JavaScript.

https://webfanat.com/js/shadow-dom-javascript/

Какие преимущества дает использование const в JavaScript.

https://webformyself.com/zamena-let-na-const/

Возможности JavaScript, о которых я не знал

https://medium.com/webbdev/js-40d1c8881333

Магия вне Хогвартса: NJS. Игорь Коровченко рассказывает о том, как писать конфиги для веб-сервера Nginx на JavaScript, почему это работает быстро и приводит пример реализации шифра Цезаря.

https://web-standards.ru/articles/magic-njs/

Как Vim стал таким популярным

https://habr.com/ru/company/vdsina/blog/565320/

Критерии качества вёрстки 2021

https://habr.com/ru/company/htmlacademy/blog/566244/

Рейтинг со звездочками: решение на SVG

https://ishadeed.com/article/star-rating-svg/

Эффективный поиск XSS-уязвимостей

https://habr.com/ru/company/jugru/blog/569270/

Используйте фавиконки правильно

https://habr.com/ru/company/htmlacademy/blog/578224/

35 вопросов с собеседования JavaScript-разработчика

https://habr.com/ru/post/578370/

Техники загрузки SVG. Тайлер Стика замеряет перфоманс загрузки большого количества SVG-иконок на одной странице разными способами и выбирает самый производительный.

https://cloudfour.com/thinks/svg-icon-stress-test/

Событие изменения размера окна

Чтобы реагировать на изменения экрана в реальном времени в JS существует событие "resize"

➡️ Пример кода:
function reportWindowSize() {
console.log(window.innerHeight)
// Выводит высоту окна;
console.log(window.innerWidth)
// Выводит ширину окна;
}

window.addEventListener("resize", reportWindowSize);

➡️ Аналог через свойство window
window.onresize = reportWindowSize;

#js

Дорожные карты 2021 для изучения Angular, Vue, Ember, NodeJS и React

https://www.theinsaneapp.com/2021/10/angular-vue-nodejs-emberjs-react-roadmap.html

Интерактивные курсы по горячим клавишам в популярных редакторах кода:

VS Code → https://keycombiner.com/courses/master-vscode/
IntelliJ IDEA → https://keycombiner.com/courses/master-intellij-idea/

Что нового в Node.js? Обзор малоизвестных, но полезных возможностей, появившихся в свежих версиях Node.js: генерация UUID, AbortController, протокол node: для импортов, новые основанные на промисах API → https://simonplend.com/whats-new-in-node-js-core/

Motion One, новая библиотека для создания анимаций: существенно меньше популярных альтернатив (всего ~3 КБ), основана на Web Animations API, поддерживает таймлайны, написана на TypeScript, использует аппаратное ускорение → https://motion.dev

Мой кастомный CSS Reset. Джош Камю делится своим списком правил для сброса стилей CSS по умолчанию и объясняет каждое на примере.

https://www.joshwcomeau.com/css/custom-css-reset/