乐趣区

关于前端:浏览器组成与渲染重绘与重排总结

浏览器次要组成

浏览器是多过程的,一个页面从申请到渲染,是多个过程在同时进行,这些过程次要由以下的组件产生。

浏览器次要组成:

  • 用户界面(The user interface)
  • 浏览器引擎(The browser engine)
  • 渲染引擎(The rendering engine)
  • 网络(Networking)
  • UI 后端绘制(UI backend)
  • js 解析器(JavaScript interpreter)
  • 数据存储(Data storage)

渲染引擎

渲染引擎次要渲染 html、css、图片 等内容。 不同浏览器的渲染机制有差别。

渲染步骤

浏览器渲染网页的过程,次要有以下几个步骤

  1. 解析 HTML,生成 DOM 树
  2. 构建 DOM 树:此时只有形态和色彩等属性
  3. 渲染树结构:给每个节点都加上坐标,形成显示布局
  4. 绘制树:给节点加上 UI 款式,进行绘制显示

下图是 webkit 内核(chrome)的渲染流程:

重绘和重排

  • 重绘:当元素外观的扭转时触发。如扭转 vidibility、outline、背景色等属性。
  • 重排 / 回流:当元素的地位和几何信息扭转时触发。如扭转窗口大小、元素的 width、height、position 等。

重排处于 layout 阶段、重绘处于 paint 阶段,越往前损耗越高,所以重排会比重绘要耗费性能。

留神:重排肯定会触发重绘,而重绘不肯定会重排。

重绘(repaint)

1. 导致 repaint 的操作:

  • 所有扭转元素外观的操作:color、background、box-shadow 等。

2. 常见的引起 repaint 的元素

常见 repaint 元素
color border-style visibility background
text-decoration background-image background-position background-repeat
outline-color outline outline-style border-radius
outline-width box-shadow background-size

重排 / 回流(reflow)

1、导致 reflow 的操作:

  • 扭转窗口大小
  • 扭转文字大小
  • 增加 / 删除样式表
  • 内容的扭转,(用户在输入框中写入内容也会)
  • 激活伪类,如:hover
  • 操作 class 属性
  • 脚本操作 DOM
  • 计算 offsetWidth 和 offsetHeight
  • 设置 style 属性

2、常见的引起的 reflow 元素

常见 reflow 元素
width height padding margin
display border-width border top
position font-size float text-align
font-family line-height vertical-align right
clear white-space bottom min-height

3、如何缩小重排?

  1. 不要一条一条地批改 DOM 的款式,事后定义好 class,而后批改 DOM 的 className
  2. 把 DOM 离线后批改,比方:先把 DOM 给 display:none (有一次 Reflow),而后你批改 100 次,而后再把它显示进去
  3. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
  4. 尽可能不要批改影响范畴比拟大的 DOM
  5. 为动画的元素应用相对定位 absolute / fixed
  6. 不要应用 table 布局,可能很小的一个小改变会造成整个 table 的从新布局

参考文章:

  • How Browsers Work: Behind the scenes of modern web browsers
  • css 重排和重绘总结
  • 你真的理解回流和重绘吗
退出移动版