前端性能优化之卡顿篇

对于大多数的渲染场景，我们都可以使用浏览器的 Performance 来录制和分析性能问题，Performance 适用于针对某个具体、可复现的问题做分析。卡顿问题同样也是，我们可以在火焰图中看到一些长耗时的任务，然后再逐个分析具体的耗时问题出现在哪里，逐一解决。下面介绍一下一些常见耗时任务的优化方案。

赋值和取值

其实大多数情况下，我们都很少会去在意一些变量的取值和赋值。

但是在一些复杂的计算场景下，比如深层次的遍历中，需要考虑的点就很多很细，比如：

• 尽量将不需要执行的逻辑前置，提前判断做return

• 减少window对象或是深层次对象上的取值，可以将其保存为临时变量使用

• 减少不必要的遍历，Array.filter()这种语法也是一次遍历，需要注意

• 对复杂数据结构的数据查询，可以考虑优化数据结构

一些简单的问题，在重复上百万次的计算之后，都会被无数放大。即使是从window对象上获取某个值，然后做计算生成 DOM 这样的操作，如果将它放在多层遍历的最里层去做，同样会造成性能问题。

如果你的项目中有使用 Canvas