浏览器渲染原理

学习目的：解决性能问题（如果不了解，就不知道什么情况下会对性能造成损伤）

前言： js 有js引擎，那么执行渲染也会有渲染引擎(不同浏览器不同)

js，html，css文件都是字符串，计算机硬件不识别，网络传输中传输的内容都是0和1的字节数据

浏览器接收HTML文件转化为DOM树

字节数据 =>字符串 =>标记（token）=>Node =>DOM （Node根据联系构建DOM树）

注：标记是构成代码的最小单位

CSS文件转换成CSSOM树

字节数据 => 字符串 =>token =>Node =>CSSOM

这个过程中----浏览器确定每个节点的样式----------消耗资源

因为：样式 我们可以自行设置节点，也可以通关继承获得------过程中浏览器递归CSSOM树

方法一： 浏览器找到页面中所有的span然后设置颜色

方法二：浏览器先找到所有的span标签，然后找到span标签上的a标签，最后找div标签--然后找到符合条件的span标签设置颜色-----------这个递归过程很复杂（因此我们要避免写过于具体的CSS选择器，对于HTML要尽量减少无意义标签，保证层级扁平）

生成渲染树 

生成DOM和CSSOM后，将两棵树组合-----渲染树（只会包函需要显示的节点和这些节点的样式，display：none的不会在渲染树中显示）

生成渲染树------根据渲染树进行布局（回流）

为什么操作DOM慢

因为DOM属于渲染引擎中的东西，而js属于js引擎中的东西。我们用js操作DOM时--两个线程之间的通信，DOM次数一多，两个线程之间通信多了（操作DOM可能带来重绘回流---导致性能变差）

面试：插入几万个DOM，如何实现页面不卡顿

 解决：

方式一：分批次部分渲染DOM-------requestAnimationFrame方式循环插入DOM

方式二：虚拟滚动：原理：只渲染可视区域的内容（非可视不渲染），滚动时实时渲染DOM

什么情况阻塞渲染

渲染的前提----生成DOM树

因此HTML和CSS肯定会阻塞渲染----想要渲染快

1.降低一开始需要渲染的文件的大小，平且扁平层级，优化选择器

2.浏览器在解析到script标签时，会停止构建DOM，完成后在继续开始

也就是说：不应该在首屏加载JS文件（把script标签放在body底部的原因）

通过给script添加 defer属性---js文件并行下载----放在HTML解析完以后顺序执行（放在任意位置）

或者 async 属性（没有任何依赖时使用）-----表示JS文件下载和解析不阻塞渲染

重绘和回流：设置节点样式时频繁出现--影响性能

重绘：当节点需要改变外观但不会影响布局（eg：color改变叫重绘）

回流：布局或者几何属性改变

可能影响性能的几种动作：

①window大小改变   ②改变字体   ③添加或删除样式   ④ 文字改变 ⑤ 定位或者浮动

⑥ 盒模型

减少重绘回流

使用transfrom替代 top

使用visibility 替换display：none  -----前者只会引起重绘，后者引起回流（改变了布局）

不要把节点属性值  放在一循环里

for（let i =0; i<1000; i++){ console.log(document.querySelector(".test").style.offsetTop)}

获取offsetTop会导致回流，因为要获取正确的值

不要使用table布局-------可能一个小改动可能造成table重新布局

动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame

CSS 选择符从右往左匹配查找，避免节点层级过多

将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层。

思考：

不考虑缓存和优化网络协议的前提下，考虑可以通过哪些方式来最快的渲染页面，也就是常说的关键渲染路径，

DOMContentLoaded 事件后，就会生成渲染树，生成渲染树就可以进行渲染了，这一过程更大程度上和硬件有关系了。

提示如何加速

1.文件大小

2.script标签使用

3.HTML，CSS代码考虑

4.需要下载的内容是否需要首屏使用