Jayson柴

浏览器渲染原理

1 浏览器是如何渲染页面的？

浏览器的渲染 render
将 html 字符串 --> 像素信息

function render(html) {
	// ...
	return pixels;
}

网络：拿 HTML（JS和CSS也在HTML中）；
渲染：渲染；

当浏览器的 网络线程 收到 HTML 文档后，会产生一个 渲染任务，并将其传递给 渲染主线程 的消息队列。

在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

渲染流程阶段：
HTML 字符串 —> 解析 HTML —> 样式计算 —> 布局 —> 分层 —> 绘制 —> 分块 —> 光栅化 —> 画 —> 像素信息

1.1 解析 HTML

将 HTML 字符串解析成 DOM 树（Document Object Model）和 CSSOM 树（CSS Object Model）

解析 HTML

DOCTYPE html>
<html>

<head>
    <title>page titletitle>
    <style>
        /* ... */
    style>
head>

<body>
    <h1>titleh1>
    <div>
        <p>paragraphp>
    div>
    <script>
        console.log('hello world');
    script>
body>

html>

解析 CSS

body h1 {
    color: red;
    font-size: 3em;
}

div p {
    margin: 1em;
    color: blue;
}

StyleSheetList 样式表有：内部样式表