Skip to content

首屏加载优化

思考

是什么原因首屏加载慢?

  • 网络延迟
  • 资源太大

原因

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

解决思路

  • 网络延迟:

    • cdn
    • preload 预加载
    • prerender 预渲染
  • 资源太大:

    • 分包 chunk
    • 懒加载 lazyload
    • 公共资源 vender
    • 缓存
      • 强缓存
      • 协商缓存
      • 策略缓存 service worker
    • 服务端渲染
    • 局部 ssr(落地页、活动页、广告页)
    • pwa (结合 service worker 做离线缓存) 冷门

具体实现

1. preload 预加载

html
<link
  rel="preload"
  href="./a.js"
  as="script"
/>

vite / webpack 中,通过分包 chunk 的方式实现

vite 中,分包和不分包的区别

路由懒加载(import())、第三方单独分包,就会在打包时,除入口文件外,都会使用 <link rel="preload"> 加载(分包主要还是缓存资源

html
<script type="module" crossorigin src="/assets/index-BLCideB8.js"></script>
<link rel="modulepreload" crossorigin href="/assets/fast-deep-equal-BfsdOM8n.js">
<link rel="modulepreload" crossorigin href="/assets/json-schema-traverse-CSPPDTu_.js">
<link rel="modulepreload" crossorigin href="/assets/fast-uri-BIYmyj5I.js">
<link rel="modulepreload" crossorigin href="/assets/ajv-DYuNsTRa.js">
<link rel="modulepreload" crossorigin href="/assets/quill-nXBBh9Di.js">
html
<script type="module" crossorigin src="/assets/index-BxE-gmDE.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DtMSDXgb.css">

webpack 中,预加载采用魔法命名

在动态导入语句中添加注释

js
import(/* webpackChunkName: 'count', webpackPreload: true */'./count')

2. 加载关键 css

什么是关键 css、如何提取关键 css

将提取到的 css 内联到 html 中,减少请求数,减少 css 加载时间

3. 开启 http2 server push

4. 延迟加载

html
<script async></script> // 异步加载,不会阻塞页面渲染 加载完后立即执行
<script defer></script> // 延迟加载,不会阻塞页面渲染 会在所有元素解析完成之后执行

5. SSR 终极方案

‌SSR(Server-Side Rendering)‌,即服务端渲染,是一种将页面渲染过程放在服务器端进行的技术。当服务器接收到用户请求后,通过后台模板引擎或服务器端框架将HTML模板与数据整合生成完整的HTML文件,然后将这份完整的页面内容一次性返回给用户。浏览器接收到这些HTML内容后,可以直接进行渲染,而不需要等待JavaScript的加载和执行,从而显著提升首屏加载速度和用户体验‌。

  • 优点
    • 提高首屏渲染速度:无需用户等待js加载和执行,即可看到完整内容,显著提升用户体验
    • seo优化:搜索引擎可以直接抓取完整的html内容
    • 共享链接时显示预览:在社交媒体上分享链接时,能够正确显示页面预览信息,增加内容的传播性
  • 缺点
    • 开发复杂度增加:需要服务器端和客户端的协同开发,增加了开发的复杂性和成本。
    • 服务器压力大: 每次请求都需要服务器生成HTML内容,增加了服务器的计算负担。
    • 状态管理复制(前后端共同管理状态)