前端工程师需要知道的「浏览器渲染」

前端工程师为什么要明白浏览器渲染?

比如说从完美(Pixel Perfection)、分辨率无关(Resolution
Independent)和多平台体验一致性是设计师们的求偶。
可访问性(Accessability)、加载性能及重构灵活性则是前者工程师等关注的主题。其中加载性能及浏览器的渲染机制深入挂钩,弄明白浏览器背后的渲染机制,才能够于平凡的前端的支出被清楚如何进行性能优化。

浏览器如何渲染页面

浏览器解析
1、浏览器通过请的 URL
进行域名解析,向服务器发起呼吁,接收文件(HTML、CSS、JS、Images等等)。
2、HTML 文件加载后,开始构建 DOM Tree
3、CSS 样式文件加载后,开始解析和构建 CSS Rule Tree
4、Javascript 脚本文件加载后, 通过 DOM API 和 CSSOM API 来操作 DOM Tree
和 CSS Rule Tree

浏览器渲染
1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree
2、Rendering Tree 并无与 DOM Tree 对应,比如像 <head>
标签内容要包含 display: none; 的因素节点并无包于 Rendering Tree 中

3、通过 CSS Rule Tree 匹配 DOM Tree 进行固化坐标和尺寸,是否换行,以及
position、overflow、z-index 等等属性,这个历程叫 Flow 或 Layout 。
4、最终经过调用Native GUI 的 API 绘制网页画面的长河叫 Paint 。

Webpage Rendering

当用户在浏览网页经常开展互或透过 js
脚本改变页面结构时,以上之局部操作发生或再运行,此过程叫 Repaint 或
Reflow。

Repaint
当元素改变之时节,将不见面影响因素于页面中的岗位(比如 background-color,
border-color,
visibility),浏览器就会用新的体制重绘此因素,此过程叫 Repaint。

Reflow
当元素改变之时段,将会晤潜移默化文档内容或结构,或因素位置,此过程叫
Reflow。( HTML 使用的凡 flow based layout
,也便是流式布局,所以,如果某个元件的几哪里尺寸发生了变通,需要重布局,也尽管深受
Reflow。)

Reflow 的本比 Repaint 的财力大得多的大多。一个结点的 Reflow
很有或导致子结点,甚至父点以及同级结点的 Reflow
。在部分赛性能的微机及或许还无什么,但是若 Reflow
发生在手机上,那么这个过程是延慢加载与耗电之。—-浏览器的渲染原理简介

以下行为将出或发生 Reflow

  • 增加、删除、或改变 DOM 节点
  • 增加、删除 ‘class’ 属性值
  • 要素尺寸改变
  • 文本内容改动
  • 浏览器窗口改变大小要拖动
  • 动画片效果开展测算和反 CSS 属性值
  • 伪类激活(:hover)

栗子:

�Repaint and Reflow

自,我们的浏览器是聪明的,它不见面如面那样,你各个改一坏样式,它就是
Reflow 或 Repaint
一差。一般的话,浏览器会把如此的操作积攒一批,然后做同软 Reflow
,这又吃异步 reflow 或增量异步 Reflow
。但是发生几情况浏览器是休见面这样做的,比如:Resize
窗口,改变了页面默认的书,等。对于这些操作,浏览器会立马进行 Reflow
。—-浏览器的渲染原理简介

如何优化浏览器渲染过程

最佳实践
1、创建中之 HTML 和 CSS
,不要忘记指定文档编码,比如<meta charset="utf-8">
2、CSS 样式应该包含在 <head>中, Javascript 脚本出现于
<body>末尾。
3、减少 CSS 嵌套层级和选合适的选择器,可参考 怎么样提升 CSS
选择器性能。

4、不要通过 JS 逐条修改 DOM 的样式,提前定义好 CSS 的 Class 进行操作。

提前定义好 CSS 的 Class

5、尽量减少将 DOM 节点属性值放在循环中,会招大气读写这个属性值。
6、尽可能的吗出动画的 HTML 元素使用 fixed 或 absolute 的 position
,那么修改他们之 CSS 是无会见 Reflow 的。

相关文章