F12开发人员使用新功能-内存分析的作用

让我们看一下另一个可以分析当今内存使用情况的工具: 内存分析. 这是与UI响应工具一起添加到IE11开发人员工具中的一项新功能.

记忆分析的作用

内存分析工具可以帮助您了解应用程序的内存使用情况，从而帮助您避免内存泄漏或过多的内存消耗. 要构建供消费者使用的长时间运行的Web应用程序或复杂的交互式应用程序，您必须关注应用程序的内存使用情况.

尽管JavaScript具有完美的垃圾回收环境，但是如果应用程序引用的对象未及时释放或无法释放，通常会导致应用程序占用过多内存. 内存工具可以显示有关页面上每个对象的信息，无论该对象是JavaScript对象还是DOM对象，以帮助您发现这些问题. 例如，使用此信息，您可以查看正在使用多少内存以及哪些对象使之处于活动状态. 最佳做法是，您可以比较两个快照之间的差异，找到更改点，并找出应用程序占用过多内存的原因并进行纠正.

开始使用内存分析工具（CTRL + 7）

如果您的网页正常打开，但逐渐或有时崩溃虚拟兔利用剩余内存，则该页面的内存使用可能有问题.

将页面加载到浏览器中后，在F12中找到存储工具（使用相机图标或CTRL + 7），就可以开始分析.

如果从一开始就出现了网页的内存问题，但是内存使用量并未继续增加，请单击以拍摄快照，然后单击以进入快照详细信息视图以查找问题的位置. 如果您的内存使用量随时间增加，则可以制作一个新快照与上一个快照进行比较以查找问题.

在上面的详细信息视图中，您将看到一个小的蓝标. 当您将鼠标悬停时，您会看到一个工具提示，为什么此项目可能存在问题. 上例中的DOM节点未附加到dom. 当该节点已从DOM中删除但在其他地方引用时，可能会发生这种情况.

支持三种视图的显示

•“统治者”视图显示由代码创建的所有单个HTML元素，DOM节点和JavaScript对象. 这是最详细的分析视图.

•类型视图允许您通过其构造函数查看组对象并提供每种类型的计数. 这样可以更轻松地知道有多少个数组，有多少个字符串等等. 这些项目可以进一步扩展以查看.

•根视图显示主要的根对象. 您可以展开以查看与其关联的子对象.

在所有三个视图中，您可以查看对象的大小和保留的大小.

大小指示对象使用的内存量.

保留大小表示通过删除对象恢复的内存量.

上一篇文章中的内存分析工具和UI响应工具都是我们了解网站性能的重要方式，现在我们可以在IE11中轻松使用它们. 创建网站不是开发的终点，而是优化的起点. 我们都希望我们的网站能够运行得越来越好，资源消耗越来越少，并且可以在更多计算机上平稳运行.

因此，这需要我们对网站有特殊的了解，但是网站的许多内部性能无法直观地显示在页面上. 此时，需要开发人员工具来发挥作用. 在IE11之前，几乎不可能在IE浏览器上检查CPU时间和内存使用情况，并且在IE11中，Microsoft添加了UI响应和内存分析工具虚拟兔利用剩余内存，以使我们可以轻松地了解网站的性能.

我们所能做的就是希望通过对这两个工具的简要介绍，让大家都知道它们. IE11中的许​​多改进和新功能使IE 11对开发人员更加友好. 从开发人员以前的观点来看，它已成为开发人员必备的开发工具.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-264461-1.html