前端性能优化汇总。精！

前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?
　　1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
　　2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
　　总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
　　前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

为什么要做前端性能优化？

在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。

一、页面级别的优化

1、和并和压缩css和js文件。（将css文件和并为一个。将js合并为一个）

　　原因：主要是为了减少http请求次数以及减少请求资源的大小

　　打包工具：webpack、gulp、grunt

2、使用字体图标或者SVG图标来代替传统png图

　　原因：字体图标或者SVG是矢量图，是代码编写出来的，方大不会变形，而且渲染速度快

3、采用图片的懒加载（延迟加载）

　　原因：减少页面第一次加载过程中http的请求次数

　　具体步骤：

1、页面开始加载时不去发送http请求，而是放置一张占位图

2、当页面加载完时，并且图片在可视区域再去请求加载图片信息

4、能用css做的效果，不要用js做，能用原生js做的，不要轻易去使用第三方插件。

　　避免引入第三方大量的库。而自己却只是用里面的一个小功能

　　原因：加载过慢，搜索引擎只会识别css不会识别js，可以提高被搜索到的机会

5、使用雪碧图或者是说图片精灵

　　把所有相对较小的资源图片，绘制在一张大图上，只需要将大图下载下来，然后利用图片定位来讲小图展现在页面中（background-position:百分比，数值）

6、减少对cookie的使用（最主要的就是减少本地cookie存储内容的大小），因为客户端操作cookie的时候，这些信息总是在客户端和服务端传递。如果上设置不当，每次发送一个请求将会携带cookie

7、前端与后端进行数据交互时，对于多项数据尽可能基于json格式来进行传送。相对于使用xml来说传输有这个优势

　　原因：数据处理方便，资源偏小

8、前端与后端协商，合理使用keep-alive

9、前端与服务器协商，使用响应资源的压缩

10、避免使用iframe

　　原因：不仅不好管控样式，而且相当于在本页面又嵌套其他页面，消耗性能会更大。因为还回去加载这个嵌套页面的资源

11、在基于ajax的get请求进行数据交互的时候，根据需求可以让其产生缓存（注意:这个缓存不是我们常看到的304状态码，去浏览器本地取数据），这样在下一次从相同地址获取是数据时，取得就是上一次缓存的数据。（注意：很少使用，一般都会清空。根据需求来做）

12.、减少 HTTP请求数

减少 HTTP请求数的主要途径包括：

(1). 从设计实现层面简化页面

(2). 合理设置 HTTP缓存

(3). 资源合并与压缩

二、代码优化相关

1、在js中尽量减少闭包的使用

　　原因：使用闭包后，闭包所在的上下文不会被释放

2、减少对DOM操作

DOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意以下几点：

1、HTML Collection（HTML收集器，返回的是一个数组内容信息）

2、DOM操作还需要考虑浏览器的 Reflow和Repaint ，因为这些都是需要消耗资源的

3、在js中避免嵌套循环和"死循环"(一旦遇到死循环，浏览器就会直接卡掉)

4、把css放在body上，把js放在body下面

　　让其先加载css，之后加载js

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的使用

17、慎用 with

with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的 执行环境 ，将obj放在了其作用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。

　　因此，除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。

18、避免使用 eval和 Function

　　每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。

eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。

Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。

　　此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

19、减少作用域链查找

　　如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。

本文地址：https://blog.csdn.net/qq_47703624/article/details/107355809