Слайд 2Desirable knowledge
JS
Html\css\js
Ajax\jquery
React (optional)
![Desirable knowledge JS Html\css\js Ajax\jquery React (optional)](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-1.jpg)
Слайд 4Array initialization and benchmark find method
Benchmark for
Benchmark for with double equals
Benchmark
![Array initialization and benchmark find method Benchmark for Benchmark for with double](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-3.jpg)
map
Example – data structure
Слайд 6Client Performance Techniques
![Client Performance Techniques](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-5.jpg)
Слайд 8Simple JS
JS with WebWorker
WebWorker
![Simple JS JS with WebWorker WebWorker](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-7.jpg)
Слайд 9Head
Async
Defer
Defer\Async and head
![Head Async Defer Defer\Async and head](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-8.jpg)
Слайд 10Network deceleration in devtools
![Network deceleration in devtools](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-9.jpg)
Слайд 11Preconnect example
Resource Hints: prefetch, preconnect
Preconnect – prepare requests in advance, e.g find
![Preconnect example Resource Hints: prefetch, preconnect Preconnect – prepare requests in advance,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-10.jpg)
dns, make tcp handshake
Prefetch – load resources after page load finished
Other: preload, dns-prefetch
Слайд 12Techniques
JS uglify example
Minification via build tools
JS minification
Styles minification
Html minification
JS Tree-shaking
Image compression or
![Techniques JS uglify example Minification via build tools JS minification Styles minification](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-11.jpg)
compression with significant quality loose
Bundling
Gzip content before send from server
Слайд 13Techniques
HTTP Cache Headers Example
Minification via reducing response data
CDN
Code-splitting (lazy load js\css)
Paging
Return only needed
![Techniques HTTP Cache Headers Example Minification via reducing response data CDN Code-splitting](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-12.jpg)
data in response
HTTP Cache Headers
Слайд 15Techniques
Animation
Reduce size and dom changing
Use requestAnimationFrame
Try to be in 16ms frame
Use ccs
![Techniques Animation Reduce size and dom changing Use requestAnimationFrame Try to be](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-14.jpg)
animation
Use dom layers
Слайд 16Change size
Use requestAnimationFrame
Animation Examples
CSS animation
![Change size Use requestAnimationFrame Animation Examples CSS animation](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-15.jpg)
Слайд 20Mind Tricks rules in UI
Что бы разница была заметна, нужна разница в
![Mind Tricks rules in UI Что бы разница была заметна, нужна разница](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-19.jpg)
20% времени - Закон Вебера
Как можно быстрее перевести пользователя из пассивного ожидания в активное
1.25 sec for interaction (3sec for 3G)
100ms response and user response
Слайд 21Mind Tricks techniques in UI
Lazy loading
Prediction
SSR
![Mind Tricks techniques in UI Lazy loading Prediction SSR](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-20.jpg)
Слайд 26Docs 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
![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/](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093536/slide-25.jpg)