分解任务

[wuxianqiang]

JavaScript 和用户界面更新在同一个进程内运行，同一时刻只有其中一个可以运行。这意味着当JavaScript代码正在运行时，用户界面不能响应输入，反之亦然。有效地管理UI 线程就是要确保JavaScript 不能运行太长时间，以免影响用户体验。最后，请牢记如下几点：

1. JavaScript 运行时间不应该超过100 毫秒。过长的运行时间导致UI 更新出现可察觉的延迟，从而对整体用户体验产生负面影响。
2. JavaScript 运行期间，浏览器响应用户交互的行为存在差异。无论如何，JavaScript 长时间运行将导致用户体验混乱和脱节。
3. 定时器可用于安排代码推迟执行，它使得你可以将长运行脚本分解成一系列较小的任务。
4. 网页工人线程是新式浏览器才支持的特性，它允许你在UI 线程之外运行JavaScript 代码而避免锁定UI。

我们通常将一个任务分解成一系列子任务。如果一个函数运行时间太长，那么查看它是否可以分解成一系列能够短时间完成的较小的函数。可将一行代码简单地看作一个原子任务，多行代码组合在一起构成一个独立任务。某些函数可基于函数调用进行拆分。例如：

function timedProcessArray(items, process, callback) {
  var todo = item.concat()
  setTimeout(() => {
    var start = Date.now()
    do {
      process(todo.shift())
    } while (todo.length > 0 && Date.now() - start < 50);
    if (todo.length > 0) {
      setTimeout(arguments.callee, 25);
    } else {
      callback(items)
    }
  }, 25);
}

定时器使你的JavaScript 代码整体性能表现出巨大差异，但过度使用它们会对性能产生负面影响。本节中的代码使用定时器序列，同一时间只有一个定时器存在，只有当这个定时器结束时才创建一个新的定时器。以这种方式使用定时器不会带来性能问题。

Web Workers

网页工人线程对网页应用来说是一个潜在的巨大性能提升，因为新的工人线程在自己的线程中运行 JavaScript。这意味着，工人线程中的代码运行不仅不会影响浏览器UI，而且也不会影响其它工人线程中运行的代码。