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

Путешествие: Бузулукский Бор

-
Изображение
Информацию о Бузулукском Бору можно найти на официальном сайте -  https://npbuzbor.ru/ . Там же можно купить билеты, всего 200р со взрослого человека. Бузулукский бор - это набор нескольких интересных мест. Наиболее известные - это эко-тропа до царицы сосны Царь-Бор , где можно посмотреть почти самую высокую сосну в мире (2-ое место), дети могут побегать по парку, покататься на качелях. Далее я бы отметил место - Перекаты - тут можно посидеть на пляже и отдохнуть (мы ездили в начале осени). И место - Паникинский Яр ,  где можно постоять на парапете над пропастью в реку. К сожалению нам не хватило осеннего светового дня чтобы доехать до конца бора, поэтому придется ехать еще разок )). Оставляю ниже мой маршрут и места, которые я отобрал для просмотра, т.к. на каждом озере останавливаться - не хватит времени. Путь от Самары до Самары через основные точки -  https://yandex.ru/maps  - возле Паникинского Яра можно пешеходом дойти до Царь Бор, т.к. автомобильный мост слома...
Read more »

3D принтер

-
Изображение
3D принтер Купил я ребенку (оказалось себе) принтер на новый год принтер Wanhao Duplicator I3 mini за кажется 13к. Это мой первый принтер, поэтому покупал в DNS, боялся заказывать из Китаю. По отзывам все хорошо было и он уже в сборе поставлялся. Первая тестовая печать из подготовленных файлов с флешки прошла успешно, но очень долго - 6 часов на носорога небольшого. Свои простые модели типа кубика тоже получилось сделать. А вот дальше начались проблемы. Поддержки прилипают к детали их не отдерешь Печать начинает "полосить", получается объект как будто из паутины. В общем ужас. Как я понимаю основная проблема принтера скорость вместо заявленных 70 мм\с можно печатать на 30 мм\с что очень долго. Примерно 3 месяца я игрался и параметрами в Cura и наконец разобрался. Чем хочу и поделиться ниже. Но сперва закончим секцию железо. Железо По железу дополнительно докупил на озон бокорезы и обычный клей карандаш. А вот из сложного доставал пластмассовый прут, а он сломался внутри. при...
Read more »