Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance com Interações no DOM

Performance com Interações no DOM

Matheus Marsiglio

March 26, 2015
Tweet

More Decks by Matheus Marsiglio

Other Decks in Programming

Transcript

  1. 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;
  2. 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
  3. 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 :(
  4. How we use the GPU We can trigger the GPU

    using:! ! ! CSS3 transitions! CSS3 3D transforms! Canvas Drawing! WebGL 3D Drawing
  5. 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); }
  6. ... 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); }
  7. 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)
  8. 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. !
  9. 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.! !
  10. 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?!
  11. 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!