225 web page design with the gpu in mind


2019/02/13 发布于 技术 分类

2. Web Page Design With The GPU in Mind Supercharge your page rendering with the GPU Grace Kloba Colt McAnlis Tech Lead - Chrome for Android Developer Advocate Chrome #perfmatters
3. How does a web page get drawn? More importantly, why hasn't it drawn my cat photos yet?
4. Software Rasterization #perfmatters
5. Scrolling & Rasterization #perfmatters
6. Scrolling & Rasterization #perfmatters
7. Animation & Rasterization Must paint old rectangle and new rectangle #perfmatters
8. High DPI = High amounts of work Device px/inch iPad Mini ~ 160 Kindle Fire ~ 170 Nexus 7 ~ 216 Macbook + Retina ~ 220 Chromebook Pixel ~ 239 Nexus 10 ~ 300 HiDPI screes require 4x pixels! Which means 4x the amount of work to paint! #perfmatters
9. Hardware Compositing Using the GPU to make even faster websites
10. Graphics Processing Unit #perfmatters
11. GPU To the rescue! GPU Woot! FRAME 1 CPU FRAME 2 FRAME 3 #perfmatters
12. Tiling Textures = Memory Win #perfmatters
13. Caching Tiles #perfmatters
14. Caching Tiles Still in Cache, Not visible Still in Cache, Visible New Tiles added #perfmatters
15. Tiles Recycled #perfmatters
16. Pre-Painting Visible tiles Not yet-visible, but pre-painted #perfmatters
17. Tiling and Animation #perfmatters
18. Animation & Rasterization GPU Layer 1 GPU Layer 2 #perfmatters
19. Tiling and Animation Woot! #perfmatters
20. Controlling Layers with CSS How developers can use all this.
21. Hands-Free layer promotion Plugins Video Canvas #perfmatters
22. 3D Transform = Auto layer promotion ● ● ● ● ● ● ● ● ● TranslateZ ScaleZ RotateX RotateY RotateZ Translate3D Scale3D Rotate3D backface-visibility: hidden 2D Transforms do NOT create layer #perfmatters
23. CSS Animations OPACITY and TRANSFORM #perfmatters
24. Tradeoffs and consequences The GPU is not a silver bullet!
25. The cost of too many layers : Additional Memory #perfmatters GPU Tile Cache X X
26. Sorting The cost of too many layers : #perfmatters Additional Processing
27. Layering & Animation tradeoffs translateZ(0) ==> Layer promotion ==> Memory Usage #perfmatters
28. display:none invalidates pre-painting display:none display:block Triggers Paint display:block translateZ(0) Load-time Paint Gambling on potential usage #perfmatters
29. Input with Threaded Compositing We should be able to render w/o needing to be blocked by input
30. Responding to paint requests TIME paint composite paint composite paint BLINK thread 16ms VBLANK #perfmatters VBLANK composite
31. Single threaded event queue parsing layout VBLANK #perfmatters paint Composite JS EVENT setInterval VBLANK layout paint Composite
32. Outta Time 2ms Touch Events 2ms JS EVENT 8ms onLoad() callback 3ms layout 6ms paint 16MS "Multi Threaded Painting" #perfmatters 2ms composite
33. Threaded compositing - Multithreaded parsing layout paint JS EVENT layout BLINK thread ! Composite Needed Compositor thread composite VBLANK #perfmatters paint
34. Let the browser scroll onload audio JS EVENT layout setInterval BLINK thread composite Compositor thread ! #perfmatters Composite Needed composite composite
35. Don't use custom scroll libraries MOUSEWHEEL EVENT layout paint BLINK thread ! Composite Needed composite Compositor thread MISSED FRAMES Custom scroll handler == Slow Performance #perfmatters
36. <style> #staticHeader { position: fixed z-index: 0 } </style> #perfmatters CSS
37. Tooling and insight Tips and tools navigating Accelerated compositing.
38. How to see what layers you have Turn on "show layer borders" in devtools options #perfmatters
39. chrome://tracing 51ms to decode #perfmatters 29ms to resize 22ms
40. Browser-driven scroll COMPOSITE! 1 #perfmatters 2 3 4
41. JS driven Scroll COMPOSITE! 1 #perfmatters 2 33 ms 3
42. Webpage design with the GPU in mind ● GPU + Layers = faster rendering ● Too many layers = seriously bad time ● Let browser handle scrolling = steady frame rate ● Use tooling to show off how many layers you have #perfmatters
43. #perfmatters goo.gl/webperf </Thank You!> klobag@google.com colton@google.com +Grace Kloba +Colt McAnlis