Влияние потребления памяти на производительность

Тим Кадлек попробовал сформировать критерии оптимального потребления памяти страницы — "Benchmarking JavaScript Memory Usage".

В Chrome 83 появилась возможность измерения потребляемой памяти страницы с помощью метода performance.measureMemory. В январе 2021 года он был переименован в performance.measureUserAgentSpecificMemory. Несмотря на то что API существует уже довольно долго, разработчики ещё не полностью понимают, как его использовать для анализа производительности страницы. Основная проблема — недостаток данных, чтобы понимать какой объём потребляемой памяти считать приемлемым, а какой избыточным.

Тим пытается ответить на этот вопрос с помощью сбора метрик с 10000 популярных сайтов и распределения результатов по перцентилям. В итоге он предложил следующее распределение:
— хорошо: <4.8MB
— нуждается в улучшении: >4.8MB и <19.4MB
— плохо: >19.4MB

Также в статье есть исследование влияния используемых JS-фреймворков на объём потребляемой памяти. Больше всего памяти потребляют React и Angular. Это объясняется бо́льшим количеством доставляемого кода по сравнению с Vue и jQuery.

#js #performance

https://blog.webpagetest.org/posts/benchmarking-javascript-memory-usage/

Partytown — запуск сторонних скриптов в веб-воркере

Автор фреймворка Ioinic Адам Бредли представил новую библиотеку для запуска сторонних скриптов в веб-воркере — "Introducing Partytown: Run Third-Party Scripts From a Web Worker".

Разработчики JS-фреймворков вкладывают много сил, чтобы пользовательские приложения были быстрыми и отзывчивыми. Эти усилия могут нивелировать сторонние скрипты. Например, добавление на сайт Google аналитики срезает 20 баллов производительности в Lighthouse, так как увеличивается время инициализации страницы.

Partytown позволяет вынести сторонние скрипты в веб-воркер, разгружая основной поток выполнения. У скриптов в воркере появляется синхронный доступ к DOM, который реализуется с помощью Proxy и блокирующих XHR-запросов.

На данный момент доступна альфа-версия библиотеки. Простестирован сандбоксинг скриптов Google Analytics, Google Tag Manager, Amplitude и нескольких других сервисов.

Очень полезная библиотека, попробую её у себя в проекте.

#js #library #performance

https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp

Телеграм-каналы подписчиков, выпуск #1

На мой призыв поделиться своим блогом откликнулось 13 человек. Среди присланных каналов есть очень крутые. Чтобы они не потерялись в большом списке, он будет поделён на три части и опубликован в ближайшие дни. Таким образом у вас будет время заглянуть во все каналы и поддержать подпиской понравившиеся.

@msosnovfeed — обзоры статей про архитектуру, управление разработкой, тестирование и фронтенд от Макса Соснова из Тинькофф

@web_platform — Виталий Зюзин из HTML Academy про веб-разработку

@british_frontend — персональный блог про жизнь разработчика в Великобритании

@ru_react_notes — заметки про React

Спекулятивный пререндеринг в Chrome

Лина Сохони и Эдди Османи рассказали про новый способ пререндеринга страниц — "Bringing instant page-loads to the browser through speculative prerendering".

Хинт производительности prerender сообщает браузеру о необходимости отрендерить новую страницу заранее (спекулятивно). Если браузер неактивен и если в нём отключен режим сохранения траффика, то он загрузит необходимые ресурсы и запустит процесс рендеринга, тем самым страница будет открываться быстрее.

В Chrome 94 в рамках origin trail появилась поддержка Speculation Rules API. В отличии от хинта prerender c помощью API можно гибко управлять пререндером страниц и предзагрузкой ресуров. На данный момент реализована только часть API — возможно пререндерить только заранее указанный список URL. В будущем появится возможность пререндеринга набора URL по шаблону. Также можно будет указать вероятность открытия страницы, чтобы браузер оптимально тратил вычислительные ресурсы пользователя.

#chrome #performance #api

https://web.dev/speculative-prerendering/

Телеграм-каналы подписчиков, выпуск #2

@sergeysova — Сергей Сова о фронтенде и разработке на Rust, авторские подкасты и дайджесты с новостями фронтенда

@amorgunov — Александр Моргунов из Яндекс.Макрета про работу, фронтенд, Node.js и другие темы

@dev_easy — авторские статьи Евгения Зайцева, подробно и основательно

@deveveloper_house_jun_front — канал и сообщество для начинающих фронтендеров

@sijekotech — ссылки на технические и дизайнерские темы

Руководство по отладке CSS

Стефани Эклз написала статью про отладку CSS — "A Guide To CSS Debugging".

В статье рассказывается про способы поиска элементов, которые вызывают переполнение и приводят к появлению нежелательных полос прокрутки. Про решение проблем с каскадом. Про ошибки, вызванные неконсистентностью браузеров. Про проблемы CSS, которые чрезмерно опираются на структуру документа. В тексте есть много ссылок на смежные статьи, которые будут полезны всем, кто не очень сильно погружён в вёрстку.

Тем не менее в статье есть и странные моменты. В разделе про уменьшение сдвига контента описывается проблема и приводится несколько общих советов, но нет рекомендаций по отладке. Также ожидал увидеть рекомендации по отладке ошибок, связанных с контекстом наложения (stacking context), но их нет.

#css #debug

https://www.smashingmagazine.com/2021/10/guide-debugging-css/

Телеграм-каналы подписчиков, выпуск #3

@super_oleg_dev — Олег Драпеза про задачи фронтенда Тинькофф и веб-разработку в целом

@am_code — ссылки и заметки про фронтенд

@bitrix24phpsdk – про работу с SDK Битрикс24

@neverendingit — обзоры статей про разработку и менеджмент

@temakast — ссылки на статьи про разработку и ит-технологии

Sanitizer API — безопасная работа с DOM

В блоге web.dev была опубликована статья, посвящённая Sanitizer API — "Safe DOM manipulation with the Sanitizer API".

Sanitizer API — это реализация полноценного санитайзера данных на уровне веб-платформы. Он предназначен для удаления из пользовательского ввода нежелательных HTML-тегов и аттрибутов, которые эксплуатируются в XSS. Можно сказать, что это аналог библиотеки DOMPurify, но без накладных расходов на лишний парсинг.

В Sanitizer API используется контекст парсинга. Благодаря этому структура кода всегда остаётся валидной. Например, Sanitizer API не позволит вставить внутрь <div></div> результат парсинга строки <td>lorem</td>, так как получилась бы невалидная HTML-разметка.

Поддержка Sanitizer API на данный момент есть только в Chrome и Firefox в экспериментальном режиме.

#api #security

https://web.dev/sanitizer/

Телеграм-каналы подписчиков, выпуск #4 (последний)

@typesafesound — Михаил Башуров про TypeScript и разработку

@asterisk_js — ссылки на полезные статьи и github-проекты, связанные с веб-разработкой (иногда таскаю отсюда ссылки)

@core_dump_channel — Дмитрий Карловский про программирование и computer science

@mol_news — новости об экосистеме фреймворка $mol

@roboxv — советы и статьи про веб-разработку и около

Прекращение поддержки IE11 в Google Search

Разработчики Google Search сообщили о прекращении поддержки Internet Explorer 11. Прекращение поддержки означает перевод пользователей IE11 в специальную версию поисковика, которая обслуживает неактуальные браузеры. Также в декабре 2020 года была прекращена поддержка IE11 в Gmail и Google Docs.

Если вы до сих пор исправляете ошибки в Internet Explorer, появился хороший повод, чтобы обдумать с вашими менеджерами целесообразность его поддержки.

#announcement #google #ie

https://9to5google.com/2021/10/01/google-search-internet-explorer-11/

Релиз Firefox 93

На прошлой неделе вышла новая версия Firefox. Рут Джон рассказала про новинки релиза — "Lots to see in Firefox 93!".

Была добавлена поддержка формата AV1 Image File Format. AVIF — это открытый формат изображений, выигрывающий у WebP по степени сжатия и показывающий наилучшие результаты для небольших изображений.

Улучшена поддержка кастомных элементов. Добавлено событие slotchange, возникающее при изменении содержимого слота. Добавлен метод HTMLElement.attachInternals() для доступа к внутренним свойствам и методам инпутов. Добавлено свойство ElementInternals.shadowRoot для доступа к Shadow Root внутри кастомного элемента.

Добавлен новый тип инпута <input type="datetime-local"> для выбора даты и времени. Появилась поддержка синтеза глифов шрифта для маленьких заглавных букв ( small-caps ) с помощью CSS-свойства font-sythesis. Метод createImageBitmap теперь поддерживает опции imageOrientation и premultiplyAlpha.

В DevTools исправлено много утечек памяти, возникающих во время долгих сессий отладки.

#release #firefox

https://hacks.mozilla.org/2021/10/lots-to-see-in-firefox-93/

За прошедшие две недели в канале для патронов Defront было опубликовано одиннадцать постов:

— Падение Facebook и неотзывчивые скрипты
— В защиту скучных языков программирования
— DOM Treemap — плагин для визуализации DOM-узлов
— Настройка простого монорепозитория
— Использование TypeScript без компиляции
— Веб-стримы в браузерах и на сервере
— Субъективный взгляд на бюджет производительности
— Исследование сайтов компаний Fortune 500
— Краткое объяснение каскада CSS
— Изменение часовых поясов за последние 120 лет
— Опыт оптимизации крупнейшего сайта объявлений Франции

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

CORS — история появления и нюансы использования

Джейк Арчибальд написал статью про CORS с интерактивными примерами — "How to win at CORS".

Впервые управление кроссдоменными-запросами появилось в Flash с помощью файла /crossdomain.xml, в котором описывались права доступа сторонних сайтов. В 2005 году рабочая группа W3C Voice Browser Working Group предложила альтернативное решение для XML-ресурсов. Так как XML не получил широкого распространения для представления HTML-документов, предложение рабочей группы трансформировалось в CORS (Cross-Origin Resource Sharing), который управляется с помощью HTTP-заголовка: Access-Control-Allow-Origin.

Кроме истории появления CORS в статье также рассказывается о нюансах его использования. В общем, хорошая статья. Рекомендую почитать.

#web #security #history

https://jakearchibald.com/2021/cors/

Запустилась Дока — опенсорсная документация по веб-платформе на русском языке. В проекте четыре раздела: HTML, CSS, JavaScript и инструменты. В создании документации может принять любой желающий.

Сайт https://doka.guide/
Репозиторий https://github.com/doka-guide/content

Интерграция VS Code с Edge DevTools

Разработчики Edge рассказали о новой экспериментальной фиче для подключения VS Code в качестве основного редактора DevTools — "Opening source files in Visual Studio Code".

Если включить интеграцию с VS Code, то при открытии исходного кода проекта в инструментах разработчика между экземпляром редактора и DevTools установится двусторонняя связь. При редактировании файлов в VS Code изменения не только будут сохраняться на диск, но и будут автоматически пробрасываться в DevTools с автоматическим обновлением открытой страницы. И, наоборот, при редактировании стилей на вкладке Elements все изменения будут автоматически пробрасываться в редактор.

Подключить VS Code можно в экспериментальных опциях DevTools: Settings > Experiments > Open source files in Visual Studio Code.

#tool #dx #edge

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode

Релиз Parcel 2

Parcel — это сборщик, который можно использовать без каких-либо настроек. Все опции используют разумные значения по умолчанию. Точка входа для сборки — основной HTML-файл приложения или сайта. В новой версии была улучшена производительность сборки, реализована новая система плагинов, три-шейкинг, код-сплиттинг, улучшение сборок библиотек, улучшена работа HMR и многое другое.

Значительно улучшена производительность сборки благодаря новому компилятору, написанному на Rust. В его основе лежит swc. Использование компилируемого языка уменьшило время инициализации кода и решило проблему медленной сериализации больших AST-объектов. Сборка теперь работает в десять раз быстрее и в три раза быстрее при использовании Terser.

Реализована новая система плагинов, которая делает Parcel полностью расширяемым. Она позволяет использовать Parcel как для небольших проектов, так и для серьёзных проектов со сложными требованиями к сборке.

Три-шейкинг включён по умолчанию. Он работает для ESM, CommonJS, динамических импортов и CSS-модулей. Есть диагностика проблем три-шейкинга, которую можно включить с помощью флага --log-level verbose. Работает автоматический код-сплиттинг с выносом общих модулей в разделяемые бандлы. Также в Parcel по умолчанию включена поддержка паттерна module/nomodule для улучшения производительности загрузки кода.

В production-режиме в Parcel включена lossless-оптимизация JPEG- и PNG-изображений. Она уменьшает объём изображений, не снижая их качество. Также появилась полноценная поддержка SVG с автоматической оптимизацией с помощью SVGO.

Реализован ленивый режим разработки, в котором собираются только те файлы, которые в данный момент запрашиваются браузером, тем самым улучшая время запуска dev-сервера.

#bundle #tool #release

https://parceljs.org/blog/v2/

Использование AbortController и AbortSignal в Node.js

Джеймс Снелл — контрибьютор Node.js — написал статью про использование AbortController и AbortSignal в Node.js — "Using AbortSignal in Node.js".

Последние два года разработчики Node.js работают над добавлением разных API web-платформы. Результатом этой работы стала реализация AbortController, который появился в стабильной версии Node.js 16.

AbortController и AbortSignal реализуют интерфейс для отмены выполнения асинхронных операций. С его помощью можно прерывать таймеры, асинхронные запросы, отписываться от событий, добавленных с помощью интерфейса EventTarget, который поддерживают некоторые API Node.js. В статье рассказывается о том как использовать AbortController и AbortSignal на примере прерывания асинхронного события по таймауту.

Рекомендую почитать статью всем, так как AbortController доступен не только в Node.js, но и во всех актуальных браузерах.

#nodejs #async #api

https://www.nearform.com/blog/using-abortsignal-in-node-js/

Лучшие практики использования виджетов сторонних сервисов

Лина Сохони, Эдди Османи и Кэти Хэмпениус написали статью о лучших практиках подключения сторонних виджетов — "Best practices for using third-party embeds".

В статье предлагается использовать ленивую загрузку содержимого iframe с помощью атрибута loading="lazy". Некоторые виджеты поддерживают ленивую загрузку из коробки, например, в социальных плагинах Facebook для этого можно использовать атрибут data-lazy="true". Есть хороший совет использовать фасады для сторонних виджетов, чтобы пользователи не загружали лишний код при открытии страницы. Затрагивается тема непредсказуемого сдвига контента (Layout Shift).

Ещё ребята рекомендуют использовать готовые библиотеки для ленивой загрузки виджетов (lazysizes), создания фасадов (lite-youtube-embed, lite-vimeo-embed, react-live-chat-loader) и уменьшения непредсказуемого сдвига контента (Layout Shift Terminator).

Хорошая статья. Рекомендую почитать всем, кто интересуется темой производительности.

#performance #tool

https://web.dev/embed-best-practices/

Релиз Node.js 17 и план релиза Node.js 16 LTS

Сегодня вышла новая мажорная версия Node.js, которая становится веткой current — "Node.js 17 is here!".

В новой версии продолжается работа над промисификацией основных API — была добавлена поддержка промисов в модуль readline. OpenSSL обновлён до третьей версии. Стек-трейсы по умолчанию будут включать версию Node.js. V8 обновлён до версии 9.5. В нём появилась поддержка новых типов для Intl.DisplayNames и новых опций форматирования часового пояса в Intl.DateTimeFormat.

На следующей неделе запланирован перевод Node.js 16 в статус LTS с поддержкой до 30 апреля 2024 года. Node.js 16 LTS будет первой версией, которая будет поставляться с бинарниками для процессоров семейства Apple M1.

Поддержка Node.js 12 LTS заканчивается в апреле 2022 года. Разработчики рекомендуют обновиться на новую версию.

#nodejs #release

https://medium.com/the-node-js-collection/node-js-17-is-here-8dba1e14e382

Релиз Chrome 95

Вчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали о новинках релиза — "New in Chrome 95".

В Chrome 95 был добавлен URLPattern — API для упрощения извлечения данных из URL-строки. URLPattern был вдохновлён механизмом роутинга из Express и Ruby on Rails:

const url = '/document/d/1ssdf5c/edit';

const pattern = new URLPattern({
pathname: '/:kind/d/:fileID/:mode',
hash: '*',
});
const r = pattern.exec(url);


Разработчики Edge добавили поддержку Eye Dropper API. С его помощью можно легко реализовать "пипетку" — инструмент для визуального получения цвета любого элемента страницы.

В рамках Origin Trial можно включить сокращение информации в User-Agent. Об этом изменении в сентябре была отдельная статья.

В WebAssembly появилась поддержка исключений. Раньше при компиляции C++ или Rust-кода инициирование и обработка исключений реализовывались на уровне JavaScript. Теперь обработка исключений не выходит за рамки WebAssembly, улучшая производительность приложений.

В Chrome DevTools теперь можно изменять размеры в стилях без использования клавиатуры. Добавлена возможность скрытия предупреждений. Улучшена эргономика логирования объектов — неунаследованные свойства отображаются жирным текстом в верху списка. Lighthouse обновлён до версии 8.4.

https://developer.chrome.com/blog/new-in-chrome-95/
https://developer.chrome.com/blog/new-in-devtools-95/