06-Browser rendering principle

What is rendering?

 render, HTML string -- rendering --> pixel information

The URL address is a string, HTML, css, js are all inside

Rendering can be imagined as a function, the code:

function render (html) {
	/*  第一行
		第二行
	*/
	return pixels;
}

rendering time point

From entering the URL address and pressing Enter to displaying the page, what happened?

The focus is on two parts, network: take HTML, rendering: rendering

rendering pipeline

 

Parse HTML, parse HTML

Form DOM tree and CSSOM tree

 

 

In addition to the browser's default style sheet, other JS can operate

Download the plug-in to watch the Chrome source code online

 Search for Chromium, copy URL

 

 In this way, you can view the source code of Chrome browser online

view page styles

 It is more commonly used in the general framework

/* 给页面所有div加边框 */
document.styleSheets[0].addRule('div', 'border: 2px solid #c00000 !important')

 

CSS code does not block html parsing because they are on different threads

JS code will block html parsing, you need to pause when encountering JS, because JS may modify the DOM tree

 Style calculation - Recalculate Style

 The calculation process of CSS property values, cascading, inheritance

 

 The final style will turn the default value into an absolute unit

For example the color "#f40" becomes "rgb(255, 0, 22)"

or rem becomes px

 Get the final style

getComputedStyle()

The position, width and height are relative to the containing block. Relative to the first positioned element, it is not necessarily the parent element. If there is no parent element, it will keep searching until there is a positioned containing block

 The browser's default style sheet stipulates that the head is hidden, and it will not appear in the layout tree because it has no geometric information

 

 

 

 

 The layout tree is not a DOM object, but it can get some attributes indirectly, such as

document.body.clientHeight
635
document.body.clientWidth
1275
document.body.offsetHeight
635

 Layered-Layer

 

 

 

 Draw - Paint 

 

 

 Chunking = Tiling compositing threads

 

 Rasterization - Raster

 

 

 

Draw- Draw

 

 

 

 

Interview question: How does the browser render the page?

 

 

What is reflow?

Relayout (typography)

Changing the geometric information will reflow

 

 

 

What is repaint?

 

 

why transform