UI Performance

Desirable knowledge
JS
Html\css\js
Ajax\jquery
React (optional)

Code Performance

Array initialization and benchmark find method
Benchmark for
Benchmark for with double equals
Benchmark map
Example – data structure

Throttling in devtools

Client Performance Techniques

Debounce

Simple JS
JS with WebWorker
WebWorker

Head
Async
Defer
Defer\Async and head

Network deceleration in devtools

Preconnect example
Resource Hints: prefetch, preconnect
Preconnect – prepare requests in advance, e.g find dns, make tcp handshake
Prefetch – load resources after page load finished
Other: preload, dns-prefetch

Techniques
JS uglify example
Minification via build tools
JS minification
Styles minification
Html minification
JS Tree-shaking
Image compression or compression with significant quality loose
Bundling
Gzip content before send from server

Techniques
HTTP Cache Headers Example
Minification via reducing response data
CDN
Code-splitting (lazy load js\css)
Paging
Return only needed data in response
HTTP Cache Headers

Service Worker for HTTPS

Techniques
Animation
Reduce size and dom changing
Use requestAnimationFrame
Try to be in 16ms frame
Use ccs animation
Use dom layers

Change size
Use requestAnimationFrame
Animation Examples
CSS animation

Performance tab

Dom Layers

Mind Tricks

Mind Tricks rules in UI
Что бы разница была заметна, нужна разница в 20% времени - Закон Вебера
Как можно быстрее перевести пользователя из пассивного ожидания в активное
1.25 sec for interaction (3sec for 3G)
100ms response and user response

Mind Tricks techniques in UI
Lazy loading
Prediction
SSR

SSR

SSR

Client
SSR
SSR

Why?

Docs and Links
https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
https://medium.com/reloading/javascript-start-up-performance-69200f43b201
https://www.youtube.com/watch?v=HlKijvTa_h0
https://www.youtube.com/watch?v=ghcfHBEe1u4
https://www.youtube.com/watch?v=Tiv_9uweA7w
https://www.youtube.com/watch?v=lgPs_hnIA_M
https://www.youtube.com/watch?v=i9cOoipvST8&feature=youtu.be&list=PL8sJahqnzh8JST_ZwTcGG1FHGgKBMcpn6
https://www.youtube.com/watch?v=7-d3O-7aus0
https://www.sitepoint.com/check-css-animation-performance-with-the-browsers-dev-tools/
http://www.html5rocks.com/ru/tutorials/workers/basics/
https://www.searchengines.ru/ispolzovanie-preload-prefetch-i-preconnect.html
https://learn.javascript.ru/external-script
https://www.searchengines.ru/ispolzovanie-preload-prefetch-i-preconnect.html
https://developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers
https://css-tricks.com/the-difference-between-throttling-and-debouncing/
https://learn.javascript.ru/js-animation