Performance de Interações no DOM

Introduction ! • JavaScript interactions have a "scripting" timing; • That pure JS versus "Write less" jQuery; • JavaScript layouting; • GPU vs CPU; • CSS layout, paint and composite layer in animations; • For each ~16ms we have 1 frame and 60 in 1 second;

JavaScript and jQuery Scripting Time window.pageYOffset vs. $(window).scrollTop() more than 100 times faster ! window.innerHeight vs. $(window).height() more than 220 times faster ! el.clientWidth vs. $el.width() more than 50 times faster Tested at! http://jsperf.com

JavaScript Layouting Everytime we need to do things like this:! ! el.clientHeight; el.clientWidth; el.offsetTop; ! We force the browser to re-calculate the layout, so if we do:! ! $el.height(); $el.width(); $el.offset().top; ! We have less performance :(

CPU vs. GPU https://www.youtube.com/watch?v=-P28LKWTzrI

How we use the GPU We can trigger the GPU using:! ! ! CSS3 transitions! CSS3 3D transforms! Canvas Drawing! WebGL 3D Drawing

But... We need to say to the browser that we want to use the GPU on our element in 2D animations cases:! ! ! transform: transale3d(0, 0, 0); ! or ! .accelerated { transform: transale3d(0, 0, 0); }

... it is a hack :( but the strongest and best way to do that yet.! ! ! transform: transale3d(0, 0, 0); ! or ! .accelerated { transform: transale3d(0, 0, 0); }

The (future) salvation: will-change The will-change property still is an experimental technology and its compatibility is limited.! It tells what will gone change for the browser be able to do specific optmizations for CSS Properties.! ! .el { will-change: transform; } ! ! Browser support! Chrome 36+! Firefox 36+! Opera 24+! Safari (not supported)! Internet Explorer (not supported)

Saving your battery Using the GPU we expend much more battery than using our conventional CPU, so the browser doesn't enable it by default for 2D animations. !

Saving your battery For that reason you should take care enabling it all the time too. Enabling many times at the same element can make all performance transition be worst.! !

Composite vs. Layout vs. Paint

Talking about frames ~60Hz! (1 second / 60fps = ~16ms)! ! ! Best animations practices is try to keep the frames in 60fps! and the best way is working with the GPU.! ! And ok, but how to double check it?!

Timeline DevTool

Timeline DevTool

Good to know ! • Layout doesn't work with float numbers;! ! • Painting is fast, but still use only the CPU! ! • The composite layers are transfered to the GPU like bitmaps, combined and then drawn on the screen! • The "layer" is an independent subtree of the DOM, composited at the GPU and possible to move, stretch and fade without repainting!

Sources https://www.urbaninsight.com/2013/01/04/improving-html5-app-performance-gpu-accelerated- css-transitions ! http://www.nvidia.com/object/what-is-gpu-computing.html ! https://www.youtube.com/watch?v=-P28LKWTzrI ! http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ ! https://developer.chrome.com/devtools/docs/timeline ! http://jsfiddle.net/ginpei/GdgYm/ ! http://csstriggers.com/