Vue 内存优化系列一(前端如何查看和分析内存占用情况)

二叶草 2020年2月2日10:32:53优化评论4阅读模式

一、为什么要考虑内存占用?

Vue 这类MVVM架构的方案,通过引入VNode实现数据驱动界面,从而产生VNode和Data-Watcher的开销,因此watcher对象、data对象和VNode的内存占用和回收问题较多,尤其长列表和一些复杂应用场景。

二、前端如何查看和分析内存占用情况?

第一种是使用 Timeline 记录可视化内存泄漏

第二种是进行堆快照(JS的对象一般放在堆中),查看当前的内存分布情况

第三种是进行内存时间线分析,查看一顿操作之后的内存增长情况,主要针对这个操作过程(这个时候可以结合Performance标签功能中来分析)

第四种是按函数调查内存分配

第五种是发现频繁的垃圾回收

方法一:使用 Timeline 记录可视化内存泄漏

您也可以使用 Performance 面板作为调查的起点。Performance 面板可以帮助您直观了解页面在一段时间内的内存使用情况。

1、在 DevTools 上打开 Performance 面板。

2、启用 Memory 复选框。

3、做记录。

提示:一种比较好的做法是使用强制垃圾回收开始和结束记录。 在记录时点击 Collect garbage 按钮 (强制垃圾回收按钮) 可以强制进行垃圾回收。

类似于以下屏幕截图的 Performance 记录

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

首先,我们来说明一下用户界面。Overview 窗格中的 HEAP 图表(NET 下方)表示 JS 堆。概览窗格下方是计数器窗格。从这里,您可以看到内存使用按 JS 堆 (与 Overview 窗格中的 HEAP 图表相同)、文档、DOM 节点、侦听器和 GPU 内存细分。停用对应的复选框可以将其在图表中隐藏。

现在,我们将根据屏幕截图来分析代码。如果查看节点计数器(绿色图表),您会看到它与代码完全匹配。在实际使用过程中,如果您看到这种 JS 堆大小或节点大小不断增大的模式,则可能存在内存泄漏。

方法二:使用堆快照发现已分离 DOM 树的内存泄漏

只有页面的 DOM 树或 JavaScript 代码不再引用 DOM 节点时,DOM 节点才会被作为垃圾进行回收。 如果某个节点已从 DOM 树移除,但某些 JavaScript 仍然引用它,我们称此节点为“已分离”。已分离的 DOM 节点是内存泄漏的常见原因。此部分将教您如何使用 DevTools 的堆分析器确定已分离的节点。

要创建快照,请打开 DevTools 并转到 Memory 面板,选择 Heap Snapshot 按钮,然后按 Take Snapshot 按钮。

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

在 Class filter 文本框中键入 Detached,搜索已分离的 DOM 树。

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

展开三角符号以调查分离的树

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

以黄色突出显示的节点具有 JavaScript 代码对它们的直接引用。 以红色突出显示的节点则没有直接引用。只有属于黄色节点的树时,它们才处于活动状态。 一般而言,您需要将注意力放在黄色节点上。 修复代码,使黄色节点处于活动状态的时间不长于需要的时间,您也需要消除属于黄色节点树的红色节点。

点击黄色节点对其进行进一步调查。在 Object 窗格中,您可以看到与正在引用该节点的代码相关的更多信息。 例如,在下面的屏幕截图中,您可以看到 detachedTree 变量正在引用该节点。要解决这一特定的内存泄漏,您需要研究使用 detachedTree 的代码并确保在不需要时,此代码可以移除其对节点的引用。

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

方法三:使用分配时间线确定 JS 堆内存泄漏

分配时间线是您可以用于跟踪 JS 堆中内存泄漏的另一种工具。

要显示分配时间线,请考虑使用下面的代码:

var x = [];
function grow() {  x.push(new Array(1000000).join('x'));}
document.getElementById('grow').addEventListener('click', grow);

每次按代码中引用的按钮时,都会向 x 数组添加一个由 100 万个字符组成的字符串。

要记录分配时间线,请打开 DevTools,然后转到 Memory 面板,选择 Allocation instrumentation on timeline 单选按钮,按 Start 按钮,执行您怀疑导致内存泄漏的操作。完成后,按 stop recording 按钮 (stop recording 按钮)。

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

记录时,请注意分配时间线上是否显示任何蓝色竖线(如下面的屏幕截图所示)

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

这些蓝色竖线表示新内存分配。新内存分配中可能存在内存泄漏。 您可以在竖线上放大,将 Constructor 窗格筛选为仅显示在指定时间范围内分配的对象。

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

展开对象并点击它的值,可以在 Object 窗格中查看其更多详情。 例如,在下面的屏幕截图中,通过查看新分配对象的详细信息,您可以看到它被分配到 Window 作用域中的 x 变量。

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

方法四:按函数调查内存分配

使用 Record Allocation Profiler 类型可按 JavaScript 函数查看内存分配。

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

1、选择 allocatoin sampling 单选按钮。如果页面上有一个工作线程,您可以使用 Start 按钮旁的下拉菜单选择它作为分析目标。

2、按 Start 按钮。

3、在您想调查的页面上执行操作。

4、完成所有操作时按 Stop 按钮。

DevTools 按函数显示内存分配明细。默认视图为 Heavy (Bottom Up),将分配了最多内存的函数显示在最上方。

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

切换到 Chart 后,显示如下:

Vue 内存优化系列一(前端如何查看和分析内存占用情况)

方法五:发现频繁的垃圾回收

如果感觉页面经常暂停,则可能存在垃圾回收问题。

您可以使用 Chrome 任务管理器或者 Timeline 内存记录发现频繁的垃圾回收。 在任务管理器中,Memory 或 JavaScript Memory 值频繁上升和下降表示存在频繁的垃圾回收。在 Timeline 记录中,JS 堆或节点计数图表频繁上升和下降指示存在频繁的垃圾回收。

确定问题后,您可以使用分配时间线记录找出内存正在分配到什么地方,以及哪些函数导致分配。

参考资料

https://developers.google.com/web/tools/chrome-devtools/memory-problems

https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

本文来源于:Vue 内存优化系列一(前端如何查看和分析内存占用情况)-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草
nginx解析漏洞 优化

nginx解析漏洞

phpstudy(小皮模板存在nginx解析漏洞) 影响版本 phptsuy8.1.07的Nginx1.5.11版本影响版本 phptsuy8.1.07的Nginx1.5.11版本 phpstudy介...
网站SEO优化基础流程(新手必看) 优化

网站SEO优化基础流程(新手必看)

宝塔面板搭建一个获取网站的Favicon图标的APIgetFavicon是一个可以获取网站的Favicon图标并显示在你的网页上的项目。安装方法很简单,属于开箱即食。这篇文章还是基于宝塔面板来搭建。 ...

发表评论