Коротко о frontend performance.

-
Насмотрелся я как-то видео и начитался статей о performance в мире frontend и решил задокументировать кратко походы. Подробное описание можно найти в интернете или в литературе внизу. Итак мой список пунктов связанных с performance, которые можно использовать для улучшения\оценки производительности:

Производительность кода

  1. Оптимизируйте код (например HashMap вместо Array)
  2. Профайл для поиска узких мест
  3. WebWorker для ресурсоемких операций
  4. Server-side rendering
  5. PWA
  6. defer\async in HTML
  7. Разделять чтение дома и запись, например fast-dom библиотека
  8. СSS анимации выполняются на gpu в отличие от js
  9. requiestAnimationFrame
  10. will-transform
  11. dom layout (через transfomZ(0) или will-change: transform)
  12. изменение innerHtml или размера ведет к перерисовке всего документа\слоя
  13. dns-prefetch, preconnect, prefetch, pretender, preload

Производительность сборки

  1. CDN (сервер должен быть ближе к клиенту)
  2. HTTP Cache Headers
  3. WebP images
  4. WOFF2 fonts или стандартные системные
  5. Code-splittind 
  6. Tree-shaking
  7. Core js\css load immediatelly and advanced js\css on DomContentLoaded (extra on Load)
  8. Service Worker for HTTPS
  9. Brotli or Zopfli compression (+20%)
  10. js\css minification, lazy sourcemaps
  11. image minification с потерей качества
  12. icons in base64

Производительность мозга (mind tricks)

  1. Что бы разница была заметна нужна разница в 20% времени
  2. 100ms response
  3. 16ms for frame
  4. 1.25sec for interaction (3sec for 3G)
  5. Предсказывать поведение пользователя (например при hover на search можно начать подгружать результат)
  6. 14 kb for critical.css
  7. как можно быстрее перевести пользователя из пассивного ожидания в активное
  8. наприсовать сначала видимую часть, потом подгрузить все что ниже по скроллу или на другом state-route

Литература

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Нейронная сеть для обхода препятствий

-
Изображение
Некоторое время назад мне нужно было написать нейронную сеть для управления простым роботом, цель которого ездить и не врезаться в препятствия. Программа, написанная мной на java находится здесь , и предоставляется "как есть". Для просмотра работы программы нажимаем кнопку NEW, удостоверяемся что checkbox DRAW находится в положении false, нажимаем DO EDUCATION, ждем секунд 20 - теперь сеть обучена, ставим DRAW в положение true, нажимаем DO EDUCATED AI. Робот должен не врезаться в препятствия. Если это происходит то сделайте эти шаги заново. Врезание после обучения происходит из-за неправильного распределения начальных весов сети (они распределяются случайно) и эта ситуация довольно редка в миниум 90% случаях сеть обучается обходить препятствия. Поскольку я раньше почти не сталкивался с нейронными сетями мне пришлось прочитать несколько книжек, а также перерыть интернет. И может конечно я плохо искал, но готовой программы или алгоритма как это сделать я не нашел. Однако по
Read more »

Time Zones

-
Аннотация В данном посте будет описана немного истории для понимания, что такое тайм зона и в чем ее сложности. Также будет объяснено, что такое Date, как она представляется в коде и БД. Будут разысканы проблемы, которые возникают с датами в GWT и их решения. С чего все началось Форматирование даты в GWT по маске происходит через DateTimeFormat. Однако оказалось, что при выводе дата зависит от клиентской тайм зоны, т.е. часового пояса, который установили на компьютере в Windows. Это явно не очень хорошо, потому что в enterprise приложениях тайм зона (TZ) может не равняться тайм зоне на клиенте. Логично сделать прокидывание TZ в DateTimeFormat при форматировании и парсинге, но в GWT на клиенте это можно сделать только для форматирования, да и прокинуть тайм зону тоже не очень получиться - нет метода создания TZ по имени. Для справки в Java это есть: TimeZone timeZone = TimeZone.getTimeZone(“Europe/Moscow”); SimpleDateFormat dateFormat = new SimpleDateFormat("dd.MM.yyyy HH:mm
Read more »

Звания IT-работников

-
Изображение
Некоторое время назад я пытался найти кем можно стать начиная с программиста и куда эта дорога может привести. К сожалению ничего толкового мне найти не удалось. Поэтому я попытался самостоятельно провести исследование на эту тему. Итак представляю вам на обозрение схему развития программиста начального уровня в нечто более разумное. Особое спасибо Дмитрию Ч. за помощь. Стрелки обозначают переходы из одной должности в другую. В общем случае, возможен любой переход, однако на мой взгляд, нарисованный на схеме переходы наиболее вероятны. Итак все начинается с JD - Junior Developer (тот кто только, что устроился на работу в компанию на последнем курсе университета). У него 3 пути. Он может продолжать подниматься по лестнице разработчика: D - Developer (понимает чем отличается программирование в комании от программирования в университете или школе); SD - Senior Developer (хорошо знает ряд технологий); LD - Lead Developer (знает еще больше технологий, знает как работает весь проект,
Read more »