人人都会AI编程

19.3 首屏渲染优化：资源预加载、骨架屏、懒加载

更新时间：2026-07-11

Electron 应用虽然用的是 Web 技术栈，但它的启动过程比普通网页多了一层“壳”的初始化。用户双击图标后，首先要等待主进程启动、创建窗口，然后渲染进程加载 HTML，最后页面内容才逐渐呈现。如果这个过程中的任何一个环节处理不当，就容易出现白屏时间长、界面闪烁等体验问题。

本节聚焦三种最实用、最直接的首屏优化手段，全部经过真实项目验证，不涉及过度设计，上手即可用。

19.3.1 资源预加载：让关键内容提前就位

在 Electron 中，“预加载”有两个层面的含义：一是利用 preload 脚本提前向渲染进程注入数据，二是在页面真正的 JavaScript 运行之前完成某些准备工作。两者配合，可以显著缩短用户从打开窗口到看到内容的等待时间。

1. 利用 preload 脚本注入初始化数据

传统的 Web 应用中，页面加载后需要通过 API 请求获取用户配置、登录状态等数据，这个过程至少需要一到两个网络往返。而在 Electron 里，主进程可以在创建窗口时同步读取本地存储（如 electron-store、本地数据库），然后通过 preload 脚本直接将数据挂载到 window 对象上，页面脚本执行时就能立即使用，无需等待异步请求。

// main.js
const { app, BrowserWindow } = require('electron');
const Store = require('electron-store');
const store = new Store();

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  // 在主进程读取用户配置
  const userSettings = store.get('settings');
  win.webContents.on('did-finish-load', () => {
    win.webContents.send('init-data', userSettings);
  });

  win.loadFile('index.html');
}
// preload.js
const { contextBridge, ipcRenderer } = require('electron');

let initData = null;
ipcRenderer.on('init-data', (event, data) => {
  initData = data;
});

contextBridge.exposeInMainWorld('electronAPI', {
  getInitData: () => initData,
  // 其他 API...
});
<!-- index.html 中立即读取 -->
<script>
  // 页面脚本无需等待异步请求，initData 在窗口 ready 时已经可用
  const data = window.electronAPI.getInitData();
  if (data) {
    applyTheme(data.theme);
  }
</script>

2. 主进程预加载关键资源

如果你的应用在加载 HTML 时需要用到某些本地静态资源（比如本地字体、Logo 图片），可以提前在主进程中用 protocol 模块注册自定义协议，把这些资源提前读入内存。这样当渲染进程请求这些资源时，可以直接从内存中返回，避免磁盘 I/O 的延迟。

// main.js
const { protocol } = require('electron');
const fs = require('fs');
const path = require('path');

app.whenReady().then(() => {
  protocol.handle('app', (request) => {
    const filePath = path.join(__dirname, request.url.slice('app://'.length));
    return new Response(fs.readFileSync(filePath));
  });

  // 后续在 HTML 中直接使用 app://assets/logo.png 即可
});

3. 控制窗口显示时机

默认情况下，BrowserWindow 创建后会先显示一个空白的窗口，直到页面内容渲染完成。可以通过 show: false 创建隐藏窗口，然后在 ready-to-show 事件中再显示，避免白屏一闪而过。

const win = new BrowserWindow({
  show: false,
  backgroundColor: '#ffffff', // 设置背景色，防止白屏
});

win.once('ready-to-show', () => {
  win.show();
});

这样用户看到的第一个画面就是已经渲染好的内容，体验上更接近原生应用。

19.3.2 骨架屏：告别白屏焦虑

骨架屏（Skeleton Screen）是在内容尚未加载完成时，预先展示一个与真实页面布局相似的占位图。它能给用户造成“应用正在快速启动”的错觉，有效降低白屏带来的等待焦虑。在 Electron 应用中实现骨架屏比在普通 Web 应用更灵活，因为你可以直接在主进程中控制进入骨架屏和移除的时机。

实现方式一：HTML 内联骨架屏

最简单可靠的方式是将骨架屏的 HTML 和 CSS 直接内联在 index.html 中。当渲染进程开始解析 HTML 时，骨架屏会立刻呈现，后续 Vue/React 应用初始化完成后自动替换掉骨架内容。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    #skeleton {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: #f5f5f5; display: flex; flex-direction: column; align-items: center;
      justify-content: center; z-index: 9999; transition: opacity 0.3s;
    }
    .skeleton-block {
      width: 60%; height: 20px; background: #e0e0e0; margin: 10px 0;
      border-radius: 4px; animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
  </style>
</head>
<body>
  <div id="skeleton">
    <div class="skeleton-block" style="width:40%"></div>
    <div class="skeleton-block"></div>
    <div class="skeleton-block" style="width:80%"></div>
  </div>
  <div id="app"></div>
  <script src="./app.js"></script>
</body>
</html>

在 Vue 或 React 的入口文件中，mount 完成后手动移除骨架屏：

// Vue 3 main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');
document.getElementById('skeleton').style.display = 'none';

实现方式二：主进程直接绘制骨架窗口

如果你希望骨架屏能在窗口创建后、HTML 加载前就显示，可以让主进程先创建一个不带 URL 的窗口，使用 BrowserWindow 的 webContents.insertCSS 或通过 BrowserView 嵌入一段极简的骨架 HTML。等主应用页面准备就绪后，再切换或显示真正的窗口。这种方法适用于启动极其缓慢的复杂应用（例如需要加载大量本机模块的项目），但在大多数场景下，内联 HTML 方案已经足够且维护成本更低。

19.3.3 懒加载：按需加载，减少首屏负担

Electron 应用虽然运行在本地环境，不存在网络延迟，但首屏仍可能因为加载过多的 JavaScript、CSS 和组件而卡顿。尤其是当应用使用了体积庞大的前端框架和企业级组件库时，主 bundle 可能会达到数 MB，解析和执行都会占用大量时间。懒加载就是解决这个问题的核心手段。

1. 路由懒加载

如果你的应用是多页签或多窗口结构，确保使用路由懒加载，只加载当前页面必需的代码。以 Vue Router 为例：

// router.js
const routes = [
  {
    path: '/editor',
    component: () => import('./views/Editor.vue'),
  },
  {
    path: '/settings',
    component: () => import('./views/Settings.vue'),
  },
];

这确保了用户打开应用时，只下载并执行与首屏路由相关的组件，编辑器和设置页面的代码只有在用户实际访问时才被加载。在 Electron 中，这些脚本仍是本地文件，所以加载几乎是瞬间完成的，但解析和执行时间的节省对代码体积较大的项目仍然意义重大。

2. 图片与静态资源懒加载

对于首屏中不可见的图片、图标，使用原生的 loading="lazy" 属性或 Intersection Observer 延迟加载。即使在本地应用中，解析大尺寸图片也会消耗 CPU 和时间，延迟加载可以减少首屏的渲染压力。

<img src="large-screenshot.png" loading="lazy" alt="截图预览" />

3. 非关键模块按需导入

检查应用入口文件中是否有一次性导入但首屏并不需要的模块。例如，只有打开“关于”窗口才需要的系统信息模块、截屏功能的库、或者稍后才会用到的第三方分析 SDK。将这些模块改为动态 import()，确保它们不会阻塞首屏渲染：

async function showAboutDialog() {
  const { systemInfo } = await import('./utils/system-info');
  console.log(systemInfo);
}

4. 窗口级别的懒加载

如果你的应用有多窗口架构（如设置窗口、预览窗口），务必让这些窗口对应的 HTML 和脚本只在窗口被创建时才加载。很多应用会在主进程启动时把所有窗口的 URL 都预解析和缓存，这并不必要。合理的做法是：

// 只在用户点击“设置”按钮时才创建设置窗口
function openSettingsWindow() {
  const settingsWin = new BrowserWindow({
    width: 600,
    height: 400,
  });
  settingsWin.loadFile('settings.html');
}

这样，与设置窗口相关的所有渲染进程代码都不会占用主应用启动时的内存和 CPU 资源。

19.3.4 组合优化与效果评估

以上三种优化并非互相独立，一套典型的高端 Electron 应用启动流程通常是这样的：

  1. 主进程启动，读取本地缓存数据，创建隐藏窗口（show: false）。
  2. 窗口加载 index.html，HTML 中内联骨架屏立即渲染，同时 preload 脚本将缓存数据注入。
  3. 前端框架初始化，只执行首屏路由所需的代码包（路由懒加载）。
  4. 框架 mount 后移除骨架屏，主进程收到 ready-to-show 事件后显示窗口。
  5. 用户在首屏操作时，其他页面和重组件保持按需加载。

你可以通过 Chrome DevTools 的 Performance 面板（在 Electron 窗口中打开）测量优化前后的变化。重点关注以下指标：

  • First Paint (FP)：首次绘制的时间点，骨架屏应该在这个时间点之前就出现。
  • DOM Content Loaded：HTML 解析完成的时间，优先后应明显提前。
  • TTI (Time to Interactive)：用户可交互的时间点，懒加载和代码分割对这个指标影响最大。

在实际项目中，通过资源预加载、骨架屏和懒加载的组合，首屏白屏时间通常能缩短 30% 到 60%，并且用户感知的加载速度会更快。这些优化没有复杂的依赖，也不需要改动应用的核心架构，是所有 Electron 开发者都应该掌握的基础技能。