解密网页「极速显形术」

1. 预渲染

1.1 什么是预渲染？

预渲染（Prerendering）是一种在构建时生成 HTML 文件的方法，提前将页面的内容渲染好并保存为静态文件。它通常用于静态网站或单页应用（SPA），以提高首屏加载速度和搜索引擎优化（SEO）效果。

1.2 预渲染的原理和底层实现

1、构建时生成 HTML 文件

预渲染的核心是：在构建阶段运行 JavaScript，将动态内容渲染为静态 HTML 文件并存储在服务器中。这样用户在访问页面时，无需等待 JavaScript 加载和运行即可看到完整的页面内容。

2、与服务器渲染的区别

预渲染：构建时完成 HTML 的生成，适用于内容较少更改的网站。

服务器渲染（SSR）：运行时动态生成 HTML，适用于实时更新的网站。

3、工作原理

1）构建时生成静态 HTML

预渲染工具（如 Vite SSG、Next.js）在构建时执行应用程序逻辑（包括 API 请求、组件渲染等），将动态生成的内容转化为静态 HTML。

HTML 文件中可能包含内联的 CSS 和部分 JavaScript，以减少首次加载的阻塞。

2）静态文件部署

构建完成后，将生成的 HTML 文件部署到 CDN 或服务器。用户访问时直接获取这些静态文件。

3）内容增强

页面加载后，JavaScript 会接管页面交互逻辑，实现动态功能。

1.3 为什么预渲染可以减少首屏加载时间？

1、减少浏览器的渲染负担

直接提供生成好的 HTML，避免了浏览器解析 JavaScript 和运行渲染逻辑的过程。

2、更少的资源请求

预渲染页面不依赖客户端 JavaScript 渲染，首屏只需加载 HTML 和基本样式文件。

3、提高内容可见性

用户无需等待 JavaScript 加载完成就能看到页面内容。

1.4 如何使用预渲染？

以 Vue 3 + Vite 为例，使用 vite-plugin-prerender 实现预渲染：

1、安装依赖

npm install vite-plugin-prerender --save-dev

2、配置插件

在 vite.config.js 文件中配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import prerender from 'vite-plugin-prerender';

export default defineConfig({
  plugins: [
    vue(),
    prerender({
      routes: ['/home', '/about'], // 指定需要预渲染的路由
    }),
  ],
});

3、构建项目

npm run build

 构建完成后，dist 文件夹中会包含预渲染好的 HTML 文件。

2. 骨架屏是什么？

骨架屏是一种加载占位策略，在页面加载前用类似占位符的 UI 模拟出页面布局，给用户一种页面正在加载的视觉反馈。

核心作用：提供用户视觉稳定性，减少加载过程中用户的焦虑。

3. 骨架屏的原理和实现方式

3.1 基本原理

骨架屏的实现依赖于：使用纯 CSS 绘制页面布局的占位符（常见：灰色块、渐变动画），在实际数据加载完成后替换成真实内容。

3.2 实现方式

1、静态骨架屏：页面加载时直接嵌入 HTML 和 CSS。

2、动态骨架屏：通过前端框架动态渲染。

3.3 如何使用骨架屏？

1、静态骨架屏

适用于 HTML 已预渲染的情况：

<div class="skeleton">
  <div class="skeleton-header"></div>
  <div class="skeleton-content"></div>
  <div class="skeleton-footer"></div>
</div>

<style>
.skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skeleton-header,
.skeleton-content,
.skeleton-footer {
  background: #f0f0f0;
  animation: shimmer 1.5s infinite;
}
.skeleton-header {
  height: 50px;
  width: 100%;
}
.skeleton-content {
  height: 150px;
  width: 100%;
}
.skeleton-footer {
  height: 30px;
  width: 100%;
}
@keyframes shimmer {
  0% { background-color: #f0f0f0; }
  50% { background-color: #e0e0e0; }
  100% { background-color: #f0f0f0; }
}
</style>

效果如下：

2、动态骨架屏（Vue.js）

<template>
  <div v-if="loading" class="skeleton">
    <div class="skeleton-header"></div>
    <div class="skeleton-content"></div>
  </div>
  <div v-else>
    <!-- 实际内容 -->
    <h1>{{ data.title }}</h1>
    <p>{{ data.content }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      data: null
    }
  },
  async mounted() {
    // 模拟数据加载
    setTimeout(() => {
      this.data = { title: '加载完成', content: '这是页面内容' }
      this.loading = false
    }, 2000)
  }
}
</script>
<style>
/* 骨架屏样式 */
.skeleton-header,
.skeleton-content {
  width: 100%;
  height: 50px;
  background: #f0f0f0;
  animation: shimmer 1.5s infinite;
}
</style>

效果如下：

3.4  为什么有时骨架屏不起作用？

1、书写方式问题

骨架屏的层级可能被实际内容覆盖，需确保骨架屏先于内容渲染。

2、状态问题

loading 状态未正确管理，导致骨架屏显示逻辑出错。

3、内容加载时机

如果数据加载太快，骨架屏会被立即替换，用户几乎看不到。

3.5 如何解决？

1、确保骨架屏的显示与数据加载的逻辑要分离清晰。

2、添加额外的延迟时间，确保骨架屏有足够的显示时间。

setTimeout(() => {
  this.data = { title: '加载完成', content: '这是页面内容' };
  this.loading = false;
}, Math.max(2000, simulatedLoadTime));

3、骨架屏样式需单独检查，确保不会被其他样式影响。

4. 注意事项

1、预渲染：仅适用于页面内容固定、动态性较低的场景。动态内容较多时，需配合客户端渲染。

2、骨架屏：简洁、可辨识的布局是关键，避免设计过于复杂。骨架屏的使用需与用户体验保持一致，加载过快或过慢都会影响效果。

举个 🌰

使用 预渲染 为静态部分（导航栏、常用分类）提供直接渲染的 HTML，对需要实时从后端获取的产品列表，使用 骨架屏 作为加载过程中的占位符。

<template>
  <div class="product-page">
    <!-- 静态内容：通过预渲染生成 -->
    <header>
      <nav>...</nav>
    </header>

    <!-- 动态内容：使用骨架屏加载 -->
    <section class="product-list">
      <div v-if="loading">
        <div class="skeleton-item"></div>
      </div>
      <div v-else>
        <div v-for="product in products" :key="product.id" class="product-item">
          <img :src="product.image" alt="product.name" />
          <h3>{{ product.name }}</h3>
        </div>
      </div>
    </section>
  </div>
</template>

通过这种方式，既能保证用户快速看到页面主要结构，又能平滑地加载动态数据，提升用户体验。