Download to read offline
More Related Content
Similar to From HTML to pixels on the Screen
From HTML to pixels on the Screen
- 1. FROM HTML TO PIXELSON THESCREEN IGORTALIC https://www.linkedin.com/in/igortalic/ FROM HTML TO PIXELS ONTHE SCREEN Igor Talić Integrateddevicesdeveloper /igortalic
- 2. BROWSER RENDERING ENGINE •Rendering performance tips • Keeping the app running at 60FPS
- 3. Sections • Browser renderingpipeline • Layers, 3D vs 2D difference • Demo
- 4. BROWSERS RENDERING ENGINES TRIDENTGECKO PRESTO WEBKIT BLINK InternetExplorer WindowsMobile AOL Browsers Mozilla Firefox Firefox OS Opera13 OperaMini OperaMobile Safari webOS Android Chrome Opera14+ Android14+
- 5.
- 6. HTML& CSSPARSER • HTMLparser is not trivial asCSS parser • HTML parser tries to correct mistakes • HTML parser can be blocked • Process is reentrant – scripts can modify HTML • Support for speculative parsing – Parse ahead • End result is DOM and CSSOM
- 7. HTML& CSSPARSER PERFORMANCE TIPS: •Scripts, links and styles block parsing • Fewerelements faster parsing, removecomments • Minification helps with faster download faster unblocks parser • Clean code– remove unused code • Async scripts
- 8. RENDER/FRAME TREE • Hasmultipletrees and structs • The most complex process • Visualrepresentation of the document • Non-visualDOM elements willnot be inserted in the render tree, likehead or elements with display none( but elements with visibilityhidden are ) • Style computation • End result rules for drawing
- 9.
- 10. LAYOUT • Sets nodesposition and size • Hasa batch model / batching dirty nodes • Trigger by browser resize, innerHeight, fontSize, getComputedStyles… PERFORMANCE TIP: • Layout trashing
- 11.
- 12. PAINT • Takes theinformation from render tree • Creates layers • Creates bitmaps for each layer and sends it to the GPU • The SkiaGraphics Engine – Used in Blink
- 13. LAYERS • Layersare GraphicsLayersthatbrowserusestoseparaterenderingofUIelements Creatinglayers: • 3D or perspective transformCSS properties • <video> elements using acceleratedvideo decoding • <canvas>elements witha 3D (WebGL) context or accelerated2D context • Composited plugins (i.e. Flash) • Elements withCSS animationfor theiropacity or using ananimatedtransform • Elements withacceleratedCSS filters • Element hasa descendantthathasa compositing layer (in otherwords if theelement has achildelement that’sin its ownlayer) • Element hasa sibling witha lower z-index whichhas acompositing layer (in otherwords the it’srendered on topof a composited layer)
- 14. TRANSFORM3D vs 2D •3D uses the GPU • Once on GPU translate, scale & rotate don’t trigger repaint and layout
- 15. Q&A • https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction • https://www.html5rocks.com/en/tutorials/speed/layers/ •https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome • https://www.youtube.com/playlist?list=PLAwxTw4SYaPmKmNX-INgcxQWf30KuWa_A