Google IO 2013
Web Performance Matters
Unispace 3D
Mitch
1
Google IO 2013 Sessions
Jank Free: Chrome Rendering Performance
True Grit: Debugging CSS & Render Performance
Web Page Des...
1. Focus on the user and all else will follow
2. It’s best to do one thing really, really well
3.Fast is better than slow
...
Freeing up the UI thread with
blisteringly-fast JS is key.
......but it’s not enough!
4
We need Fast Rendering!
5
Rendering Performance
Style recalculation
Layout (aka Reflow)
Paint
Composite
6
The Rendering Cycle
Build the DOM
Calculate CSS property values
Build the rendering tree
Calculate layout
Paint
Composite
7
The Rendering Cycle
Build the DOM
Calculate CSS property values
Build the rendering tree
Calculate layout
Paint
Composite
...
Rendering 101
Paint fast
Avoid accidental paints
Don’t paint at ALL
Eliminate layout
Minimize paint rectangles
Eliminate p...
Visually complex CSS
Image decodes/resizes
Redundant large empty
layers
How to
position: fixed
overflow: scroll
hover effe...
How to
var newWidth = myDiv.offsetWidth+10; //Read
myDiv.style.width = newWidth+’px’; //Write
var newHeight = myDiv.offset...
How to
var newWidth = myDiv.offsetWidth+10; //Read
var newHeight = myDiv.offsetHeight+10; //Read
myDiv.style.width = newWi...
How to
var div = document.getElementById(“box”);
lis = document.getElementByTagName(“li”);
i, len;
for(i=0; len=lis.length...
How to
var div = document.getElementById(“box”);
lis = document.getElementByTagName(“li”);
widthToSet = div.offsetWidth,
i...
Layers: Great for Animation
Want to animate with “no layout” and “no painting”
15
Layers
Painted independently, composited on the GPU
Can stretch, move, and fade without repainting
GPU + Layers = Faster R...
Hands-Free layer promotion
3D Transform
Canvas
Video
Plugins (i.e. Flash)
17
Use Dev Tools
Timeline
Show paint rectangles
Show composited layer borders
chrome://tracing
Continuous painting mode
PageS...
Where to go from here
http://browserdiet.com/
http://coding.smashingmagazine.com/2012/11/05/
writing-fast-memory-efficient...
Upcoming SlideShare
Loading in …5
×

Google IO 2013: Web Performance Matters

962 views

Published on

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
962
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Google IO 2013: Web Performance Matters

  1. 1. Google IO 2013 Web Performance Matters Unispace 3D Mitch 1
  2. 2. Google IO 2013 Sessions Jank Free: Chrome Rendering Performance True Grit: Debugging CSS & Render Performance Web Page Design with the GPU in mind Automating Performance Best Practices with PageSpeed 2
  3. 3. 1. Focus on the user and all else will follow 2. It’s best to do one thing really, really well 3.Fast is better than slow 4. Democracy on the web works 5. You don’t need to be at your desk to need an answer 6. You can make money without doing evil 7. There’s always more information out there 8. The need for information crosses all borders 9. You can be serious without a suit 10.great just isn’t good enough Google’s Ten Things 3
  4. 4. Freeing up the UI thread with blisteringly-fast JS is key. ......but it’s not enough! 4
  5. 5. We need Fast Rendering! 5
  6. 6. Rendering Performance Style recalculation Layout (aka Reflow) Paint Composite 6
  7. 7. The Rendering Cycle Build the DOM Calculate CSS property values Build the rendering tree Calculate layout Paint Composite 7
  8. 8. The Rendering Cycle Build the DOM Calculate CSS property values Build the rendering tree Calculate layout Paint Composite }Style Recalculation }Layout Painting Compositing Layers 8
  9. 9. Rendering 101 Paint fast Avoid accidental paints Don’t paint at ALL Eliminate layout Minimize paint rectangles Eliminate painting altogether 9
  10. 10. Visually complex CSS Image decodes/resizes Redundant large empty layers How to position: fixed overflow: scroll hover effects touch listeners Unnecessary paints from: Demo (hover effects) Long paints from: Demo (drag and drop) 10
  11. 11. How to var newWidth = myDiv.offsetWidth+10; //Read myDiv.style.width = newWidth+’px’; //Write var newHeight = myDiv.offsetHeight+10; //Read myDiv.style.height = newHeight+’px’; //Write Unnecessary repaint & reflow: 11
  12. 12. How to var newWidth = myDiv.offsetWidth+10; //Read var newHeight = myDiv.offsetHeight+10; //Read myDiv.style.width = newWidth+’px’; //Write myDiv.style.height = newHeight+’px’; //Write Better repaint & reflow: 12
  13. 13. How to var div = document.getElementById(“box”); lis = document.getElementByTagName(“li”); i, len; for(i=0; len=lis.length; i<len; i++) { lis[i].style.width = div.offsetWidth+’px’; } Unnecessary repaint & reflow: 13
  14. 14. How to var div = document.getElementById(“box”); lis = document.getElementByTagName(“li”); widthToSet = div.offsetWidth, i, len; for(i=0; len=lis.length; i<len; i++) { lis[i].style.width = widthToSet+’px’; } Better repaint & reflow: Demo 14
  15. 15. Layers: Great for Animation Want to animate with “no layout” and “no painting” 15
  16. 16. Layers Painted independently, composited on the GPU Can stretch, move, and fade without repainting GPU + Layers = Faster Rendering Too many layers = seriously bad time Demo2Demo1 16
  17. 17. Hands-Free layer promotion 3D Transform Canvas Video Plugins (i.e. Flash) 17
  18. 18. Use Dev Tools Timeline Show paint rectangles Show composited layer borders chrome://tracing Continuous painting mode PageSpeed (Chrome Extension) 18
  19. 19. Where to go from here http://browserdiet.com/ http://coding.smashingmagazine.com/2012/11/05/ writing-fast-memory-efficient-javascript/ http://www.phpied.com/rendering-repaint- reflowrelayout-restyle/ http://www.html5rocks.com/en/tutorials/speed/ layers/ http://updates.html5rocks.com/2013/02/Profiling- 19

×