This slides's talking about basics of "measuring webapp" for optimization.
- Rendering, Page Loading, Script Performance and Scripting Timeline/Profiling with Chrome DevTools.
- Scripting for measuring performance using 'Navigation Timing' & 'User Timing'.
11. What makes '> 16ms'
Repaint Issues
Heavy CSS3 Effects
Animation or Transition using heavy property
Manipulating DOM dynamically
Insertion / Deletion
or Too much hack!
translateZ(0);
...
12. Example
vrsyeah =dcmn.oysye
a tlCce
ouetbd.tl;
syeah.adn ="0x;/ cueo lyu,rpit
tlCcepdig
2p" / as f aot ean
syeah.odr="0xsldrd;/ cueo lyu,rpit
tlCcebre
1p oi e" / as f aot ean
syeah.oo ="le;/ cueo rpit
tlCceclr
bu" / as f ean
syeah.akrudoo ="fd;/ cueo rpit
tlCcebcgonClr
#a" / as f ean
syeah.otie="e" / cueo lyu,rpit
tlCcefnSz
2m; / as f aot ean
/ nwDMeeet-cueo lyu,rpit
/ e O lmn
as f aot ean
dcmn.oyapnCiddcmn.raeetoe'eIG!);
ouetbd.pedhl(ouetcetTxNd(Ltto')
Finally, <body> triggers layout & repaint.
13. Further Readings
1.
2.
3.
4.
5.
6.
7.
8.
9.
How Browsers Works
Accelerated Rendering in Chrome: The Layer Model
CSS Paint Time and Page Render Weight
Avoiding Unnecessary Paints
Avoiding Unnecessary Paints: Animated GIF Edition
High Performance Animation
Antialiasing 101
HTML5 Techniques for Optimizing Mobile Performance (en)
Performance profiling with the Timeline (en)