js的加载过程和文档解析过程

不念不忘少年蓝@ 2023-10-06 23:58 37阅读 0赞

浏览器对于html的解析过程  
当浏览器获得一个html文件时，会自上而下加载解析

#### 解析过程 ####

浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。  
将CSS解析成 CSS Rule Tree 。  
根据DOM树和CSSTree合并为 Render Tree。(RenderTree记载着各个节点的CSS定义以及他们的从属关系)  
浏览器已经能知道网页中有哪些节点、可以计算出每个节点在屏幕中的位置，然后遍历render树，并使用UI线层绘制每个节点(渲染步骤还会分为三个小步骤)  
layout ：将渲染树上的节点，根据它的高度，宽度，位置，为节点生成盒子  
paint：确定渲染树上的节点的大小和位置后，便可以对节点进行涂鸦  
composite layer：合成层；当渲染树上的节点涂鸦完毕后，便生成位图（bitmap），浏览器把此位图从CPU传输到GPU

#### 重绘与回流 ####

reflow(回流)  
dom节点被Javascript改变，导致Chrome重新计算页面的layout，称之为回流

repaint(重绘)  
改变visibility、边框颜色、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 重绘不会带来重新布局，并不一定伴随回流，但回流操作一定会进行重绘

#### 哪些操作会触发回流？ ####

dom节点增加，删除，位置移动，展示与否，以及修改dom的宽高，边距等

计算 offsetWidth 和 offsetHeight 属性 offsetxxx，scrollxxx，clientxxx跟元素的位置相关，会触发浏览器重新计算RenderTree上dom的信息，获取dom相应的宽高

#### 如何减少回流和重绘？ ####

避免操作DOM，创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。也可以在一个display:none的元素上进行操作，最终把它显示出来。因为display:none上的DOM操作不会引发回流和重绘

将需要多次回流的元素position属性设为absolute或fixed，这样该元素就会脱离文档流，它的变化不会影响其他元素变化。比如动画效果应用到position属性为absolute或fixed的元素上

避免使用table布局

#### 开启GPU硬件加速 ####

CSS的 animations, transforms 以及 transitions 不会自动开启GPU加速， 而是由浏览器的缓慢的软件渲染引擎来执行。大部分的浏览器提供了触发GPU加速的CSS规则， 浏览器检测到页面中某个DOM元素应用了这些CSS规则时就会开启GPU硬件加速。

transformZ(0); transform3d(0,0,0) ，他们可以让拥有这个属性的元素生成单独的composite layer。 这样，不管这个元素的大小，位置等变换，都不会触发layout和paint阶段，直接执行composite layers (合成图层)阶段，浏览器会把这个合成图层layer当做位图上传到GPU。 GPU硬件加速后节省的时间

**注意：增加以上属性可以虽然开启GPU硬件加速，但也不能滥用，因为创建layer也同样会增加内存开销**

#### js同步加载与异步加载 ####

#### 同步加载 ####

平时我们使用js都是这样写的

这种就是最常使用的同步加载形式，js加载方式默认是同步执行，他会阻止浏览器的后续处理，停止后续的解析，只有js脚本加载完成，才能进行下一步操作。 平常我们写的js文件可能有输出 document 内容（docment.write）、修改dom样式等行为， 所以默认同步执行才是安全的。

这也是为什么为什么一般把script标签放在body结尾处，因为这样尽可能减少页面阻塞

#### 异步加载 ####

异步加载也叫非阻塞加载，浏览器在下载js的同时，还会继续进行后续页面的处理

#### 异步加载的好处 ####

像一些工具库等辅助开发类的js，它没有操作dom的行为，我们并不想它的阻塞后续的解析处理

#### 异步加载的三种方案 ####

defer