Web Performance Matters

Topic regarding to web performance from Google IO 2013.

Transcript

1. Google IO 2013 Web Performance Matters Unispace 3D Mitch 1
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. 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. Freeing up the UI thread with blisteringly-fast JS is key. ......but it’s not enough! 4
5. We need Fast Rendering! 5
6. Rendering Performance Style recalculation Layout (aka Reflow) Paint Composite 6
7. The Rendering Cycle Build the DOM Calculate CSS property values Build the rendering tree Calculate layout Paint Composite 7
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. Rendering 101 Paint fast Avoid accidental paints Don’t paint at ALL Eliminate layout Minimize paint rectangles Eliminate painting altogether 9
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. 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. 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. 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. 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. Layers: Great for Animation Want to animate with “no layout” and “no painting” 15
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 Demo2 Demo1 16
17. Hands-Free layer promotion 3D Transform Canvas Video Plugins (i.e. Flash) 17
18. Use Dev Tools Timeline Show paint rectangles Show composited layer borders chrome://tracing Continuous painting mode PageSpeed (Chrome Extension) 18
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