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

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

创业与投资专题论坛:硬件的现在!创业的未来? 造就Office新用法:微软推WP应用 可遥控Office文件 成为一名PHP专家其实并不难 前富士康CEO程天纵:创新来自长尾,创业源于创客! 最危险的开源项目——比特币 11月20日:微软正式发布Windows 1.0 回顾历代Windows版本界面 微软CEO鲍尔默卸职前在股东会上的最后演讲 微软改革员工排名制度或将开启新篇章 【快讯】SAP联合中国电信,又一外商公有云曲线入华 微软CloudOS云操作系统构建企业级三云合一 IE11支持JavaScript新型API,Web应用国际化更便捷 谷歌推订阅应用Play Newsstand:杂志+RSS阅读器 【信息图】到2020年开发者、设计师、测试员的数量将达到史无前例的高度 推广与盈利专题论坛:中国影响世界,世界定义中国 SlideIdea CEO李建忠:移动产品的技术面思考 BDTC→→百度林仕鼎、腾讯蒋杰、阿里唐洪论道大数据平台与技术 谷歌首席互联网布道师:隐私保护并不是一种正常行为 微软公开“挑衅”谷歌,出售反谷歌标语T恤 四大UX设计原则,打造网站最佳浏览体验 【BDTC讲师】黄晓庆:从小灵通到Hadoop与实时大数据分析 【BDTC讲师】杨强:从禽流感预测到图片语义解释 2013中国大数据技术大会讲师议题正式发布 “2013中国大数据周”即将开幕 正式发布中国大数据现状白皮书 搜狐畅游发布3D游戏引擎Genesis-3D 基于MIT协议开源 传闻微软将收购AOL旗下的Winamp和Shoutcast 【BDTC讲师】大数据时代“掘金机”:百度、360、一淘搜索技术分享 谷歌董事长:审查,将会在十年内消失 50万奖金+天使投资:创维天赐家庭互联网创新大赛开幕 专利案苹果获胜:获赔2.9亿美元 三星不服将继续上诉 Google正打造Spark:一个基于Chrome App的集成开发环境 研发周报:成为一名PHP专家其实并不难 关于在Oracle数据库服务器如何提供下载一个excel文件型的大对象到本地?十万火急!三根鸡毛! 怎样得到数据库里某字段里没出现过、而且还是最小的数字呢? 请问大家这种数据表怎样设计最好??? 关于ID3V2?请大家帮帮忙 <<VC技术内幕(第四版)>>中应用程序框架示例的程序要怎样才能运行? Win2K的远程访问出现身份验证问题 关于TMediaPlayer缩放,请您赐教 如何显示一个库中所有的表以及显示一个表的结构 能不能使自己画的一个图形,响应鼠标事件? 如何取得数据库某字段中从未出现过的、而且还是最小的数字呢? 关于终端服务器的打印问题!!!!在线等,解决立即给分 怎样才可以在WIN2000下隐藏你的程序 急,请问把一个控件上的内容拖到LISTVIEW1上时,在LISTVIEW1上的一个ITEM上释放,此时如何获得ITEM的caption??? .pdg 类型文件怎么打开? 大家不妨说说二层应用程序转向三层应用的一些经验以及注意事项 为何看不到网络邻居上其它计算机的共享文件夹? 请问大家这种数据表怎样设计最好??? 用listbox绑定数据库的某个字段后,如何通过点击取得相应的值 dbgrid中的mousedown事件怎么触发不了 系统日志的错误信息,谁给分析一下?分不够还可以加 tell me why??有关jdbc for sqlserver VC录音问题 内存分配问题! 我安装上.net后,运行一个asp.net程序,可是出现了下载index.aspx文件的对话框? 菜单总被下拉列表框盖住的问题? 有谁知道Base64编码的规定?十万火急!!! 如何用Filter来过滤时间呢!!! 菜单总被下拉列表框盖住的问题? 一个带变量的JS语句 如何使用jBrokerWeb来做Java Web Service win95下的DLL注册的问题。。。?????? 急!急!关于<form runat=server>的@@@@@ 请进~~~~~~~~~~~~~~(急。。。答出者高分相送) 一个AnsiString 和内存的问题。 极为特殊linux的组网问题!!! 大家都来看看这是为什么? 菜单总被下拉列表框盖住的问题? 请教:如何使用windows定义的打印机打印文件 我安装上.net后,运行一个asp.net程序,可是出现了下载index.aspx文件的对话框? 怎样读文件和写文件?3Q!! 有湖北宜昌去TOP面试了的吗? 火速求助 关于终端服务器的打印问题!!!!在线等,解决立即给分 jbuilder7+WebLogic7 的配置,各位帮忙看一下,急,在线等。 ATL组件注册问题,请指教,不胜感激 新手愚问:为什么我Tquery检索数据库中的数据时,它弹出“××is not a valid component name ”.其中××是所检索出来的值。 弹出确定后 我怎么通过系统存储过程改变用户权限? ATL组件注册问题,请指教,不胜感激 请问那有《UltraDev 4 JSP/XML 高级实例教程》下载? Delphi的Form或Frame问题 如何判断一个数组是否定义。 一种利用声音传播规律制成的探测装置安放在船上的控制室内,利用它就可以及时发现冰山或暗礁的存在的装置电影《泰坦尼克号》,描述的是1912年一艘名叫“泰坦尼克号”的大海轮跟冰山相 一篇很长的英语作文 不限题材 一件小事初中作文,要求开头结尾要美可以提高悬赏 利用超声波探测海中的冰山和暗礁的装置的名称,和它的原理 求英语作文一篇,题材不限,60词左右 描写诸葛亮的成语谁知道啊, 科学家利用超声波的传播规律发明了一种探测装置.把这种装置安装在船上,船员能及时发现暗礁.超声波在海水中的传播速度是1500米/秒,某船向海底发出超声波,经1秒后接收到返回的超声波,求 求那件小事激励着我作文题材要新颖, 作文一件小事的开头,今晚就要 2010语文期末试卷高一阅读 草木之情 韩少功 力求一篇英语作文80字的,题材不限 谁能帮我写一篇关于秋的文章,急用!600字左右就行了, 《从军行》表达了作者怎样的思想感情? 那件小事激励着我作文.那件小事激励着我.作文 我要一篇写秋的文章(急)600-700字,半小时之内追加50分~ 李白的《从军行》表达了怎样的思想感情?就一句话 不要发一大段 赏析什么的网上都有 只发思想感情 求英语作文一篇(题材不限,字数不限), 求文档:赠刘景文古诗每一句话的意思 从军行4表达作者怎样的思想感情 隆中对中诸葛亮为刘备提出了怎样的战略方针 古诗 赠刘景文、山行的意思 王昌龄的《从军行》(其四)表达了她怎样的思想感情? 联合国的意思是什么只要意思 那件小事激励着我 作文 分析《从军行》中作者所表达的思想感情 我要在山的那一边课文的读后感 作文:那件小事激励这我!记叙文,请不要去复制粘贴!不用写太好 500字左右.要新的没怎么分了 江苏版 求一篇关于 秋天 的作文! 那件小事激励了我 作文600字左右,不要太好的 写一篇关于"如何理解马克思主义的中国化以及中国化的马克思主义"的见解文章,字数400字左右谢谢了啦,急啊 在山的那一边本文讲了什么?表达了作者什么样的感情? 托福和雅思的作文区别在哪? 《真诚的谢谢你》作文 200字左右 作文:那件小事激励了我写的是散文,写了三件事,三件事都写了激励,可以吗,非要像记叙文那样写一件小事 里为什么说是“怀着一种隐秘的想望” “满纸荒唐言”这句话的的诗名是谁 谁给我写个作文叫《那件小事激励着我》, 在山的那边 作者为什么对山的那边怀着一种隐秘的想望 用历尽磨难的诗句造一段话 从百草园到三味书屋中先生的特点快 在山的那边 隐秘的向往指的是什么 为什么说是隐秘的 隆中对中诸葛亮给刘备提出了怎样的战略方针三个空 用自己的语言说一说诗的意思什么时候我还托着腮帮仰望父亲脸上岁月碾过的道道车辙 冥想着 时光的马车呼啸而至 满载着我一个个天真的梦想 什么时候我还趴在母亲的膝旁耳边的故事像山 作文:九九重阳节,浓浓敬老情 我为---------(爷爷,奶奶)做点事是爷爷,奶奶等 更多老年人! 从军行 其二王昌龄琵琶起舞换新声,总是关山旧别情.撩乱边愁听不尽,高高秋月照长城.一、二两句中的“新”和“旧”是否矛盾?请简要回答高高秋月照长城.这句景物描写有何作用? 仿写句子:初一下册语文书第一课得第二段,不少于100字,要有不必说……也不必说……单是……这几个关键词 诗中"雨"说了什么话?这些话集中表达了什么意思?注意有俩个问 从军行翻译 从军行其4 王昌龄 主题 古诗词比赛的题目我们班要弄古诗词知识竞赛,请大家帮我出十个以上的题目,感激不尽~ 从军行有几首? 从军行主要内容用几句话概括内容 用简洁易懂的语言说出下列古诗的意思.七步诗 鸟鸣涧 芙蓉楼送辛渐 江畔独步寻花 初一下册语文第一课,你是如何看待三味书屋的? 什么叫做联合国?是一个国家 还是地区?别怪我没水平 没文化 这就是不读书的下场我承认我后悔过 《宿建德江》 用简要语言说说全诗所表达的意思宿建德江 移舟泊烟渚,日暮客愁新.野旷天低树,江清月近人. 从军行 其]四 联合国的会微有什么意思 一件小事作文的开头结尾怎么写?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘