Не пишите квадраты
Степан Зубашев критикует современные тренды написания JavaScript-кода — "Обращение к Javascript-сообществу: перестаньте писать квадраты".
Популярность функциональных методов для работы с массивами и современные фичи JavaScript открыли двери для очень лаконичного кода. Но иногда чрезмерное увлечение лаконичностью приводит к падению производительности. В статье на примере использования
В данном случае на каждую итерацию происходит копирование всех элементов старого массива в новый, который возвращается
Степан призывает не ставить в абсолют краткость кода и задумываться о производительности.
#js #algorithm #performance
https://habr.com/ru/post/590663/
Степан Зубашев критикует современные тренды написания JavaScript-кода — "Обращение к Javascript-сообществу: перестаньте писать квадраты".
Популярность функциональных методов для работы с массивами и современные фичи JavaScript открыли двери для очень лаконичного кода. Но иногда чрезмерное увлечение лаконичностью приводит к падению производительности. В статье на примере использования
.concat()
внутри .reduce()
рассказывается, почему это может оказаться серьёзной проблемой.
source.reduce(
(acc, item) => acc.concat(func(item)),
[]
);
В данном случае на каждую итерацию происходит копирование всех элементов старого массива в новый, который возвращается
.concat()
. Создание нового массива происходит для каждого элемента source
, таким образом сложность кода получается квадратичной. С подобной проблемой столкнулись разработчики из вчерашней статьи.Степан призывает не ставить в абсолют краткость кода и задумываться о производительности.
#js #algorithm #performance
https://habr.com/ru/post/590663/
Хабр
Обращение к Javascript-сообществу: перестаньте писать квадраты
Disclaimer: в этой статье будет очень много бредовых примеров и сверх очевидных утверждений. Если для вас предельно очевидно, что ... внутри .reduce даёт вам O(n^2) , то можно сразу прыгать к разделу...
Ускорение установки HTTPS-соединений
Саймон Харн рассказал о том, как HTTPS-сертификаты влияют на производительность сайта — "The Performance Cost of EV Certificates".
Есть три основных типа HTPS-сертификатов: Domain Validation (DV), Organisation Validation (OV), Extended Validation (EV). DV-сертификаты выдаются на основе факта принадлежности домена, как в Let's Encrypt. OV- и EV-сертификаты выдаются организациям за оплату.
EV-сертификат предоставляет большее количество информации для пользователя, но по-большому счёту он не сильно отличается от OV. Вы могли видеть, что сайт использует EV-сертификат, когда в адресной строке рядом с иконкой замка зелёным текстом отображался владелец сертификата. С версии Chrome 77 такие сертификаты отображаются обычным значком замка без зелёного текста.
OV-сертификаты валидируются на стороне веб-сервера отправкой запроса на сервер организации, выдавшей сертификат. EV-сертификаты не могут валидироваться на стороне веб-сервера, поэтому их валидация происходит на клиенте, замедляя установку HTTPS-соединения. Задержка наиболее заметна в странах бывшего СССР, в Восточной Австралии, Канаде и большинстве стран Африки. Некоторые организации сталкивались с минутной задержкой для пользователей в Китае. Эта проблема решается переходом на OV-сертификат.
#http #performance #security
https://simonhearne.com/2020/drop-ev-certs/
Саймон Харн рассказал о том, как HTTPS-сертификаты влияют на производительность сайта — "The Performance Cost of EV Certificates".
Есть три основных типа HTPS-сертификатов: Domain Validation (DV), Organisation Validation (OV), Extended Validation (EV). DV-сертификаты выдаются на основе факта принадлежности домена, как в Let's Encrypt. OV- и EV-сертификаты выдаются организациям за оплату.
EV-сертификат предоставляет большее количество информации для пользователя, но по-большому счёту он не сильно отличается от OV. Вы могли видеть, что сайт использует EV-сертификат, когда в адресной строке рядом с иконкой замка зелёным текстом отображался владелец сертификата. С версии Chrome 77 такие сертификаты отображаются обычным значком замка без зелёного текста.
OV-сертификаты валидируются на стороне веб-сервера отправкой запроса на сервер организации, выдавшей сертификат. EV-сертификаты не могут валидироваться на стороне веб-сервера, поэтому их валидация происходит на клиенте, замедляя установку HTTPS-соединения. Задержка наиболее заметна в странах бывшего СССР, в Восточной Австралии, Канаде и большинстве стран Африки. Некоторые организации сталкивались с минутной задержкой для пользователей в Китае. Эта проблема решается переходом на OV-сертификат.
#http #performance #security
https://simonhearne.com/2020/drop-ev-certs/
Simon Hearne
The Performance Cost of EV Certificates
Extended Validation certificates are expensive and degrade performance. Move to an OV certificate if you can!
👍1
Сравнение вычислительной производительности WebGL и WebGPU
Денис Радин сравнил вычислительную производительность WebGL и WebGPU — "WebGPU computations performance in comparison to WebGL".
WebGPU API предоставляет доступ к возможностям современных видеокарт. Для поддержки вычислений в нём используются вычислительные шейдеры (compute shaders). В WebGL что-то подобное можно сделать с помощью хака преобразованием данных в текстуру и их дальнейшей обработкой с помощью пиксельного шейдера. Так как WebGPU разрабатывался с учётом поддержки произвольных вычислений, в задаче на перемножение матриц он работает в 3,5 раза быстрее WebGL.
WebGPU открывает доступ к машинному обучению в вебе, пост-процессингу в реальном времени и физическим симуляциям в 60 fps.
#webgl #webgpu #performance
https://pixelscommander.com/javascript/webgpu-computations-performance-in-comparison-to-webgl/
http://pixelscommander.com/ru/javascript/webgpu-computations-performance-in-comparison-to-webgl/ (на русском языке)
Денис Радин сравнил вычислительную производительность WebGL и WebGPU — "WebGPU computations performance in comparison to WebGL".
WebGPU API предоставляет доступ к возможностям современных видеокарт. Для поддержки вычислений в нём используются вычислительные шейдеры (compute shaders). В WebGL что-то подобное можно сделать с помощью хака преобразованием данных в текстуру и их дальнейшей обработкой с помощью пиксельного шейдера. Так как WebGPU разрабатывался с учётом поддержки произвольных вычислений, в задаче на перемножение матриц он работает в 3,5 раза быстрее WebGL.
WebGPU открывает доступ к машинному обучению в вебе, пост-процессингу в реальном времени и физическим симуляциям в 60 fps.
#webgl #webgpu #performance
https://pixelscommander.com/javascript/webgpu-computations-performance-in-comparison-to-webgl/
http://pixelscommander.com/ru/javascript/webgpu-computations-performance-in-comparison-to-webgl/ (на русском языке)
Браузер. Рендеринг. Производительность
Второй год я помогаю с поиском спикеров на CodeFest — крупнейшая конференция за Уралом. В прошлом году у нас выступал Сергей Ufocoder — автор канала @ufostation — с докладом "Браузер. Рендеринг. Производительность".
В докладе рассказывается о производительности рендеринга в Chromium с точки зрения архитектуры браузера. Подробно объясняется работа пайплайна рендеринга на примере
Доклад немного хардкорный, но полезный. Рекомендую посмотреть.
#performance #chromium #internals #talks
https://www.youtube.com/watch?v=tbDxm1hiEI4
Второй год я помогаю с поиском спикеров на CodeFest — крупнейшая конференция за Уралом. В прошлом году у нас выступал Сергей Ufocoder — автор канала @ufostation — с докладом "Браузер. Рендеринг. Производительность".
В докладе рассказывается о производительности рендеринга в Chromium с точки зрения архитектуры браузера. Подробно объясняется работа пайплайна рендеринга на примере
about://tracing
и профилировки страниц с помощью вкладки Performance в DevTools. Рассматриваются несколько случаев оптимизации производительности с объяснением, почему это работает именно так. При подготовке доклада Сергей консультировался с официальной документацией Chromium и с разработчиками браузера.Доклад немного хардкорный, но полезный. Рекомендую посмотреть.
#performance #chromium #internals #talks
https://www.youtube.com/watch?v=tbDxm1hiEI4
YouTube
Сергей Ufocoder Иванов. Браузер. Рендеринг. Производительность
При погружении в тему производительности разработчик может ступить на ложный путь, который, возможно, и позволит решить некоторые проблемы, связанные со скоростью отрисовки, но будет бесполезен при решении других проблем.
В данном докладе мы пройдём с вами…
В данном докладе мы пройдём с вами…
Ускорение отрисовки комментарии Хабра
Станислав Лашманов поделился опытом ускорения отрисовки комментариев в web-версии Хабра — "Как мы ускоряли комментарии Хабра".
Фронтенд Хабра — это SPA-приложение, написанное на Vue.js. Самой большой проблемой после переписывания фронта Хабра стала производительность комментариев. Страницы с большим количеством комментариев рендерились медленно, а на слабых устройствах им не хватало памяти.
Для решения этой проблемы ребята реализовали стриминг. Благодаря ему комментарии рендерятся на сервере и по мере готовности передаются на клиент. Клиенту больше не приходится ждать загрузки всех комментариев. Однако с добавлением стриминга возникли другие проблемы: перестали работать якорные ссылки, надо было реализовывать восстановление скролла после перезагрузки страницы, были проблемы с переходами по истории. Все проблемы удалось решить.
Респект ребятам за то, что смогли дотащить эту фичу, но работы у них ещё осталось много. Хабр сейчас работает гораздо медленнее по сравнению со старой версией — оценка производительности в Lighthouse 25 баллов из 100. С точки зрения обычного пользователя кажется, что переход на SPA был не самой хорошей идеей.
#performance #spa #vue
https://habr.com/ru/company/habr/blog/590111/
Станислав Лашманов поделился опытом ускорения отрисовки комментариев в web-версии Хабра — "Как мы ускоряли комментарии Хабра".
Фронтенд Хабра — это SPA-приложение, написанное на Vue.js. Самой большой проблемой после переписывания фронта Хабра стала производительность комментариев. Страницы с большим количеством комментариев рендерились медленно, а на слабых устройствах им не хватало памяти.
Для решения этой проблемы ребята реализовали стриминг. Благодаря ему комментарии рендерятся на сервере и по мере готовности передаются на клиент. Клиенту больше не приходится ждать загрузки всех комментариев. Однако с добавлением стриминга возникли другие проблемы: перестали работать якорные ссылки, надо было реализовывать восстановление скролла после перезагрузки страницы, были проблемы с переходами по истории. Все проблемы удалось решить.
Респект ребятам за то, что смогли дотащить эту фичу, но работы у них ещё осталось много. Хабр сейчас работает гораздо медленнее по сравнению со старой версией — оценка производительности в Lighthouse 25 баллов из 100. С точки зрения обычного пользователя кажется, что переход на SPA был не самой хорошей идеей.
#performance #spa #vue
https://habr.com/ru/company/habr/blog/590111/
Хабр
Как мы ускоряли комментарии Хабра
Комментарии на Хабре иногда несут больше пользы, чем сама статья. Поэтому при переходе на новую версию сайта было важно сделать работу с комментами не хуже, чем было. Вы когда-нибудь открывали в...
Улучшилась ли скорость веба благодаря Web Vitals?
Барри Поллард проанализировал влияние метрик Web Vitals на производительность веба в целом — "Have Core Web Vitals made the web faster?".
Внедрение метрик Core Web Vitals (CWV) по данным Google дало положительный эффект. По сравнению с прошлыми годами количество сайтов, удовлетворяющих CWV, увеличилось более чем на 20%. Однако Барри пишет о том, что сложно судить о динамике изменения метрик, если их определения претерпели значительные изменения. Именно это произошло с метриками LCP и CLS.
Более непредвзятую оценку может дать HTTPArchive. Данные семи миллионов сайтов показывают небольшое падение производительности за прошедший год (вывод сделан на основе изменения SpeedIndex). Но и это тоже не конец истории, так как HTTPArchive собирает данные заглавных страниц сайтов, что может значительно влиять на итоговую оценку.
Барри пишет про то, что ответ на вопрос лежит где-то посередине. Нельзя категорично утверждать, что благодаря CWV скорость веба улучшилась. Но введение CWV заставило владельцев крупных сайтов инвестировать ресурсы в улучшение производительности. Также крупные игроки (Wordpress, Wix) стали более серьёзно относиться к производительности, после того как Google объявил о том, что алгоритм ранжирования поиска будет учитывать метрики CWV.
#performance #research
https://calendar.perfplanet.com/2021/have-core-web-vitals-made-the-web-faster/
Барри Поллард проанализировал влияние метрик Web Vitals на производительность веба в целом — "Have Core Web Vitals made the web faster?".
Внедрение метрик Core Web Vitals (CWV) по данным Google дало положительный эффект. По сравнению с прошлыми годами количество сайтов, удовлетворяющих CWV, увеличилось более чем на 20%. Однако Барри пишет о том, что сложно судить о динамике изменения метрик, если их определения претерпели значительные изменения. Именно это произошло с метриками LCP и CLS.
Более непредвзятую оценку может дать HTTPArchive. Данные семи миллионов сайтов показывают небольшое падение производительности за прошедший год (вывод сделан на основе изменения SpeedIndex). Но и это тоже не конец истории, так как HTTPArchive собирает данные заглавных страниц сайтов, что может значительно влиять на итоговую оценку.
Барри пишет про то, что ответ на вопрос лежит где-то посередине. Нельзя категорично утверждать, что благодаря CWV скорость веба улучшилась. Но введение CWV заставило владельцев крупных сайтов инвестировать ресурсы в улучшение производительности. Также крупные игроки (Wordpress, Wix) стали более серьёзно относиться к производительности, после того как Google объявил о том, что алгоритм ранжирования поиска будет учитывать метрики CWV.
#performance #research
https://calendar.perfplanet.com/2021/have-core-web-vitals-made-the-web-faster/
Web Performance Calendar
Have Core Web Vitals made the web faster?
The Core Web Vitals (CWV) were announced in May 2020 and as part of that announcement Google said they would be "evaluating Page experience for a better web". Crucially that this evaluation would form part of their search ranking algorithm: in short, faster…
👍1
Тюнинг производительности Next.js-приложений
Бен Шварц поделился рекомендациями по улучшению производительности Next.js-приложений — "Next.js Performance: Making a Fast Framework Even Faster".
Для загрузки сторонних скриптов рекомендуется использовать компонент
Полезная статья. Рекомендую почитать, если работаете с Next.js.
#jsframeworks #performance #react
https://calibreapp.com/blog/nextjs-performance
Бен Шварц поделился рекомендациями по улучшению производительности Next.js-приложений — "Next.js Performance: Making a Fast Framework Even Faster".
Для загрузки сторонних скриптов рекомендуется использовать компонент
next/script
со стратегией lazyOnload
, чтобы код начинал грузиться тогда, когда завершается загрузка основного кода приложения. Для вставки изображений рекомендуется использовать компонент next/image
. Он берёт на себя конвертацию изображений, генерацию плейсхолдеров и поддержку ленивой загрузки. Для уменьшения размера основного бандла приложения можно использовать динамическую загрузку кода с помощью import()
. Для динамической загрузки React-компонентов — хелпер next/dynamic
.Полезная статья. Рекомендую почитать, если работаете с Next.js.
#jsframeworks #performance #react
https://calibreapp.com/blog/nextjs-performance
Calibre - Site Speed Tools for Teams
Next.js Performance: Making a Fast Framework Even Faster
Learn how to best use web performance tools built into the Next.js framework.
👍2
Новые метрики для измерения отзывчивости сайтов
Разработчики Chrome уже более полугода работают над добавлением новых метрик, отвечающих за измерение отзывчивости сайтов. Хонгбо Санг рассказывает, как их можно подсчитать — "Hands On with the new Responsiveness Metrics".
В Core Web Vitals за отзывчивость страницы отвечает метрика First Input Delay. FID показывает величину задержки между пользовательским событием и временем, когда это событие начинает обрабатываться. У этой метрики много ограничений: оно показывает время задержки только первого события, оно не включает в себя время обработки события, с её помощью нельзя понять, лагает ли страница.
В новых экспериментальных метриках измеряется время обработки взаимодействий пользователя (interactions) на протяжении всей жизни страницы. Взаимодействие — это комбинация логически связанных DOM-событий. Например, для нажатия кнопки на клавиатуре такими событиями будут
На данный момент ещё нет окончательного списка метрик отзывчивости, так как у разных вариантов есть свои плюсы и минусы. В статье есть ссылка на код, который можно запустить в DevTools, чтобы получить все метрики, которые находятся на рассмотрении. Также есть экспериментальный плагин для Lighthouse для получения этих метрик.
Разработчики просят посмотреть результаты метрик на своих сайтах и оставить фидбек.
#performance #metrics
https://calendar.perfplanet.com/2021/hands-on-with-the-new-responsiveness-metrics/
Разработчики Chrome уже более полугода работают над добавлением новых метрик, отвечающих за измерение отзывчивости сайтов. Хонгбо Санг рассказывает, как их можно подсчитать — "Hands On with the new Responsiveness Metrics".
В Core Web Vitals за отзывчивость страницы отвечает метрика First Input Delay. FID показывает величину задержки между пользовательским событием и временем, когда это событие начинает обрабатываться. У этой метрики много ограничений: оно показывает время задержки только первого события, оно не включает в себя время обработки события, с её помощью нельзя понять, лагает ли страница.
В новых экспериментальных метриках измеряется время обработки взаимодействий пользователя (interactions) на протяжении всей жизни страницы. Взаимодействие — это комбинация логически связанных DOM-событий. Например, для нажатия кнопки на клавиатуре такими событиями будут
keydown
, keypress
и keyup
.На данный момент ещё нет окончательного списка метрик отзывчивости, так как у разных вариантов есть свои плюсы и минусы. В статье есть ссылка на код, который можно запустить в DevTools, чтобы получить все метрики, которые находятся на рассмотрении. Также есть экспериментальный плагин для Lighthouse для получения этих метрик.
Разработчики просят посмотреть результаты метрик на своих сайтах и оставить фидбек.
#performance #metrics
https://calendar.perfplanet.com/2021/hands-on-with-the-new-responsiveness-metrics/
Web Performance Calendar
Hands On with the new Responsiveness Metrics
Background
In 2020, Google launched the Web Vitals metrics, which included a responsiveness metric: First Input Delay. But First Input Delay is not perfect. It only measures a portion of the latency users feel for the first user input. To capture more latency…
In 2020, Google launched the Web Vitals metrics, which included a responsiveness metric: First Input Delay. But First Input Delay is not perfect. It only measures a portion of the latency users feel for the first user input. To capture more latency…
👍2
Важность тестирования сайтов на слабых устройствах
Эрик Бейли призывает тестировать сайты на слабых устройствах — "Test Your Product on a Crappy Laptop".
Если аналитические данные показывают преобладание пользователей с мощными устройствами, это не означает, что нужно ориентироваться только на состоятельную аудиторию, это означает, что нужно проверить работу сайта на недорогих ноутбуках или смартфонах. Пользователи слабых устройств часто не могут нормально пользоваться сайтом, поэтому они выпадают из аналитики. Такими пользователями могут быть состоятельные люди.
Чтобы контролировать доступность сайта для всех категорий устройств, Эрик предлагает проводить регулярные юзабилити-тесты на слабых устройствах. Также он предлагает купить дешёвый ноутбук (crapbook) и периодически вести на нём разработку.
У меня есть небольшая история на эту тему. Как-то мне пришлось работать на слабом ноуте, благодаря этому я нашёл редкую проблему с перформансом в React DevTools. Если бы работал на мощном ноуте, то проблема осталась бы незамеченной.
#performance #mobile
https://css-tricks.com/test-your-product-on-a-crappy-laptop/
Эрик Бейли призывает тестировать сайты на слабых устройствах — "Test Your Product on a Crappy Laptop".
Если аналитические данные показывают преобладание пользователей с мощными устройствами, это не означает, что нужно ориентироваться только на состоятельную аудиторию, это означает, что нужно проверить работу сайта на недорогих ноутбуках или смартфонах. Пользователи слабых устройств часто не могут нормально пользоваться сайтом, поэтому они выпадают из аналитики. Такими пользователями могут быть состоятельные люди.
Чтобы контролировать доступность сайта для всех категорий устройств, Эрик предлагает проводить регулярные юзабилити-тесты на слабых устройствах. Также он предлагает купить дешёвый ноутбук (crapbook) и периодически вести на нём разработку.
У меня есть небольшая история на эту тему. Как-то мне пришлось работать на слабом ноуте, благодаря этому я нашёл редкую проблему с перформансом в React DevTools. Если бы работал на мощном ноуте, то проблема осталась бы незамеченной.
#performance #mobile
https://css-tricks.com/test-your-product-on-a-crappy-laptop/
CSS-Tricks
Test Your Product on a Crappy Laptop | CSS-Tricks
There is a huge and ever-widening gap between the devices we use to make the web and the devices most people use to consume it. It’s also no secret
👍20🎉1
Возможно, вам не нужен Rust и WASM, если у вас есть JavaScript
Увидел в канале @ufostation ссылку на статью Вячеслава Егорова про анализ проблем производительности библиотеки source-map — "Maybe you don't need Rust and WASM to speed up your JS".
Авторы source-map переписали основную логику библиотеки на Rust и WebAssembly, чтобы улучшить производительность. Егор решил проверить оригинальный код на предмет возможных оптимизаций. Там были найдены и исправлены проблемы, связанные с неоптимальной сортировкой, была уменьшена нагрузка на сборщик мусора заменой большого числа объектов типизированным массивом с ссылками на нужные данные, была испралвена проблема с деоптимизацией кода, связанной с передачей двух аргументов в функцию, которая ожидает на вход три аргумента.
В результате всех оптимизаций JavaScript-код стал уступать по скорости Rust и WebAssembly всего лишь на 15%.
Крутая статья. Рекомендую почитать всем.
#performance #js #internals #webassembly #rust
https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html
https://habr.com/ru/post/350018/ (перевод на русский)
Увидел в канале @ufostation ссылку на статью Вячеслава Егорова про анализ проблем производительности библиотеки source-map — "Maybe you don't need Rust and WASM to speed up your JS".
Авторы source-map переписали основную логику библиотеки на Rust и WebAssembly, чтобы улучшить производительность. Егор решил проверить оригинальный код на предмет возможных оптимизаций. Там были найдены и исправлены проблемы, связанные с неоптимальной сортировкой, была уменьшена нагрузка на сборщик мусора заменой большого числа объектов типизированным массивом с ссылками на нужные данные, была испралвена проблема с деоптимизацией кода, связанной с передачей двух аргументов в функцию, которая ожидает на вход три аргумента.
В результате всех оптимизаций JavaScript-код стал уступать по скорости Rust и WebAssembly всего лишь на 15%.
Крутая статья. Рекомендую почитать всем.
#performance #js #internals #webassembly #rust
https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html
https://habr.com/ru/post/350018/ (перевод на русский)
Хабр
Возможно, вам не нужен Rust, чтобы ускорить ваш JS
Несколько недель назад я обнаружил пост "Окисляем Source Maps с Rust и WebAssembly" распространяющийся по Твиттеру и расказывающий о выигрыше в производительности от замены обычного JavaScript в...
👍41🔥9
Анализ производительности HTTP/3
В блоге requestmetrics была опубликована статья, посвящённая анализу производительности HTTP/3 — "HTTP/3 is Fast".
HTTP/3 — это новая версия протокола HTTP, работающая поверх транспортного протокола QUIC. Более подробно про HTTP/3 можно почитать в публикации HTTP/3: the past, the present, and the future.
В этой же статье проверялась скорость загрузки трёх видов сайтов: простой сайт, тяжёлый сайт, SPA. Ресурсы загружались с трёх разных серверов в Нью-Йорке, Лондоне и Бангалоре. Чем больше было расстояние, тем лучше всего показывал себя HTTP/3. Если для передачи данных между Миннесотой и Нью-Йорком выигрыш скорости составил более 200 мс, то для соединения между Миннесотой и Бангалором выигрыш был уже 3-4 секунды. Такой значительный разрыв в скорости загрузки объясняется тем, что в HTTP/3 решена проблема с “head-of-line blocking” — блокировкой передачи данных во время потери пакетов.
#http #performance #benchmark
https://requestmetrics.com/web-performance/http3-is-fast
В блоге requestmetrics была опубликована статья, посвящённая анализу производительности HTTP/3 — "HTTP/3 is Fast".
HTTP/3 — это новая версия протокола HTTP, работающая поверх транспортного протокола QUIC. Более подробно про HTTP/3 можно почитать в публикации HTTP/3: the past, the present, and the future.
В этой же статье проверялась скорость загрузки трёх видов сайтов: простой сайт, тяжёлый сайт, SPA. Ресурсы загружались с трёх разных серверов в Нью-Йорке, Лондоне и Бангалоре. Чем больше было расстояние, тем лучше всего показывал себя HTTP/3. Если для передачи данных между Миннесотой и Нью-Йорком выигрыш скорости составил более 200 мс, то для соединения между Миннесотой и Бангалором выигрыш был уже 3-4 секунды. Такой значительный разрыв в скорости загрузки объясняется тем, что в HTTP/3 решена проблема с “head-of-line blocking” — блокировкой передачи данных во время потери пакетов.
#http #performance #benchmark
https://requestmetrics.com/web-performance/http3-is-fast
👍31
Self-Profiling API на практике
Ник Джансма написал статью про новое экспериментальное API для профилировки производительности сайтов на устройствах пользователей — "JS Self-Profiling API In Practice".
Self-Profiling API предоставляет программный доступ к семплирующему профилировщику для получения детальной информации о выполнении JavaScript-кода у пользователей сайта. API можно использовать как для анализа производительности кода сайта, так и для анализа производительности скриптов внешних сервисов. Проанализировать выполнение кода можно на любом этапе жизни страницы. Доступ к Self-Profiling API включается с помощью HTTP-заголовка
Несмотря на экспериментальный статус Facebook и Microsoft уже начали использовать Self-Profiling API в своих сервисах для поиска проблем производительности.
На данный момент поддержка Self-Profiling API есть только в Chrome версии 94 и выше.
#performance #api #experimental
https://calendar.perfplanet.com/2021/js-self-profiling-api-in-practice/
Ник Джансма написал статью про новое экспериментальное API для профилировки производительности сайтов на устройствах пользователей — "JS Self-Profiling API In Practice".
Self-Profiling API предоставляет программный доступ к семплирующему профилировщику для получения детальной информации о выполнении JavaScript-кода у пользователей сайта. API можно использовать как для анализа производительности кода сайта, так и для анализа производительности скриптов внешних сервисов. Проанализировать выполнение кода можно на любом этапе жизни страницы. Доступ к Self-Profiling API включается с помощью HTTP-заголовка
Document-Policy: js-profiling
. Оно оказывает минимальный эффект на производительность сайта у пользователей.Несмотря на экспериментальный статус Facebook и Microsoft уже начали использовать Self-Profiling API в своих сервисах для поиска проблем производительности.
На данный момент поддержка Self-Profiling API есть только в Chrome версии 94 и выше.
#performance #api #experimental
https://calendar.perfplanet.com/2021/js-self-profiling-api-in-practice/
Web Performance Calendar
JS Self-Profiling API In Practice
Table of Contents
The JS Self-Profiling API
What is Sampled Profiling?
Downsides to Sampled Profiling
API
Document Policy
API Shape
Sample Interval
Buffer
Who to Profile
When to Profile
Specific Operations
User Interactions…
The JS Self-Profiling API
What is Sampled Profiling?
Downsides to Sampled Profiling
API
Document Policy
API Shape
Sample Interval
Buffer
Who to Profile
When to Profile
Specific Operations
User Interactions…
👍17🔥4
Сравнение производительности Array.push и Array.concat
Ши Лин сравнила производительноcть методов
Ши разрабатывает фреймворк для автоматического тестирования. У одного пользователя фреймворка скорость выполнения тестов снизилась в несколько раз. Выяснилось, что для работы с DOM-деревом фреймворк собирал все элементы страницы в одномерный массив с помощью
В статье есть несколько бенчмарков, которые показывают, что объединение массивов с помощью
Добавлю свои пять копеек. Заменять
#js #performance
https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki
Ши Лин сравнила производительноcть методов
.push
и .concat
у массивов — "Javascript Array.push is 945x faster than Array.concat".Ши разрабатывает фреймворк для автоматического тестирования. У одного пользователя фреймворка скорость выполнения тестов снизилась в несколько раз. Выяснилось, что для работы с DOM-деревом фреймворк собирал все элементы страницы в одномерный массив с помощью
.concat
. Так как каждый вызов .concat
создаёт новый массив, это негативно сказывалось на производительности прогона тестов.В статье есть несколько бенчмарков, которые показывают, что объединение массивов с помощью
.push(...arr)
на два порядка быстрее .concat(arr)
.Добавлю свои пять копеек. Заменять
.concat(arr)
на .push(...arr)
стоит только там, где есть проблема, так как на очень больших массивах .push(...arr)
выкинет ошибку переполнения стека.#js #performance
https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki
DEV Community
Javascript Array.push is 945x faster than Array.concat 🤯🤔
It took six whole seconds to merge 15,000 arrays with an average size of 5 elements with .concat. What the hell is the Javascript's .concat method doing under the hood?
👍20🔥8❤4👎4
Опыт ускорения VK
На хабре был опубликован транскрипт доклада Александра Тоболя про опыт ускорения VK — "Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза".
Оптимизированы были все уровни от выбора нового формата изображений до выбора алгоритма управления передачей пакетов на сервере. Для изображений вместо JPEG стали использовать WebP, для передачи данных вместо JSON — MessagePack, сжатый с помощью zstd. Очень большая часть посвящена QUIC и его особенностям реализации. Самый интересный момент — с помощью QUIC улучшается утилизация пропускной способности клиента. Как побочный эффект это может привести к тому, что некий сервис может занять всю пропускную полосу клиента, затормаживая работу других сервисов.
После внедрения всех изменений на 55% ускорилась доставка изображений, количество просмотров увеличилось на 2,7% (на 10,8% для пользователей с медленной сетью), количество просмотров контента увеличилось на 250 миллионов.
#performance #http
https://habr.com/ru/company/vk/blog/594633/
На хабре был опубликован транскрипт доклада Александра Тоболя про опыт ускорения VK — "Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза".
Оптимизированы были все уровни от выбора нового формата изображений до выбора алгоритма управления передачей пакетов на сервере. Для изображений вместо JPEG стали использовать WebP, для передачи данных вместо JSON — MessagePack, сжатый с помощью zstd. Очень большая часть посвящена QUIC и его особенностям реализации. Самый интересный момент — с помощью QUIC улучшается утилизация пропускной способности клиента. Как побочный эффект это может привести к тому, что некий сервис может занять всю пропускную полосу клиента, затормаживая работу других сервисов.
После внедрения всех изменений на 55% ускорилась доставка изображений, количество просмотров увеличилось на 2,7% (на 10,8% для пользователей с медленной сетью), количество просмотров контента увеличилось на 250 миллионов.
#performance #http
https://habr.com/ru/company/vk/blog/594633/
Хабр
Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза
На протяжении всей жизни мне приходится экономить вычислительные и сетевые ресурсы: сначала были компьютеры с 300 кГц (кило — не гига!) и 32 Кбайт RAM, интернет по dial-up. Потом я решал олимпиадные...
👎22👍19❤1
Обнаружение регрессий производительности
Ангус Кролл из Netflix рассказал о методах, которые используются его командой для обнаружения регрессий производительности — "Fixing Performance Regressions Before they Happen".
Для снижения количества ложноположительных событий вместо статических пороговых значений ребята стали использовать алгоритм обнаружения аномалий. Аномалия — это показание метрики, которое превышает стандартное отклонение в n раз на массиве данных за последние m прогонов. В случае Netflix n=4 и m=40.
Для обнаружения проблем, которые не приводят к возникновению аномалий, ищут точки, которые находятся на границе двух паттернов распределения данных. Такие точки указывают на конкретные сборки, в которые было внесено изменение, деградирующее производительность. Для их обнаружения используется техника e-divisive на результатах ста последних прогонов.
Обе техники используются в тестах производительности, которые запускаются два раза при создании пул-реквеста и его слияния в основную ветку. Благодаря их внедрению количество ложноположительных падений тестов уменьшилось в десять раз.
Очень полезная статья. Рекомендую почитать всем, кто занимается производительностью и настраивает мониторинги.
#performance
https://netflixtechblog.com/fixing-performance-regressions-before-they-happen-eab2602b86fe
Ангус Кролл из Netflix рассказал о методах, которые используются его командой для обнаружения регрессий производительности — "Fixing Performance Regressions Before they Happen".
Для снижения количества ложноположительных событий вместо статических пороговых значений ребята стали использовать алгоритм обнаружения аномалий. Аномалия — это показание метрики, которое превышает стандартное отклонение в n раз на массиве данных за последние m прогонов. В случае Netflix n=4 и m=40.
Для обнаружения проблем, которые не приводят к возникновению аномалий, ищут точки, которые находятся на границе двух паттернов распределения данных. Такие точки указывают на конкретные сборки, в которые было внесено изменение, деградирующее производительность. Для их обнаружения используется техника e-divisive на результатах ста последних прогонов.
Обе техники используются в тестах производительности, которые запускаются два раза при создании пул-реквеста и его слияния в основную ветку. Благодаря их внедрению количество ложноположительных падений тестов уменьшилось в десять раз.
Очень полезная статья. Рекомендую почитать всем, кто занимается производительностью и настраивает мониторинги.
#performance
https://netflixtechblog.com/fixing-performance-regressions-before-they-happen-eab2602b86fe
Medium
Fixing Performance Regressions Before they Happen
How the Netflix TVUI team implemented a robust strategy to quickly and easily detect performance anomalies before they a
🔥10
Оптимизация производительности Angular-приложений
Минко Гечев из Google рассказал про распространённые проблемы производительности Angular-приложений и способы их решения — "4 Runtime Performance Optimizations".
— Загрязнение зоны (zone pollution). Возникает в том случае, когда механизм обнаружения изменений запускается асинхронными событиями, не влияющими на состояние основного приложения. Для решения этой проблемы регистрацию событий нужно выносить вне основной зоны Angular с помощью метода
— Запуск обнаружения изменений вне границ компонента (out of bounds change detection). Происходит тогда, когда возникновение событий в одном компоненте запускает механизм обнаружения изменений в соседних независимых компонентах. Эта проблема решается использованием стратегии обнаружения изменений
— Лишние перерасчёты значений в шаблонах (recalculation of referentially transparent expressions). Если в шаблоне используются методы для получения значений, то они будут исполняться каждый раз при ререндериге компонента. Если эти методы удовлетворяют принципу ссылочной прозрачности, то их можно либо мемоизировать, либо заменить пайпами.
— Большое дерево компонентов (large component trees). Если дерево компонентов слишком большое, то как бы ни были оптимизированы компоненты, приложение будет работать с подтормаживаниями. Решение — уменьшить размер дерева. Это можно сделать с помощью пагинации или виртуализированного списка.
#angular #performance #video
https://youtu.be/f8sA-i6gkGQ
Минко Гечев из Google рассказал про распространённые проблемы производительности Angular-приложений и способы их решения — "4 Runtime Performance Optimizations".
— Загрязнение зоны (zone pollution). Возникает в том случае, когда механизм обнаружения изменений запускается асинхронными событиями, не влияющими на состояние основного приложения. Для решения этой проблемы регистрацию событий нужно выносить вне основной зоны Angular с помощью метода
runOutsideAngular
. Примером загрязнения зоны может быть регистрация обработчика события mousemove
для отображения лейблов диаграммы из сторонней библиотеки.— Запуск обнаружения изменений вне границ компонента (out of bounds change detection). Происходит тогда, когда возникновение событий в одном компоненте запускает механизм обнаружения изменений в соседних независимых компонентах. Эта проблема решается использованием стратегии обнаружения изменений
onPush
.— Лишние перерасчёты значений в шаблонах (recalculation of referentially transparent expressions). Если в шаблоне используются методы для получения значений, то они будут исполняться каждый раз при ререндериге компонента. Если эти методы удовлетворяют принципу ссылочной прозрачности, то их можно либо мемоизировать, либо заменить пайпами.
— Большое дерево компонентов (large component trees). Если дерево компонентов слишком большое, то как бы ни были оптимизированы компоненты, приложение будет работать с подтормаживаниями. Решение — уменьшить размер дерева. Это можно сделать с помощью пагинации или виртуализированного списка.
#angular #performance #video
https://youtu.be/f8sA-i6gkGQ
YouTube
4 Runtime Performance Optimizations
In this video our very own Minko Gechev will take us through 4 common runtime performance challenges, their identification with Angular DevTools, and their resolutions.
We'll cover:
- Zone pollution
- Out of bounds change detection
- Recalculation of referentially…
We'll cover:
- Zone pollution
- Out of bounds change detection
- Recalculation of referentially…
👍10👎5🔥2
Производительность рендеринга в браузерах
Мэт Перри — автор библиотек Framer Motion и Moion One — рассказал про особенности и трудности создания плавных анимаций.
Плавные анимации достигаются за счёт оптимизации рендеринга и использования аппаратного ускорения. При оптимизации рендеринга нужно учитывать, что некоторые свойства приводят к перерасчёту раскладки страницы. Но если эти свойства используются в изолированном контексте, например, с
Все браузеры для анимаций используют аппаратное ускорение. В Safari оно реализовано с помощью системной библиотеки Core Animation. Она несовместима с Web Animation API, из-за чего в некоторых случаях ускорение может отключаться.
Полезная статья. Рекомендую почитать всем, кто интересуется темой производительности рендеринга.
#performance #rendering
https://motion.dev/guides/performance
Мэт Перри — автор библиотек Framer Motion и Moion One — рассказал про особенности и трудности создания плавных анимаций.
Плавные анимации достигаются за счёт оптимизации рендеринга и использования аппаратного ускорения. При оптимизации рендеринга нужно учитывать, что некоторые свойства приводят к перерасчёту раскладки страницы. Но если эти свойства используются в изолированном контексте, например, с
position: absolute
, то вполне можно достичь 60 fps. В сети можно найти список этих свойств (CSS Triggers), но он долгое время не обновлялся. Так например, обработка SVG и CSS-свойства filter
в Firefox и Chrome уже выносится на GPU, а в Chrome скоро появится поддержка ускорения анимаций clip-path
и background-color
.Все браузеры для анимаций используют аппаратное ускорение. В Safari оно реализовано с помощью системной библиотеки Core Animation. Она несовместима с Web Animation API, из-за чего в некоторых случаях ускорение может отключаться.
Полезная статья. Рекомендую почитать всем, кто интересуется темой производительности рендеринга.
#performance #rendering
https://motion.dev/guides/performance
motion.dev
Performance | Motion for JavaScript
Boost web animation performance by understanding rendering and hardware acceleration. Learn which CSS properties to animate for smooth 60fps+ experiences, how to optimize rendering, and how Motion leverages hardware acceleration for jank-free animations.
🔥14👍3
Ускорение установки зависимостей с помощью tnpm
На dev.to была опубликована статья разработчика Alibaba про ускорение установки зависимостей в Node.js — "In-depth of tnpm rapid mode - how we managed to be 10 second faster than pnpm".
Автор статьи занимается разработкой tnpm — проприетарного реестра JavaScript-пакетов и клиента, использующихся в проектах Alibaba.
Для ускорения процесса установки команда переделала архитектуру tnpm. В новом решении построение графа зависимостей пакетов происходит на сервере, значительно снижая количество HTTP-запросов на стороне клиента. Зависимости перед отправкой на клиент бандлятся в небольшое количество tar-файлов, улучшая утилизацию сети и уменьшая число обращений к диску. Полученные тарболлы не распаковываются, а лежат в хранилище, доступ к которому предоставляется с помощью npmfs — FUSE-модуля, реализующего кастомную файловую систему для работы с пакетами. Таким образом для пользователя и для Node.js ничего не меняется — они видят файлы, которые на самом деле лежат в запакованном виде. Использование FUSE накладывает ограничения на поддерживаемые операционные системы — на данный момент поддерживается только Linux.
Эти изменения позволили значительно улучшить скорость установки зависимостей, опередив в бенчмарке pnpm на 9 секунд. Автор пишет, что они планируют открыть исходный код npmfs в будущем.
Меня лично немного пугает получившийся монстр, но с точки зрения ускорения воркфлоу разработки — это очень интересное решение.
#npm #performance
https://dev.to/atian25/in-depth-of-tnpm-rapid-mode-how-could-we-fast-10s-than-pnpm-3bpp
На dev.to была опубликована статья разработчика Alibaba про ускорение установки зависимостей в Node.js — "In-depth of tnpm rapid mode - how we managed to be 10 second faster than pnpm".
Автор статьи занимается разработкой tnpm — проприетарного реестра JavaScript-пакетов и клиента, использующихся в проектах Alibaba.
Для ускорения процесса установки команда переделала архитектуру tnpm. В новом решении построение графа зависимостей пакетов происходит на сервере, значительно снижая количество HTTP-запросов на стороне клиента. Зависимости перед отправкой на клиент бандлятся в небольшое количество tar-файлов, улучшая утилизацию сети и уменьшая число обращений к диску. Полученные тарболлы не распаковываются, а лежат в хранилище, доступ к которому предоставляется с помощью npmfs — FUSE-модуля, реализующего кастомную файловую систему для работы с пакетами. Таким образом для пользователя и для Node.js ничего не меняется — они видят файлы, которые на самом деле лежат в запакованном виде. Использование FUSE накладывает ограничения на поддерживаемые операционные системы — на данный момент поддерживается только Linux.
Эти изменения позволили значительно улучшить скорость установки зависимостей, опередив в бенчмарке pnpm на 9 секунд. Автор пишет, что они планируют открыть исходный код npmfs в будущем.
Меня лично немного пугает получившийся монстр, но с точки зрения ускорения воркфлоу разработки — это очень интересное решение.
#npm #performance
https://dev.to/atian25/in-depth-of-tnpm-rapid-mode-how-could-we-fast-10s-than-pnpm-3bpp
DEV Community
In-depth of tnpm rapid mode - how we managed to be 10 second faster than pnpm
Background As a front-end veteran, I have to point out that the increasing complexity of...
👍8❤1
Выбор библиотеки по её размеру
Владимир Клепов рассказал про подводные камни выбора библиотек с использованием размера как основной метрики — "Don't trust JS library size, min+gzip".
В статье Владимир пишет о том, что размер библиотеки в Readme, может не отражать реальный процент бандла, который она будет занимать. Обычно код жмётся лучше, чем больше в приложении используется стороннего кода. Также пайплайн сборки может оказывать негативный эффект на размер из-за транспиляции в старую версию JavaScript. Иногда меньший размер библиотеки означает, что нужно использовать больше кода по сравнению с альтернативной библиотекой с большим размером, поэтому размер в этом случае не имеет значения.
При выборе библиотеки автор рекомендует оценивать скорость инициализации. Меньшая библиотека с плохой скоростью инициализации будет оказывать негативный эффект на всех пользователей без исключения. В то время как большая библиотека с лучшей скоростью инициализации будет оказывать негативный эффект только один раз при загрузке бандла с сервера.
Хорошая статья. Рекомендую почитать.
#js #performance #musings
https://thoughtspile.github.io/2022/02/15/bundle-size-lies/
Владимир Клепов рассказал про подводные камни выбора библиотек с использованием размера как основной метрики — "Don't trust JS library size, min+gzip".
В статье Владимир пишет о том, что размер библиотеки в Readme, может не отражать реальный процент бандла, который она будет занимать. Обычно код жмётся лучше, чем больше в приложении используется стороннего кода. Также пайплайн сборки может оказывать негативный эффект на размер из-за транспиляции в старую версию JavaScript. Иногда меньший размер библиотеки означает, что нужно использовать больше кода по сравнению с альтернативной библиотекой с большим размером, поэтому размер в этом случае не имеет значения.
При выборе библиотеки автор рекомендует оценивать скорость инициализации. Меньшая библиотека с плохой скоростью инициализации будет оказывать негативный эффект на всех пользователей без исключения. В то время как большая библиотека с лучшей скоростью инициализации будет оказывать негативный эффект только один раз при загрузке бандла с сервера.
Хорошая статья. Рекомендую почитать.
#js #performance #musings
https://thoughtspile.github.io/2022/02/15/bundle-size-lies/
👍30
Qwik — возобновляемый JavaScript-фреймворк
Райан Карниато поделился своими мыслями после работы с Qwik — новым фреймворком от автора Angular — "Resumable JavaScript with Qwik".
Qwik — это представитель новой категории возобновляемых фреймворков. Его основная особенность — прогрессивная гидрация приложения без обязательной загрузки кода приложения. Qwick единственный в своём роде фреймворк, полноценно реализующий эти идеи, кардинально уменьшая метрику Time To Interactive. Фреймворк при компиляции расставляет в HTML специальные маркеры, которые содержат необходимые данные и ссылки на код, который нужно загрузить перед выполнением. Таким образом реализуется поддержка ленивой инициализации приложения.
Qwik находится на этапе активной разработки. На данный момент его не рекомендуется использовать для production-приложений.
#jsframeworks #performance
https://dev.to/this-is-learning/resumable-javascript-with-qwik-2i29
Райан Карниато поделился своими мыслями после работы с Qwik — новым фреймворком от автора Angular — "Resumable JavaScript with Qwik".
Qwik — это представитель новой категории возобновляемых фреймворков. Его основная особенность — прогрессивная гидрация приложения без обязательной загрузки кода приложения. Qwick единственный в своём роде фреймворк, полноценно реализующий эти идеи, кардинально уменьшая метрику Time To Interactive. Фреймворк при компиляции расставляет в HTML специальные маркеры, которые содержат необходимые данные и ссылки на код, который нужно загрузить перед выполнением. Таким образом реализуется поддержка ленивой инициализации приложения.
Qwik находится на этапе активной разработки. На данный момент его не рекомендуется использовать для production-приложений.
#jsframeworks #performance
https://dev.to/this-is-learning/resumable-javascript-with-qwik-2i29
DEV Community
Resumable JavaScript with Qwik
When Misko Hevery (creator of AngularJS) approaches you to look at his new framework, well, you stop...
🤔17👍6🔥3👎2❤1