3、探究CSS和JS阻塞问题 _css

目录
一、概述
二、前端优化必读
1、初探浏览器渲染
2、回流和重绘
3、探究CSS和JS阻塞问题
4、外部JS脚本的引用方式
5、和link标签对DOM解析和渲染的影响
6、和SVG渲染
7、浏览器渲染产生图层
8、动画的选择
9、骨架屏（）
10、GPU硬件加速
三、JS中的其它性能优化
1、不要覆盖原生JS方法
2、使用事件委托简化代码
3、JS动画
4、节流和防抖
【3、探究CSS和JS阻塞问题】4、图片懒加载
5、使用 webp 格式的图片
四、Vue项目性能优化
1、合理使用v-if和v-show
2、合理使用watch和
3、v-for遍历注意事项
4、长列表性能优化
5、事件的销毁
6、图片资源懒加载
7、路由懒加载
8、第三方插件的按需引入
五、服务端渲染
一、概述
性能优化旨在为用户提供更好的体验，例如页面展示更快、交互响应更快、页面无卡顿等。要做好性能优化，需要理解浏览器加载和渲染的本质，知其所以然，才能更好优化之。本文很多内容，参考掘金、CSDN等社区，如有侵权，可以我联系删除0.0 。
二、前端优化必读 1、初探浏览器渲染
渲染过程（以谷歌浏览器为例）
渲染过程如下所示。
1、解析HTML，生成DOM树，解析CSS，生成CSSOM树2、将DOM树和CSSOM树结合，生成渲染树(Render Tree)3、Layout: 有了渲染树，浏览器就知道了网页中有哪些节点，各个节点的CSS定义以及它们的从属关系，从而去计算每个节点在屏幕中的位置4、Painting: 按照算出来的规则，把内容画到屏幕上5、Display: 将像素发送给GPU，会在GPU将多个合成层合并为同一个层，并展示在页面中CSS3硬件加速的原理就是新建合成层，组合这些图层便是性能优化中的关键
注意：渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等所有HTML都解析完成后再去构建和布局渲染树，它是解析完一部分内容，就显示一部分内容。同时，可能还会通过网络下载其余内容。
渲染树（ tree）
浏览器会解析HTML生成DOM树，每个HTML标签都是DOM树的节点，DOM树包含了HTML中的所有标签，包括处于隐藏状态的内容，也包括JS动态添加的内容。
浏览器会解析CSS生成CSS树，即样式结构体CSSOM，在解析过程中会去掉浏览器不能识别的样式，例如IE会去掉-moz开头的样式，而火狐会去掉_开头的样式。
DOM树和CSS树组合会构成渲染树（ tree）。渲染树类似DOM树，但又存在差别。渲染树能识别样式，其上每个节点都有自己的样式。不可见的样式不会进入渲染树，例如一些不会渲染输出的节点，如、meta、link等，再例如一些通过CSS进行隐藏的节点，如将设置为none的节点。注意，利用和隐藏的节点，还是会显示在渲染树中。
2、回流和重绘
概念1：重绘（）
重绘是指元素自身样式改变引起的浏览器重新渲染目标元素的现象，如改变背景色、文字颜色、边框颜色等。
重绘不改变目标元素的几何属性，不改变布局，不影响元素本身在文档流中的位置，不影响其他DOM 。重绘对浏览器的性能影响很小，优化性能时，一般不予考虑。
概念2：回流（）
解释1：当浏览器发现页面某部分发生变化，且影响了布局后，需倒回去重新渲染，这个过程就是回流。回流会从HTML这个根节点开始，递归往下，依次计算所有节点的尺寸和位置。
解释2：回流是指当渲染树中部分或全部元素的尺寸、结构、或某些属性发生变化时，浏览器根据视口重新计算几何属性。