网页应用工作线程最佳实践

​

Vega WebView中的工作线程

1. 主线程创建新的工作线程。
2. 工作线程发布了一条消息。
3. 工作线程处理消息。
4. 系统向主线程发送新消息。
5. 主线程处理返回的消息。与主线程的通信会影响主线程性能。如果许多小型工作线程大约在同一时间完成工作并将数据发送回主线程，则主线程会受到影响。即使并发处理响应，也会产生这种影响。

​

Vega的工作线程指南

• 使用工作线程完成真正有益的任务，并注意哪些事件会触发这些任务。如果工作线程数量过多，低资源设备（如Fire TV Stick 4K Select）可能会不堪重负。
• 减少工作线程和主线程之间传递的数据量。
  • 使用可传输的对象来避免复制大量数据。
    // 使用可传输的对象来避免复制大量数据
    const data = new Uint8Array(1024 * 1024); // 1MB of data
    worker.postMessage(data, [data.buffer]); // 传输底层ArrayBuffer
    
• 管理您的工作线程，知道何时不再需要它们。使用terminate移除不需要的工作线程，这样它们就不会全部完成工作并大量涌入主线程。
  // 在不再需要工作线程时将其终止
  worker.terminate();
  
• 尽可能重复使用工作线程或工作线程池，而不是生成新的工作线程。
  const worker = new Worker('worker.js');
  worker.postMessage('Hello from main thread');
    
  // ... 片刻之后 ...
    
  // 通过发布新任务来重复使用工作线程
  worker.postMessage('New task');
  
• 使用缓存来减少重新计算。
  // 使用Map进行基于ID的高效查询
  const cache = new Map<string, CachedData>(); 
    
  self.onmessage = async (event: MessageEvent) => {
    const { type, payload } = event.data;
    const { id, forceRefresh } = payload;
    
    // 检查数据是否已经在缓存中
    if (cache.has(id) && !forceRefresh) {
      self.postMessage({ type: 'DATA_RESPONSE', payload: cache.get(id).data });
      return;
    }
    // ...
  
• 知道在给定数量的核心上可以正常运行多少个工作线程。有关四核CPU的运行，以下指南可供参考：
  • 四核可以流畅运行1–9个简单工作线程
  • 四核可以运行9–15个工作线程，但用户界面会受到一定影响
  • 四核可以运行15–30个工作线程，但会产生显著影响
  • 四核可以运行超过30个工作线程，但存在困难
  • 可以使用以下算法来确定要使用的工作线程数量：
    • 永远安全：number_of_workers = navigator.hardwareConcurrency - 2。
    • 基本安全：number_of_workers = (2 * navigator.hardwareConcurrency) + 1。
  • 对于持续存在或任务繁重的工作线程，可以考虑同时运行2-4个工作线程。
  • 如果要执行CPU密集型任务，请确保同时运行的工作线程数量不太多，以免导致问题。可以手动管理处理方式，以免导致系统过载。
• 可以设置标头，以免重新下载相同的文件。一些库使用工作线程来缓存图像或其他内容，许多库使用预定义的策略范例。
  • 当图像不存在时，电视应用通常会触发工作线程进行导航，从而通过预加载信息来提高流畅度。如果这些图像未被缓存，快速导航往往会导致工作线程大量涌入系统，从而导致卡顿或死机。请务必正确设置标头，以便适当地缓存图像。
  • 有几种缓存策略。这些库中有许多使用“仅缓存”、“缓存优先”、“仅限网络”、“网络优先”或“重新验证时过期”。一些库可能会使用其他选项，例如使用到期。

​

相关主题

• Vega网页应用概述
• 网页应用性能最佳实践
• 网页应用开发最佳实践
• 网页应用WebGL最佳实践