Edge Conf Rendering Performance Panel - Opening Talk

Slide 1

Slide 1 text

Rendering Performance Andre Behrens Jonathan Klein Paul Lewis Ariya Hidayat Joshua Peek Eli Fidler Tuesday, September 17, 13

Slide 2

Slide 2 text

60 FPS Tuesday, September 17, 13

Slide 3

Slide 3 text

16.6 ms Tuesday, September 17, 13

Slide 4

Slide 4 text

Tuesday, September 17, 13

Slide 5

Slide 5 text

Jank Tuesday, September 17, 13

Slide 6

Slide 6 text

What Causes Jank? Tuesday, September 17, 13

Slide 7

Slide 7 text

http://jankfree.org/jank-busters-io-2013/template.html#15 Tuesday, September 17, 13

Slide 8

Slide 8 text

Why Do We Care? Tuesday, September 17, 13

Slide 9

Slide 9 text

Facebook artiﬁcially slowed down frame rate on iOS and Android to 30 FPS, and “engagement collapsed” - Shane O'Sullivan, Edge London 2013 Tuesday, September 17, 13

Slide 10

Slide 10 text

Etsy tested pre-fetching JS on our search results page, which caused jank as the JS ﬁnished downloading. All business metrics we monitored got much worse. - Me, right now Tuesday, September 17, 13

Slide 11

Slide 11 text

How Do We Fix It? Tuesday, September 17, 13

Slide 12

Slide 12 text

http://jankfree.org/jank-busters-io-2013/template.html#15 Tuesday, September 17, 13

Slide 13

Slide 13 text

Tuesday, September 17, 13

Slide 14

Slide 14 text

But Really... Tuesday, September 17, 13

Slide 15

Slide 15 text

But Really... • requestAnimationFrame, not setTimeout Tuesday, September 17, 13

Slide 16

Slide 16 text

But Really... • requestAnimationFrame, not setTimeout • Consistent frame rate > high frame rate Tuesday, September 17, 13

Slide 17

Slide 17 text

But Really... • requestAnimationFrame, not setTimeout • Consistent frame rate > high frame rate • Paint less (batch) Tuesday, September 17, 13

Slide 18

Slide 18 text

But Really... • requestAnimationFrame, not setTimeout • Consistent frame rate > high frame rate • Paint less (batch) • Consider translateZ hack for desktop Tuesday, September 17, 13

Slide 19

Slide 19 text

But Really... • requestAnimationFrame, not setTimeout • Consistent frame rate > high frame rate • Paint less (batch) • Consider translateZ hack for desktop • Don’t guess it, test it! Tuesday, September 17, 13