Всем привет✌️
На этой неделе стартанула Podlodka Crew по фронтенду. Если кто не слышал, это двухнедельный марафон с лекциями от разных спикеров (одна с утра, одна вечером), где довольно много интерактива (можно вызваться добровольцем на всяких активностях, поспрашивать мучающие тебя вопросы и т.п.). Это первый поток по фронту и он посвящен оптимизации фронта.
Сюда буду скидывать краткие заметки, чтобы не забыть (а может и еще кому полезно будет)
На этой неделе стартанула Podlodka Crew по фронтенду. Если кто не слышал, это двухнедельный марафон с лекциями от разных спикеров (одна с утра, одна вечером), где довольно много интерактива (можно вызваться добровольцем на всяких активностях, поспрашивать мучающие тебя вопросы и т.п.). Это первый поток по фронту и он посвящен оптимизации фронта.
Сюда буду скидывать краткие заметки, чтобы не забыть (а может и еще кому полезно будет)
1. Оптимизация изображений
Разница в использовании между
⁃ доступность (img - да)
⁃ сео( img - да)
⁃ производительность (img - да)
Оптимизации:
1.Ленивая загрузка
Как делали раньше.
Подписывались на
Теперь
IntersectionObserver + атрибут img
Подбираем для разных устройств разные картинки по качеству используя атрибут
- webp,
- avif (плохо поддерживается)
Чтобы сделать универсально можно заюзать такую конструкцию
- imagemin-webpack-plugin
- image-webpack-loader
- flexis/srcset-loader
imgproxy для динамических изображений
Разница в использовании между
<img> и стилизацией css через background-image⁃ доступность (img - да)
⁃ сео( img - да)
⁃ производительность (img - да)
Оптимизации:
1.Ленивая загрузка
Как делали раньше.
Подписывались на
scroll, resize, orientationchange и проверяли если ли изображение во viewportТеперь
IntersectionObserver + атрибут img
loading="lazy"
2. Вес изображенийПодбираем для разных устройств разные картинки по качеству используя атрибут
srcset = '1x 2x 3x'и как фолбек
src=''
Для css аналогично есть background-image: image-set(url)
Оптимизированные форматы изображений:- webp,
- avif (плохо поддерживается)
Чтобы сделать универсально можно заюзать такую конструкцию
<picture>Gif лучше конвертить в mp4 и использовать video
<source avif> // сначала avif
<source srcset webp> // если не сработало, то webp
<img loading='lazy'> // фолбек - img
</picture>
<video>3. Оптимизация на уровне сборщиков
<source ...>
</video>
- imagemin-webpack-plugin
- image-webpack-loader
- flexis/srcset-loader
imgproxy для динамических изображений
2. Оптимизация в бандлерах (webpack-5)
1. Treeshaking (трясем дерево зависимостей и смотрим что реально используется)
Конфиг webpack optimizations
В настройка babelrc (настраивает преобразование модулей) может быть косяк
modules: "cjs" - приводит все к commonJS - сложно оптимизровать - не делай так
modules : false - оставить как есть export и import
Webpack не анализирует модули без доп настроек.
Убираем неиспользуемые импорты (что есть в коде, но по факту не используется)
Под капотом webpack использует доп экспорты/импорты в бандле, это можно оптимизировать и сделать чтобы твой импорт указывал напрямую на функцию (без посреднических экспорт/импорт)
Настройка sideEffects.
Позволяет убирать модули без сайд эффектов (которые не изменяют global и тп). Как негласный стандарт многие библиотеки в package.json указывают, есть ли там функции с сайд эффектами через sideEffects: true/false/regex
2. Минимизация доп кода
У webpack 3 вида модулей:
- js/dynamic - commonjs
- js/auto -
- js/esm - импорт экспорт
Это указывается в pakage.json библиотек (поле type):
- commonJS
- auto
- module
Для commonJS treeShaking работать не будет, для auto как то сработает, для module - будет
Можно слепить вообще все в один модуль через concatinateModules
Классная мысль - сначала юзать простой Zero config для parcel, если нужно что то сложнее - то webpack.
1. Treeshaking (трясем дерево зависимостей и смотрим что реально используется)
Конфиг webpack optimizations
optimizations:
usedExports: true - включаем treeshaking
В настройка babelrc (настраивает преобразование модулей) может быть косяк
modules: "cjs" - приводит все к commonJS - сложно оптимизровать - не делай так
modules : false - оставить как есть export и import
Webpack не анализирует модули без доп настроек.
Убираем неиспользуемые импорты (что есть в коде, но по факту не используется)
optimizations:
innerGraph: trueПод капотом webpack использует доп экспорты/импорты в бандле, это можно оптимизировать и сделать чтобы твой импорт указывал напрямую на функцию (без посреднических экспорт/импорт)
optimizations:
providedExport: trueНастройка sideEffects.
optimizations:
sideEffects: true / по дефолтуПозволяет убирать модули без сайд эффектов (которые не изменяют global и тп). Как негласный стандарт многие библиотеки в package.json указывают, есть ли там функции с сайд эффектами через sideEffects: true/false/regex
2. Минимизация доп кода
У webpack 3 вида модулей:
- js/dynamic - commonjs
- js/auto -
- js/esm - импорт экспорт
Это указывается в pakage.json библиотек (поле type):
- commonJS
- auto
- module
Для commonJS treeShaking работать не будет, для auto как то сработает, для module - будет
Можно слепить вообще все в один модуль через concatinateModules
optimizations:
concatinateModules: trueКлассная мысль - сначала юзать простой Zero config для parcel, если нужно что то сложнее - то webpack.
Телеграм официально запустил 2 новых веб-клиента.
webk.telegram.org
webz.telegram.org
Рад, что смог приложить к этому руку и запилить несколько фич для версии Z.
webk.telegram.org
webz.telegram.org
Рад, что смог приложить к этому руку и запилить несколько фич для версии Z.
С чего начать оптимизацию перфоманса? (часть 1)
1. HTML:
- минификация
- потоковая отрисовка (помогает уменьшить TTFB (time to first byte))
Статья про обработку html сервис воркерами: https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/
2. CSS:
- минификация
- критический css:
заинлайнить в html
- загрузка не блокирующая рендер (хак: использовать
Посмотреть размер неиспользуемого css можно в devtools -> coverage
Полезные плагины для webpack:
- html-critical-webpack-plugin
- critters-webpack-plugin
Статья про блокирующий CSS https://timkadlec.com/remembers/2020-02-13-when-css-blocks/
3. Шрифты
- предзагружаем через link rel=preload
- указываем системный fallback шрифт
- кеширование
- используем font-display (swap или fallback)
4. Картинки
Статья https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
5. JS
загрузка и исполнение js может блокировать парсинг html
долгое исполнение js делает сайт не отзывчивым
- использовать async или defer аттрибуты
Теперь кстати парсинг html не блокируется при загрузке скриптов https://v8.dev/blog/v8-release-78
Уменьшаем размер
- минификация
- удаление ненужного:
dead-code elimination при помощи terser и env vars
- code splitting
devtools -> coverage посмотреть что нужно сразу после загрузки
https://webpack.js.org/guides/code-splitting/
обратить внимание на дудепликацию зависимостей
После code splitting возможно, что какой то функционал будет подгружаться динамически и где-то это может быть неприемлемо. Для этого нужно делать предзагрузку с preload/prefetch/preconnect/prerender/modulepreload.
1. HTML:
- минификация
- потоковая отрисовка (помогает уменьшить TTFB (time to first byte))
Статья про обработку html сервис воркерами: https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/
2. CSS:
- минификация
- критический css:
заинлайнить в html
<head> <style /> </head>
потому что пока не пришел ответ со стилями, браузер не начнет отрисовывать render tree- загрузка не блокирующая рендер (хак: использовать
<link href... media="print" onload="this.media='all'" - будет грузить стили, но т к медиа - print, не будет блокироваться рендер, а как загрузится, проставляем ему медиа - all (стили начинают применяться к рендеру))Посмотреть размер неиспользуемого css можно в devtools -> coverage
Полезные плагины для webpack:
- html-critical-webpack-plugin
- critters-webpack-plugin
Статья про блокирующий CSS https://timkadlec.com/remembers/2020-02-13-when-css-blocks/
3. Шрифты
- предзагружаем через link rel=preload
- указываем системный fallback шрифт
- кеширование
- используем font-display (swap или fallback)
4. Картинки
Статья https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
5. JS
загрузка и исполнение js может блокировать парсинг html
долгое исполнение js делает сайт не отзывчивым
- использовать async или defer аттрибуты
Теперь кстати парсинг html не блокируется при загрузке скриптов https://v8.dev/blog/v8-release-78
Уменьшаем размер
- минификация
- удаление ненужного:
dead-code elimination при помощи terser и env vars
- code splitting
devtools -> coverage посмотреть что нужно сразу после загрузки
https://webpack.js.org/guides/code-splitting/
обратить внимание на дудепликацию зависимостей
После code splitting возможно, что какой то функционал будет подгружаться динамически и где-то это может быть неприемлемо. Для этого нужно делать предзагрузку с preload/prefetch/preconnect/prerender/modulepreload.
Philipwalton
Smaller HTML Payloads with Service Workers
Thoughts on web development, open source, software architecture, and the future.
С чего начать оптимизацию перфоманса? (часть 2)
6. Runtime
Выполнение скриптов (особенно в начале работы приложения) может занимать много времени (типа 200мс это много), при этом браузер висит и не может обрабатывать пользовательский ввод. Как вариант, обмазать некоторые вещи setTimeout, сделав их асинхронным и дать возможность браузеру прорендерить и тп.
Как минус - суммарное время выполнения будет больше
Как плюс - UX будет значительно лучше
Подробнее - https://philipwalton.com/articles/idle-until-urgent/
7. Render
Рендерим только то, что видит юзер (Lazy Rendering)
8. Data Fetching Flow
По url понимать какие данные нужны и при загрузке js делать сразу загрузку данных и класть куда-нибудь в window (миллениалы изобрели SSR). Отличие от SSR - не нужно полностью вкореживать в архитектуру приложения SSR (не маяться с гидрацией и тп)
9. Сжатие
brotli, gzip
Подробнее: https://tech.oyorooms.com/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4
10. Кеширование
Http-cache + инвалидация кеша
11. Не забывать про алгоритмы и структуры данных 🙂
Большая статья про оптимизацию https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/#top
Статья про runtime https://habr.com/ru/company/hh/blog/517594/
Цена абстракций и фреймворков: https://javascript.plainenglish.io/javascript-frameworks-performance-comparison-2020-cd881ac21fce
Для мониторинга runtime можно использовать https://speedcurve.com/
Либо кастомно через https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark
6. Runtime
Выполнение скриптов (особенно в начале работы приложения) может занимать много времени (типа 200мс это много), при этом браузер висит и не может обрабатывать пользовательский ввод. Как вариант, обмазать некоторые вещи setTimeout, сделав их асинхронным и дать возможность браузеру прорендерить и тп.
Как минус - суммарное время выполнения будет больше
Как плюс - UX будет значительно лучше
Подробнее - https://philipwalton.com/articles/idle-until-urgent/
7. Render
Рендерим только то, что видит юзер (Lazy Rendering)
8. Data Fetching Flow
По url понимать какие данные нужны и при загрузке js делать сразу загрузку данных и класть куда-нибудь в window (миллениалы изобрели SSR). Отличие от SSR - не нужно полностью вкореживать в архитектуру приложения SSR (не маяться с гидрацией и тп)
9. Сжатие
brotli, gzip
Подробнее: https://tech.oyorooms.com/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4
10. Кеширование
Http-cache + инвалидация кеша
11. Не забывать про алгоритмы и структуры данных 🙂
Большая статья про оптимизацию https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/#top
Статья про runtime https://habr.com/ru/company/hh/blog/517594/
Цена абстракций и фреймворков: https://javascript.plainenglish.io/javascript-frameworks-performance-comparison-2020-cd881ac21fce
Для мониторинга runtime можно использовать https://speedcurve.com/
Либо кастомно через https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark
Philipwalton
Idle Until Urgent
Thoughts on web development, open source, software architecture, and the future.
Хей, друзья!
Тут мой коллега Михаил выступает на онлайн митапе Volga JS Online. Он поделится опытом про разработку умных устройств для дома. Приходите!
📆 27 апреля | 18:00 по МСК
👉🏻 Обязательная регистрация тут https://volgajs.timepad.ru/event/1617413/#
Тут мой коллега Михаил выступает на онлайн митапе Volga JS Online. Он поделится опытом про разработку умных устройств для дома. Приходите!
📆 27 апреля | 18:00 по МСК
👉🏻 Обязательная регистрация тут https://volgajs.timepad.ru/event/1617413/#
Оптимизация. Заметки после live-coding (wepback-4)
После просмотра во вкладке network можно заметить загрузку жирного бандла. Посмотрим через webpack-bundle-analyzer что лишнее.
Возможные проблемы:
1 - неоптимальный бандл
2 - moment.js (или любая другая библиотека) грузит все локали и лишние зависимости
3 - CSS внутри JS
4 - нет code splitting
Возможные причины:
1 - несколько версий одной библиотеки
2 - грузится весь пакет ради одной функции
3 - лишние полифилы
4 - отсутствие хеша зависимого от контента (а не от билда) в имени бандла
5 - сборка не в production mode
6 - неподходящие source maps
▫️CSS
Выдираем css из бандла с помощью MiniCssExtractPlugin
▫️Fonts
Выносим шритфы из бандла с помощью fileLoader c
Используем
▫️Code Spliting
1 - для роутинга
2 - тяжелый js
3 - что не нужно сейчас
4 - что редко менятеся (и можно закешировать, проставляя [contentHash] в webpack, а не [hash])
Роутинг сплитится при помощи React lazy + в tsconfig прописать
После просмотра во вкладке network можно заметить загрузку жирного бандла. Посмотрим через webpack-bundle-analyzer что лишнее.
Возможные проблемы:
1 - неоптимальный бандл
2 - moment.js (или любая другая библиотека) грузит все локали и лишние зависимости
3 - CSS внутри JS
4 - нет code splitting
Возможные причины:
1 - несколько версий одной библиотеки
2 - грузится весь пакет ради одной функции
3 - лишние полифилы
4 - отсутствие хеша зависимого от контента (а не от билда) в имени бандла
5 - сборка не в production mode
6 - неподходящие source maps
▫️CSS
Выдираем css из бандла с помощью MiniCssExtractPlugin
▫️Fonts
Выносим шритфы из бандла с помощью fileLoader c
options : {
limit: 1024
}
▫️Конекретный пример с использованием определенной локали для moment.jsИспользуем
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/);
что позволяет выбросить остальные локали▫️Code Spliting
1 - для роутинга
2 - тяжелый js
3 - что не нужно сейчас
4 - что редко менятеся (и можно закешировать, проставляя [contentHash] в webpack, а не [hash])
Роутинг сплитится при помощи React lazy + в tsconfig прописать
{
module: esnext
moduleResolution: "node"
}
Разбиваем бандл дальше через optimization настройку webpackoptimization: {
minimize: true,
splitChunks: {
cacheGroups: {
uikit (или любое другое проперти): {
test: тут regex,
name: "uikit",
chunks: "all",
priority: 4 (любое число в зависимости от того, нужно ли сначала сбилдить этот бандл чтобы он не вошел в другой бандл)
}
}
}
}npm
npm: webpack-bundle-analyzer
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. Latest version: 4.10.2, last published: a year ago. Start using webpack-bundle-analyzer in your project by running `npm i webpack-bundle-analyzer`. There…
Forwarded from запуск завтра
Если (когда) менты отберут у вас телефон и разблокируют его, им нужно будет вытащить из него информацию. Есть два способа: 1) глазками прокликать иконки на рабочем столе, просмотреть чаты и документы 2) вытащить информацию на компьютер и исследовать её с удобством. Для этого есть специальные программы.
Один из производителей такой программы для властей разных стран — Cellebrite, недавно публично хвастался, что умеет вытаскивать данные из Signal. Это правда, если власти смогли разблокировать телефон, то они могут вытащить из него все чаты, так же, как могли бы увидеть их глазами. Эта программа используется спецслужбами по всему миру для проведения официальных и не очень официальных криминологических экспертиз.
Сегодня Signal выложили ответочку. Они где-то раздобыли (в оригинале «fell from the truck» — «свалилась с телеги, нашли на дороге») официальную коробочку с этой программой, исследовали её и обнаружили в ней тонну уязвимостей. Таких уязвимостей, что можно составить специальный файл, который при наличии его на телефоне жертвы получает полный доступ над компьютером, который пытается вытащить с него информацию (жертва и агрессор меняются местами). Можно заставить софт Cellebrite написать что угодно во все криминологические экспертизы, которые есть на этом компьютере. Не только в текущий, но и все последующие.
Пост они закончили следующим абзацем: «мы теперь начнем прикладывать к Signal'у специальные красивые файлы. Они не несут никакой пользы, просто эстетически очень приятные. Причем файлов у нас много и они разные. Приложим мы их только давно зарегистрированным пользователям и только части отловить и исправить все ошибки у вас не получится. Никакой связи с предыдущим текстом этот абзац не имеет. Просто нравятся они нам.»
Троллинг 90го уровня.
Ах да, ещё они обнаружили, что Cellebrite нелегально использует библиотеки Apple в нарушении лицензии. У Apple дорогие и хорошие юристы.
🍿🍿🍿
Один из производителей такой программы для властей разных стран — Cellebrite, недавно публично хвастался, что умеет вытаскивать данные из Signal. Это правда, если власти смогли разблокировать телефон, то они могут вытащить из него все чаты, так же, как могли бы увидеть их глазами. Эта программа используется спецслужбами по всему миру для проведения официальных и не очень официальных криминологических экспертиз.
Сегодня Signal выложили ответочку. Они где-то раздобыли (в оригинале «fell from the truck» — «свалилась с телеги, нашли на дороге») официальную коробочку с этой программой, исследовали её и обнаружили в ней тонну уязвимостей. Таких уязвимостей, что можно составить специальный файл, который при наличии его на телефоне жертвы получает полный доступ над компьютером, который пытается вытащить с него информацию (жертва и агрессор меняются местами). Можно заставить софт Cellebrite написать что угодно во все криминологические экспертизы, которые есть на этом компьютере. Не только в текущий, но и все последующие.
Пост они закончили следующим абзацем: «мы теперь начнем прикладывать к Signal'у специальные красивые файлы. Они не несут никакой пользы, просто эстетически очень приятные. Причем файлов у нас много и они разные. Приложим мы их только давно зарегистрированным пользователям и только части отловить и исправить все ошибки у вас не получится. Никакой связи с предыдущим текстом этот абзац не имеет. Просто нравятся они нам.»
Троллинг 90го уровня.
Ах да, ещё они обнаружили, что Cellebrite нелегально использует библиотеки Apple в нарушении лицензии. У Apple дорогие и хорошие юристы.
🍿🍿🍿
Я, как динозавр, впервые заюзал webpack-bundle-analyzer. Это просто песня.
Заоптимизировал сборку, уменьшив vendor bundle в 3 раза.
С moment-timezone еще бы поиграться, но это уже другая история)
Заоптимизировал сборку, уменьшив vendor bundle в 3 раза.
С moment-timezone еще бы поиграться, но это уже другая история)
Media is too big
VIEW IN TELEGRAM
Мне тут уже скоро тридцатник стукнет, поэтому пора заводить бонусные карточки всяких аптек.
Знатно припекло от UX одной аптеки. Мало того что нет валидации на полях и странная кнопка «Выслать код еще раз» (а где был первый раз??), так после нажатия на кнопку вся твоя форма очищается к хуям.
Черканул ребятам из https://www.tagesjump.ru/ которые пилили сайт письмо с ОС, посмотрим что ответят
Знатно припекло от UX одной аптеки. Мало того что нет валидации на полях и странная кнопка «Выслать код еще раз» (а где был первый раз??), так после нажатия на кнопку вся твоя форма очищается к хуям.
Черканул ребятам из https://www.tagesjump.ru/ которые пилили сайт письмо с ОС, посмотрим что ответят
#3d_print
Сегодня впервые тестирую печать SBS пластиком.
Нужно напечатать колпачок для термоса. SBS вроде как самый подходящий пластик для пищевой промышленности.
Сегодня впервые тестирую печать SBS пластиком.
Нужно напечатать колпачок для термоса. SBS вроде как самый подходящий пластик для пищевой промышленности.
Forwarded from Zhovner Hub
Как выглядит производство корпусов Flipper Zero изнутри
Новый большой апдейт. Статья без правок почти, буду признателен за вычитку грамматики и т.д.
https://habr.com/ru/company/flipperdevices/blog/557282/
Новый большой апдейт. Статья без правок почти, буду признателен за вычитку грамматики и т.д.
https://habr.com/ru/company/flipperdevices/blog/557282/
Всем привет!
Я тут недавно писал, что немного приложил руку к релизу веб-версии телеги. У проекта довольно интересный стек - начиная c самописного аналога React (Teact), до web assembly.
Александр — тим лид этого проекта — пишет интересные заметки в @webzchannelru, где рассказывает о причинах выбора той или иной технологии и тонкостях реализации разных фич.
Кому интересно — welcome @webzchannelru.
Кстати, Саша лично тер за Telegram с Пашей, так что я теперь через одно рукопожатие знаком с Дуровым😁
Я тут недавно писал, что немного приложил руку к релизу веб-версии телеги. У проекта довольно интересный стек - начиная c самописного аналога React (Teact), до web assembly.
Александр — тим лид этого проекта — пишет интересные заметки в @webzchannelru, где рассказывает о причинах выбора той или иной технологии и тонкостях реализации разных фич.
Кому интересно — welcome @webzchannelru.
Кстати, Саша лично тер за Telegram с Пашей, так что я теперь через одно рукопожатие знаком с Дуровым😁
Всем привет!
Недавно словил «интересный» баг на raspberry pi zero. Пытался запустить bleutooth server через python и в итоге получал всегда permission denied🤔 Причем пользователь добавлен в ту же группу, что и bluetooth и все остальные причины тоже пофикшены. Запускать питоновский скрипт от sudo как то не комильфо и там появляются другие подводные камни.
В итоге, спустя полтора часа танцев с бубном я понял, что в адаптер вместе с малиной у меня воткнут телефон. Вынул - проблема ушла. Т е при нехватке питания можно cловить такое необычное поведение😐
Недавно словил «интересный» баг на raspberry pi zero. Пытался запустить bleutooth server через python и в итоге получал всегда permission denied🤔 Причем пользователь добавлен в ту же группу, что и bluetooth и все остальные причины тоже пофикшены. Запускать питоновский скрипт от sudo как то не комильфо и там появляются другие подводные камни.
В итоге, спустя полтора часа танцев с бубном я понял, что в адаптер вместе с малиной у меня воткнут телефон. Вынул - проблема ушла. Т е при нехватке питания можно cловить такое необычное поведение😐