Коротко о 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 »

Еще одна статья о Latex

-
Изображение
В этой статья рассказывается о тех командах и фокусах, которые пригодились мне для написания диплома. Поскольку иногда удобнее изучать что-либо на примере, сразу привожу пример моего Ссылка на диплом (но только несущественную по смыслу часть). А так он выглядит после конвертации в pdf. Начнем с самого начала, хотя порядок может быть и другим. Доктор Who, Meglos Установка Скачиваем LaTeX . При установки разрешаем скачивать дополнительные файлы из интернета, т.к. в последующем при подключении разных модулей для форматирования текста, потребуется докачка файлов. Полезные ссылки Ссылка не небольшой справочник . При наборе формул может помочь редактор формул . Создание документа Набирать диплом в стандартной оболочке Miktex не очень удобно, т.к. у него есть маленькие проблемы с русским языком. Вместо этого я набирал диплом в Notepad++, в котором также есть поддержка синтаксиса LaTeX. Теперь определимся с иерархией файлов для документа. Я использовал следующую структуру: main
Read more »