首页白屏、页面加载优化

首页白屏，页面加载优化分析

一、页面加载优化首先要分析，一次完整的HTTP请求。

0、URL输入 --> 1、Redirect跳转 --> 2、AppCache缓存 --> 3、DNS解析 --> 4、创建TCP连接 --> 5、Request发送请求 --> 6、Response接收响应 --> 7、浏览器解析渲染页面 --> 8、HTTP请求结束，断开TCP连接

2、AppCache缓存

• 本地缓存
• 可以利用强缓存和协商缓存对文件进行缓存，减少对服务端请求

3、DNS解析

• 浏览器不能直接通过域名找到对应的服务器IP地址，所以需要DNS解析，查找到对应IP进行访问。开销比较大。
  • DNS预解析。rel='dns-prefetch'
  • 域名收敛，减少域名数量

5、发送请求优化

• 使用HTTP/2协议，依赖HTTP/2的多路复用、首部压缩、二进制分帧、服务端推送等特性

7、浏览器解析页面

1. 提前渲染
   • 服务端渲染（Server-Side Rendering）
   • 预渲染，前端打包时使用prerender-spa-plugin之类的插件进行简单预渲染
2. 静态资源优化
   • 减小资源大小，压缩文件，JS动态引入按需加载
   • 加快资源加载速度，引用CDN
3. 资源预加载
   • prefetch，浏览器在空间时候加载资源
4. 请求接口优化
   • 接口合并
5. 骨架屏
   • 在数据加载前，提前渲染页面，缩短白屏时间