前端性能优化清单
2018-03-09 本文已影响152人
小母鸡叽叽叽
本文参考
以下是针对目前公司项目(我参与的项目)的具体情况，整理出来的优化点
一、目前的spa单页面应用的性能瓶颈主要有哪些？
1、首屏渲染慢
...
(欢迎补充)
二、 原因分析
1、 首屏渲染慢, 主要有以下原因
- 文件过大, 加载、解析占用了过多时间
- 加载了无用的资源(其他页面的资源)
三、如何优化
1. 启用 Gzip ☆☆☆☆☆
Gzip 压缩通常可以减少 70% 的响应大小，对某些文件更可能高达 90%。主流 Web 服务器都有相应模块，而且绝大多数浏览器支持 gzip 解码。所以，应该对 HTML、CSS、JS、XML、JSON 等文本类型的内容启用压缩。
注意，图片和 PDF 文件不要使用 gzip。它们本身已经压缩过，再使用 gzip 压缩不仅浪费 CPU 资源，而且还可能增加文件体积。
目前我们的服务器都默认开启了gzip。
2. code-splitting 代码分割 ☆☆☆☆☆
作用：避免加载不必要的资源。
使用：
# webpack3 使用import() , webpack2使用require.ensure
const riskManage = ()=> import(/* webpackChunkName: 'hfq-****' */ 'pages/****/index')
效果:
- 页面加载的资源大小从2.3M减少为1.2M, 减少了50%。
-
页面加载时间从11.04s缩短为8.37s. 页面加载时间缩短了25%。
优化前后对比.jpeg
部分项目未做代码切割,如boss系统
3. 利用service workers实现缓存。 ☆☆☆☆
需要在https协议下运行, 可大幅提高用户体验,目前没有项目用到。
4. 图片优化 ☆☆☆
适用于图片比较多的应用。
5. 资源加载优化(提前加载、延迟加载、异步加载) ☆☆☆
-
defer 异步加载脚本,所有元素加载完成之后, DOMContentLoaded事件触发之前执行。
-
async 异步加载脚本，加载完即执行。
image.png
-
prefecth 加载下一个页面可能用到的资源
-
preload 提前加载当前页面的资源
image.png
对于当前页面很有必要的资源使用
preload，对于可能在将来的页面中使用的资源使用prefetch。
- dns-prefetch DNS预解析
适用于大多数项目
6. 优先加载关键的css ☆☆
- 优化首屏渲染
7. Intersection Observer 判断元素是否出现在视图中 ☆☆
- 资源(如图片)懒加载
- 列表滚动加载
8. 字体优化 ☆☆
9. 合理使用CDN ☆☆☆☆
...
欢迎补充
附上几篇好文:
