Download - Chrome Internals: Paint and Composition
![Page 1: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/1.jpg)
CHROME INTERNALS: PAINT AND COMPOSITION
by Dzmitry Varabei
![Page 2: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/2.jpg)
Demo
![Page 3: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/3.jpg)
Page Rendering Cycle
• Parse HTML and CSS files
• Build the DOM
![Page 4: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/4.jpg)
Nodes and the DOM tree
<html>
<body>
<div>
Hello
</div>
</body>
</html>
HTMLDocument
HTMLHTMLElement
HTMLBodyElement
HTMLDivElement
Text("Hello")
![Page 5: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/5.jpg)
Page Rendering Cycle
• Parse HTML and CSS files
• Build the DOM
• Calculate CSS property values
• Build the rendering tree
![Page 6: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/6.jpg)
RenderObject Tree
This is a data structure that helps the browser perform layout tasks.
display:none
<head>
<script>
<style>
anonymous line box
:before
![Page 7: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/7.jpg)
Page Rendering Cycle
• Parse HTML and CSS files
• Build the DOM
• Calculate CSS property values
• Build the rendering tree
• Calculate layout
• Paint
• Composite
• Draw the final screen image onto the screen
![Page 8: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/8.jpg)
Display refresh rate
~ 60Hz
or
~16.6ms to make a frame
![Page 9: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/9.jpg)
console> chrome.exe
--enable-threaded-compositing
--force-compositing-mode
--enable-impl-side-painting
--enable-skia-benchmarking
--allow-webui-compositing
Google Chrome Canary
![Page 10: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/10.jpg)
Trace Event Profiling Tool
about://tracing/
Read more: http://dev.chromium.org/developers/how-tos/trace-event-profiling-tool
![Page 11: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/11.jpg)
Demo – CSS Paint Order
![Page 12: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/12.jpg)
Paint
The phase of rendering where RenderObjects make calls into the GraphicsContext API to make a visual representation of themselves
![Page 13: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/13.jpg)
Skia Graphics Engine
Skia is the open source C++ graphics library for drawing Text, Geometries, and Images.
https://code.google.com/p/skia/
![Page 14: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/14.jpg)
Skia is currently used in
Google Chrome
Mozilla Firefox
Chrome OS
Android
Sublime Text 3
![Page 15: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/15.jpg)
Skia Debugger - Demo
![Page 16: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/16.jpg)
How to save .skp files from Chromium?
http://www.chromium.org/developers/how-tos/trace-event-profiling-tool/saving-skp-s-from-chromium
![Page 17: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/17.jpg)
What cause complex painting?
• image decodes/resizes • box-shadow (essentially improved over the past 2 years) • border-radius • border-radius + box-shadow Read more: CSS Paint Times and Page Render Weight
![Page 18: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/18.jpg)
Software mode VS Accelerated compositing mode
![Page 19: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/19.jpg)
Composition
![Page 20: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/20.jpg)
Accelerated compositing mode
Layer bitmaps are transferred to the GPU, combined ("composited"), and drawn on the screen.
![Page 21: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/21.jpg)
Layer
Layer: section of the page, subtree of the DOM. Painted independently, composited on the GPU, and can stretch, move, and fade without repainting.
![Page 22: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/22.jpg)
Which elements have their own layer?
• Root page object
• Canvas
• Video element
• plugins (flash and etc)
• Elements with CSS properties: TranslateZ, Translate3d, Opacity, ScaleZ, RotateZ...
• 2D Transforms do not create layer
![Page 23: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/23.jpg)
The cost of too many layers:
Additional GPU and memory usage
![Page 24: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/24.jpg)
Render profiling tools
• Show FPS
• Show paint rectangles
• Continuous page repainting
• Show composited layer borders
• Timeline -> Frames
![Page 25: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/25.jpg)
Questions?
![Page 26: Chrome Internals: Paint and Composition](https://reader034.vdocument.in/reader034/viewer/2022042606/54b731db4a795912438b45a7/html5/thumbnails/26.jpg)
Resources
• How Browsers Work • http://jankfree.org/ • Jank Free: Chrome Rendering Performance • Compositing in Blink and WebKit • Trace Event Profiling Tool (about:tracing) • GPU Accelerated Compositing in Chrome • CSS Paint Times and Page Render Weight • http://dev.chromium.org/developers/tech
-talk-videos