Как работает JavaScript
Чтобы компьютер смог выполнить написанную разработчиком программу, ее нужно перевести на язык, понятный машине. Для этого предназначены специальные программы - движки.
Статья рассказывает о принципиальной схеме самого популярного движка JavaScript - V8, а также немного о сути интерпретации и компиляции кода и о JIT-компиляции.
Вкратце:
1. Парсер разбирает код на значимые части.
2. Строится абстрактное синтаксическое дерево (AST).
3. Интерпретатор создает байт-код, который сразу же начинает выполняться в браузере, чтобы пользователь не ждал.
4. Одновременно профайлер и компилятор работают над оптимизацией кода.
5. Как только готова оптимизированная версия, она заменяет временный байт-код.
Подробнее: https://nuancesprog.ru/p/4553/
#javascript #v8 #engine #browser
Чтобы компьютер смог выполнить написанную разработчиком программу, ее нужно перевести на язык, понятный машине. Для этого предназначены специальные программы - движки.
Статья рассказывает о принципиальной схеме самого популярного движка JavaScript - V8, а также немного о сути интерпретации и компиляции кода и о JIT-компиляции.
Вкратце:
1. Парсер разбирает код на значимые части.
2. Строится абстрактное синтаксическое дерево (AST).
3. Интерпретатор создает байт-код, который сразу же начинает выполняться в браузере, чтобы пользователь не ждал.
4. Одновременно профайлер и компилятор работают над оптимизацией кода.
5. Как только готова оптимизированная версия, она заменяет временный байт-код.
Подробнее: https://nuancesprog.ru/p/4553/
#javascript #v8 #engine #browser
Приоритеты загрузки JavaScript
Небольшая шпаргалка по приоритетам разных техник загрузки JavaScript:
https://prglb.ru/4jxkx
#browser #performance
Небольшая шпаргалка по приоритетам разных техник загрузки JavaScript:
https://prglb.ru/4jxkx
#browser #performance
Cache API в JavaScript
Разбираемся, как кэшировать ресурсы с помощью сервис-воркеров и Cache API: https://prglb.ru/1h202
#performance #browser
Разбираемся, как кэшировать ресурсы с помощью сервис-воркеров и Cache API: https://prglb.ru/1h202
#performance #browser
Forwarded from Webchic - frontend, backend, ci/cd
Новые фичи в вебе за 2020, которые вы могли пропустить:
— IntersectionObserver V2 (позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport)
— Screen Wake Lock API (позволяет предотвратить затемнение или блокировку экрана устройствами, когда приложение должно продолжать работу)
— CSS :any-link селектор (стилизует каждый элемент <a>, <link>, <area>, в котором определен href)
— CSS content-visibility (указывает браузеру какую разметку не отрисовывать, для ускорения отрисовки видимой части контента)
— CSS ::marker (применяет стили к маркеру элемента списка, которые обычно содержит значок или номер)
— URL Scroll-To-Text Fragment (скролл к фрагменту текста на странице)
— Gap для Flexbox (пропуски, как в GRID)
— CSS Revert (откат стилей назад по каскаду на шаг)
— AVIF (новый формат картинок с очень хорошим сжатием и небольшой потерей качества)
#browser_api #css
К статье(eng)
— IntersectionObserver V2 (позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport)
— Screen Wake Lock API (позволяет предотвратить затемнение или блокировку экрана устройствами, когда приложение должно продолжать работу)
— CSS :any-link селектор (стилизует каждый элемент <a>, <link>, <area>, в котором определен href)
— CSS content-visibility (указывает браузеру какую разметку не отрисовывать, для ускорения отрисовки видимой части контента)
— CSS ::marker (применяет стили к маркеру элемента списка, которые обычно содержит значок или номер)
— URL Scroll-To-Text Fragment (скролл к фрагменту текста на странице)
— Gap для Flexbox (пропуски, как в GRID)
— CSS Revert (откат стилей назад по каскаду на шаг)
— AVIF (новый формат картинок с очень хорошим сжатием и небольшой потерей качества)
#browser_api #css
К статье(eng)