在做项目的时候，偶尔会遇到前端页面的卡顿问题，在前一段时间我也为此所困，多次尝试也没有得到很好的优化结果，只能对着卡顿的页面发呆，靠自己的推测来进行修改和优化，毫无疑问，这样很难取得什么有效的进展，当然，最终我还是解决了问题，其实这种性能问题处理起来不算麻烦，但是对于一个从前没有处理过类似状况的人来说，确实会感到困惑，因此我把它记录在这里。
开发者工具-DevTools
开发者工具，作为经常做前端的人，对这个肯定不陌生吧？在浏览器页面右键，点击检查，或者是按下键盘的F12键，都能够打开它，开发者工具提供了大量的调试功能，方便开发者对页面进行修改和调试，如果想要对性能问题开展优化，当然也是绕不开这个开发者工具的。
开发者工具有一个“性能”选项卡，英文是“Performance”，通过这个选项卡的功能，就能够更加轻松的找到需要优化的位置。
这个是Edge浏览器中，性能选项卡的样子，如果找不到这个选项卡，可以点 “？”图标左侧的三个点的按钮，里面应该会有，接下来，请留意这个选项卡下面的一行工具按钮，从左到右依次是“录制”，“刷新并录制”，“清空”，接下来主要使用的部分就是这三个。
基本的分析方法
在处理性能问题的时候，首先要做的是打开开发者工具，找到性能选项卡，此时有两个选择，如果性能问题出现在页面加载的过程中，就可以点击“刷新并录制”，此时页面会刷新，如果性能问题出现在页面加载后，与用户交互的过程中，那么就可以点击“录制”，并且执行出现性能问题的操作。
页面载入完毕，或者有性能问题的操作完成后，我们可以点击停止录制，此时，选项卡就会出现一个性能分析报告，如下图所示：
性能分析报告是一个时间轴，时间从左到右依次递增，被我圈出来的部分，是页面的各种逻辑处理，包括页面的事件，渲染，初始化逻辑，定时任务等，从上往下看，是一个完整的调用栈，而这些在时间轴上具有一定的长度，这代表着这个逻辑处理的耗时长短，而想要解决的性能问题，多数时候就是这里的微任务耗时过长导致的，因此最需要被关注的也就是那些耗时相比其他的微任务更长的逻辑处理，开发者工具会在这种长耗时的微任务上标红，让它们格外醒目。
在这一份性能报告中，能够明显看出来三处被标了红色的斜线，将鼠标移动到它的上方，滑动滚轮，这一部分就会被放大，这样就能更清晰的看到下面的各种函数的调用，以及它们所消耗的时间，我认为，从调用栈的最下方开始，逐一优化长耗时的函数处理，是比较好的策略。
当上层长耗时的函数的下方，存在一个或者多个长耗时的函数调用，如上图所示，函数的下方有一个或者多个长耗时的函数调用，它们完全撑起了上层函数所消耗的时间长度，那么直接优化底层的函数，就能够减少整体的处理耗时。
但是，如果情况是这样的，下方的函数并不能完全撑起上层函数的耗时，这就说明上面这个函数本身有非常耗时的操作，应该直接处理这个函数本身。
使用鼠标点击想要处理的函数，在性能报告的时间轴下方，可以找到事件日志，在这个选项卡的右侧，可以看到这个函数的名字，并且存在一个超链接让开发者能够有效的定位到这个函数的位置（如上图箭头所指的位置），点击超链接，就能找到需要优化的函数，接下来只需要在自己的项目源码中找到它，进行修改来降低此函数的耗时，通常就能有效的大地提升性能的目的。
常见的性能问题处理方法
消除循环和递归/数据的索引化
对大量的数据进行循环，递归操作，一旦数据的数量达到一定程度，或者这种操作的频率达到一定程度，那么带来的负面效果是非常严重的，例如，通过循环在100条数据中查找符合特定条件的数据对象，偶尔一两次还好说，但是如果每次数据的计算都要这样做，那么将会对性能造成非常大的影响，如果出现性能问题，我会首先考虑是否存在这种大量的循环处理。
对于循环数据对象来查找需要的东西，可以按照特定的方法，特定的标准记录下对应数据的位置，例如它在数组的下标（index），这样就能将循环缩短，甚至完全消除，甚至这种按照特定标准记录数据对象位置的操作，完全可以在后端服务器完成，这都能很大程度改善问题。
数据的增量处理
对于需要统计总量的东西，如果循环是必要的，那么可以在服务器预先完成一次计算，也可以在加载数据后完成一次预先的计算，后续所有数据变化都可以通过和原本数据的差值累计到预先计算好的统计值里面，核心的思想依然是避免循环操作的发生。
异步或者加速计算过程
当计算本身成为性能问题的来源的时候，通过WebWorker异步处理数据，能有效防止页面阻塞，这一过程类似于Ajax或者是WebSocket，另外，如果这种方法依然不足以提高性能，那么如果数据的计算能够通过矩阵计算达的方法成目的，此时可以通过GPU相关的功能，来做到硬件加速，通常需要做到这一步的情况不多见。
分批次渲染
如果问题出在了渲染上，那么可以延迟渲染发生的时间，通过活用setTimeout，分批次进行Dom操作，能够有效的缓解卡顿问题，但通常这只能在表面上达成目的，最终优化还是得落实到对具体函数的优化处理上。
发表回复