前端优化

[问答题]

前端优化

拯救世界的光太郎

一、页面级优化

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. 样式表的引入尽量提前

如果将 CSS样式表放在其他地方，比如 body 中，浏览器有可能还未解析到 CSS 就已经开始渲染页面了，这就导致页面由无 CSS 状态跳转到 CSS 状态，用户体验比较糟糕。

4. 减少不必要的 HTTP跳转

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

5. 避免重复的资源请求

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

二、代码级优化

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

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

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

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

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

参考文章：《前端性能优化方法总结》

https://blog.csdn.net/qq_44647809/article/details/115277223

编辑于 2021-04-18 17:56:15 回复(0)