首屏加载优化

原因

• JavaScript文件过大：对于 SPA 应用，是通过 js 来动态渲染页面的，如果这些 js 文件的过大，就会导致首屏加载缓慢。可以通过代码分割（例如路由懒加载）优化加载速度。
• 大量图片加载慢：如果首屏需要加载大量图片，而这些图片大小过大或加载速度慢，也会导致首屏加载缓慢。可以通过图片压缩、使用图片懒加载等方式来优化图片加载速度。
• 网络问题：网络问题也会影响 SPA 首屏加载速度，比如网络延迟等。可以通过使用 CDN、使用 HTTP/2 等方式来优化网络问题。
• 过多的渲染和重绘操作：如果在首屏加载时进行大量的渲染也会导致加载过慢，可以采用懒加载（包括数据懒加载、图片懒加载、组件懒加载）来优化

解决思路

一个 web 系统，加载很慢，交给你来优化，你会怎么办？

• 网络方面：
  • 加载方面：
    • 分包 chunk（资源太大）
    • 压缩（资源太大）或者 gzip
    • 公共资源（例如第三方依赖）放 cdn
    • 缓存
    • http2
  • 减少请求数量：
    • 合并文件，在文件分包时，不要过余切割
    • 使用精灵图
• 渲染方面：
  • 路由懒加载、图片懒加载、数据懒加载
  • 虚拟列表
  • 使用 web worker 处理耗时操作
  • defer 延迟装载思想，利用 requestAnimationFrame 实现对首屏多个组件进行异步渲染，减少白屏时间，提升用户体验
• 用户体验方面：
  • 占位图、骨架屏
  • loading 动画

删除线可以忽略