浏览器渲染过程

浏览器向服务器发起请求

  • 浏览器从 DNS 服务器得到域名对应的 IP 地址
  • 浏览器向这个 IP 地址对应的服务器发送请求
  • 服务器接收、处理请求并返回内容(响应)
  • 浏览器下载响应内容

浏览器渲染过程

  • 根据 HTML 构建 HTML 树(DOM)
  • 根据 CSS 构建 CSS 树(CSSOM)
  • 将 DOM 和 CSSOM 合并成一个“渲染树”(Render Tree)

image.png

  • 根据 Render Tree 来布局(Layout),计算文档流、盒模型、大小和位置等
  • 将各个节点绘制(Paint)到屏幕上;(文本、颜色、图像、边框和阴影等)
  • 根据层叠关系合成(Composite)展示画面

浏览网页看起来可能很简单,但实际上浏览器需要完成相当多的工作。如果 DOM 或 CSSOM 被修改,浏览器只能再执行一遍以上所有步骤,以确定哪些像素需要在屏幕上进行重新渲染。

使用浏览器开发者工具查看浏览器绘制状态

  1. 点击开发者工具任意Tag
  2. 按 ESC 弹出另一工具栏
  3. 左边菜单栏添加Rendring
  4. 勾选Paint Flashing

image.png

如何更新样式

一般采用JS更新,例如:

div.style.background ='red'
div.style.display ='none'
div.classList.add ('red')
div.remove()
等等
复制代码


浏览器在实现视觉变化时,通常有三种方式:


【1】全走

JS / CSS > 样式 > 布局 > 绘制 > 合成

image.png

例:div.remove()会触发当前元素消失,布局发生改变,其他所有元素重新布局(Layout),任何受影响的部分都需要重新绘制,而且最终绘制的元素需进行合成。


【2】跳过Layout

JS / CSS > 样式 > 绘制 > 合成

image.png

例:修改背景颜色、文字颜色或阴影等,不会影响页面的布局,浏览器会跳过布局(Layout),直接绘制(Paint)+合成(Composite)。


【3】跳过Layout和Paint

JS / CSS > 样式 > 合成

image.png

例:改变transform等,浏览器直接跳到合成(Composite)。


以上三种方式,第三种所消耗的性能最少。


想要知道CSS什么属性触发了什么流程,可以到 CSS Triggers 查询

分类:
前端
标签: