减少首屏渲染时间

关于计算首屏时间

利用performance.timing提供的数据：

通过DOMContentLoad或者performance来计算出首屏时间

首屏加载慢的原因

• 网络延时问题
• 资源文件体积是否过大
• 资源是否重复发送请求去加载了
• 加载脚本的时候，渲染内容堵塞了

解决方案

常见的几种SPA首屏优化方式

• 减小入口文件积

  • ​​​​​​​常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加

• 静态资源本地缓存

• UI框架按需加载

• 图片资源的压缩

• 组件重复打包

  • 假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复下载   解决方案：在webpack的config文件中，修改CommonsChunkPlugin的配置   minChunks: 3                                                                                                    minChunks为3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

• 开启GZip压缩

• 使用SSR

  • ​​​​​​​​​​​​​​服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器

    从头搭建一个服务端渲染是很复杂的，vue应用建议使用Nuxt.js实现服务端渲染

资源加载优化

1. 减少资源大小

   • 代码压缩
   • Gzip
   • 图片压缩
   • 代码拆分

2. 减少http请求次数

   • http强缓存
   • service worker离线缓存
   • 本地存储
   • 合并请求（nginx-http-concat模块、雪碧图等）

3. 提高http请求响应速度

   • CDN
   • http弱缓存
   • DNS prefetch
   • http2

4. 优化资源加载时机

   • 按需加载（element-ui）
   • 懒加载
   • 预加载

5. 优化资源、内容加载方式

   • 客户端内H5页面可考虑离线包等方式
   • 内容直出

页面渲染优化

1. 优化html代码

   1. js外链放在底部
   2. css外链放在顶部
   3. 减少DOM数量

2. 优化js、css代码

   1. 使用webworker
   2. 长任务分片执行
   3. 减少重绘、重排
   4. 降低css选择器复杂性

3. 优化动画效果

   1. 使用transform和opacity属性来实现动画
   2. 合理使用will-change或translateZ来提升某些元素到新的合成层