60 fps a böngészőben

Gyurisán János

WeblapBolt

weboldal sebessége

Hálózat

JavaScript

Render

60 fps & Jank

  • kijelzők átlagosan 60Hz-esek
  • 16.7ms / 8-10ms
  • 16.7ms < jank
  • jank: ha a monitor frissítésekor nem fejeződött be a render
@Google I/O 2013: Jank Busters
JavaScript
Recalculate Style / Layout
Paint / Composite Layers

Hogyan renderel a böngésző?

webkitflow
www.html5rocks.com/en/tutorials/internals/howbrowserswork

DOM & Style


<html>
 <head>
  <title>example</title>
  <link rel="stylesheet" href="css/style.css"/>
 </head>
 <body>
  <section>
   <p>Hello World</p>
   <img src="example.png"/>
  </section>
 </body>
</html>
                            

body {
 background: #222;
}
section {
 margin-top: 100px;
 padding-top: 50px;
}
p {
 font-size: 2em;
 padding: 1em;
 font-weight: bold;
 background: #fff;
 color: #222;
}

Render Tree & Layout

paint

a Paint költséges

  • gradiensek
  • box/text-shadow
  • border-radius
  • képek + átméretezéseik
  • ?

Don't Guess it, Test it!

  • timeline profilok
  • continuous page repainting

Repaint

Reflow

Repaint & Reflow - mi okozza?

  • ablak átméretezése / scrollozás
  • változtatás a DOM-ban
  • fix pozicionálás
  • hover effektek
  • CSS tulajdonságok megváltoztatása
  • layout trashing

tesztelés: Show Paint Rectangles

layout trashing


var h1 = element1.clientHeight; // Read

element1.style.height = (h1 * 2) + 'px'; // Write (invalidates layout)

var h2 = element2.clientHeight; // Read (triggers layout)

element2.style.height = (h2 * 2) + 'px'; // Write (invalidates layout)

var h3 = element3.clientHeight; // Read (triggers layout)

element3.style.height = (h3 * 2) + 'px'; // Write (invalidates layout)
                            

// Read
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;

// Write (invalidates layout)
element1.style.height = (h1 * 2) + 'px';
element2.style.height = (h2 * 2) + 'px';
element3.style.height = (h3 * 2) + 'px';

// Document reflows at end of frame
wilsonpage.co.uk/preventing-layout-thrashing

requestAnimationFrame


// Read
var h1 = element1.clientHeight;

// Write
requestAnimationFrame(function() {
 element1.style.height = (h1 * 2) + 'px';
});

// Read
var h2 = element2.clientHeight;

// Write
requestAnimationFrame(function() {
 element2.style.height = (h2 * 2) + 'px';
});
wilsonpage.co.uk/preventing-layout-thrashing

Layerek / Rétegek

  • GPU textúraként kezeli
  • egymástól független részek az oldalon
  • translateZ() / translate3d()

tesztelés: Show Composited Layer Borders

@Paul Lewis - Don't guess it, test it!

Animációk

www.html5rocks.com/en/tutorials/speed/high-performance-animations

Hasznos linkek

  • www.jankfree.org
  • www.html5rocks.com
  • www.paulirish.com
  • www.aerotwist.com