关闭

F12开发者工具新功能-内存分析的作用

标签: F12内存浏览器性能IE11
14062人阅读 评论(0) 收藏 举报
分类:

今天让我们再来认识下可以分析内存使用的工具:内存分析。这是和UI响应工具一起加入到IE11开发者工具中的新功能。

内存分析的作用

内存分析工具可以帮助你了解应用的内存使用情况,从而帮助你避免内存泄漏或内存的过度消耗。要构建可供消费者长期运行的 Web 应用或复杂的交互式应用,您必须重点关注应用的内存使用情况。

尽管 JavaScript 具有完善的垃圾回收环境,但如果应用引用的对象未能及时释放或无法释放,通常会导致应用消耗过多的内存。内存工具可以显示页面中每一个对象的相关信息,无论该对象是 JavaScript 对象还是 DOM 对象,从而帮助您发现这些问题。例如,利用这些信息,您可以查看 占用了多少内存以及哪些对象使其处于活动状态。最佳做法是,您可以比较两个快照之间的差异,定位发生变化的点,从而找出应用占用过多内存的原因并予以修正。


开始使用内存分析工具(CTRL + 7)

如果你的网页正常打开后,但逐渐缓慢或有时崩溃,页面的内存使用可能有问题。

加载页面到浏览器后,在F12中找到内存工具 (使用相机图标或 CTRL + 7),就可以开始进行分析了。

如果你网页的内存问题是从开始就发生,但内存使用率没有持续增加,那就点击拍摄一个快照,点击进入快照的详细信息视图从中发现问题所在的位置。如果您的内存使用率是随着时间的推移而增加,你可以再拍摄一个新的快照来与之前的进行比较来发现问题。


在上面的详细信息视图中,你会看到一个蓝色的小图标,鼠标悬停可以看到一个工具提示,为什么这个项目有一个潜在的问题。在上面的示例中的 DOM 节点未附加到 dom。这可以发生时节点已从 DOM 中,删除,但在其他地方指。

支持三种视图类型的显示

• 支配者视图显示所有单个 HTML 元素、 DOM 节点和您的代码创建的 JavaScript 对象。这是最详细的分析视图。

• 类型视图可以查看组对象通过其构造函数,并给出的每种类型的计数。这样更容易地知道有多少阵列、有多少的字符串,并依此类推。这些条目都可以进一步展开查看。

• 根视图显示主要根对象您可以展开以查看与它们相关联的子对象。

在这三个视图中,都可以查看对象的大小和保留的大小。

大小表示对象使用的内存量。

保留大小表示通过删除对象回收的内存量。

内存分析工具和前一篇中的UI响应工具都是我们了解网站性能的重要途径,而现在我们可以在IE11中方便的使用他们了。创建完网站并不是开发的结束,而是优化的开始,我们都希望自己的网站可以运行的越来越好,资源占用越来越低,可以在更多的电脑上都能表现流畅。

所以这就需要我们特别了解我们的网站,但是很多网站内部的性能我们是不能够不会直观的表现在页面中,这时候就需要开发者工具发挥它们的作用了,在IE11之前,想要在IE浏览器上查看CPU占用时间和内存使用几乎是不可能的事,而到了IE11中,微软将UI响应和内存分析工具双双加入让我们可以方便的了解到网站的性能如何。

而我们能做的就是希望通过对两个工具的简单介绍,让大家对它们有所了解。在IE11众多的改进和新功能让IE 11对于开发者更加友好,它已经从以前在开发者看来什么都不能做成长成了开发者必备的开发利器了。

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

F12开发者工具新功能-内存分析的作用

今天让我们再来认识下可以分析内存使用的工具:内存分析。这是和UI响应工具一起加入到IE11开发者工具中的新功能。 内存分析的作用 内存分析工具可以帮助你了解应用的内存使用情况,从而帮助你避免内存泄...
  • u011793198
  • u011793198
  • 2013-12-01 21:24
  • 14062

Chrome浏览器F12开发者工具的几个小技巧总结

1、直接修改页面元素 2、颜色取色器 3、快速查找并定位文件 4、编辑源代码 5、只分析异步请求资源
  • gdjlc
  • gdjlc
  • 2017-06-09 10:59
  • 2929

IE11 —— F12 开发者工具

F12 开发者工具 简介 使用 F12 开发人员工具,你可以调试、测试网页并加快其速度。无论你是需要微调你的 CSS 布局还是查找内存泄漏,你都能在此处找到帮助工具。 如果你正在 I...
  • binyao02123202
  • binyao02123202
  • 2014-12-15 16:22
  • 22131

ie F12 开发者工具 错误分析

  • 2016-07-19 17:38
  • 39KB
  • 下载

你不知道的Chrome开发者工具新功能

本文转自: https://news.cnblogs.com/n/573595/ 相信对本文感兴趣的读者对于 Chrome 开发者工具的基本功能应该都比较熟悉:DOM 查看器、样式面板、JavaSc...
  • ardo_pass
  • ardo_pass
  • 2017-11-15 22:18
  • 119

IE开发利器-IE10中的F12开发者工具

在IE中开发网站一直是一个难题,因为IE中一直缺少一个如firebug那样的开发者测试工具,尽管有着IEtester这种可以查看IE各版本下网页显示情况的工具,但是却不能像firebug那样进行有效地...
  • wlzcool
  • wlzcool
  • 2013-01-23 22:20
  • 5844

F12 点开的童话——chrome开发者工具使用基础

chrome开发者工具使用技巧 以及 小插件
  • peace_of_soul
  • peace_of_soul
  • 2014-08-18 16:18
  • 853

关于火狐开发者工具---个人总结 F12

关于火狐开发者工具---个人总结 火狐浏览器自带开发工具包含一下几个内容: 1.查看器:     包含页面的主体的框架结构,所使用的标签。以及每个具体的标签的使用的css的效果、样式、字体等的效果...
  • fanbingfu
  • fanbingfu
  • 2016-08-02 16:06
  • 3879

Web开发经验谈之F12开发者工具/Web调试

Web开发经验谈之F12开发者工具/Web调试
  • qq_35432904
  • qq_35432904
  • 2016-11-08 11:34
  • 1125

IE学习之道:IE开发利器-IE10中的F12开发者工具

在IE中开发网站一直是一个难题,因为IE中一直缺少一个如firebug那样的开发者测试工具,尽管有着IEtester这种可以查看IE各版本下网页显示情况的工具,但是却不能像firebug那样进行有效地...
  • u011511429
  • u011511429
  • 2013-10-18 09:16
  • 1955
    个人资料
    • 访问:83263次
    • 积分:673
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:6篇
    • 译文:0篇
    • 评论:17条
    文章分类
    最新评论