IE11开发人员工具:UI响应工具详解

转载 2013年12月06日 10:28:04

摘要:IE11的开发工具更加实用和高效。今天为大家介绍其中的一项新增功能:UI响应工具。这个功能相信对于不少人来说还是陌生的,但是这个功能却相当的实用。

我讨厌debug,相信也没多少开发者会喜欢。但是当代码出错之后肯定是要找出问题出在哪里的。不过网页开发的时候遇到BUG是一件再正常不过的事情了,我们不能保证自己的代码万无一失,于是使用浏览器的开发人员工具调试是我们解决问题最快捷的方法了。微软在Windows 8.1预览版中带来了全新的IE11浏览器,不光加入了诸如WebGL支持等功能,还将F12开发人员工具进行了重新设计,这是IE有史以来开发人员工具最大的更新。

新的开发人员工具更加实用和高效了,今天将为大家介绍其中的一项新增功能:UI响应工具。这个功能相信对于不少人来说还是陌生的,但是这个功能却相当的实用。

UI响应工具的作用

UI响应工具顾名思义就是查看UI响应时间的工具,通过这个工具可以帮助我们确定应用中的哪些组件占用了多少CPU时间,让我们之后可以更有针对性的进行优化,从而最大限度地改善应用性能,同时提高开发的效率。


IE11中的UI响应工具用直观的可视化的形式显示HTML、CSS和JavaScript的执行情况以及对布局和垃圾回收等方面的影响,树状图表示了每个时间点对CPU的占用率,下方的图形则展示了页面的FPS,也就是每秒钟的帧数,这是我们判断页面丢不丢帧最直观的方法,也就是看页面“卡不卡”。你可以从统计数据中准确了解应用的响应性以及呈现的流畅度,从而识别出影响应用性能的具体因素,更加有针对性地对应用进行优化。而下方还有详细的时间使用情况,这些只要我们打开UI响应工具再加载页面IE11就会帮我们自动收集完成。

开始使用UI响应工具(CTRL + 5)

下面我们开始具体的使用UI响应工具来测试一下。如果你的网站上出现了过多的动画或用户界面元素的导致响应速度很慢,就会减少用户的体验,这个时候就可以通过UI响应工具来进行优化。


首先打开网页之后F12启用开发人员工具,在点击UI响应工具的按钮开始一个检测,等待页面载入完毕之后停止。展现在你面前的将是一个根据网站载入情况生成的彩色柱形图,按时间的推移呈现出跌宕起伏的变化。


时间轴上显示了7 个主要的事件类别。分别是Loading加载时间、Scripting脚本运行、GC垃圾回收、Styling样式加载、Rendering渲染、Image decoding图片解码和Other其他事件。选定上面某个时间段后,此时间段加载的包含、引导、加载网页相关资源就会分解出现在时间线详细信息区块。

加载包含与引导和加载网页资源相关的事件。在加载内收集的事件有:CSS 分析、 HTML 分析、HTTP 请求、推理下载

脚本包含与之相关的处理和执行的JavaScript事件。在加载内收集的事件有:动画回调、DOM事件、脚本计算、计时器。

GC,垃圾回收时,从内存识别和消除他们不再需要的项目。

样式包含CSS样式和元素定位到相关的事件。在样式内收集的事件有:布局、样式计算。

呈现包含有关将元素放在屏幕上的事件。在呈现内收集的事件有:渲染、图像解码。

其他:杂项与浏览器有关计算。

时间线详细信息区块支持开始时间 、持续时间两种方式来显示,可以根据开发情况调整显示方式。

UI响应能力工具可以帮助您了解哪些组件占用了CPU时间,从而帮助您最大限度地改善应用性能。该工具以可视化形式显示HTML、CSS和JavaScript的执行情况以及对布局和垃圾回收等方面的重要边际影响,帮助您深入了解IE的内部工作情况。您可以高屋建瓴地准确了解您的应用的响应性以及呈现的流畅性。从而识别出影响应用性能的具体原因,更加有针对性地对应用进行优化。

熟练的运用UI响应工具可以帮助我们快速了解网页加载响应时间,而它注意的是占用CPU的时间,如果想要知道网页加载占用内存的量我们就需要使用内存分析工具来查看了。

ie11开发者工具无法使用

安装ie11之后发现开发者工具一直是edge,无法使用。 下载ie11补丁,链接为:http://www.microsoft.com/zh-cn/download/details.aspx?...
  • u012149354
  • u012149354
  • 2015年12月01日 13:58
  • 1974

关于IE11开发者工具报错导致无法使用的解决方法

部分win7系统下的开发者在安装完IE11后,按F12打开开发者工具,出现报错信息,导致开发者工具无法正常使用,现提供解决办法! 安装windows7补丁KB3008923; 下载地址: http:/...
  • vkeke2012
  • vkeke2012
  • 2015年11月07日 12:01
  • 2235

IE8“开发人员工具”使用详解

其实现在已经出了IE9,IE开发人员工具确实很不错。在公司更新到IE9后,继续学习。   IE8“开发人员工具”使用详解上(各级菜单详解) IE8正式版已经发布了。本篇文章不会非常扯...
  • youth0532
  • youth0532
  • 2012年04月06日 23:48
  • 1615

IE开发人员工具不显示的解决方法

IE开发人员工具不显示的解决方法。 使用IE调试,可直接按F12键调出,或者在浏览器工具命令中调出。 有时会遇到一个很恶心的问题,就是明明开发工具已经调出来了,在工具栏里也有, 用鼠标点就是...
  • lushuaiyin
  • lushuaiyin
  • 2013年01月28日 11:04
  • 1563

win8.1下IE11按F12调出开发工具的莫名异常问题解决

win8.1下IE11按F12调出开发工具时,发现其崩溃了,崩溃信息如图: 简单摘要: Diagnostic: Exception in window.onload:Error Sta...
  • u011138447
  • u011138447
  • 2015年07月16日 22:50
  • 2971

IE11 开发人员工具

“网络”工具详情和改进 : http://www.iefans.net/ie11-f12-kaifa-renyuan-gongju-wangluo-gaijin/...
  • zhuxiang203
  • zhuxiang203
  • 2014年08月03日 16:03
  • 282

ie开发者工具

今天把ie浏览器从9升级到了11,却发现f12后开发者工具出错不能使用 在网上查找了下原因,需要下载一个补丁IE11-Windows6.1-KB3008923-x64.msu(我的是64位) ...
  • shadow_yn
  • shadow_yn
  • 2015年12月14日 21:57
  • 821

win7下浏览器有问题,比如开发人员工具用不了了,解决方法

      N天前我的浏览器就出现了问题,重装系统吧,我刚装了不久,不忍心继续重装那么多的软件,而且也浪费时间。想重装个IE8,官网找了也没找到,装IE9吧,听别人装过然后发生一些问题更是不好解决啊。...
  • marqio
  • marqio
  • 2011年03月08日 13:35
  • 849

使用IE11的F12开发人员工具进行网页前端性能测试

公司的新项目,用户使用的时候反馈说反应很慢,要我们做性能优化。 先介绍一下这个系统:一个电子办公系统,基本上都是局域网中使用,也没多少用户同时在线,没必要做高并发。 首先用loadrunner跑一个用...
  • u010051887
  • u010051887
  • 2016年01月25日 17:06
  • 2039

IE11 F12工具报错,ie11开发人员工具不能正常使用

系统环境 win7+IE11 报错描述: Exception in window.onload: Error: An error has ocurredJSPlugin.3005 Stack Trac...
  • haoxinren123
  • haoxinren123
  • 2015年10月11日 21:10
  • 126
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE11开发人员工具:UI响应工具详解
举报原因:
原因补充:

(最多只允许输入30个字)