Hacking to be Performant?
Talk: Performance Engineering
Speaker: Apoorv Saxena
Time to run a poll
How many you consider
#perfmatters?
What performance
monitoring tools are you
using?
(To evaluate your Front End’s Performance)
How many of you have it as
part of your
“Continuous Deployment”?
Enough, let’s start Hacking
What do you mean by
“Hacking”?
What do you mean by
“Performant”?
Evolution of the Web: Browser & Technologies
Evolution
Is necessary, though it proceeds gradually and
takes some time, it accounts for everyone to be
on the same page....
Loading Webpages under
1 second
First pixel render time less
than 500ms
Running Applications at
60fps
Delivering a Jank Free Experience
#perfmatters
What are we Trying to fit?
● HTML5 Games
● Single Page Applications
● Animations
● Editors, Document Collaboration Tools
●...
That’s it?
Not at all.
Everything available on Mobile must be
available via APIs on Web.
Let me tell you a story
From JS to Screen:
Style/Layout PaintingJS Compositing
keep < 16ms!
1. Add CSS rules in style via JS.
2. Recalculate style...
What causes Jank?
Style/Layout PaintingJS
16ms!
Draw
Commands CPU GPU
SCREEN
Extensive Upload
Rasterization in
Action
Performance Hacks:
Creating a separate layer for
elements requesting
frequent updates
Hardware Acceleration
rules me
What about using Canvas
instead of DOM?
You must consider:
● Accessibility, Flipboard injects mirror of the content into an
invisible dom so it’s still in synch f...
Considered using DOMSprites?
SCREEN
Project Ganesh:
Draw
Commands GPU
60fps is not required at every instance
Note:
Our eyes are much more attuned to variance
than framerate.
A steady 30Hz looks better than 60Hz that
misses a few fr...
Thank You!
See jankfree.org, html5rocks.com for lots of info
Hacking to be performant
Hacking to be performant
Hacking to be performant
Hacking to be performant
Upcoming SlideShare
Loading in …5
×

Hacking to be performant

947 views

Published on

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.

Published in: Engineering
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
947
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hacking to be performant

  1. 1. Hacking to be Performant? Talk: Performance Engineering
  2. 2. Speaker: Apoorv Saxena
  3. 3. Time to run a poll
  4. 4. How many you consider #perfmatters?
  5. 5. What performance monitoring tools are you using? (To evaluate your Front End’s Performance)
  6. 6. How many of you have it as part of your “Continuous Deployment”?
  7. 7. Enough, let’s start Hacking
  8. 8. What do you mean by “Hacking”?
  9. 9. What do you mean by “Performant”?
  10. 10. Evolution of the Web: Browser & Technologies
  11. 11. 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.
  12. 12. Loading Webpages under 1 second
  13. 13. First pixel render time less than 500ms
  14. 14. Running Applications at 60fps Delivering a Jank Free Experience
  15. 15. #perfmatters
  16. 16. What are we Trying to fit? ● HTML5 Games ● Single Page Applications ● Animations ● Editors, Document Collaboration Tools ● WebRTC (Video, Audio) and many more.
  17. 17. That’s it? Not at all. Everything available on Mobile must be available via APIs on Web.
  18. 18. Let me tell you a story
  19. 19. 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
  20. 20. What causes Jank? Style/Layout PaintingJS 16ms!
  21. 21. Draw Commands CPU GPU SCREEN Extensive Upload Rasterization in Action
  22. 22. Performance Hacks:
  23. 23. Creating a separate layer for elements requesting frequent updates
  24. 24. Hardware Acceleration rules me
  25. 25. What about using Canvas instead of DOM?
  26. 26. 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).
  27. 27. Considered using DOMSprites?
  28. 28. SCREEN Project Ganesh: Draw Commands GPU
  29. 29. 60fps is not required at every instance
  30. 30. 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.
  31. 31. Thank You! See jankfree.org, html5rocks.com for lots of info

×