Ускорение стек трейсов в Chrome DevTools

Бенедикт Мoйрер рассказал про ускорение стек трейсов в DevTools в Chrome 90. Ускорение в среднем десятикратное, так что открытые DevTools стали значительно меньше тормозить выполнение JavaScript на странице. Это была длинная история, которая включала в себя в том числе изменения в V8. Например, выпилили displayName у функций, так как на поиск (lookup) этого свойства у функции было затратным, а само свойство появилось до ES2015 как хак, так как Function#name тогда было неизменным (immutable) – в ES2015 это исправили и в displayName отпала необходимость (его использовали для нормальных имен функций в стек трейсах). В целом, выходит, что на самом деле ускорили не только DevTools, но и V8.

Действительно ли WebAssembly настолько быстрый?

Таким вопросом задался Surma в статье Is WebAssembly magic performance pixie dust? Короткий ответ неизменен – зависит от многих факторов. Нужно уметь готовить: если сделать что-то не так, то WebAssembly может быть гораздо медленей JavaScript. В статье приводятся такие примеры, сравнивнение разных методов компиляции в WASM и немного опыта по использованию AssemblyScript.

Shadow DOM + Event = ?

Когда говорят про Shadow DOM, обычно вспоминают только про изоляцию DOM элементов и стилей. Но Shadow DOM также добавляет новые правила и особенности в работе событий, а именно в том как они распространяются по DOM дереву. Тема непростая, и Pierre-Marie Dartus взялся написать по ней полноценный гайд. И у него хорошо получилось, всё по делу, а главная фишка гайда – интерактивные визуализации, с которыми проще разобраться в том, что происходит с событием по шагам и с разными свойствами.

Learn CSS — An evergreen CSS course

https://web.dev/learn/css/

На сайте web.dev появился курс для изучения CSS. В нем основные фундаментальные темы CSS вынесены в отдельные секции, что удобно для изучения конкретной части, а не все сразу. Как можно понять из определения, обещают поддерживать в актуальном состоянии.
Кстати, на web.dev есть множество курсов по другим темам

С начала мая накопилось много новостей, которые я ещё обязательно опубликую, а пока хочу напомнить, что сегодня начинается очередное пленарное заседание #TC39, которое продлится два дня. Ознакомиться с повесткой можно здесь: https://github.com/tc39/agendas/blob/master/2021/05.md

⚡️ Stage 3 пропозал RegExp Match Indices отправляется на stage 4 и попадёт в ES2022

⚡️ Stage 3 пропозал Top-level await отправляется на stage 4 и попадёт в ES2022

⚡️ Stage 2 пропозал Accessible Object.prototype.hasOwnProperty() переходит на stage 3

⚡️ ECMA402 пропозал Intl DisplayNames v2 переходит со stage 2 на stage 3

⚡️ ECMA402 пропозал Extend TimeZoneName Option Proposal также переходит со stage 2 на stage 3

⚡️ Пропозал Resizable buffers переходит со stage 2 на stage 3

Разработчики Flow о будущем проекта

Flow приоритезирует потребности Facebook (ещё больше? 🙃) перед остальным сообществом, собирается добавлять (видимо, несовместимий с JavaScript и TypeScript) новый синтаксис, а также будет (ещё меньше?) уделять внимания внешним контрибьюшнам.

https://medium.com/flow-type/clarity-on-flows-direction-and-open-source-engagement-e721a4eb4d8b

⚡️ Stage 1 пропозал RegExp Unicode set notation + properties of strings отправляется на stage 2

------------------

На этом 83я встреча #TC39 заканчивается. Следующая встреча состоится 13-16 июля. Не уверен, что смогу там присутствовать, потому что в моей таймзоне они будут проходить с 04:00 до 09:00 :(

Вышел Safari Technology Preview 125

В нём улучшения Web Inspector, много исправлений и улучшений CSS, веб анимации, продолжение работы над #WebAssembly Typed Function References, улучшения и исправления разных Web API, рендеринга и WebRTC.

Вышел Chrome 91

В нём много нового: улучшения File System Access API, возможность копирования файлов из буфера обмена, возможность добавления подсказок для менеджера паролей, Web Transport под origin trial, #WebAssembly SIMD, API для обнаружения поверхностей в WebXR под origin trial, WebSockets через HTTP/2, ES модули в сервис воркерах.

https://developer.chrome.com/blog/new-in-chrome-91/

Также:
- блог разработчиков
- новое в DevTools
- новое в V8

📢 Ищутся волонтёры для помощи с переводом русскоязычной версии сайта #TC39, а конкретно stage 3 пропозалов (от JSON Modules и ниже). Там необходимо перевести заголовки, описания и названия месяцев. Вот файл, в котором находятся все необходимые строки. Можете сразу добавить меня (https://github.com/chicoxyzzy) в ревьюеры или заменшнить в Вашем PR. На всякий случай, — у нас есть code of conduct.

Апдейт: PR уже есть, помогайте улучшать перевод тут https://github.com/tc39/tc39.github.io/pull/254

Sparkplug — новый неоптимизирующий компилятор JavaScript

Оказывается V8 9.1 был добавлен новый неоптимизирующий компилятор Sparkplug. Благодаря отсутствию оптимизации, процесс компиляции происходит гораздо быстрее. По сути, этот компилятор переводит байткод в соответствующие им инструкции. Такой подход позволяет быстрее начать выполнять код на этапе загрузки, а также переключаться на оптимизированный код и обратно. Подход дает выигрыш, так как на старте многие оптимизации все равно не возможны из-за отсутствия фидбека по исполнению кода. На данный момент получилось достичь 5-15% прироста производительности, но пока реализованы не все идеи связанные с новым компилятором. Больше технических деталей и графиков в статье блога V8: https://v8.dev/blog/sparkplug

Вышел Firefox 89

https://www.mozilla.org/en-US/firefox/89.0/releasenotes/

В этом релизе обновлен внешний вид браузера, улучшен UX, в частности, стало меньше алертов и сообщений. Для пользователей macOS несколько исправлений и улучшений, например, добавили эластичный оверскрол (как в других браузерах и приложениях). В режиме инкогнито (приватный режим) теперь используется Total Cookie Protection, что не позволяет сайтам использовать куки других сайтов.

- Включен top level await
- На 64-битных системах теперь можно создавать ArrayBuffer до 8GB (было 2GB)
- Добавлен интерфейс PerformanceEventTiming из Event Timing API
- Контентом <input> и <textarea> теперь можно манипулировать с помощью document.execCommand() как в других браузерах и с сохранением истории изменений
- В CSS добавлено:
- Медиа фича forced-colors
- Дескрипторы ascent-override, descent-override и line-gap-override для @font-face
- Функция type() для image-set()
- В контентных скриптах (те что встраиваются в страницу) расширений теперь можно использовать динамический import()

Все изменения для разработчиков
Статья в Mozilla Hacks

Некоторые интереные новости W3C за май

Спецификация Web Audio API получила статус Proposed Recommendation и возможно получит статус W3C Recommendation уже 3 июня.

Черновик спецификации Web Content Accessibility Guidelines (WCAG) 2.2 и готовится получит статус Proposed Recommendation, что может произойти 4 июня.

Спецификации WebGPU и WebGPU Shading Language опубликованы в статусе First Public Working Draft.

Спецификация Page Visibility Level 2 опубликована в статусе W3C Candidate Recommendation.

Спецификация Geolocation API опубликована в статусе First Public Working Draft.

Стратегические цели W3C (апрель 2021)

W3C опубликовал большой документ со стратегическими целями на ближайшее будущее. Очень интересный документ с кучей ссылок, очень рекомендую к ознакомлению.

https://www.w3.org/2021/04/w3c-highlights/Overview.html