IE11开发人员工具:内存分析工具详解

标签: IE Web IE11 内存 开发人员工具 | 发表时间:2013-12-03 23:51 | 作者:iefans
出处:http://www.iefans.net

上篇我们跟大家介绍了IE11开发人员工具中的新功能: UI响应工具的使用方法,通过这个工具我们可以有效快速的找出网页应用中的哪些组件占用了多少CPU时间,有利于我们对代码进行改进。

除了CPU的占用情况我们比较关注以外,应用对内存的占用情况也是值得我们关注的问题。所以今天我们在给大家分享跟UI响应工具一起加入到IE11开发者工具中的新功能:内存分析。

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

内存分析的作用

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

内存检测

开始使用内存分析工具

(CTRL + 7)

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

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

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

分析内存问题所在的位置

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

支持三种视图类型的显示

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

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

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

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

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

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

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

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

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

This article addresses: http://www.iefans.net/ie11-f12-kaifa-renyuan-gongju-neicun-fenxi/

Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up

相关 [ie11 开发 员工] 推荐:

IE11开发人员工具:内存分析工具详解

- - IE浏览器中文网站
上篇我们跟大家介绍了IE11开发人员工具中的新功能: UI响应工具的使用方法,通过这个工具我们可以有效快速的找出网页应用中的哪些组件占用了多少CPU时间,有利于我们对代码进行改进. 除了CPU的占用情况我们比较关注以外,应用对内存的占用情况也是值得我们关注的问题. 所以今天我们在给大家分享跟UI响应工具一起加入到IE11开发者工具中的新功能:内存分析.

前端开发工程师:不是IE的IE11

- - IE浏览器中文网站
IE11浏览器自去年六月份发布以来虽然据说也取得了不错的成绩,但是根据百度流量研究院的浏览器数据显示,国内好像还看不到其占有率,但全球范围内 IE11的占有率已经超过IE10和IE9的总和. 获取IE11可以从两种方式:安装 Win8.1 里面内置IE11;从Win 7的 IE9/10 升级,但XP在中国仍然有超过 60%的占有率,而XP最高也只能升级到IE8.

IE11兼容问题

- - 研发管理 - ITeye博客
IE11下载地址:http://www.microsoft.com/zh-cn/download/confirmation.aspx?id=40901. 安装IE10和IE11之前需要先保证操作系统是Service版本的. win7 sp1升级包下载地址:http://www.microsoft.com/zh-cn/download/details.aspx?id=5842.

IE9/IE10/IE11兼容性更改汇总

- - IE浏览器中文网站
从IE9开始,微软对IE动了很大的“手术”,做了很多改进,逐步向W3C靠拢,对HTML5也提供了很多支持. 以下是相对于IE8之前的版本,IE9+各版本改动较大的功能点. IE的高版本里面提供了从上往下的兼容性测试工具,IE11中内置了IE10\IE9\IE8\IE7等兼容性测试模式,以方便开发者进行相应版本的测试.

微软IE11浏览器的7大变化

- - 36氪 | 关注互联网创业
微软很看重自己的IE浏览器,这款浏览器跟Windows捆绑在一起已经走过了10年. 去年微软推出Windows 8时也同时发布了新版的浏览器IE10,这是一款针对Windows 8强调的全屏及触摸优先特点而开发的浏览器. 因此IE10天生就是很大的一个变化,但是这款浏览器也有一些奇怪的限制. 比如web内容占据全屏,除非点击右键才能看到标签页或URL条.

IE11企业模式详解,这对于企业有什么用?

- - IE浏览器中文网站
在帮助企业及时了解最新软件、服务和设备方面,Microsoft 迈出了重要一步. 今天,作为 Windows 7 和 Windows 8.1 的一项更新推出了 Internet Explorer 11 的企业模式,该模式可提供与较早版本 Internet Explorer 更好的兼容性,以及用于管理哪些 Web 应用使用该模式的工具.

微软正式发布Windows 7版IE11浏览器

- - WPDang
微软IE浏览器团队在其官方博客宣布,Windows 7版IE11浏览器正式发布, 目前已经可以在其官网进行下载. 安装包支持95种语言,未来数周内还将通过系统自动更新的方式推送给所有Windows 7用户. 在官方博客中,微软号称IE11在实际使用中比其前代IE10提速9%,比其它竞争对手快至少30%,并整合各种最新技术,增加25种现代Web开发标准兼容,是Windows平台上最佳的浏览器.

WebKit是新时代的IE6,微软修改移动版IE11

- - Solidot
微软IE团队调查了500家最流行网站在不同移动浏览器中的行为,发现很多网站会将移动版IE11浏览器识别为桌面版本,并特别为基于WebKit的浏览器优化. 基于WebKit引擎的浏览器如Mobile Safari统治了移动浏览器市场,这些浏览器包含了许多非标准化的特性,此类的优化会给不支持这些特性的浏览器带来问题.

使用IE11构建全球通用的JavaScript应用程序

- - IE浏览器中文网站
开发人员若想要在全球范围内构建丰富的 Web 应用,如今的 JavaScript 标准缺乏一些基本对象和库帮助器. 现在利用 Internet Explorer 11,Web 应用程序现在可以使用 JavaScript ECMAScript 国际化 API,该功能提供有标准的 JavaScript 接口,可以实现出色的全球通用体验,例如,数字、日期、时间和货币格式和特定文化的字符串排序(比较).

IE10和IE11对比,删除和新增的功能

- - IE浏览器中文网站
微软最新发布的Internet Explorer 11 (IE11)包含诸多新功能,比如改进了性能和安全性、页面加载速度更快、支持新的网页标准和WebGL等. 但你是否知道 IE11也删除了某些功能. 下面,就将和大家一起来探讨IE11中删除的所有功能,以及添加的新功能. 闲话少说,让我们来分享特色列表:.