В 2016 году в набор команд ARM была добавлена операция, специально разработанная для работы с JS-движками, — "Armv8-A architecture: 2016 additions".

В JavaScript все числа представляются в формате чисел с плавающей запятой двойной точности, но при работе с битовыми операциями они преобразуются в 32-битные целые числа (в спецификации для этого используется ToInt32 ). Битовые операции относительно часто используется в JS-коде, поэтому для ускорения таких преобразований в набор команд архитектуры Armv8 была добавлена новая команда FJCVTZS.

Можно сказать, что JS проник не только на сервера, десктоп и мобильные приложения, но и в набор команд процессоров.

#js #internals

https://community.arm.com/developer/ip-products/processors/b/processors-ip-blog/posts/armv8-a-architecture-2016-additions
https://stackoverflow.com/questions/50966676/why-do-arm-chips-have-an-instruction-with-javascript-in-the-name-fjcvtzs

Буквально на днях выйдет новая версия Firefox. В неё попадут изменения с улучшением работы JS-движка SpiderMonkey. Обо всех подробностях рассказал Ян дер Моой в статье "Warp: Improved JS performance in Firefox 83".

В SpiderMonkey используется два уровня компиляции кода: Baseline JIT для быстрой генерации байткода с минимальным количеством оптимизаций и Ion для генерации оптимизированного байткода. Ion в Firefox 83 будет заменён на новый оптимизирующий JIT-компилятор Warp. Warp в отличие от Ion не использует глобально собираемую информацию о типах и использует формат представления байткода CacheIR, которое используется в Baseline JIT.

Благодаря этим изменениям удалось ускорить выполнение JS-кода и уменьшить потребление памяти. Google Docs с Warp работает на 20% быстрее, бенчмарк Speedometer — на 10-12% быстрее. Firefox с Warp потребляет примерно на 8% меньше памяти по сравнению с Ion.

Новая архитектура упростила кодовую базу. Теперь разработчикам SpiderMonkey гораздо проще добавлять новые оптимизации и фичи.

#performance #firefox #internals

https://hacks.mozilla.org/2020/11/warp-improved-js-performance-in-firefox-83/

Месяц назад проходила конференция для разработчиков виртуальных машин, на которой Вячеслав Егоров рассказал про историю развития языка программирования Dart — "10 Years of Dart".

Dart начал разрабатываться инженерами Google в 2011 году. Первая версия не была статически типизируемой в обычном смысле, в ней была поддержка опциональных типов, и все оптимизации выполнялись на уровне JIT-компилятора (то есть во время выполнения кода). В 2015 году с появлением Flutter текущая имплементация языка не могла обеспечить хорошую производительность на iOS, потому что Apple запрещает использовать JIT-компиляцию в обычных программах. Команда Dart попыталась реализовать AOT-компиляцию (то есть до этапа выполнения кода) на базе существующего JIT-компилятора, но столкнулась с проблемами. Для решения этих проблем Dart должен был стать полноценным статически типизируемым языком. Над второй мажорной версией разработчики работали три года — Dart 2.0 зарелизился в 2018 году.

Доклад очень технический и довольно хардкорный. Рекомендую посмотреть, если хотите узнать больше про Dart.

#dart #history #internals #talk

https://www.youtube.com/watch?v=e-58C8aGBM4

Матиас Байненс — разработчик V8 и Chrome — написал статью о том, как была реализована симуляция недостатков зрения в Chrome DevTools — "Simulating color vision deficiencies in the Blink Renderer".

Результаты исследования WebAIM говорят о том, что контраст текста — самая распространённая проблема доступности сайтов. Вы скорее всего встречали его упоминание в DevTools или Lighthouse и с большой вероятностью удивлялись тому, что эти инструменты жаловались на плохой контраст, в то время как вы могли легко всё прочитать. Дело в том, что анализ контраста включает в себя разные особенности восприятия цвета: кто-то не видит красный цвет, кто-то зелёный и т.п.

Для реализации симуляции недостатков зрения разработчики сделали прототип на обычных web-технологиях. Для этого они воспользовались SVG-фильтром на root-элементе. В этом фильтре описывается преобразование цветов на основе научной работы "A Physiologically-based Model for Simulation of Color Vision Deficiency". Чтобы не внедрять на страницу лишние элементы, решение с SVG было перенесено в движок браузера.

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

#a11y #internals #chrome

https://developers.google.com/web/updates/2020/11/cvd

В блоге V8 Мартин Бидлингмайер опубликовал статью про новый вспомогательный движок регэкспов, который позволяет избежать катастрофических откатов — "An additional non-backtracking RegExp engine".

V8 по умолчанию использует регэксп-движок Irregexp, который в свою очередь использует алгоритм бэктрекинга для проверки паттернов регэкспов. Этот алгоритм может приводить к катастрофическим откатам (сatastrophic backtracking). Катастрофический откат — это ситуация, когда проверка регулярного выражения не может быть выполнена за разумное время из-за экспоненциального роста количества возможных вариантов, которые должны быть обработаны движком. Катастрофические откаты могут использоваться для совершения DOS-атак, когда web-сервис обрабатывает входные данные пользователей с помощью регулярных выражений.

В V8 версии v8.8 был добавлен новый экспериментальный движок, который не подвержен проблеме экспоненциального взрыва, но гораздо медленнее (на данный момент) Irregexp. Его можно включить с помощью экспериментальных флагов V8.

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

#v8 #security #internals

https://v8.dev/blog/non-backtracking-regexp

Максим Садым из Google написал небольшой пост о том, как было ускорено открытие DevTools в Chrome 85 — "Improving DevTools startup time".

При открытии DevTools, браузеру нужно выполнить код с помощью V8. Этот код сериализовывался в строку, которая на стороне V8 выполнялась с помощью eval. Оказалось, что от сериализации можно было избавиться. Для этого был добавлен новый метод в API mojo (механизм, который используется Chromium для передачи команд из DevTools в V8). Благодаря этой оптимизации время старта DevTools сократилось на 13% (с 11,2 до 10 секунд).

Рекомендую заглянуть в статью, если интересуетесь темой разработки браузеров.

#chromium #internals

https://developers.google.com/web/updates/2021/02/faster-devtools-startup

Алекс Руденко из команды разработки Chrome DevTools написал статью про добавление поддержки редактирования стилей, создаваемых с помощью CSS-in-JS-библиотек — "CSS-in-JS support in DevTools".

Возможность редактирования CSS-in-JS стилей появилась в Chrome 85. Для поддержки редактирования стили должны быть представлены как статический текст. В случае с CSS-in-JS статического текста нет, так как такие стили размещаются в памяти во внутренней структуре данных CSSOM. Для добавления возможности редактирования их стали преобразовывать в текст. Для синхронизации мутируемых стилей был добавлен новый механизм, который оповещает бэкенд DevTools при изменении стилей с помощью CSSOM API.

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

#internals #chrome #cssinjs

https://developers.google.com/web/updates/2021/02/css-in-js

Андрей Печкуров — участвует в разработке Node.js — написал статью про внутреннее устройство Math.random в V8 — "[V8 Deep Dives] Random Thoughts on Math.random()".

V8 использует генератор псевдослучайных чисел (PRNG), поставляемый окружением (Node.js, Chromium) или откатывается на системный источник случайности (например, /dev/urandom в Linux), если он не был задан в окружении. После того как генератор был проинициализирован seed-значением, все последующие случайные числа генерируются детерминировано с помощью алгоритма xorshift128+ и сохраняются в пуле из 64 значений, который заполняется по мере необходимости. Использование пула заранее сгенерированных случайных чисел очень распространённый подход, который используется при реализации PRNG.

Math.random не рекомендуется использовать для задач, связанных с безопасностью, потому что под капотом он не использует криптографически безопасный генератор псевдослучайных чисел (CSPRNG). Для таких задач вместо Math.random рекомендуется использовать генератор из Web Crypto API или модуля crypto в Node.js.

#js #v8 #internals #security

https://apechkurov.medium.com/v8-deep-dives-random-thoughts-on-math-random-fb155075e9e5

Лин Кларк опубликовала статью, посвящённую оптимизации работы JavaScript-кода в WebAssembly-окружении — “Making JavaScript run fast on WebAssembly”.

Некоторые платформы ограничивают набор оптимизаций, которые могут быть применены к JavaScript-коду. Например, на iOS и игровых консолях нельзя использовать JIT-компилятор, поэтому JS-движки там могут работать только в режиме интерпретатора. Это ограничивает спектр задач, который может быть решён с помощью JS. Участники Bytecode Alliance (Fastly, Mozilla, Igalia) работают над решением на базе WebAssembly, которое позволит ускорить выполнение JS-кода на таких платформах и достичь уровня производительности JIT-компиляторов ранних версий JavaScript-движков.

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

В статье говорится о том, что подобный подход может использоваться не только с JavaScript, но и с Python, Ruby, Lua.

#js #internals #webassembly

https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly

Мэттью Гауде — разработчик SpiderMonkey — написал статью про опыт имплементации приватных полей класса в JavaScript-движке — "Implementing Private Fields for JavaScript".

Мэттью пишет о том, что при добавлении новой фичи в движок нужно учитывать три аспекта: ментальную модель, спецификацию и реализацию. Иногда они совпадают друг с другом, и имплементация сводится к пошаговой реализации алгоритма из спецификации. Иногда они расходятся, и имплементация начинает сильно отличаться от спецификации, сохраняя только семантику. Реализация приватных полей попала во вторую категорию.

Также в статье разбираются нюансы работы c приватными полями. Оказывается, приватные поля могут быть добавлены к любому объекту, даже если он был явно закрыт от изменений с помощью Oblect.seal(). Насколько я понимаю, это "побочный эффект" спецификации, и его не стоит использовать для решения своих задач.

Очень интересная статья. Рекомендую почитать.

#js #internals #spec #firefox

https://www.mgaudet.ca/technical/2021/5/4/implementing-private-fields-for-javascript

Браузер. Рендеринг. Производительность

Второй год я помогаю с поиском спикеров на CodeFest — крупнейшая конференция за Уралом. В прошлом году у нас выступал Сергей Ufocoder — автор канала @ufostation — с докладом "Браузер. Рендеринг. Производительность".

В докладе рассказывается о производительности рендеринга в Chromium с точки зрения архитектуры браузера. Подробно объясняется работа пайплайна рендеринга на примере about://tracing и профилировки страниц с помощью вкладки Performance в DevTools. Рассматриваются несколько случаев оптимизации производительности с объяснением, почему это работает именно так. При подготовке доклада Сергей консультировался с официальной документацией Chromium и с разработчиками браузера.

Доклад немного хардкорный, но полезный. Рекомендую посмотреть.

#performance #chromium #internals #talks

https://www.youtube.com/watch?v=tbDxm1hiEI4

Возможно, вам не нужен 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/ (перевод на русский)

Новое дерево доступности в Chrome DevTools

Йохан Бей из команды разработки Chrome DevTools рассказал про новое дерево доступности, которое появится в будущих версиях Chrome — "Full accessibility tree in Chrome DevTools".

С помощью дерева доступности скринридеры и другие технологии доступности предоставляют средства для работы со страницей. В Chrome 97 и ниже дерево доступности в один момент времени может отображать только выбранный элемент и его потомков. В новой версии Chrome дерево будет отображаться для всей страницы сразу, упрощая поиск элементов, которые недоступны скринридерам. Обновлённое дерево также позволит реализовать новые функции и инструменты для решения проблем доступности.

Новое дерево доступности пока доступно только в Chrome Canary.

#debug #a11y #internals #devtools

https://developer.chrome.com/blog/full-accessibility-tree/

React server components под капотом

Чан Ву рассказал про внутреннее устройство React server components (RSC) — "How React server components work: an in-depth guide".

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

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

#react #internals

https://blog.plasmic.app/posts/how-react-server-components-work/