Google IO 2013: Web Performance Matters
Upcoming SlideShare
Loading in...5
×
 

Google IO 2013: Web Performance Matters

on

  • 550 views

 

Statistics

Views

Total Views
550
Views on SlideShare
550
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Google IO 2013: Web Performance Matters Google IO 2013: Web Performance Matters Presentation Transcript

    • 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 Design with the GPU in mind Automating Performance Best Practices with PageSpeed 2
    • 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
    • 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 }Style Recalculation }Layout Painting Compositing Layers 8
    • Rendering 101 Paint fast Avoid accidental paints Don’t paint at ALL Eliminate layout Minimize paint rectangles Eliminate painting altogether 9
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 Rendering Too many layers = seriously bad time Demo2Demo1 16
    • 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 PageSpeed (Chrome Extension) 18
    • 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