前端工程师为啥供给掌握浏览器渲染?

像素完美(Pixel Perfection)、分辨率无关(Resolution
Independent)和多平台体验壹致性是设计师们的言情。
可访问性(Accessability)、加载质量和重构灵活性则是前者工程师们关注的主旨。个中加载性能与浏览器的渲染机制深远挂钩,弄明白浏览器背后的渲染机制,才能在平日的前端的开发中领悟怎样实行质量优化。

浏览器咋样渲染页面

浏览器解析
壹、浏览器通过请求的 U福特ExplorerL
实行域名解析,向服务器发起呼吁,接收文件(HTML、CSS、JS、Images等等)。
贰、HTML 文件加载后,起首创设 DOM Tree
三、CSS 样式文件加载后,开头解析和创设 CSS Rule Tree
四、Javascript 脚本文件加载后, 通过 DOM API 和 CSSOM API 来操作 DOM Tree
和 CSS Rule Tree

浏览器渲染
一、浏览器引擎通过 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 。
4、最终经过调用Native GUI 的 API 绘制网页画面的经过称为 Paint 。

Webpage Rendering

当用户在浏览网页时展开互动或通过 js
脚本改变页面结构时,以上的1部分操作有十分大大概再一次运营,此进度称为 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
。—-浏览器的渲染原理简介

什么样优化浏览器渲染进度

最棒实践
一、创立有效的 HTML 和 CSS
,不要忘记钦点文书档案编码,比如<meta charset="utf-8">
贰、CSS 样式应该包括在 <head>中, Javascript 脚本出现在
<body>末尾。
三、收缩 CSS 嵌套层级和抉择10分的选取器,可参考 何以升级 CSS
选拔器质量

肆、不要通过 JS 逐条修改 DOM 的体裁,提前定义好 CSS 的 Class 举行操作。

提前定义好 CSS 的 Class

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图