前端性能优化方法总结

前段性能优化的作用于目的：

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

前端优化的途径有很多，按粒度大致可以分为两类。第一类是

页面级别的优化

。例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等。第二类则是

代码级别的优化

，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。

1. 减少 HTTP请求数：

请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象。

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

合理设置 HTTP缓存
资源合并与压缩

：

CSS、 Javascript、Image 都可以用相应的工具进行压缩
Inline Images

：

使用 data: URL scheme的方式将图片嵌入到页面或 CSS中，如果不考虑资源管理上的问题的话，不失为一个好办法。如果是嵌入页面的话换来的是增大了页面的体积，而且无法利用浏览器缓存。使用在 CSS中的图片则更为理想一些。
Lazy Load Images
DNS解析优化

（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）

2. 最后加载脚本

脚本在加载时会阻塞其他资源的加载。例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。可以将脚本放在最后引入。

也可以对脚本进行异步加载。最简单的方法：给script引入的脚本加上defer或者async属性。

3. 异步引入外部样式表

避免加载的样式被JS一下给删掉，可以考虑将CSS样式异步引入。首屏样式尽量内联，可以提升响应速度。

4. 减少不必要的 HTTP跳转

很多人都会忽略链接最后是否带 ’ / ‘，无 ’ / ‘结尾的方式访问，可能会导致服务器有了一次跳转。

5. 避免重复的资源请求

页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求。

1. 尽量减少DOM操作：

例如：增加、修改、删除 DOM元素或者对 DOM集合进行操作，它们是最耗性能的一类操作。

2. 减少重绘重排：

重绘重排也是极其消耗性能，应借助一些手段来尽可能地减少重绘重排。具体方法可以参考这个文章：

前端性能优化之重排和重绘

3. 尽量避免使用 eval：

脚本引擎需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。

4. 减少作用域链查找：

如果在循环中需要访问非本作用域下的变量时，在遍历之前先用局部变量存储该所需变量的结果，尤其是一些对象的属性。对这些存储在栈内存的变量进行频繁地访问是极其消耗性能的。

5. 字符串拼接：

在 Javascript 中使用”+” 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join 方法。