优化js的执行

 

• 避免使用setTimeout和setInterval进行视觉更新操作;使用 requestAnimationFrame。
• 将长时间运行的JavaScript 从主线程转移到 Web Workers.
• 使用 micro-tasks在不同的框架上修改DOM
• 使用浏览器开发者工具和JavaScript Profiler来测量js对运行的影响

使用 requestAnimationFrame 进行视觉修改

当你想在特定的时间进行页面视觉修改，使用如下：

/**
 * If run as a requestAnimationFrame callback, this
 * will be run at the start of the frame.
 */
function updateScreen(time) {
  // Make visual updates here.
}

requestAnimationFrame(updateScreen);

你可能想使用setTimeout亦或setInterval来进行视觉上的修改，但是，你要记住，回调函数的执行是放在帧的某一点上执行，一般都是咋帧的最后执行，所以常常会导致帧的丢失。

事实上，jQuery中默认的animate操作可以使用setTimeout！你可以使用 patch it to userequestAnimationFrame, 我强烈推荐。

减少复杂度或者使用Web Workers

js运行在浏览器的主线程中，运行在主线程中的还有样式的计算，布局和页面渲染等。

最好的是让你的js程序运行在3-4ms之内，如果长时间的运行将阻塞主线程的其他程序运行，要记住，js是单线程执行的。

大多数情况子啊，你可以在Web Workers上使用纯粹的计算工作，例如，如果不需要访问DOM。数据处理和遍历，例如排序和搜索，在web workers上工作非常好。

var dataSortWorker = new Worker("sort-worker.js");
dataSortWorker.postMesssage(dataToSort);

// The main thread is now free to continue working on other things...

dataSortWorker.addEventListener('message', function(evt) {
   var sortedData = evt.data;
   // Update data on screen...
});

并不是所有的工作都适用于这个模式：Web Workers不适合DOM的获取操作。你的工作必须在主线程的话，可以考虑使用一个定量处理方法，你可以将一个庞大的工作划分成很多微小的工作，每个微小的工作不耗时几毫秒，并且每一帧(frame)中运行requestAnimationFrame处理函数。

var taskList = breakBigTaskIntoMicroTasks(monsterTaskList);
requestAnimationFrame(processTaskList);

function processTaskList(taskStartTime) {
  var taskFinishTime;

  do {
    // Assume the next task is pushed onto a stack.
    var nextTask = taskList.pop();

    // Process nextTask.
    processTask(nextTask);

    // Go again if there’s enough time to do the next task.
    taskFinishTime = window.performance.now();
  } while (taskFinishTime - taskStartTime < 3);

  if (taskList.length > 0)
    requestAnimationFrame(processTaskList);

}

为了让用户确保程序在执行，你要使用 using a progress or activity indicator. 

知道你的js程序的 “frame tax”

当测量一个框架，库或者你自己的代码的时候，了解在frame-by-frame的基准上你的代码耗费多少资源是非常重要的！

当进行performance-critical动画（比如scroll和transition）时是非常重要的！

使用chrome浏览器中的开发者工具进行检测的效果如下：

如果你发现你运行了js，你首先要允许js检测：

你可以看到你的js文件运行情况：

你可以看见那些js耗时很久，你可以依次进行优化

避免在微小的优化上关注太多

虽然一个元素的offsetTop比getBoundingClientRect()函数的执行要快很多，但是，你每一帧中可能只会指定这样的函数几次而已，然而浏览器执行这样的函数的速度是非常快的，所以，你不用在这种微小的优化上放置太多的注意力，因为实际上，对于你的项目而言，它的优化坏是非常小的。

原文：https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=en