前端工程师要求掌握的「浏览器渲染」

前者工程师为啥必要精通浏览器渲染?

像素完美(Pixel Perfection)、分辨率毫无干系(Resolution
Independent)和多平台体验一致性是设计师们的求偶。
可访问性(Accessability)、加载品质和重构灵活性则是前者工程师们关怀的主旨。个中加载质量与浏览器的渲染机制深切挂钩,弄通晓浏览器背后的渲染机制,才能在平常的前端的开销中领略怎么着开始展览品质优化。

浏览器怎样渲染页面

浏览器解析
1、浏览器通过请求的 U猎豹CS陆L
举办域名解析,向服务器发起呼吁,接收文件(HTML、CSS、JS、Images等等)。
二、HTML 文件加载后,早先构建 DOM Tree
3、CSS 样式文件加载后,初步解析和构建 CSS Rule Tree
四、Javascript 脚本文件加载后, 通过 DOM API 和 CSSOM API 来操作 DOM Tree
和 CSS Rule Tree

浏览器渲染
1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 创设 Rendering Tree
二、Rendering Tree 并不与 DOM Tree 对应,比如像 <head>
标签内容或含有 display: none; 的成分节点并不包罗在 Rendering Tree 中

三、通过 CSS Rule Tree 相称 DOM Tree 进行定点坐标和尺寸,是或不是换行,以及
position、overflow、z-index 等等属性,那个进程称为 Flow 或 Layout 。
四、最后经过调用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
3回。一般的话,浏览器会把这么的操作积攒一堆,然后做贰回 Reflow
,这又叫异步 reflow 或增量异步 Reflow
。不过有个别意况浏览器是不会那样做的,比如:Resize
窗口,改变了页面默许的书体,等。对于那几个操作,浏览器会立马实行 Reflow
。—-浏览器的渲染原理简介

怎样优化浏览器渲染进度

至上实践
一、创造有效的 HTML 和 CSS
,不要遗忘钦定文书档案编码,比如<meta charset="utf-8">
贰、CSS 样式应该包涵在 <head>中, Javascript 脚本出现在
<body>末尾。
三、减弱 CSS 嵌套层级和甄选万分的采取器,可参考 怎么着进步 CSS
选拔器性能

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

提早定义好 CSS 的 Class

五、尽量减元帅 DOM 节点属性值放在循环个中,会造成大气读写此属性值。
陆、尽或然的为发生动画的 HTML 成分使用 fixed 或 absolute 的 position
,那么修改他们的 CSS 是不会 Reflow 的。

相关文章