浏览器渲染原理(一文搞懂)

浏览器渲染原理

Pasted image 20221119110527

前言

浏览器的主要功能总结起来就是一句话:将用户输入的 URL 转变成可视化的图像。

  1. URLDOM 树;
  2. DOM 树到可视化图像;
  3. 这两个过程之间的关系并没有那么明确,我们可以统称这两个过程为页面的渲染;

1. 网页的解析过程

  • 思考一下:一个网页从 url 输入到浏览器,经历过怎样的解析过程?

Pasted image 20221118173743

  • 要想深入理解下载的过程,我们还要先理解,一个 index.html 被下载下来后是如何被解析和显示在浏览器上的;

2. 浏览器的功能与组成

2.1 浏览器内核

  1. Trident ( 三叉戟): IE、 360 安全浏览器、 UC 浏览器
  2. Gecko( 壁虎) : Mozilla Firefox
  3. Presto(急板乐曲) -> Blink (眨眼): Opera
  4. Webkit : Safari、 360 极速浏览器、搜狗高速浏览器、移动端浏览器(Android、 iOS)
  5. Webkit -> Blink : Google Chrome, Edge

浏览器的内核相当于汽车的发动机,是最核心的存在,它负责将代码转换成用户眼中的界面。
  • 我们经常说的浏览器内核指的是浏览器的排版引擎:

    • 排版引擎 (layout engine),也称为浏览器引擎 (browser engine)、页面渲染引擎 (rendering engine) 或样版引擎;
  • 也就是一个网页下载下来后,就是由我们的渲染引擎来帮助我们解析的;

2.2 进程与线程

  • 进程与线程的解释:

    • 进程:程序的一次执行,它占有一片独有的内存空间,是操作系统执行的基本单元;
    • 线程:是进程内的一个独立执行单元,是 CPU 调度的最小单元;
  • 浏览器: 多进程、多线程模型

    • Browser 进程:

      • 浏览器的主进程,负责浏览器界面的显示,和各个页面的管理;
      • 浏览器中所有其他类型进程的祖先,负责其他进程的的创建和销毁,它有且只有一个!
    • Renderer 进程:

      • 网页渲染进程,负责页面的渲染,可以有多个渲染进程的数量,不一定是打开页面的数量;
    • GPU Process :负责 GPU 相关;
    • Plugin Process:负责控制一个网页用到的 Plugin

Pasted image 20221118175806

3. 浏览器渲染流程

3.1 渲染引擎解析过程

  • 渲染引擎在拿到一个页面后,如何解析整个页面并且最终呈现出我们的网页呢?

    • 我们通过下面的这幅图,让我们更加详细的学习它的过程;

Pasted image 20221116175343

3.2 渲染引擎主要模块

  • 一个渲染引擎主要包括:HTML 解析器,CSS 解析器,javascript 引擎,布局 layout 模块,绘图模块;

    • HTML 解析器:解释 HTML 文档的解析器,主要作用是将 HTML 文本解释成 DOM 树;
    • CSS 解析器:它的作用是为 DOM 中的各个元素对象计算出样式信息,为布局提供基础设施;
    • Javascript 引擎:使用 Javascript 代码可以修改网页的内容,也能修改 css 的信息,javascript 引擎能够解释 javascript 代码,并通过 DOM 接口和 CSS 树接口来修改网页内容和样式信息,从而改变渲染的结果
    • 布局 (layout):在 DOM 创建之后,Webkit 需要将其中的元素对象同样式信息结合起来,计算他们的大小位置等布局信息,形成一个能表达这所有信息的内部表示模型
    • 绘图模块 (paint):使用图形库将布局计算后的各个网页的节点绘制成图像结果

4. 渲染页面的详细流程

浏览器渲染页面的整个过程:浏览器会从上到下解析文档。

Pasted image 20221116180210

4.1 HTML 解析过程

遇见 HTML 标记,调用 HTML 解析器解析为对应的 token (一个 token 就是一个标签文本的序列化)并构建 DOM 树(就是一块内存,保存着 tokens,建立它们之间的关系)

Pasted image 20221116191638

4.2 生成 CSS 规则

遇见 style/link 标记调用解析器处理 CSS 标记并构建 CSS 样式树。

Pasted image 20221116191833

4.3 构建 Render Tree

当有了 DOM Tree CSSOM Tree 后,就可以两个结合来构建 Render Tree

Pasted image 20221116191924

  • 注意一link 元素不会阻塞 DOM Tree 的构建过程,但是会阻塞 Render Tree 的构建过程

    • 这是因为 Render Tree 在构建时,需要对应的 CSSOM Tree
  • 注意二Render TreeDOM Tree 并不是一一对应的关系

    • 比如对于 displaynone 的元素,压根不会出现在 render tree 中;

4.4 布局 (layout) 和绘制 (Paint)

  • 第四步是:在渲染树(Render Tree)上运行布局(Layout) 来计算每个节点的几何体。

    • 渲染树会表示显示哪些节点以及其他样式,但是不表示每个节点的尺寸、位置等信息;
    • 布局是确定呈现树中所有节点的宽度、高度和位置信息;
  • 第五步是:将每个节点绘制(Paint)到屏幕上。

    • 在绘制阶段,浏览器将布局阶段计算的每个 frame 转为屏幕上实际的像素点;
    • 包括将元素的可见部分进行绘制,比如文本、颜色、边框、阴影、替换元素(比如 img)

Pasted image 20221116192224

5. 重绘和回流解析

5.1 重绘(Repaint)

  • 第一次渲染内容称之为绘制(paint)

    • 之后重新渲染称之为重绘
  • 重绘不会带来重新布局,所以并不一定伴随重排。

    • 浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。
  • 什么属性会导致重绘呢?

    • color background box-shadow.. (比如修改背景色、文字颜色、边框颜色、样式等)

5.2 回流/重排(reflow)

理解回流 reflow :也可以称之为重排

  • 第一次确定节点的大小和位置,称之为布局(layout)

    • 之后对节点的大小、位置修改重新计算称之为回流
  • "重排/回流"必然导致"重绘"

    • 比如改变一个网页元素的位置,就会同时触发"重排"和"重绘",因为布局改变了
    • 所以回流是一件很消耗性能的事情
  • 什么属性会导致回流呢?

    • width top position.. (比如 DOM 结构发生改变 / 修改了布局)

5.3 常见的触发"回流/重排"操作

  • Reflow 的成本比 Repaint 的成本高得多的多。
  • 所以在开发中要尽量避免发生回流:

    1. 修改样式时尽量一次性修改

      • 将多次改变样式属性的操作合并成一次操作
      • 预先定义好 class,然后修改 DOM 的 className
    2. 尽量避免频繁的操作 DOM

      • 我们可以在一个 DocumentFragment 或者父元素中将要操作的 DOM 操作完成,再一次性的操作;
    3. 尽量避免通过 getComputedStyle 获取尺寸、位置等信息;
    4. 对某些元素使用 positionabsolute 或者 fixed

      • 并不是不会引起回流,而是开销相对较小,不会对其他元素造成影响。

5.4 合成和性能优化

  • 绘制的过程,可以将布局后的元素绘制到多个合成图层中

    • 这是浏览器的一种优化手段
  • 默认情况下,标准流中的内容都是被绘制在同一个图层(Layer)中的
  • 而一些特殊的属性,会创建一个新的合成层( CompositingLayer ),并且新的图层可以利用 GPU 来加速绘制

    • 因为每个合成层都是单独渲染
  • 那么哪些属性可以形成新的合成层呢? 常见的一些属性:

    • 3D transforms
    • video、 canvas、 iframe
    • opacity 动画转换时
    • position: fixed
    • will-change:一个实验性的属性,提前告诉浏览器元素可能发生哪些变化
    • animation 或 transition 设置了 opacity、 transform
  • 分层确实可以提高性能,但是它以内存管理为代价,因此不应作为 web 性能优化策略的一部分过度使用

Pasted image 20221116223554

5.5 script 元素和页面解析的关系

  • 我们现在已经知道了页面的渲染过程,但是 JavaScript 在哪里呢?

    • 事实上,浏览器在解析 HTML 的过程中,遇到了 script 元素是不能继续构建 DOM 树的;
    • 它会停止继续构建,首先下载 JavaScript 代码,并且执行 JavaScript 的脚本;
    • 只有等到 JavaScript 脚本执行结束后,才会继续解析 HTML,构建 DOM 树;
  • 为什么要这样做呢?

    • 这是因为 JavaScript 的作用之一就是操作 DOM,并且可以修改 DOM
    • 如果我们等到 DOM 树构建完成并且渲染再执行 JavaScript,会造成严重的回流和重绘,影响页面的性能;
    • 所以会在遇到 script 元素时,优先下载和执行 JavaScript 代码,再继续构建 DOM 树;
  • 但是这个也往往会带来新的问题,特别是现代页面开发中:

    • 在目前的开发模式中(比如 VueReact),脚本往往比 HTML 页面更“重”,处理时间需要更长;
    • 所以会造成页面的解析阻塞,在脚本下载、执行完成之前,用户在界面上什么都看不到;
  • 为了解决这个问题, script 元素给我们提供了两个属性(attribute): deferasync

6. defer 和 async 属性

6.1 defer 属性

  • defer 属性:告诉浏览器不要等待脚本下载,而继续解析 HTML构建 DOM Tree

    • 脚本会由浏览器来进行下载,但是不会阻塞 DOM Tree 的构建过程;
    • 如果脚本提前下载好了,它会等待 DOM Tree 构建完成,在 DOMContentLoaded 事件之前先执行 defer 中的代码;
  • 所以 DOMContentLoaded 总是会等待 defer 中的代码先执行完成

Pasted image 20221118091923

  • 另外多个带 defer 的脚本是可以保持正确的顺序执行的。

    • 从某种角度来说, defer 可以提高页面的性能,并且推荐放到 head 元素中;
    • 注意: defer 仅适用于外部脚本,对于 script 默认内容会被忽略。

6.2 async 属性

  • sync 特性与 defer 有些类似,它也能够让脚本不阻塞页面
  • async 是让一个脚本完全独立的:

    • 浏览器不会因 async 脚本而阻塞(与 defer 类似);
    • async 脚本不能保证顺序,它是独立下载、独立运行,不会等待其他脚本;
    • async 不会能保证在 DOMContentLoaded 之前或者之后执行

Pasted image 20221118092245

  • defer 通常用于需要在文档解析后操作 DOM 的 JavaScript 代码,并且对多个 script 文件有顺序要求的;

    • async 通常用于独立的脚本,对其他脚本,甚至 DOM 没有依赖的;

学习前端

262 声望
596 粉丝
0 条评论
推荐阅读
单文件组件下的vue,可以擦出怎样的火花
与时俱进吧,看着 vue3 和 vite,虽然不会用,但还是心痒痒,然后就把原先基于 vue@2 的实现做了重构。不周之处,大家见谅!下面关于过期的内容,我就用删除线标记了。

leftstick64阅读 45.1k评论 18

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木142阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图

学习前端

262 声望
596 粉丝
宣传栏