移动端设备延迟加载

一、核心逻辑拆解

1. 条件判断：是否为移动端

if (window.innerWidth <= 768) { ... }

• 通过 window.innerWidth 获取浏览器窗口宽度，判断是否为移动端（通常认为宽度 ≤ 768px 为移动设备）。

2. 延迟加载实现

await new Promise(resolve => setTimeout(resolve, 100));

• 创建一个 Promise，使用 setTimeout 延迟 100 毫秒后 resolve。
• await 关键字暂停函数执行，直到 Promise 完成（即 100ms 后）。

二、为什么要延迟加载？

1. 移动端性能优化

   • 编辑器通常是重型组件（如富文本编辑器），初始化可能消耗较多资源。
   • 延迟 100ms 可让页面优先渲染核心内容（如文字、图片），避免用户长时间等待“白屏”。

2. 用户体验优化

   • 移动端网络和设备性能通常较弱，延迟加载可减少首屏加载时间。
   • 100ms 是一个经验值：既不会让用户感知到明显延迟，又能为关键资源争取加载时间。

三、完整代码示例

const loadEditor = async () => {
  if (window.innerWidth <= 768) {
    // 移动端延迟加载（先渲染页面其他内容）
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  
  // 加载编辑器组件（如 CKEditor、TinyMCE 等）
  const editor = await import('@/components/Editor.vue');
  // 或直接初始化编辑器
  initEditor();
};

// 在组件挂载后调用
onMounted(() => {
  loadEditor();
});

四、其他常见延迟加载场景

1. 非关键资源加载

   • 如广告组件、统计脚本等，不影响核心功能的资源可延迟加载。

2. 按需加载

   • 如用户滚动到特定区域时再加载相关组件（懒加载）。

3. 避免阻塞主线程

   • 复杂计算或大数据处理可通过 setTimeout 拆分成小块执行。

五、优化建议

1. 动态调整延迟时间

   • 根据设备性能或网络状况动态调整延迟时间（如 3G 网络延迟更久）。

2. 结合骨架屏

   • 在延迟期间显示骨架屏（Skeleton Screen），提升用户感知体验。

3. 使用 Intersection Observer

   • 对于长页面，可在编辑器组件进入视口时再加载，而非固定延迟。

总结

这段代码的核心是在移动端环境下，通过短暂延迟（100ms）优化编辑器组件的加载时机，平衡了页面加载速度和用户体验。这是前端性能优化的常见技巧，尤其适用于资源密集型组件。