上篇我们跟大家介绍了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对于开发者更加友好,它已经从以前在开发者看来什么都不能做成长成了开发者必备的开发利器了。
相关推荐
开发人员工具就是是为前端开发人员开发页面而设计的工具。让你可以方便的查找页面的bug,包括html代码、css代码和JavaScript代码。同时,他也提供了一些小工具,例如取色、屏幕尺子等。
IE8开发人员工具使用详解上.mht IE8开发人员工具使用详解上.mht IE8开发人员工具使用详解上.mht IE8开发人员工具使用详解上.mht
IE8开发人员工具使用详解下.mht IE8开发人员工具使用详解下.mht IE8开发人员工具使用详解下.mht IE8开发人员工具使用详解下.mht
ASP.NET开发实战详解:入门、模块、系统 胡勇辉 曹倬皇 兰湘涛 等编著 <br/>电工工业出版社
Linux内核驱动开发详解,基于kernel4.0,对驱动工程师很有帮助
Google_Chrome_开发人员工具详解。。。
Android多媒体应用开发实战详解:图像、音频、视频、2D和3D
inux设备驱动开发详解:基于最新的Linux4.0内核配套光盘
Google chrome 自带着非常好的网页代码的查看工具,可以看html,css,和js. 这个文档详细介绍了这个工具的用法,网页开发人员的号助手!!
Linux设备驱动开发详解:基于最新的Linux4.0内核,linux设备驱动开发详解pdf,LINUX源码
Chrome开发人员工具详解,调试JS的好工具
《CAD应用程序开发详解:Visual C++与OpenGL综合应用》随书光盘
Struts 2 技术详解:基于WebWork核心的MVC开发与实践
资源名称:J2ME开发详解工具篇J2ME开发详解-工具篇,相当基础的文章,主要是根据目前比较热门的手机,像诺基亚、西门子、摩托罗拉等品牌手机程序的IDE开发工具,主要讲解配置及一些基础知识。 资源太大,传百度网盘...
J2ME开发详解工具篇 pdf J2ME开发详解工具篇 pdf
《ASP.NET开发实战详解:入门、模块、系统》程序代码
Labview实用工具详解源码第三部分,压缩包比较大,分八个上传。
1 Oracle开发专题之:分析函数 OVER 2 Oracle开发专题之:分析函数 Rank Dense rank row number 3 Oracle开发专题之:分析函数3 Top Bottom N First Last NTile 4 Oracle开发专题之:窗口函数 5 Oracle开发专题...
微信小程序开发附源码:详解NodeJs开发微信公众号