2️⃣ Компиляция в байткод занимает много времени (от нескольких миллисекунд до сотен, в зависимости от объёма кода и железа). Чтобы не тратить это время, V8 кеширует байткод для часто загружаемых скриптов. Часто — это больше одного раза

3️⃣ Байткод кешируется в двух местах: в памяти и на диске.
— Кеш на диске медленнее. Скомпилированный байткод нельзя записать прямо на диск, поэтому при записи его нужно сериализовать, а при чтении десериализовать. Зато этот кеш надёжный и живёт долго, даже между перезапусками Хрома
— Кеш в памяти быстрый, потому что а) байткод не нужно ни во что сериализовать и б) ну, это память, она вжух-вжух. Минус — этот кеш ограничен одним процессом (≈ одним сайтом в одной вкладке), и он быстро пропадает

→ https://v8.dev/blog/code-caching-for-devs

​​Тред Сары Дреснер про малоизвестные полезные штуки из области веб-перформанса: https://twitter.com/sarah_edo/status/1121542878956670977

​​28 мая выступлю на FrontendConf в Москве!

Расскажу, как в 2019 делать быстрые приложения и не тратить на это сотни часов. (Ну и ещё про всякие метрики, инструменты и то, зачем перформанс вообще нужен.)

Приходите: https://ritfest.ru/2019/abstracts/4701

Кстати, на ютубе будет прямая трансляция доклада, приходите ровно через час: https://youtu.be/a5kq-Yk28po

​​На этой неделе в Твитере веду коллективный твитер-аккаунт jsunderhood! Подписывайтесь: https://twitter.com/jsunderhood/status/1138018324774887424

(И пишите, про что было бы интересно узнать или поговорить)

CJ Silverio, ex-CTO npm-а, выступила на JSConf про npm, JavaScript и проблемы, которыми грозит их интеграция.

— npm — частная компания. Они не подотчётны Node.js Foundation или JS Foundation. Они не подотчётны никому
— При этом весь JS зависит от их реестра. Вы можете использовать yarn, pnpm или другой CLI, но в конечном итоге, все пакеты берутся из реестра npm
— npm — частная компания, которой нужно зарабатывать деньги. При этом содержать реестр дорого — и чем более он популярен, тем он становится дороже
— Если завтра npm продастся Oracle или обанкротится, и реестр пропадёт, мы ничего не сможем с этим сделать

Как мы до такого дошли и что теперь с этим делать: https://youtu.be/MO8hZlgK5zc

За неделю в jsunderhood написал 13 тредов про перформанс :) Постепенно сброшу сюда все, а пока ловите начало:

1️⃣ Зачем вообще заботиться о перформансе: https://twitter.com/jsunderhood/status/1138392312285990912

2️⃣ Почему перформанс важен, даже несмотря на то, что скорость интернета растёт: https://twitter.com/jsunderhood/status/1138399827098787841

Рик Харрис про проблемы веб-компонентов — того самого глобального «one framework to rule them all», который разрабатывается с 2011 и до сих пор отстаёт от других решений.

https://dev.to/richharris/why-i-don-t-use-web-components-2cia

​​Почему «давайте добавим для этого опцию» — это часто плохая идея. Классная классическая статья Джоэла Спольски: https://www.joelonsoftware.com/2000/04/12/choices/

“Every time you provide an option, you’re asking the user to make a decision.

“Asking the user to make a decision isn’t in itself a bad thing. Freedom of choice can be wonderful. People love to order espresso-based beverages at Starbucks because they get to make so many choices. Grande-half-caf-skim-mocha-Valencia-with-whip. Extra hot!

“The problem comes when you ask them to make a choice that they don’t care about.”

Цена JavaScript в 2019 — новая статья (+ видео) в блоге V8 от Эдди Османи.
https://v8.dev/blog/cost-of-javascript-2019#json

Черт, а я ведь так и не дописал!

​​Ловите теперь все треды про перформанс с моей недели jsunderhood:

💸 Важность перформанса
— Зачем вообще заботиться о перформансе
— И почему перформанс важен, даже несмотря на то, что скорость интернета растёт

🔦 Лайтхаус
— У меня долго загружается приложение. С чего начать?

📐 Метрики
— Что такое First Meaningful Paint и как его улучшать
— Что такое Time to Interactive и как его улучшать

⚡️ Оптимизации для First Meaningful Paint
— Сервер-сайд-рендеринг
— Critical CSS
— HTTP/2, brotli, CDN
— Предзагрузка ресурсов

✨ Оптимизации для Time to Interactive
— Код-сплиттинг
— Оптимизация зависимостей
— Как ВК, КупиБилет и другие ребята решают/решали проблемы с высоким TTI

🌟 Другие оптимизации
— Шрифты
— Render-blocking resources
— Сервис-воркеры
— Браузерный кеш

🌈 Разное
— Класть скрипты в конец body cо script async/defer не обязательно
— Загружать React/Vue/jQuery с CDN-а — плохо
— Юзать webp для картинок — хорошо (а в сафари фолбечиться на png/jpg тегом <picture>)

​​Дэн Абрамов про algebraic effects — новую идею в языках программирования, которая может стать мейнстримом через несколько лет: https://overreacted.io/algebraic-effects-for-the-rest-of-us/

⁠Пару недель назад Slack выпустил переписанный клиент для десктопа — про это вы, наверное, уже знаете.

А ещё разработчики Slack-а написали статью про этот перезапуск:
— Как Slack переписал клиент и не допустил ошибки Netscape
— Почему приложение ело так много памяти раньше
— Зачем разделять старый и новый код при переписывании

➡ https://slack.engineering/rebuilding-slack-on-the-desktop-308d6fe94ae4

​​Инструменты разработчика

Последний месяц пользуюсь TabNine Deep, а две недели назад купил Quokka.js. По ощущениям, это лучшие апдейты моего процесса разработки за последний год.

TabNine Deep — это нейронка, которую разработчики натренировали на 8 млн файлов на Гитхабе, и которая по вашему проекту и этим файлам делает сложные предсказания кода. Выглядит это вот так (видео с их сайта):

​​и на практике работает так же офигенно.

(Мой последний любимый юзкейс — автодополнять импорты, не печатая руками все эти скобочки и кавычки ↓)

А Quokka.js — это плейграунд для JS- и TS-файлов, который, пока вы пишете файл, выполняет его и показывает результат. Я использую его для двух задач:
— чтобы быстро проверить какую-то функцию, убедиться, что она работает, и поправить ошибки
— чтобы править файл в проекте и смотреть, какой результат он выдаёт

Ещё Никита Прокопов писал, что интерактивная разработка — кайф и повышает качество кода (и, как обычно, хвалил Clojure). Так вот, Quokka — самое близкое к действительно интерактивной разработке для JS-а, что я видел. <3

(Гифка с их сайта ↓)

⁠Ещё одна статья от Slack про переписанный клиент и перформанс — в этот раз про сервис-воркеры:
— Как именно десктопный клиент Slack-а использует сервис-воркеры
— И что Slack делает, чтобы закешированное приложение не слишком устаревало и не ломалось, если API сервера поменялся

➡️ https://slack.engineering/service-workers-at-slack-our-quest-for-faster-boot-times-and-offline-support-3492cf79c88

⁠Пока я отчаянно пытаюсь дописать пост про кейс, когда Реакт быстрее, чем CSS-переменные, ловите пачку анонсов:

⚡️ 8 октября в Лондоне и 20 ноября в Амстердаме (но второе ещё не точно) выступлю с докладом «I reviewed 200 perf-related webpack plugins so that you don’t have to». Если будете где-то там, приходите послушать про все клёвые перформанс-тулы в экосистеме вебпака