PRPL 模式是由 Google 提出的一种优化策略，旨在使网页加载、交互和后续导航变得极快。它不仅仅是一项技术，而是一套关注资源分发和渲染顺序的组合拳。
以下是 PRPL 四个字母对应的核心逻辑与实现方式：
1. Preload (预加载)
核心目的： 告诉浏览器“这个资源非常重要，请立刻下载”，而不是等解析到 HTML 深处才发现它。
-
实现手段： 在 HTML 的
<head>中使用<link rel="preload">。 -
优化场景： 针对那些隐藏在 CSS 或 JS 里的关键资源（如字体文件、关键渲染路径上的 JS 模块）。
-
效果： 缩短了资源发现的时间，确保关键代码能更早执行，从而加速 TTI。
2. Render (尽早渲染初始路由)
核心目的： 优先交付用户当前能看到的内容，减少白屏时间。
-
实现手段：
-
服务器端渲染 (SSR) 或 静态生成 (SSG)。
-
内联关键 CSS： 将首屏所需的 CSS 直接写在
<style>标签中。
-
-
效果： 提升 FCP（首次内容绘制），让用户在视觉上感知到页面已就绪。
3. Pre-cache (预缓存剩余内容)
核心目的： 利用用户查看当前页面的“空闲时间”，在后台下载其他页面的资源。
-
实现手段： Service Workers。
-
工具推荐： 使用 Workbox 等库来简化缓存逻辑。
-
效果： 当用户点击跳转到下一个路由时，资源已经存在于本地缓存中，实现“秒开”体验。
4. Lazy-load (懒加载)
核心目的： 拒绝“一次性加载全站 JS”，只加载当前必需的部分。
-
实现手段：
-
动态导入 (
import())：结合 Webpack 或 Vite 进行路由级别的代码分割。 -
图片/组件懒加载：使用
loading="lazy"或 Intersection Observer API。
-
-
效果： 显著减少了主线程在初始加载时的计算量。因为 JS 变少了，主线程能更快进入“空闲”状态（Quiet Window），直接降低 TTI。