如何在CanvasKit缓存未命中时显示启动屏？

启发式判断方案 #

以下两种非绝对准确但实用的判断方式，可满足需求：

• 网络请求检测法
  在应用启动初期，对canvaskit.wasm发起轻量的HEAD请求，通过响应状态判断文件是否存在：

  async function hasLocalCanvasKit() {
    try {
      const res = await fetch('canvaskit.wasm', { method: 'HEAD' });
      return res.ok;
    } catch (err) {
      // 请求失败（404、跨域或网络问题），判定本地无文件
      return false;
    }
  }
  
  // 使用示例
  if (!(await hasLocalCanvasKit())) {
    showSplashScreen();
  }
  // 继续加载应用逻辑
  

• 初始化时长阈值法
  利用本地文件加载远快于网络下载的特点，设置时长阈值判断是否需要显示启动屏：

  const loadStart = Date.now();
  // 执行你的CanvasKit加载逻辑
  await initializeCanvasKit();
  const loadDuration = Date.now() - loadStart;
  
  // 阈值可根据实际环境调整，比如500ms
  if (loadDuration > 500) {
    // 加载耗时过长，判定为需要从网络下载，显示启动屏
    showSplashScreen();
  }
  

不推荐始终显示启动屏的原因 #

始终显示启动屏会导致本地已有canvaskit.wasm的场景下，启动屏被瞬间关闭，这种突兀的UI切换会带来怪异的用户体验，因此并非最优选择。

内容的提问来源于stack exchange，提问作者user2232305