浏览器渲染页面的过程、重绘、重排以及页面优化

各常用浏览器所用的内核和前缀

1.IE浏览器内核：Trident内核，也是俗称的IE内核； 前缀：-ms-

2.Chrome浏览器内核：Blink内核； 前缀：-webkit-

3.Firefox浏览器内核：Gecko内核，俗称Firefox内核；前缀：-moz-

4.Safari浏览器内核：Webkit内核； 前缀：-webkit-

5.Opera浏览器内核：Blink内核； 前缀：-o-

6.360浏览器、猎豹浏览器内核、2345浏览器：IE+Chrome双内核；

7.搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

9.百度浏览器、世界之窗内核：IE内核； 

 

浏览器渲染页面的过程

1.代码解析：浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM ，根据 CSS 生成 CSSOM（CSS对象模型）

2.对象合成：将 DOM 和 CSSOM 合并产生渲染树（render tree）

3.布局（layout）：有了渲染树，知道了所有节点的样式，便根据这些节点以及样式计算它们在浏览器中确切的大小和位置

4.绘制（paint）：把节点绘制到浏览器上

以上四步并非严格按顺序执行，往往第一步还没完成，第二步和第三步就已经开始了。所以，会看到这种情况：网页的HTML代码还没下载完，但浏览器已经显示出内容了。

渲染的过程中值得注意的地方：

  • html 一边解析一边显示，css 的加载和解析不会阻塞 html 文档的解析

  • css 必须完全解析完毕才能进入生成渲染树环节，css的解析会阻塞js的执行，必须等到CSSOM生成后才能执行 js

  • js 的执行会阻塞 html 文档的解析（加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染。原因是JavaScript可以修改DOM，所以必须把控制权让给它）

 

重绘（repaint）

元素的视觉表现属性被改变即触发重绘，如visibility、opacity ，不会影响到 dom 结构。

 

重排（reflow）/回流

就是渲染树的一部分必须要更新，并且节点的尺寸发生了变化。重排也会触发重绘。常见情况：

  • DOM 操作

  • 修改 width、display 等 CSS 属性

  • 浏览器窗口变化（滚动或缩放）

 

其他概念：

首屏时间：当浏览器显示第一屏页面所消耗的时间

白屏时间：浏览器开始显示内容的时间

 

页面优化

要进行页面优化，首要目标就是减少重绘和重排

 

1.CSS 标签应该放到头部（<head></head>之间）：如果 CSS 放在后面页面可能会出现闪跳、白屏或者布局混乱直到 CSS 加载完成。

 

2.script 标签都放在页面底部（</body>前）：这样即使遇到脚本失去响应，网页主体的渲染也已经完成了。还有一个好处，在DOM结构生成之前就调用DOM，JavaScript会报错，如果脚本都在网页尾部加载，就不存在这个问题，因为这时DOM肯定已经生成了。或者在标签中使用 async或defer特性 。

3.合理高效利用 CSS 选择器：CSS 是逆向解析的所以应当避免多层嵌套，避免使用通配器。尽量少的去对标签进行选择，而是用 class。不要去用标签限定ID或者类选择符，尽量少的去使用后代选择器，降低选择器的权重值。考虑继承。

4.减少HTTP请求，压缩数据内容。进行资源打包，将需要多次请求的资源进行打包减少资源请求次数，如webpack等。 使用雪碧图，可以避免因不同图片引起的多次资源下载。（雪碧图：将多张零散的背景图片整合到一张背景图上，然后通过background-position来调整背景的位置。利用CSS Sprites能够减少浏览器向服务器的请求次数，减少http请求，从而提高页面的性能。还能减少图片的字节，在应用精灵图片的时候，你需要考虑当前盒子会不会漏出其他的背景图）。

5.减少对DOM的操作，将DOM节点保存在一个变量中，避免重复获取。

posted @ 2020-09-10 13:53  叶子叶子耶  阅读(359)  评论(0)  编辑  收藏  举报