- 声明:本文并非本人原创,但是原文过于冗余,就将主要内容进行了总结。
- 摘自:前端性能优化方法总结
前段性能优化的作用于目的:
- 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
- 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
前端优化的途径有很多,按粒度大致可以分为两类。第一类是页面级别的优化。例如 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 方法。