Win2D中从ms-appdata://加载字体引发渲染延迟，求缓存方案

数据老陈

2026-7-14

解决方案：预缓存字体解决滚动渲染延迟问题

完全可以通过首次预缓存字体来解决滚动时的加载延迟问题，以下是具体实现思路和操作步骤：

1. 预加载并缓存字体文件

在应用启动或初始化阶段，提前批量加载所有需要的字体文件，将其转换为可直接复用的资源存储起来，避免每次滚动都从ms-appdata://路径重新请求：

使用fetch API加载字体并缓存：

// 预加载单个字体并缓存
async function preloadFont(fontPath) {
  const response = await fetch(fontPath);
  const blob = await response.blob();
  // 生成可直接使用的本地URL
  const fontUrl = URL.createObjectURL(blob);
  // 存储到全局缓存对象
  window.fontCache = window.fontCache || {};
  window.fontCache[fontPath] = fontUrl;
  // 提前注册FontFace并加载，确保字体就绪
  const fontFace = new FontFace(`font-${fontPath}`, `url(${fontUrl})`);
  await fontFace.load();
  document.fonts.add(fontFace);
}

// 批量预加载所有字体
async function preloadAllFonts(fontPaths) {
  const loadPromises = fontPaths.map(path => preloadFont(path));
  await Promise.all(loadPromises);
}

2. 滚动渲染时直接复用缓存

当滚动需要渲染文本时，直接从缓存中取出已加载的字体资源，无需再发起网络请求：

// 使用缓存字体渲染文本
function renderText(text, fontPath) {
  const cachedFont = window.fontCache?.[fontPath];
  if (cachedFont) {
    const textElement = document.createElement('div');
    textElement.textContent = text;
    // 使用预注册的字体名称
    textElement.style.fontFamily = `font-${fontPath}`;
    document.body.appendChild(textElement);
  }
}