• 浏览器渲染原理

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

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

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

    • 1
    • 2
    • 3
    • 4

    网络：拿 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    • 解析 CSS
    body h1 {
    color: red;
    font-size: 3em;
}

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    StyleSheetList 样式表有：内部样式表