浏览器渲染原理

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、绘画每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。这样，整个渲染流程就形成了一套组织严密的生产流水线。

HTML 解析

解析成 DOM 树和 CSSOM 树：

<!DOCTYPE html>
<html>
  <head>
    <title>page title</title>
    <style></style>
  </head>
  <body>
    <h1>title</h1>
    <div>
      <p>paragraph</p>
    </div>
    <script>
      console.log('helloworld')
    </script>
  </body>
</html>

DOM

body h1{
  color: red;
  font-size: 3em;
}
div p {
  margin: 1em;
  color: blue;
}

CSSOM

浏览器中有三种样式表：

作者样式表（Author Style Sheets）由网页开发者编写，包括：

内联样式（Inline Styles） 直接通过元素的 style 属性定义，优先级最高，例如： <p style="color: red;">文本</p>。

内部样式表（Internal Style Sheets） 通过 <style> 标签在 HTML 文档头部定义，适用于单个页面的特殊样式。

外部样式表（External Style Sheets） 通过 <link> 标签引入独立的 .css 文件，可跨页面复用，便于维护。

用户样式表（User Style Sheets）由用户自定义，用于覆盖默认样式或增强可访问性。例如：

Chrome 用户可通过 User StyleSheets\Custom.css 文件定义全局样式。

用户样式支持 !important 标记，可强制覆盖作者样式（级联规则例外）。

浏览器默认样式表（Browser Default Styles）浏览器内置的基础样式，用于未定义其他样式时的默认渲染。例如：

超链接默认显示为蓝色带下划线（a { color: blue; text-decoration: underline; }）。

标题（h1-h6）有特定字号和外边距，列表（li）默认以项目符号显示。

Tips：通过 CSSOM 全局添加样式

HTML 解析​

HTML 解析