浏览器渲染页面原理

浏览器渲染页面原理

当了解web访问原理后，与前端工程师或页面重构师工作更为关系密切的应该是浏览器，WEB 页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验， 特别是浏览器渲染页面的原理，页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程，理解了原理就更会容易理解前端优化的一些准则。

主要过程：

1. 用户输入网址（假设是个 HTML 页面，第一次访问，无缓存情况），浏览器向服务器发出HTTP请求，服务器返回 HTML 文件； （善用缓存，减少HTTP请求，减轻服务器压力）

2. 浏览器载入 HTML 代码，发现 head 内有一个 link 引用外部 CSS 文件,则浏览器立即发送CSS文件请求，获取浏览器返回的CSS文件； （CSS文件合并，减少HTTP请求）

3. 浏览器继续载入 HTML 中 body部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了； （CSS文件需要放置最上面，避免网页重新渲染）

4. 浏览器在代码中发现一个 img 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；（图片文件合并，减少HTTP请求）

5. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码； （最好图片都设置尺寸，避免重新渲染）

6. 浏览器发现了包含一行的JS代码的script标签，会立即运行JS代码

7. js脚本执行了语句，它令浏览器隐藏掉代码中的某个 div,突然就少了一个元素，浏览器不得不重新渲染这部分代码（页面初始化样式不要使用js控制

8. 用户点了一下界面中的“换肤”按钮，JavaScript 让浏览器换了一下 link 标签的 CSS 路径；

9. 浏览器召集了在座的各位 div、span、ul、li 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

   影响页面渲染速度主要有：reflow(回流)和repaint(重绘)

reflow(回流)

说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染， 该过程称为reflow（回流）。

reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint(重绘)

如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。

repaint 的速度明显快于 reflow（在IE下需要换一下说法，reflow 要比 repaint 更缓慢）。

尽量避免reflow(回流)

reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。

在哪些情况下会导致reflow发生：
改变窗口大小
改变文字大小
添加/删除文字样式表
内容的改变，比如用户在输入框里敲字
操作class属性
设置style属性
脚本操作DOM
计算offsetWidth和offsetHeight
reflow是不可避免的，只能将reflow对性能的影响减到最小
尽可能限制reflow的影响范围。需要改变元素的样式，不要通过父级元素影响子元素。最好直接加在子元素上。
通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。实现元素的动画，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局。
权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
很多情况下都会触发reflow，如果css里有expression，每次都会重新计算一遍。
减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。
via： https://www.cnblogs.com/Peng2014/p/4687218.html