[Optimising using Chrome Dev Tools] Notes from a free Udacity course. #performance

optimising-using-chrome-dev-tools.md

Optimising using Chrome Dev Tools

Created: 2017.04.19

Notes from a free Udacity course.

Website Performance Optimisation Testing

The version of Chrome Dev Tools used in the video appears to differ, so YMMV

Render path

1. DOM
2. CSSOM
3. Combine to create the render tree
4. Figure out the layout
5. Then paint the pixels on the screen

JavaScript is mixed up in this and affects the rendering pipeline.

Optimising this path will allow us to render a document in only 1 second.

Parsing HTML

1. Tokenizer - pull out tags
2. Create node
3. The order of the nodes creates a structure - the DOM tree

Timeline

Incremental HTML delivery allows parts of the page to render before everything is ready

1. Hit reload to capture the Timeline profile as the page loads
2. Drag to select a narrow band of the Timeline
3. Click on an item in Main
4. Select the Call Tree tab for more details about what an event consists of. There is a mixture of events firing: Parse HTML, Evaluate Script, Parse Stylesheet, Recalculate Style, etc
5. Or select Event Log, then click on a coloured block.

DOM construction is incremental.

CSS is render blocking, it can't render the css tree incrementally.

Selector matching is unlikely the cause of the bottlenecl

Measure first then optimise as needed

Constructing the Render Tree

• Walking the DOM, left to right, top to bottom, each node or child node is matched to the CSSOM.
• When there is a match the node is copied over to the The Render Tree, both the content and the CSS styles. Note that The render tree only captures visible content, so any hidden content is omitted.

Expensive Layout

<meta name="viewport" content="width=device-width"

This instructs the browser to use the full width of the viewport. On a phone the viewport might only be 320px wide. A typical non-responsive layout might be 980px wide. Setting the viewport width scales the 980px down to 320px - scaling the whole layout to roughly 1/3rd of the size that it would render on a desktop screen.

Rotating a device or resizing a browser window requires the browser to recalculate all proportional widths and repaint the layout.

'Batching' changes allows us to optimise layout rendering. Udacity run a course named Browser Rendering Optimization