本文参考

• 前端性能优化最佳实践
• 2018前端性能优化清单

以下是针对目前公司项目(我参与的项目)的具体情况，整理出来的优化点

一、目前的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实现缓存。 ☆☆☆☆

• 一个实现离线缓存的demo
  -源码

需要在https协议下运行, 可大幅提高用户体验,目前没有项目用到。

4. 图片优化 ☆☆☆

• 响应式图片
• 图片懒加载, 推荐一款插件lazyload
• 优化图片格式
  • webp
  • Progressive jpeg

适用于图片比较多的应用。

5. 资源加载优化(提前加载、延迟加载、异步加载) ☆☆☆

• defer 异步加载脚本,所有元素加载完成之后, DOMContentLoaded事件触发之前执行。

• async 异步加载脚本，加载完即执行。

  
  image.png

• prefecth 加载下一个页面可能用到的资源

• preload 提前加载当前页面的资源

对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch。

• dns-prefetch DNS预解析

适用于大多数项目

6. 优先加载关键的css ☆☆

• 优化首屏渲染

7. Intersection Observer 判断元素是否出现在视图中 ☆☆

• 资源(如图片)懒加载
• 列表滚动加载

8. 字体优化 ☆☆

• web字体库

9. 合理使用CDN ☆☆☆☆

...
欢迎补充

---

附上几篇好文:

• 大漠 | 分享手淘过年项目中采用到的前端技术
• 大漠 | 再聊移动端页面的适配