学习目的：解决性能问题（如果不了解，就不知道什么情况下会对性能造成损伤）
前言： 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.需要下载的内容是否需要首屏使用
