среда, 5 июля 2017 г.

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

Литература

Комментариев нет:

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