说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

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

HTML文档下载 WORD文档下载 PDF文档下载
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的时间,如果想要知道网页加载占用内存的量我们就需要使用内存分析工具来查看了。

来自:ieFans.Net

看看传说5亿行代码的Healthcare.gov网站的架构 如何走出选择PHP还是ASP.NET的两难境地? 你的设计够档次吗?分享25个奇异的404页面 百度LBS推Openmap战略:无编程经验者可通过拖拽制作个性化地图应用 百万用户时尚分享网站feed系统扩展实践 Twitter上市首战告捷的四大因素 大幕将启!MDCC2013移动开发者大会下周召开 TUP第30期:微软资深专家论如何用Visual Studio开发iOS、Android应用 [开源推荐]Riot.js:不足1KB的MVP客户端框架 研发周报:最难忘的Bug调试经历 NSA如何侵入Google和雅虎的私有数据网络? 飞天5K:开放比开源更有意义 MDCC之移动娱乐游戏峰会:手游金玩奖即将揭晓 开源巨人火狐浏览器:9周岁生日快乐! 感受OpenStack Summit香港大会 渣打科营中心:创建以技术为核心的企业文化 抱怨IT公司人才缺乏?留住现有人才方是正途 专访Esri中国区技术总监:打造新一代WebGIS平台 TIOBE 2013年11月编程语言排行榜:C#、Transact-SQL及VB.NET厚积薄发 透过KitKat,Android或与ChromeOS融合? 利用Spring Data Neo4j搭建推荐系统 七丽借百度SiteApp移动化 分发及变现能力获大幅提升 Go语言4岁了 生日快乐 谷歌发布Web延迟基准测试工具 专访JS-Git创始人Tim Caswell:让Git运行于任一平台 一段代码引发的思考 2013年美国开发者薪资调查报告 MDCC之移动娱乐游戏峰会:金玩奖揭晓最火游戏 算法为王:且看Mac Mini如何超越1636节点的Hadoop 鲍尔默成大善人?微软正式废除员工排名评审制度 工信部软件司副司长陈英为MDCC 2013大会致开场辞 怎么使label框透明!帮帮我! TNMUDP问题:怎样才能知道RemoteHost连接失败??? 谁有CuteFTP Pro2.0注册码?谢谢 如何进行DropDownList绑定,谢谢! 请问一个CString的问题 那个168查分台太可恶了 WIN98与WIN2000共享一个OFFICE??? 网络连接怎么检测 能把IE浏览器最大吗?俺指的是把右上最大按钮最大化? 怎么判断表单传送的整数中不能有字符,谢谢!!! 如何把我写好的说明书放到我VC++应用程序的帮助文件中? 求最容易理解,最容易上手的数据库书籍,各位老大请指教,谢谢!! 快!快快!!来拿分呀!!!!!!!!一个简单问题。 WIN98与WIN2000共享一个OFFICE 2000??? 在Servlet中如何使用JavaBean(调用其中的方法)?主要是格式!如果网上有这方面的资料也可以告诉我,我急用,不胜感激!40分送上!(只有这些了) 请问各位:怎样才能知道某一个进程所占用的cpu比例,mem大小? 请问在恢复sql 7.0一个数据库文件时,出现Error 3624:这是什么意思?? 关于程序员考试 哪位知道怎么一行一行地读取文本文件呀!!!! 谁知道的,来帮我一下——有关网页浏览计时的问题 如何将数字变为字符串格式化输出? Websphere下使用连接池的一些问题 TNMUDP问题:怎样才能知道RemoteHost连接失败 ? 算法请教,我要调整一副黑白数字图的浓度,我是用直方图的方法好呢,还是先转成HLS在转回来好?若都不对,应该怎么做? 如何 在ASP中用ping 一个小问题 请用javascript VC++6是98年才出来的,为什么没有最新的ADO原生驱动,而通过ODBC的话速度太慢; 多媒体 谁有MPEG-4的资料! 如何实现类似资源管理器的分隔条 我是菜鸟,请教各位GG,MM?????? 我的计算字段怎么老要计算,而且经常有死循环,到底该注意些什么,在哪里控制? 如何取消鼠标右键菜单和使shift功能键无效?(紧急) 一个非常非常简单的一个问题 如何安装Jbuilder 5.0 ? 多媒体技术 chr(176)有什么用? 如何将3DMAX图片在vb窗口中显示 各位大侠,怎样取得复合数据窗口里面的嵌套表的Label名。 一个关于访问数据库很菜的问题 请教小波分解与重构,模极大值算法。 哪儿能找到com.ms.xml.*包? 动态类型判别 是怎么实现的,谁有小型模拟代码? 让程序自启动都有哪几种方式呀!各位发表发表吧!!!! sqlserver恢复问题! 有关STL的文章! 很简单的问题,送份啦!!! 求一个字符在字符串中的位置!? ********DBGrid和ADO怎样连接********* 在JBuilder 5.0中,我打开一个单独的java文件,怎么编译和运行他?用命令行方式是可以的 简单问题,applet??? 已知某铁路桥长500米,现有一列火车从桥上通过,测的火车从开始上翘到完全过桥共用30秒,而整列火车完全在桥上时间为20秒,求火车的速度及火车的长 用列方程形式 质量均为m的A,B两物块一起沿光滑的斜面下滑,则B对A的摩擦力 A.mgsinα B μmgcosα 已知 铁氧元素质量比为七比三 求这种物质化学式 思路) 物理摩擦力的题在一次火警军事演习中,消防战士双手握住竖直的铁杆匀速攀上12m高的楼台,完成指令后又沿铁杆匀速滑下,消防战士受到铁杆的摩擦力分别记为f1和f2,那么f1f2的方向如何 两个人要一直将质量m=1000kg的小车沿一较长的水平轨道推上长为L=5m,高h=1m的斜坡轨道顶端,小车在任何情况下所受的所有阻力恒为车重的0.12倍,两人的最大推力各为800N,两个人一直都用最大的 如题:少量在人体胃中帮助消化的物质的化学式是什么? 2CH3CH2OH+O2→2CH3CHO+2H2O和CH4+2O2→CO2+2H2O那个是取代反应请想好了再答 两个人要将质量M=1000kg的小车沿一小型铁轨推上长L=5m,高h=1m的斜坡顶端,如图所示.已知车在任何情况下所受的摩擦阻力恒为车重的0.12倍,两人能发挥的最大推力各为800N.在不允许使用别的工具 汽车在平直公路上行驶,在第1min内平均速度为5m/s,第2,3min内平均速度为6m/s,第4min内的平均速度为10m/s,第5min内的平均速度为13m/s,则汽车在这5min内的平均速度是__m/s 已知:2H20(I)反应生成2H2(g)+O2(g)-571.6KJ,CH4(g)+2O2(g)反应生成2H2O(I)+CO2(g)+890.3KJ.则1g氢气和1g甲烷分别燃烧后,放出的热量之约是(   )A.1:3.4      B.1:1.7      C.2.6:1 D.4.6:1 两个人要将质量M=1000kg的一箱货物装进离地高1m的卡车车厢内,他们找到了一个长为5m的斜面,但是没有其他更多可借助的工具.假设货物在平地、斜面上所受的摩擦阻力恒为货物重力的0.12倍,两 沉思怎么造句?80字 已知某铁路桥长500米,现在一列火车通过该桥,火车从开始上桥到过完桥共用了30秒钟,整列火车完全在桥上的 两个人要将质量M=1000KG的小车沿一小型铁轨推 化学式中各种组成部分是什么意思? 在一段双轨铁路上,两列火车相向驶过,若A列车全长180米,B列车全长160米,两列车的错车时间为4秒已知A列车的速度比B列车快5米/秒,则A.B两车的速度为 已知某铁路桥长500米,现一列火车通过该桥,火车从开始上桥到过完桥共用了30秒钟,整列火车完全在桥上的时间为20秒,球火车的长度与速度 平衡摩擦力后,平衡摩擦力,小车在木板上的受力应有F+mgsinθ-μmgcosθ=ma,其中F为绳的拉力,θ为木板与水平面之间的倾角.能不能画图描述一下小车在木板上的受力分析,还有μmgcosθ是什么力 在一段双轨铁道上,两列火车同时驶过,a列车车速为每秒20米b列车车速为每秒24米,若a列车长180米b列车长160米问两列车错车的时间是多长时间? 已知反应2CO=O和CH4+2O2=2H2O+CO2通过计算说明等质量的一氧化碳和甲烷完全燃烧 可是摩擦力不是F=uN么,车速为什么有和摩擦力有关了? 在一段双轨铁道上,两列火车同向驶过,若A列车全长180米,B列车全长160米,A列车速度为20米/秒,B车速度为24米/秒,求错车时间.答案好像是130 摩擦力在做加速运动时有变化吗匀速运动的物体,摩擦力的大小与速度无关那么如果不是匀速呢 天然气,液化气,与空气的最佳燃烧配比是多少,怎么计算的,是不是气压也会影响配比如果气压影响的话那在气压变化的情况下要怎么计算 煤气灶在燃烧过程中老是发出 嘭嘭 声的原因是什么煤气灶在燃烧过程中,老是突然断气后又迅速燃起并发出嘭嘭声. 变速运动摩擦力怎么变化 天然气与空气如何配比使之爆炸 自行车前后轮所受摩擦力方向 物体加速运动时,摩擦力是怎样改变的?那它本来是在做匀速运动,摩擦力与物体向前的 力抵消,他加速时,若摩擦力不变,那摩擦力不就永远小于物体向前的力了,如果还要以加速后的速度 (两种方法解答)一辆质量为m=1000kg,速度为v0=10m/s,关闭发动机后在水平地面上滑行了距离L=5m后停了下来,试求汽车受到的阻力.两种方法. 自行车前后轮的摩擦力方向如何?为什么? 2H2+O2=2H2O2H2=多少浓度?O2=多少浓度?2H2O=多少浓度?氧气和氢气的比例是多少才能燃烧?氧气:多少氢气:多少 因参与人体新陈代谢而消耗的气体是_______(填化学式)谢谢了! 自行车前后轮的摩擦力方向是? 高一物理学中摩擦力使物块运动但它为什么会运动啊?一个物块A在物块B上,B物块在一个光滑水平面上,若此时给物块B一个大小为F的推力且A与B之间的静摩擦力大于F,把它们看做一个整体,据F=ma 人体中含有的酸,要化学式 4.有一座铁路桥长1000米,一列火车从桥上通过,测得火车从开始上桥到完全下桥共用120秒,整列火车完全在桥上的时间是80秒,这列火车的速度和长度分别是多少? ..有关摩擦力的..如图所示,两物体A、B叠放在水平面上,在外力作用下(外力作用在B上)一起作匀速直线运动.若A、B间的滑动摩擦系数为μ1,B和地面间的滑动摩擦系数为μ2,则μ1、μ2可能是 答案 关于人体生长激素的化学式? 已知某铁路桥长1000米,一列火车从桥上通过,测得火车从上桥到完全下桥共用120秒,整列火车完全在桥上时间为80秒,火车长多少米,每秒行多少米?不要方程!要算式! 人在电梯(一种是像楼梯一样的,一种是一个斜面)上受到哪几个力 能构成人体蛋白质的氨基酸化学式有八种,甲氨酸,缬氨酸,赖氨酸,异丙氨酸,本氨酸,亮氨酸,色氨酸,苏氨酸 求化学式…………! 关于摩擦力的物理题小刚和小明探究摩擦力大小和什么因素有关时,小刚用手通过弹簧测力计匀速拉动木块A,读出拉力即为木块A的滑动摩擦力.小明将弹簧测力计的一段固定,另一端勾住木块B, 有关摩擦力我国著名发明家邹德俊发明的“吸盘式” 挂衣钩如图,将它紧压在平整、清洁的竖直瓷砖墙面上时,可挂上衣帽等物品.如果挂衣钩的吸盘压紧时,它的圆面直径为3.18cm,吸盘圆面压在 用高耸,缓缓,沉思,造句 摩擦力物理题两块木板压一块木块,保持相对静止,要想把木块从上面和下面抽出至少需要多大的力? 要使静止在水平地面上重为3N的物体移动,至少需用0.7N的水平推力;物体移动后,只需加0.6N的水平推力,就可以维持其匀速运动.则物体与水平地面的动摩擦因数是____;物体与水平地面的最大静 小学三年级造句 沉思 物理摩擦力题用沿水平反向20N的力推重为100N的木箱在水平面上做匀速直线运动,木箱受到的摩擦力为多少? 化学方程式:2Mg=O2=点燃=2MgO给我们提供了哪些信息 用thoughtful来造句,单词的意思是沉思的. 摩擦力质量分别为M,m的滑块A、B叠放在固定的、倾斜角为θ的斜面上,A与斜面间、A与B之间的摩擦因数分别为μ1,μ2,当A、B从静止开始以相同加速度下滑时,B受到的摩擦力 为什么方向平行于斜面 化学方程式的读法为何要用份2H2+ O2 =(点燃)2H2O每4份质量的氢气跟32份质量的氧气反应生成36份质量的水我不理解其中份质量什么意思以及怎样得到 尼古丁的化学式为CxHyNz,其相对分子质量为162,其中氢约占8.7%,氮约占17.3%,则化学式中x=____,y=____乘出来不是小数吗? 已知某铁路桥长500米,现有一列火车通过该桥,火车从开始上桥到过完桥共用了30秒,整列火车完全在桥上的时间为20秒,求:火车的速度和火车的长度.用一元一次方程解题.请说明理由!要设火车 制作一个小车,在30cm高,60cm长的斜坡上滑下,至少要能滑5m远跪求答案……手工制作……目前只有木板和木条…… 什么物质占人体质量的三分之二? 已知某铁路桥长500米,现在一列火车通过该桥,火车从开始上桥到过完桥共用了30秒钟,整列火车完全在桥上的时间为20秒,则火车的长度是多少? 一个工人用200N的推力沿斜面把汽油桶推到汽车车厢上,若斜面长为5m,高为1m,不计摩擦,则推力做的功是多少汽油桶的重力为多少 已知 在某物质中铁氧元素质量比为七比三 求这种物质化学式 思路)
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn