页面里的动画效果大多是通过 JavaScript 触发的。有些是直接修改 DOM 元素样式属性而产生的,有些则是由数据计算而产生的,比如搜索或排序。错误的执行时机和太长的时间消耗,是常见的导致 JavaScript 性能低下的原因。你需要尽量减少这两方面对你的 JavaScript 代码带来的执行性能的影响。
JavaScript 性能分析是一门艺术活,因为你所写的 JavaScript 代码跟实际执行的代码完全是两回事。现代浏览器都会使用 JIT 编译器和其他优化手段来使你的 JavaScript 代码能尽可能执行得更快,这个编译和优化的过程会对代码产生极大的改动。
尽管如此,在优化 JavaScript 程序的执行速度方面,还是有一些你力所能及的事。
假设页面上有一个动画效果,你想在动画刚刚发生的那一刻的时候做点什么,比如运行一段 JavaScript 程序。那么唯一能保证这个运行时机的,就是 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 来实现页面中的动画效果。这种实现方式的问题是,你在 setTimeout 或 setInterval 中指定的回调函数的执行时机是无法保证的。它将在这一帧动画的_某个时间点_被执行,很可能是在帧结束的时候。这就意味这我们可能失去这一帧的信息,也就是发生 jank。
事实上,jQuery 中 animate 函数就是用 setTimeout 来实现的动画的!我建议你去给它打个补丁,用 requestAnimationFrame 来取代 setTimeout 。
JavaScript 代码是运行在浏览器的主线程上的。与此同时,浏览器的主线程还负责样式计算、布局,甚至绘制(多数情况下)的工作。可以想象,如果 JavaScript 代码运行时间过长,就会阻塞主线程上其他的渲染工作,很可能就会导致帧丢失。
因此,你需要认真规划一下你的 JavaScript 程序的运行时机和运行耗时。比如,如果你要在一个动画(比如页面滚动)执行过程中运行 JavaScript 程序,那么理想情况是把这段 JavaScript 程序的运行耗时控制在 3-4 毫秒以内。如果长于这个时间,那么就有帧丢失的风险。另一方面,在浏览器空闲的时候,你可以有更多时间来运行 JavaScript 程序。
大多数情况下,你可以把纯计算工作放到 Web Workers 中做(如果这些计算工作不会涉及 DOM 元素的存取)。一般来说,JavaScript 中的数据处理工作,比如排序或搜索,一般都适合这种处理方式。
- 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 = e.data;
- // Update data on screen...
- });
正如前面提到的,并不是所有的 JavaScript 代码都适合这种方式,因为 Web Workers 无法访问 DOM 元素。如果你的 JavaScript 代码需要存取 DOM 元素,也就是说必须在主线程上运行,那么可以考虑批处理的方式:把任务细分为若干个小任务,每个小任务耗时很少,各自放在一个 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);
- }
如果采用划分小任务的方式,那么你需要确保给用户呈现一个好的 UX/UI,使得用户能感知到当前浏览器正在处理一个任务,比如 使用一个进度条或者指示器 。不管怎样,这种方式能使释放浏览器的主线程,使你的 web 应用总能对用户交互保持响应。
当我们评价一个框架、库或者自己写的 JavaScript 代码时,很重要的一点就是要分析每一帧中 JavaScript 代码运行的消耗。对性能很敏感的动画效果(比如渐变或滚动)来说,这一点尤其重要。
对于 JavaScript 代码的性能分析,最好的方式就是使用 Chrom 的 DevTools。一般来说,通过它你能获取到这些细节:
如果你发现了运行时间很长的 JavaScript 代码,那么你可以开启 DevTools 中顶部的 JavaScript profiler 选项:
但是,这个选项本身的运行也会有一些消耗。因此,确保只有在你需要查看更多运行时细节的时候才开启它。开启这个选项之后,再执行一次页面分析动作,你会看到更多细节:
有了这些信息,你就能分析出 JavaScript 代码对于页面渲染性能的影响了,从而发现并修复 JavaScript 代码中性能低下的部分。至于如何修复,就像前面说的,你可以删除它或者把它放到 Web Worker 中去,以释放主线程来响应其他任务。
对于一个任务,如果换一种实现方式,浏览器的执行速度可以快 100 倍的话,是非常酷的。比如,读取一个元素的 offsetTop 属性就比计算它的 getBoundingClientRect() 要快。但一般情况下,在每一帧中运行的 JavaScript 代码之中调用这些函数的次数都是有限的。因此,在这些微优化上花再大的精力,整体上 JavaScript 代码的性能可能也就获得若干毫秒的提升。这是不划算的。
但是,如果你是做一个游戏,或者计算密集型的 web 应用,那么这条建议可能不适合你。因为你很可能要在一帧中执行很多计算工作,这种情况下需要争取做一切可能的性能优化。
简而言之:慎用微优化。因为一般来说它对你的 web 应用效果不大。
来源: