浏览器如何显示页面(二)

最新推荐文章于 2022-09-03 19:53:59 发布

零度flying

最新推荐文章于 2022-09-03 19:53:59 发布

阅读量388

点赞数

分类专栏：基础类

原文链接：https://www.w3cplus.com/javascript/cssom-css-typed-om.html

版权

基础类专栏收录该内容

10 篇文章 0 订阅

订阅专栏

浏览器页面渲染

当浏览器通过网络通信获取到HTML文件后(浏览器如何显示页面一)，后根据响应体渲染页面；

1.解析内容和渲染流程

浏览器操作的内容

需要明确的是，浏览器获取到响应体文件后，其操作的对象分别是：

1.HTML/XHTML/SVG: 解析此三种文件生成DOM Tree；
2.CSS:：解析样式表，生成CSS规则树（CSS Rule Tree）；
3.JavaScript:解析JS脚本，通过DOM API和CSSOM API 分别操作DOM Tree和CSS Rule Tree，达到浏览器与用户交互目的；
附：CSSOM(CSS 对象模型，https://www.w3cplus.com/javascript/cssom-css-typed-om.html)

浏览器渲染的流程

WebKit内核渲染流程

上图为WebKit内核页面渲染过程；

1.首先浏览器将响应体解析成DOM Tree和CSS Rule Tree；
2.解析过程中如果遇到<script>标签，会立即解析脚本，直到解析完
3.根据DOM Tree和CSS Rule Tree构建渲染树Render Tree；
4.页面的重绘(repaint)和回流(reflow);页面渲染完后，若JS操作了DOM节点，根据JS对DOM的操纵，进行重绘或者回流操作；

2.解析与构建

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>
// style.css
 body { font-size: 16px }
 p { font-weight: bold } 
 span { color: red } 
 p span { display: none } 
 img { float: right }

浏览器解析

HTML解析

如图，DOM Tree结构如上所示，与DOM Tree类似的是CSSOM树的生成，此过程中，需要将接收到的CSS规则(Style Rules)转换成CSSOM树，即：
CSS解析
JS脚本解析

浏览器解析生成渲染树过程中，如果遇到<script>就会立即开始解析脚本，直到JS脚本运行完毕；再接着解析构建渲染树；如果脚本是外部的，会等待脚本下载完毕，再继续解析文档，JS解析会将改变DOM和CSS的地方分别解析出来，追加到DOM Tree和Style Rules上

为什么JS脚本应该放在</body>前面，即底部加载？
因为页面渲染过程中，遇到JS脚本会阻塞整个页面的渲染，而立即执行JS程序脚本，直到执行完全，再接着渲染树的解析与构建；这种情况会造成渲染白屏；
为什么浏览器遇到JS脚本会停止渲染，而立即执行JS脚本？
首先， JS是单线程机制，执行JS脚本和构建渲染树，不能并行处理，同一时间只能执行一个操作；
其次，JS脚本会操作DOM API和CSSOM API对整个页面的渲染树进行重绘和回流操作，也就是浏览器在渲染过程中对最终将呈现的页面是未知的，阻塞渲染树的构建，是为了防止无效操作，节省资源；如果不阻塞DOM树的构建，若JS删除了A节点，那么浏览器构建A节点就是浪费资源；
防止JS阻塞渲染方法？
将JS脚本放在body底部执行； script标签上增加属性 defer或者async
defer和async区别：

从图中我们可以明确一下几点：
1.defer和async在网络加载过程是一致的，都是异步执行的；
2.两者的区别在于脚本加载完成之后何时执行，可以看出defer更符合大多数场景对应用脚本加载和执行的要求；
3.如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖。

构建渲染树

渲染树(Render Tree)：由DOM树和CSSOM树结合生成；但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉，并行构建。因此会形成一边加载，一边解析，一边渲染的工作现象。
构建渲染树，根据渲染树计算每个可见元素的布局，并输出到绘制流程，将像素渲染到屏幕上。

重绘(repaint)和回流(reflow)

重绘(repaint)：不影响页面元素位置和大小，不影响渲染树的结构，比如元素颜色的修改，譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）；
回流(reflow)：也有称回流，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式：“display:none;”。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即重排（reflow）

注意：回流必将引起重绘，而重绘不一定会引起回流。

当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器回流：
1、添加或者删除可见的DOM元素；
2、元素位置改变——display、float、position、overflow等等；
3、元素尺寸改变——边距、填充、边框、宽度和高度；
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；

如何减少或者避免回流？

Reflow 的成本比 Repaint 的成本高得多的多。一个节点的 Reflow 很有可能导致子节点，甚至父节点以及兄弟节点的 Reflow 。在一些高性能的电脑上也许还没什么，但是如果 Reflow 发生在手机上，那么这个过程是延慢加载和耗电的。----浏览器的渲染原理简介

直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）；
让要操作的元素进行”离线处理”，处理完后一起更新；
a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存；
让元素脱离动画流，减少回流的Render Tree的规模；

参考：
https://blog.csdn.net/qq_33505829/article/details/103419143
https://segmentfault.com/a/1190000010298038
https://blog.csdn.net/qq_32657025/article/details/79569213
https://www.cnblogs.com/chiangyibo/p/7052617.html
https://www.cnblogs.com/yuezk/archive/2013/01/11/2855698.html
https://coolshell.cn/articles/9666.html【重点】
https://www.w3cplus.com/javascript/cssom-css-typed-om.html【重点】