前端性能优化总结
一、为什么要优化？
1、在实际当中，只有 10%~20% 的最终用bai户响应时间是花在从du Web 服务器获取 HTML 文档zhi并传送到浏览器中的。如dao果希望能够有效地减少页面的响应时间，就必须关注剩下的 80%~90% 的最终用户体验。这 80%~90%的时间大部分花在等待组件（图片、样式表、脚本 等）的下载，还有一小部分时间花在解析 HTML、脚本和样式表上面。
2、如果我们将后端的响应时间缩短一半，整体响应时间只能减少 5%~10%；而如果关注前端性能，同样是将其响应时间减少一半，则整体响应时间可以减少 40%~45%。改进前端通常只需要较少的时间和资源；而减少后端延迟会带来很大的改动，比如重新设计架构啥的，这些改动需要花数周或数月。
二、优化的目的
1、优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。
2、前端优化的方法有很多种，可以将其分为两大类，第一类是页面级别的优化如http请求数，内联脚本的位置优化等，第二类为代码级别的优化，例Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。
三、代码优化相关
1、在js中尽量减少闭包的使用
原因：使用闭包后，闭包所在的上下文不会被释放
2、减少对DOM操作，主要是减少DOM的重绘与回流（重排）
关于重排（回流）的分离读写：如果需要设置多个样式，把设置样式全放在一起设置，不要一条一条的设置。使用文档碎片或者字符串拼接做数据绑定（DOM的动态创建）
3、在js中避免嵌套循环和"死循环"(一旦遇到死循环，浏览器就会直接卡掉)
4、把css放在body上，把js放在body下面
让其先加载css（注意：这里关于优化没有多大关系）
5、减少css表达式的使用
6、css选择器解析规则所示从右往左解析的。减少元素标签作为对后一个选择对象
7、尽量将一个动画元素单独设置为一个图层（避免重绘或者回流的大小）
注意：图层不要过多设置，否则不但效果没有达到反而更差了
8、在js封装过程中，尽量做到低耦合高内聚。减少页面的冗余代码
9、css中设置定位后，最好使用z-index改变盒子的层级，让盒子不在相同的平面上
10、css导入的时候尽量减少@import导入式，因为@import是同步操作，只有把对应的样式导入后，才会继续向下加兹安，而link是异步的操作
11、使用window.requestAnimationFrame(js的帧动画)代替传统的定时器动画
如果想使用每隔一段时间执行动画，应该避免使用setInterval，尽量使用setTimeout
代替setInterval定时器。因为setInterval定时器存在弊端：可能造成两个动画间隔时间
缩短
12、尽量减少使用递归。避免死递归
解决：建议使用尾递归
13、基于script标签下载js文件时，可以使用defer或者async来异步加载
14、在事件绑定中，尽可能使用事件委托，减少循环给DOM元素绑定事件处理函数。
15、在js封装过程中，尽量做到低耦合高内聚。减少页面的冗余代码
16、减少Flash的使用
四、存储
1、结合后端，利用浏览器的缓存技术，做一些缓存（让后端返回304，告诉浏览器去本地拉取数据）。（注意：也有弊端）可以让一些不太会改变的静态资源做缓存。比如：一些图片，js，cs
2、利用h5的新特性（localStorage、sessionStorage）做一些简单数据的存储，
避免向后台请求数据或者说在离线状态下做一些数据展示。
五、其他优化
1、避免使用iframe不仅不好管控样式，而且相当于在本页面又嵌套其他页面，消耗性能会更大。因为还回去加载这个嵌套页面的资源
2、页面中的是数据获取采用异步编程和延迟分批加载，使用异步加载是数据主要是为了避免浏览器失去响应。如果你使用同步，加载数据很大并且很慢
那么，页面会在一段时间内处于阻塞状态。目的：为了解决请求数据不耽搁渲染，提高页面的
渲染效率。解决方法：需要动态绑定的是数据区域先隐藏，等数据返回并且绑定后在让其显示
延迟分批加载类似图片懒加载。减少第一次页面加载时候的http请求次数
3、页面中出现音视频标签，我们不让页面加载的时候去加载这些资源（否则第一次加载会很慢）
解决方法：只需要将音视频的preload=none即可。
目的：为了等待页面加载完成时，并且音视频要播放的时候去加兹安音视频资源
4、尽量将一个动画元素单独设置为一个图层（避免重绘或者回流的大小）
注意：图层不要过多设置，否则不但效果没有达到反而更差了
六、页面级别优化
1、http请求数
减少http请求数是最重要也是最有效的方法，可以通过以下方法来减少http请求
①、合理的设置http缓存，恰当的缓存设置可以大大减少http请求。要尽可能地让资源能够在缓存中待得更久
②、从设计实现层面简化页面，保持页面简洁、减少资源的使用时是最直接的。
③、资源合并与压缩，尽可能的将外部的脚本、样式进行合并，多个合为一个。
④、 CSS Sprites，通过合并 CSS图片，这是减少请求数的一个好办法
2、内联脚本的位置
浏览器是并发请求的，而外链脚本在加载时却常常阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。所以说尽可能的将脚本往后挪，减少对并发下载的影响
3、代码级别的优化
①、DOM操作优化：
要避免在document上直接进行频繁的DOM操作，可以使用classname代替大量的内联样式修改，对于复杂的UI元素，设置position为absolute或fixed，尽量使用css动画，适当使用canvas尽量减少css表达式的使用，使用事件代理
②、图片优化
通过对图片的压缩来起到优化前端性能的作用
③、CSS选择符：
大多数人认为，浏览器对CSS的解析是从左往右的，事实上从右往左解析的效率更高，因为第一个id选择基本上就把查找的范围限定了。
本文地址：https://blog.csdn.net/Peng_Yu_Yan_/article/details/107355624