Perfomance
Optimize JavaScript Execution
- Avoid setTimeout or setInterval for visual updates;
always use requestAnimationFrame instead.
The only way to guarantee that your JavaScript will run at the start of
a frame is to use requestAnimationFrame. - Move long-running JavaScript off the main thread to Web Workers.
- Use micro-tasks to make DOM changes over several frames.
- Use Chrome DevTools’ Timeline and JavaScript Profiler to assess the impact of JavaScript.
/**
* 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);
var dataSortWorker = new Worker("sort-worker.js");
dataSortWorker.postMesssage(dataToSort);
// The main thread is now free to continue working on other things...
// ***Web Worker do NOT have access to DOM.***
dataSortWorker.addEventListener('message', function(evt) {
var sortedData = evt.data;
// Update data on screen...
});
// must be on the main thread
// segment the larger task into micro-tasks, each taking no longer than a few
// milliseconds, and run inside of requestAnimationFrame handlers across each frame.
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);
}
ensure that the user knows that a task is being processed, either by using a
progress or activity indicator.
Reduce the Scope and Complexity of Style Calculations
- Reduce the complexity of your selectors; use a class-centric methodology like BEM.
- Reduce the number of elements on which style calculation must be calculated.
// bad example
.box:nth-last-child(-n+1) .title {
/* styles */
}
// good example
.final-box-title {
/* styles */
}
网友评论