首屏加载优化

原因

• JavaScript文件过大：SPA 通常有很多 JavaScript 文件，如果这些文件的大小过大或加载速度慢，就会导致首屏加载缓慢。可以通过代码分割和打包、使用 CDN 等方式来优化加载速度。
• 数据请求过多或数据请求太慢：SPA 通过 AJAX 或 Fetch 等方式从后端获取数据，如果数据请求过多或数据请求太慢，也会导致首屏加载缓慢。可以通过减少数据请求、使用数据缓存、优化数据接口等方式来优化数据请求速度。
• 大量图片加载慢：如果首屏需要加载大量图片，而这些图片大小过大或加载速度慢，也会导致首屏加载缓慢。可以通过图片压缩、使用图片懒加载等方式来优化图片加载速度。
• 过多的渲染和重绘操作：如果在首屏加载时进行大量的渲染和重绘操作，也会导致首屏加载缓慢。可以通过尽可能少的 DOM 操作、使用 CSS3 动画代替 JS 动画等方式来优化渲染和重绘操作。
• 网络问题：网络问题也会影响 SPA 首屏加载速度，比如网络延迟、丢包等。可以通过使用 CDN、使用 HTTP/2 等方式来优化网络问题。

解决思路

• 网络方面：
  • 减少请求：
    • 合并文件，在文件分包时，不要过余切割
    • 使用精灵图
  • 网络延迟：
    • cdn
    • preload 预加载
    • prerender 预渲染
  • 加载方面：
    • 分包 chunk（资源太大）
    • 懒加载 lazyload（资源太大）
    • 压缩（资源太大）
    • 公共资源 vender
    • 缓存
      • 强缓存
      • 协商缓存
      • 策略缓存 service worker
• 减少渲染：减少重排、重绘，避免频繁的 dom 操作，使用 css3 动画代替 js 动画
• 使用 web worker 处理耗时操作
• defer 延迟装载思想，利用 requestAnimationFrame 实现对首屏多个组件进行异步渲染，减少白屏时间，提升用户体验