Hacking to be performant
•1 like•1,405 views
Report
Share
Download to read offline
Hacking to be Performant? Talk presented at Meta Refresh 2015 Delhi Runup hosted at Wingify. Presentation discusses the different hacks and approaches available to make your Application performant, but what are the different pros and cons related to each approach.
More Related Content
What's hot
What's hot(20)
Similar to Hacking to be performant
Similar to Hacking to be performant(20)
Recently uploaded
Recently uploaded(20)
Hacking to be performant
- 1. Hacking to be Performant? Talk: Performance Engineering
- 4. Time to run a poll
- 5. How many you consider #perfmatters?
- 6. What performance monitoring tools are you using? (To evaluate your Front End’s Performance)
- 7. How many of you have it as part of your “Continuous Deployment”?
- 8. Enough, let’s start Hacking
- 9. What do you mean by “Hacking”?
- 10. What do you mean by “Performant”?
- 11. Evolution of the Web: Browser & Technologies
- 12. Evolution Is necessary, though it proceeds gradually and takes some time, it accounts for everyone to be on the same page. Though, not everyone can afford to walk at the same speed, they must run, jump obstacles, cut corners and give their best shot.
- 13. Loading Webpages under 1 second
- 14. First pixel render time less than 500ms
- 15. Running Applications at 60fps Delivering a Jank Free Experience
- 16. #perfmatters
- 17. What are we Trying to fit? ● HTML5 Games ● Single Page Applications ● Animations ● Editors, Document Collaboration Tools ● WebRTC (Video, Audio) and many more.
- 18. That’s it? Not at all. Everything available on Mobile must be available via APIs on Web.
- 19. Let me tell you a story
- 20. From JS to Screen: Style/Layout PaintingJS Compositing keep < 16ms! 1. Add CSS rules in style via JS. 2. Recalculate style, maybe relayout. 3. Paint the browser’s mental model to a layer 4. Composite all layers into a final image
- 21. What causes Jank? Style/Layout PaintingJS 16ms!
- 22. Draw Commands CPU GPU SCREEN Extensive Upload Rasterization in Action
- 24. Creating a separate layer for elements requesting frequent updates
- 27. What about using Canvas instead of DOM?
- 28. You must consider: ● Accessibility, Flipboard injects mirror of the content into an invisible dom so it’s still in synch for VoiceOver. ● Canvas is not hardware accelerated on every browser (accompanies device constraints). DOM Rendering might become amazingly fast soon. (Hint: remember project Ganesh).
- 32. 60fps is not required at every instance
- 34. Note: Our eyes are much more attuned to variance than framerate. A steady 30Hz looks better than 60Hz that misses a few frames a second.
- 35. Thank You! See jankfree.org, html5rocks.com for lots of info