Three.js Journey by Bruno Simon
Bruno Simon - весьма известная личность в мире three.js сообщества. Многие из вас, наверняка, видели его сайт портфолио. Впечатляет, не правда ли?
Около полугода назад я проходил его курс Three.js Journey по работе с 3D в браузере с помощью библиотеки three.js. Хочу сказать, что это был один из интереснейших курсов! И поэтому делюсь сейчас им с вами.
Курс записан на английском языке, но лексика настолько простая, что вы почувствуете себя носителем языка, а смысл будет максимально прозрачен. Порой, мне даже казалось, что курс локализирован на русский. Вы можете приобрести курс на официальной странице по ссылке выше или же найти его на различных распространяющих ресурсах, таких как coursehunter и подобных.
Если у вас был также позитивный опыт прохождения каких-либо других курсов, буду рад, если поделитесь им и ссылкой на курс в комментариях.
Bruno Simon - весьма известная личность в мире three.js сообщества. Многие из вас, наверняка, видели его сайт портфолио. Впечатляет, не правда ли?
Около полугода назад я проходил его курс Three.js Journey по работе с 3D в браузере с помощью библиотеки three.js. Хочу сказать, что это был один из интереснейших курсов! И поэтому делюсь сейчас им с вами.
Курс записан на английском языке, но лексика настолько простая, что вы почувствуете себя носителем языка, а смысл будет максимально прозрачен. Порой, мне даже казалось, что курс локализирован на русский. Вы можете приобрести курс на официальной странице по ссылке выше или же найти его на различных распространяющих ресурсах, таких как coursehunter и подобных.
Если у вас был также позитивный опыт прохождения каких-либо других курсов, буду рад, если поделитесь им и ссылкой на курс в комментариях.
Адаптивная верстка. Функции min, max в CSS 🖥
Скорее всего вам доводилось писать код вида:
Его можно реализовать лаконичнее помощью функции min():
Функция выберет минимум из значений. Для широких контейнеров блок будет ограничен 320px, а для меньших 320px блок займет всю ширину родителя.
Аналогично работает функция max() - выбирает максимум из переданных значений. То есть ограничивает минимально возможный размер, стремясь выбрать большее.
Скорее всего вам доводилось писать код вида:
.element {
width: 100%;
max-width: 320px;
}
Его можно реализовать лаконичнее помощью функции min():
.element {
width: min(100%, 320px);
}
Функция выберет минимум из значений. Для широких контейнеров блок будет ограничен 320px, а для меньших 320px блок займет всю ширину родителя.
Аналогично работает функция max() - выбирает максимум из переданных значений. То есть ограничивает минимально возможный размер, стремясь выбрать большее.
Please open Telegram to view this post
VIEW IN TELEGRAM
Адаптивная верстка. Функция clamp в CSS 🖥
Из поста выше мы узнали о функциях min() и max() позволяющих ограничить максимальный и минимальный размеры блока.
А что если ограничить сразу с двух сторон?
Функция clamp() соединяет в себе функции min() и max(). Она принимает три значения, и в этом случае порядок значений внутри скобок важен. Первым пишется минимальное значение, вторым — рекомендованное и третьим — максимальное. Например:
Если рекомендованное значение не выходит за пределы минимального и максимального, функция выбирает именно его. Таким образом её весьма удобно использовать для реализации адаптивных шрифтов. Шрифт будет рекомендованного размера, и никогда меньше минимального, и не больше максимального.
Из поста выше мы узнали о функциях min() и max() позволяющих ограничить максимальный и минимальный размеры блока.
А что если ограничить сразу с двух сторон?
Функция clamp() соединяет в себе функции min() и max(). Она принимает три значения, и в этом случае порядок значений внутри скобок важен. Первым пишется минимальное значение, вторым — рекомендованное и третьим — максимальное. Например:
h1 {
font-size: clamp(18px, 2.2vw, 3.6rem);
}
Если рекомендованное значение не выходит за пределы минимального и максимального, функция выбирает именно его. Таким образом её весьма удобно использовать для реализации адаптивных шрифтов. Шрифт будет рекомендованного размера, и никогда меньше минимального, и не больше максимального.
Please open Telegram to view this post
VIEW IN TELEGRAM
Запасное значение CSS-переменных
Не многие знают, но у CSS-свойств может быть задано значение по умолчанию. Для этого, при использовании переменной, через запятую укажите второе значение.
Оно будет использовано, если переменная
Привычка писать значения по умолчанию для переменных в какой-то момент спасёт вас от часов поиска ошибок.
Не многие знают, но у CSS-свойств может быть задано значение по умолчанию. Для этого, при использовании переменной, через запятую укажите второе значение.
button {
background: var(--color-accent, #faeedd);
}
Оно будет использовано, если переменная
--color-accent
не была определена выше. Привычка писать значения по умолчанию для переменных в какой-то момент спасёт вас от часов поиска ошибок.
Node.js 22 LTS
Вышла стабильная версия Node.js v22. Краткий перечень того, что изменилось:
🔸 V8 обновлен до 12.4
Релиз 12.4 включает в себя новые фичи такие как: WebAssembly сборщик мусора, Array.fromAsync, методы Set и хелперы итератора
🔸 Maglev
Компилятор V8 Maglev теперь включен по умолчанию. Это новый компилятор быстрых оптимизаций.
🔸 Support require()ing synchronous ESM graphs
Добавлена поддержка require() для синхронных ESM. Пока что добавлена в экспериментальном режиме под флагом
🔸 Запуск package.json скриптов
Новая экспериментальная фича запуска скриптов: node --run <script-in-package-json>
🔸 Стандартное значение High Water Mark
Увеличено для потоков с 16КБ до 64КБ. Это дает прирост производительности за счет немного большего потребления памяти.
🔸 Watch Mode
Стабильная поддержка горячей перезагрузки
🔸 WebSocket
Совместимая с браузером реализация WebSocket, ранее доступная под флагом, теперь включена по умолчанию. Это предоставляет websocket клиент для node без внешних зависимостей.
🔸 glob and globSync
В node:fs добавлено встроенное решение для работы glob. Это поиск файлов по пути на основе регулярных выражений. Достаточно мощный механизм поиска.
🔸 Улучшенный перфоманс AbortSignal
Улучшена эффективность создания инстансов AbortSignal, как следствие улучшение производительности fetch и тест-ранеров.
Подробнее о релизе можно почитать в официальном анонсе.
Вышла стабильная версия Node.js v22. Краткий перечень того, что изменилось:
🔸 V8 обновлен до 12.4
Релиз 12.4 включает в себя новые фичи такие как: WebAssembly сборщик мусора, Array.fromAsync, методы Set и хелперы итератора
🔸 Maglev
Компилятор V8 Maglev теперь включен по умолчанию. Это новый компилятор быстрых оптимизаций.
🔸 Support require()ing synchronous ESM graphs
Добавлена поддержка require() для синхронных ESM. Пока что добавлена в экспериментальном режиме под флагом
--experimental-require-module.
Таким образом require можно будет использовать для загрузки ES-модулей, в частности использовать динамические импорты, реализующие возможность ленивой загрузки.🔸 Запуск package.json скриптов
Новая экспериментальная фича запуска скриптов: node --run <script-in-package-json>
🔸 Стандартное значение High Water Mark
Увеличено для потоков с 16КБ до 64КБ. Это дает прирост производительности за счет немного большего потребления памяти.
🔸 Watch Mode
Стабильная поддержка горячей перезагрузки
node --watch
(замена nodemon) Ранее была добавлена в 18 версии в экспериментальном режиме.🔸 WebSocket
Совместимая с браузером реализация WebSocket, ранее доступная под флагом, теперь включена по умолчанию. Это предоставляет websocket клиент для node без внешних зависимостей.
🔸 glob and globSync
В node:fs добавлено встроенное решение для работы glob. Это поиск файлов по пути на основе регулярных выражений. Достаточно мощный механизм поиска.
🔸 Улучшенный перфоманс AbortSignal
Улучшена эффективность создания инстансов AbortSignal, как следствие улучшение производительности fetch и тест-ранеров.
Подробнее о релизе можно почитать в официальном анонсе.
Моя статья: Bun vs Node.js
Написал статью о сравнении двух рантайм сред Bun и Node.js. Это моя первая публикация в крупном онлайн журнале, в связи с чем, можно поздравить меня с дебютом.
В статье объединил как информацию полученную из открытых источников, так и исследования независимых экспертов. Последние же показали, что авторы Bun явно преувеличивают свои заслуги перед Node.js.
Подробнее вы можете ознакомиться со статьёй по ссылке в журнале Код Дурова
Моё резюме из проведённого исследования - Node.js более чем конкурентноспособен и остается актуальным и по сей день. А наличие сильного конкурента в виде Bun даёт Node.js дополнительный стимул к росту.
Написал статью о сравнении двух рантайм сред Bun и Node.js. Это моя первая публикация в крупном онлайн журнале, в связи с чем, можно поздравить меня с дебютом.
В статье объединил как информацию полученную из открытых источников, так и исследования независимых экспертов. Последние же показали, что авторы Bun явно преувеличивают свои заслуги перед Node.js.
Подробнее вы можете ознакомиться со статьёй по ссылке в журнале Код Дурова
Моё резюме из проведённого исследования - Node.js более чем конкурентноспособен и остается актуальным и по сей день. А наличие сильного конкурента в виде Bun даёт Node.js дополнительный стимул к росту.
Код Дурова
Bun.js vs Node.js: выбираем среду исполнения JavaScript
Bun — это новая среда исполнения Javascript-кода, по сути аналог Node.js. Давайте сравним их начиная с общего обзора, заканчивая производительностью по различным метрикам и в разных ситуациях.
AOS Animate on scroll library ☁️
Нашёл для вас классную библиотеку (от разработчика Vue), позволяющую легко анимировать элементы на веб-странице. Для этого вам необходимо подключить CSS и JS в ваш проект и добавить скрипт
Добавив в html
Получается красиво и не нужно тратить кучу времени на анимации.
Подробнее здесь: https://michalsnik.github.io/aos/
Нашёл для вас классную библиотеку (от разработчика Vue), позволяющую легко анимировать элементы на веб-странице. Для этого вам необходимо подключить CSS и JS в ваш проект и добавить скрипт
AOS.init();
Добавив в html
data-aos="fade-in"
вы анимируете элемент.Получается красиво и не нужно тратить кучу времени на анимации.
Подробнее здесь: https://michalsnik.github.io/aos/
Please open Telegram to view this post
VIEW IN TELEGRAM
Музыкальные ноты на CSS 🎼
Знали ли вы, что музыку можно писать на react? Об этом я как-то упоминал в докладе по реконсайлеру. Но для полной красоты нам нужно где-то записать и ноты.
В статье Пишем музыку на CSS Grid автор рассказывает, как с помощью grid и svg можно реализовать нотный стан прямо на вашем сайте. Невероятно!
Знали ли вы, что музыку можно писать на react? Об этом я как-то упоминал в докладе по реконсайлеру. Но для полной красоты нам нужно где-то записать и ноты.
В статье Пишем музыку на CSS Grid автор рассказывает, как с помощью grid и svg можно реализовать нотный стан прямо на вашем сайте. Невероятно!
Please open Telegram to view this post
VIEW IN TELEGRAM
Каменная кладка от Google или display: masonry 🧱
Команда Chrome выдвинула предложение о добавлении в спецификацию свойства display: masonry. Но зачем, если есть display: grid?
Основная проблема, почему «каменная кладка» не может быть реализована как часть спецификации css grid - перфоманс браузера, связанный с механизмом работы отрисовки.
В статье на developer.chrome.com более подробно рассматриваются причины почему masonry не может быть частью grid, а также варианты использования этого свойства.
Статья в русском переводе читается достаточно тяжело, так что сразу рекомендую переходить к примерам использования.
Будет ли принято предложение и добавлено в спецификацию - время покажет. Мне почему-то кажется, что маловероятно, по крайней мере для себя не вижу практической ценности такого расположения элементов.
Команда Chrome выдвинула предложение о добавлении в спецификацию свойства display: masonry. Но зачем, если есть display: grid?
Основная проблема, почему «каменная кладка» не может быть реализована как часть спецификации css grid - перфоманс браузера, связанный с механизмом работы отрисовки.
В статье на developer.chrome.com более подробно рассматриваются причины почему masonry не может быть частью grid, а также варианты использования этого свойства.
Статья в русском переводе читается достаточно тяжело, так что сразу рекомендую переходить к примерам использования.
Будет ли принято предложение и добавлено в спецификацию - время покажет. Мне почему-то кажется, что маловероятно, по крайней мере для себя не вижу практической ценности такого расположения элементов.
Сколько зарабатывает инженер Google?💰
Быть в рынке - достаточно важно. О том, как быстро расти по зарплате я писал выше.
Здесь вы можете посмотреть уровень зарплат по крупнейшим Российским и мировым компаниям в зависимости от грейда.
Например, в Google L10 зарабатывает 272 574 804 ₽ гросс в год - я таких цифр даже не знаю. Но, даже если не L10, то весьма любопытно посмотреть и на другие цифры.
Быть в рынке - достаточно важно. О том, как быстро расти по зарплате я писал выше.
Здесь вы можете посмотреть уровень зарплат по крупнейшим Российским и мировым компаниям в зависимости от грейда.
Например, в Google L10 зарабатывает 272 574 804 ₽ гросс в год - я таких цифр даже не знаю. Но, даже если не L10, то весьма любопытно посмотреть и на другие цифры.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Repl JS - онлайн редактор для учебы и тестирования 🖥
Онлайн-редактор JavaScript позволяющий проследить поэтапно исполнение JS кода.
Код выполняется по мере ввода и показывает результаты. Очень удобно, если вы хотите понять, как работает JavaScript или визуально продемонстрировать его работу шаг за шагом.
Поиграться можно здесь
Инструмент для меня выглядит очень полезным. Надеюсь, и вам пригодится тоже🔥
Сергей Константинов | IT и не только. Подписаться!
Онлайн-редактор JavaScript позволяющий проследить поэтапно исполнение JS кода.
Код выполняется по мере ввода и показывает результаты. Очень удобно, если вы хотите понять, как работает JavaScript или визуально продемонстрировать его работу шаг за шагом.
Поиграться можно здесь
Инструмент для меня выглядит очень полезным. Надеюсь, и вам пригодится тоже
Сергей Константинов | IT и не только. Подписаться!
Please open Telegram to view this post
VIEW IN TELEGRAM
Как учиться эффективно? 🤓
Заканчиваю финальный монтаж видеоролика. Очень нравится картинка, как выглядит готовый таймлайн. Видео о том, как учиться эффективно скоро будет на канале.
Накидайте огонька 🔥
Заканчиваю финальный монтаж видеоролика. Очень нравится картинка, как выглядит готовый таймлайн. Видео о том, как учиться эффективно скоро будет на канале.
Накидайте огонька 🔥
Как Изучать НОВЫЕ НАВЫКИ | 10 Советов Эффективного Обучения 📱
Мы учимся постоянно на протяжении всей жизни. Для меня было открытием, что не обязательно вечно учиться чему-то, например, английскому языку всю жизнь. Любой навык можно изучить за ограниченное количество времени. Для этого нужно учиться правильно.
В видео я собрал 10 советов эффективного обучения. Как учиться меньше, но качественнее.
Не тратьте много времени и осваивайте навыки один за другим.
Подробнее в видео на YouTube
Мы учимся постоянно на протяжении всей жизни. Для меня было открытием, что не обязательно вечно учиться чему-то, например, английскому языку всю жизнь. Любой навык можно изучить за ограниченное количество времени. Для этого нужно учиться правильно.
В видео я собрал 10 советов эффективного обучения. Как учиться меньше, но качественнее.
Не тратьте много времени и осваивайте навыки один за другим.
Подробнее в видео на YouTube
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
10 Советов Эффективного Обучения
Учеба является неотъемлемой частью нашей жизни, и чтобы изучать новые навыки быстрее и продуктивнее нам нужно делать это правильно. В этом видео я дам 10 советов, как учиться максимально эффективно и при этом не потерять мотивацию на следующий день.
Мой…
Мой…
This media is not supported in your browser
VIEW IN TELEGRAM
Что должен знать ДЖУНИОР Фронтенд разработчик в 2024?
Почти все роадмапы - большие доски миро с кучей технологий, которые в реальности даже не используются. Вопрос - зачем?
В этом собрал список необходимых технологий для начинающего разработчика и явно выделил то, что учить не нужно.
Ссылка на видео📱
Ссылка на план из видео📱
Накидайте реакций👍
Почти все роадмапы - большие доски миро с кучей технологий, которые в реальности даже не используются. Вопрос - зачем?
В этом собрал список необходимых технологий для начинающего разработчика и явно выделил то, что учить не нужно.
Ссылка на видео
Ссылка на план из видео
Накидайте реакций
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
Что должен знать ДЖУНИОР Фронтенд разработчик в 2024? Необходимая БАЗА. Актуальный Roadmap!
Почти все роадмапы - большие доски миро с кучей технологий, которые в реальности даже не используются. Вопрос - зачем?
В этом видео я собрал только НУЖНОЕ для начинающего в IT.
Посмотрев это видео, вы узнаете:
- Что должен знать джуниор фронтен разработчик?…
В этом видео я собрал только НУЖНОЕ для начинающего в IT.
Посмотрев это видео, вы узнаете:
- Что должен знать джуниор фронтен разработчик?…
Давайте синхронизируемся 🔄
Сейчас корректирую план контента и хочется его сделать максимально ориентированным на вас. Плюс после недавнего добавления в папку аудитория каналов стала сильно разной. Поэтому давайте познакомимся и синхронизируемся.
Кстати, я веду свой youtube-канал где видео-контент выходит в первую очередь. Поэтому подписывайтесь, если вы не подписаны и участвуйте в опросах ниже. Мне очень важна ваша обратная связь.
P.S. Если в опросе ниже не будет подходящего ответа или вам интересно что-то конкретное, пишите об этом в комментариях. Лайкайте то, что вам также интересно.
Сейчас корректирую план контента и хочется его сделать максимально ориентированным на вас. Плюс после недавнего добавления в папку аудитория каналов стала сильно разной. Поэтому давайте познакомимся и синхронизируемся.
Кстати, я веду свой youtube-канал где видео-контент выходит в первую очередь. Поэтому подписывайтесь, если вы не подписаны и участвуйте в опросах ниже. Мне очень важна ваша обратная связь.
P.S. Если в опросе ниже не будет подходящего ответа или вам интересно что-то конкретное, пишите об этом в комментариях. Лайкайте то, что вам также интересно.
Please open Telegram to view this post
VIEW IN TELEGRAM
Какой тип видео-контента вам интересен? (множественный выбор)
Anonymous Poll
18%
Образовательный для новичков. Например: «Что такое замыкание в JS?», «База HTML/CSS в одном видео»
36%
Хардовый для новичков. Например: «React - полный курс» или «TypeScript за час»
59%
Хардовый, не для новичков. Например: «WebRTC видео-чат», «Архитектура Angular»
24%
Саморазвитие и мотивация. Например: «Как ставить цели и достигать их?», «Как найти работу новичку?»
22%
Лайфстайл. Например: «День из жизни разработчика»
38%
Разработка игры/графика. Например: «Phaser. Warcraft 2D на TypeScript»
2%
Напишу свое в комментариях к посту выше
Вы не найдёте работу, если продолжите искать также
К такому выводу я пришёл, общаясь с большинством знакомых, кто находится в поиске первой работы программистом.
Не важно, изучаете ли вы сейчас JS или уже закончили курс и начали искать. Большое заблуждение, что: “вот я закончу курс и найду работу”. Нет! Чем ближе к финишу, тем сильнее нужно грести.
Вы должны иметь четкие метрики, понимание что делать, точка А, точка Б, где я и какая моя цель?
Конкретно:
Вам необходимо выйти из состояния ученика в состояние взрослого. Вы должны получить деньги за свою работу. Если вы уже умеете верстать сайты - вы можете сделать сайт для вашего знакомого за 100 рублей, или за 10 р. или за 1 рубль. Главное, как можно скорее начать монетизировать ваш навык, а значит - получать коммерческий опыт.
Поставить цель: конкретную, реалистичную, измеримую. Точка А - точка Б.
Например, моя цель за месяц сделать 1000 качественных откликов. Это каждый день ~33 отклика. Качественный означает с сопроводительным письмом, таргетированный, решающий проблему компании. По 5 минут на отклик - 3ч15мин/день. Откликаться не только на hh.ru, но и на всех других ресурсах, карьерных сайтах, искать знакомых внутри, активно лезть везде где возможно, хоть даже писать в соц. сетях CEO компаний.
В начале карьеры вам нужно себя продать. Продав себя другу за 1 рубль, вы начинаете увеличивать свой чек до 100р, далее 500р, 1000р, нарабатываете своё портфолио. Чтобы устроиться джуном у вас уже должен быть год работы. Где вы его возьмете? Нарисуете? Нарисуйте. И вы сможете конкурировать с другими выпускниками курсов, кто также нарисовал себе опыт.
Только реальный коммерческий опыт, реальные проекты и нетворкинг даст вам эту долгожданную цель - работа в IT. Поздравляю.
P.S. Если интересно, отдельным постом напишу метод постановки целей, которым пользуюсь я сам и который работает.
К такому выводу я пришёл, общаясь с большинством знакомых, кто находится в поиске первой работы программистом.
Не важно, изучаете ли вы сейчас JS или уже закончили курс и начали искать. Большое заблуждение, что: “вот я закончу курс и найду работу”. Нет! Чем ближе к финишу, тем сильнее нужно грести.
Вы должны иметь четкие метрики, понимание что делать, точка А, точка Б, где я и какая моя цель?
Конкретно:
Вам необходимо выйти из состояния ученика в состояние взрослого. Вы должны получить деньги за свою работу. Если вы уже умеете верстать сайты - вы можете сделать сайт для вашего знакомого за 100 рублей, или за 10 р. или за 1 рубль. Главное, как можно скорее начать монетизировать ваш навык, а значит - получать коммерческий опыт.
Поставить цель: конкретную, реалистичную, измеримую. Точка А - точка Б.
Например, моя цель за месяц сделать 1000 качественных откликов. Это каждый день ~33 отклика. Качественный означает с сопроводительным письмом, таргетированный, решающий проблему компании. По 5 минут на отклик - 3ч15мин/день. Откликаться не только на hh.ru, но и на всех других ресурсах, карьерных сайтах, искать знакомых внутри, активно лезть везде где возможно, хоть даже писать в соц. сетях CEO компаний.
В начале карьеры вам нужно себя продать. Продав себя другу за 1 рубль, вы начинаете увеличивать свой чек до 100р, далее 500р, 1000р, нарабатываете своё портфолио. Чтобы устроиться джуном у вас уже должен быть год работы. Где вы его возьмете? Нарисуете? Нарисуйте. И вы сможете конкурировать с другими выпускниками курсов, кто также нарисовал себе опыт.
Только реальный коммерческий опыт, реальные проекты и нетворкинг даст вам эту долгожданную цель - работа в IT. Поздравляю.
P.S. Если интересно, отдельным постом напишу метод постановки целей, которым пользуюсь я сам и который работает.
Как работает JavaScriptCore под капотом?
Последнее время, все больше мое внимание занимает движок JavaScriptCore. Для тех кто не знаком, JSC - это движок, который используется в Safari под капотом и на всех iPhone для выполнения JavaScript кода. Но не спешите думать, что раз Safari, значит всё плохо. Напротив, это лучшее, что есть в WebKit. А что, если я вам скажу, что он быстрее V8?
Каждый JS код, который мы исполняем с JSC проходит 3 стадии (рис. 1):
1. Лексический анализ (parser/Lexer.cpp).
Здесь происходит разбивка кода на токены. Разбивка происходит по заранее определенным символам: таким как ключевые слова, операции, имена переменных и т.д.
2. Парсинг (parser/JSParser.cpp).
Парсер выстраивает абстрактное синтаксическое дерево (AST) на основе полученной от лексера разбивки на токены. Например, для выражения «a+b» будет построено дерево, где “+” - операция (родитель), а «а» и «b» - его листья.
3. LLInt (Low-level interpreter)
На этом этапе полученное AST интерпретируется в байт-код, который JSC может исполнить, используя процессор. Например, выражение «a+b» будет преобразовано в байт-код вида:
Четыре уровня оптимизации JSC
1. LLInt - низкоуровневый интерпретатор, как упоминалось ранее, который компилирует JS инструкции в байт-код.
2. Baseline JIT* (500 итераций) - на этом этапе фрагмент кода, который исполнился 500 раз преобразуется в машинный код на основе шаблонов. Никакой дополнительной логики относительно связи с другими инструкциями, только готовые шаблоны.
3. Data Flow Graph (DFG) JIT (1000 итераций) - имеет промежуточное представление, которое преобразует JS инструкции в граф потока данных. После чего JIT-компилятор DFG может выполнять сложную оптимизацию, связанную с потоком кода. В приложении (рис. 2) проиллюстрировано промежуточное представление DFG на примере простой функции:
4. Faster than Light (FTL) JIT (100 000 итераций) - в отличии от JIT-компилятора DFG, компилятор FTL фокусируется на оптимизации вне зависимости от того, на сколько дорогостоящей она может быть. FTL переиспользует оптимизацию DFG и добавляет еще большие улучшения.
* JIT - Just In Time компилятор, то есть компиляция во время исполнения. Противоположность AOT, где компиляция происходит до запуска программы, например, в C/С++ (рис. 3).
Последнее время, все больше мое внимание занимает движок JavaScriptCore. Для тех кто не знаком, JSC - это движок, который используется в Safari под капотом и на всех iPhone для выполнения JavaScript кода. Но не спешите думать, что раз Safari, значит всё плохо. Напротив, это лучшее, что есть в WebKit. А что, если я вам скажу, что он быстрее V8?
Каждый JS код, который мы исполняем с JSC проходит 3 стадии (рис. 1):
1. Лексический анализ (parser/Lexer.cpp).
Здесь происходит разбивка кода на токены. Разбивка происходит по заранее определенным символам: таким как ключевые слова, операции, имена переменных и т.д.
2. Парсинг (parser/JSParser.cpp).
Парсер выстраивает абстрактное синтаксическое дерево (AST) на основе полученной от лексера разбивки на токены. Например, для выражения «a+b» будет построено дерево, где “+” - операция (родитель), а «а» и «b» - его листья.
3. LLInt (Low-level interpreter)
На этом этапе полученное AST интерпретируется в байт-код, который JSC может исполнить, используя процессор. Например, выражение «a+b» будет преобразовано в байт-код вида:
add loc3, loc1, loc2, OperandTypes(126, 126).
Оно складывает loc1
и loc2
, и сохраняет в переменную loc3
.Четыре уровня оптимизации JSC
1. LLInt - низкоуровневый интерпретатор, как упоминалось ранее, который компилирует JS инструкции в байт-код.
2. Baseline JIT* (500 итераций) - на этом этапе фрагмент кода, который исполнился 500 раз преобразуется в машинный код на основе шаблонов. Никакой дополнительной логики относительно связи с другими инструкциями, только готовые шаблоны.
3. Data Flow Graph (DFG) JIT (1000 итераций) - имеет промежуточное представление, которое преобразует JS инструкции в граф потока данных. После чего JIT-компилятор DFG может выполнять сложную оптимизацию, связанную с потоком кода. В приложении (рис. 2) проиллюстрировано промежуточное представление DFG на примере простой функции:
function Foo(arg) {
return this.y * arg[0];
}
4. Faster than Light (FTL) JIT (100 000 итераций) - в отличии от JIT-компилятора DFG, компилятор FTL фокусируется на оптимизации вне зависимости от того, на сколько дорогостоящей она может быть. FTL переиспользует оптимизацию DFG и добавляет еще большие улучшения.
* JIT - Just In Time компилятор, то есть компиляция во время исполнения. Противоположность AOT, где компиляция происходит до запуска программы, например, в C/С++ (рис. 3).