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

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

外媒:开发者每周编码时间仅19.1小时 AppGratis CEO现身说法:应用被苹果儆杀始末 一个Web设计师眼里的云计算 戴尔高管:服务器业务领先惠普五年时间 Hoodie:基于JS与CouchDB的超快速Web开发框架 设计优秀API的五大规则 盘点英特尔IDF2013第一天:技术产品新趋势 英雄组队去打怪!Nimble Quest开发团队访谈 云通讯平台打造本土Twilio 被逼无奈?传微软或明年秋发布iOS和Android版Office 欧洲各国政府将向大众开放公共数据 访联想云存储罗予晋:优化MooseFS,共建生态系统 磊友创始人赵霏:关于HTML5与Flash争执之我见 国际混乱C语言代码大赛优胜作品详解之“A clock in one line” 揭秘程序员大脑编程的七大“误区” 从Java到ObjC语言的桥梁:谷歌J2ObjC 0.7版本亮相 数据库管理系统ParElastic:打破常规 扩展云端MySQL 谷歌苹果专利纠纷意在战略无意和解 美法官为其苦恼 Facebook收购神秘移动软件创业公司Osmeta 修改驱动,使用Erlang+VoltDB实现每秒87.7万事务 横评美国IaaS“8匹狼”:AWS、GCE、Azure、Rackspace、SoftLayer、Dell、HP、Joyent 独立游戏精神释放的舞台:IGF China 2013作品火热征集中 三款热门入门级在线编程教程对比 微软modern.IE:网站兼容性测试利器 Localytics:AngularJS代替Backbone 代码减少一半 史上增长最快的SaaS服务Optimizely:13亿访客,10万次测试 IDF上的云计算故事 移动周报:百万年薪、微信疑云,老罗小马本周很忙 一个创业失败者的自述:我是如何搞砸一款产品 收入百万美元:一个放弃上大学的程序员 Cocos2D配Box2D:逆天小白程序员作iOS游戏 有谁知道《斯托克代尔悖论》的内容? 使用VB6.0编程设置IIS5.0服务器 谁有InstallShield,包括汉化界面,中文语言包和注册码,200分回报 freedorm格式数据窗口打印问题,字太长如何自动换行, 一个头痛问题。 做过政府审计软件的请帮帮忙,怎么从十来套不同表结构的数据库导数据到一个固定表结构的数据库呢? 如何让菜单可用或不可用?急啊~~ Lotus中的js问题 哪有Oracle中文最新版下载呀, 请问各地delphi认证培训的费用是多少? re:下雨了 怎么样加提示框 借一个问题!XP里面网卡怎么工作不正常 请问有什么办法破VBA的密码 CEdit 背景色的问题 100 分 请问vb中浏览器控件是在哪个文件中,另外我想在vb程序中加入介绍性网页,应该怎么办! 了解jpeg的请进 高分急求数据库解决方案! 请问vb中浏览器控件是在哪个文件中,另外我想在vb程序中加入介绍性网页,应该怎么办! 存储类 在MainFrame里怎么得到一个指向MyDoc类的指针? 上海的弟兄前来领分!!!! 能ping通代理服务器,但不能上网(ftp等都不能用)。有那些原因! 谁有api做的串口通讯例子 很简单的Temporary used 问题,就是搞不清,请哪位详细点拨一下,铭谢 DataGrid中使用HyerLinkColumn,请怎样动态传递多个参数或改变DataNavigateUrlFormatString的值(在线等待答复) 在winsock1.1下怎样监听网络事件。(请给个API 的 sample ) 高分急求数据库解决方案! 高分求助软件稳定性问题! 高分请教exej4的问题!~ 我的代码可以被编译吗? 十万火急(在线等)关于发邮件问题!多谢了(最后50分了) 感谢各位的鼎力支持!!! 急:如何让sqlload使用命令行方式,把数据库中的指定几个表导出?(在线) 单元全局变量与工程全局变量有什么区别 问一个关于JSP和XML结合的问题. 请问怎样用ASP连接Mysql数据库,急! 有没有j2ee的qq群??? win2k里的smtp服务器,怎么是需要身份验证的? 怎样让智能ABC记住输入的词组呢? 你在delphi中,用到了多少面向对象的知识? Dragover事件什么情况下触发 北京还是深圳 如何实现两个类互相访问--急! <Code Complete>怎么翻译好呢? 急!!!!!在dcom中向数据源添加数据报错,为什么? 有哪些方法可以在ASP.NET设计文件.aspx(html格式WEB)与脚本文件.aspx.cs(.aspx.vb)中传递数,或者说传递变量的值!!! 我用CDONTS.NewMail发邮件,怎么判断邮件发送成功或者是不成功呢? asp.net的客户端键盘的事件处理的有关问题? 请问怎么在程序里随机产生CLSID代码?$$$$$$$$$$$$$$$$ 急! 如何定义一个全局的类的实例,请高手指招? 已知一次函数y1=x+m与反比例函数y2=m-1/x(m≠-1)的图像在第一象限内的交点为P(x0,3)(1)求 x0,m 的值;(2)在同一坐标系中画出两函数的图像,并结合图像求出满足y1大于y2的取值范围. 头脑风暴真的可以解决所有问题?如题 地球生存的多少年谢谢了,大神帮忙啊 The students go to the Greats Wall by car.【对划线部分提问】划线部分是by car 下面几个头脑风暴问题,1现在有什么功能手机是没有的但是人们又需要?2不给你钱你怎么过一天?3你穿越到了古代,地点是监狱,该监狱的犯人一刻钟以后要斩头,你会怎么办? 我们生活在地球的表面还是里面? 这两个微分方程的特解都一样吗?说明下理由 olt 的发光功率我这测得OLT光功率最高才3点多个DB,距离+5还有点差距,请问怎么提高,是更换光模块么?我最近看了点资料 说是PON模块分型号的 有10KM的 发光功率在2-3DB,20KM的 发光功率在5-7DB,我想 地球生存了多少年?000 地球以前的美 揶揄的汉语拼音是什么啊 COMME des garcons中文怎么发音? 地球的美在何处? 中兴 OLT c300 发光功率? 举例英,法,美三国资产阶级革命的领导人及革命中颁布的重要文件 已知一次函数y=x+m与反比例函数y=m+1/x(m≠-1)的图象在第一象限内的交点为P(Xo,3)(1)求p点的作标 谁了解comme des garcons 这个牌子?如题~请达人介绍下此品牌,去香港买是否便宜? 反渗透直饮水机是什么样子的机子啊? 地球的美与破坏 comme des garcons 这个牌子怎么读?好像是法文,还有marc jacbos这个品牌~ 奇函数y=f(x)的图像在x=0处有定义,则f(0)=0 地球美不美 哪种天气细菌不容易繁殖 处于分裂状态的细胞染色体有哪些变化? 永恒是什么意思?时间就定格在这一秒、“假如时间是永恒的,那么这一秒是最终的结束”“可是,下一秒呢?”打了双引号的一句话是全连起来的、是什么意思?求解 净水机处理过的污水能够饮用吗?有些好奇 分裂期时细胞内的染色体如何改变具体到染色质如何形成染色体 永恒的意义其实是一个宗教问题,我只是在网上粗略看了一些宗教的介绍,基本都有一个核心内容,就是 信者得救 ,好像都提倡信者死后可永恒,但不信者,有得下地狱,有的要轮回之类,可是在另外 地球为什麽是圆的 细胞分裂时,染色体的变化最明显,染色体先()再分裂 永远和永恒的意思是一样的么? 为什麽地球是圆的? 《山居夏日》高骈(唐) 头脑风暴,少年智力开发报里的一道题有AB两辆汽车同时从甲乙两站相对而行,两车第一次在距离甲站40千米处相遇,相遇后两车保持原速继续行进,各自到达乙甲两站后沿着原路返回,第二次在距 为什麽地球是个圆的 高骈号什么 来几个头脑风暴的问题 月亮是地球的什麽? 改错:1、We have a little time.We are late for school.2、how are your borther?3Are you good to kids 两情相悦才是长久时是什么意思?感情是可以培养的? 第一财经的头脑风暴,为什么换主持人了?袁岳不是北京人么? 若f(x)是奇函数,f(x)在x=0处有定义,则f(0)=? comme des fuckdown 简述什么是头脑风暴,头脑风暴如何训练?我从《教育心里学》这本书中看到的,但他没有对这一词做任何解释,请您帮助我好吗? 怎样写山水田园诗?是怎样写,不是写出来 龙眼干可以晒好吗,有什么步骤呢 于某留做万年镜,为官当学万青山是什么意思 有所为,有人说该词语除了正确的意思之外还有一种容易让人误解的意思,在下不知道是什么. 请帮我回答谁sb 头脑风暴数学题在400米的跑道上举行400米跑比赛,跑道每道宽1.25米,相邻的两圈外一圈起跑线要比内一圈起跑线前移多少米? We are_____international school for children of 5-12.(a) 法、英等国袭击利比亚卡扎菲军队,如果俄罗斯帮助卡扎菲反攻,会引发第三次世界大战吗? 食盐的酸碱度? ‘有所为,有所不为. 新鲜龙眼怎么做龙眼干 Homme Comme des Dansens*是什么牌子? 地球还要生存多久?拜托各位大神 龙眼是怎样制造成龙眼干 结合具体问题说明头脑风暴 在资源被过度消耗的情况下,地球上的城市生存的方向有哪些? 小狗被饿三周吃伞充饥 其主人不愿救治男子扮高富帅专门诈骗按摩女 谎称投资巴西里约热内卢社会游民多 5000余媒体曝美全球监听地图 澳大利亚是美监近3成日本大学毕业生3年内离职 疑被美国艺术家创造“糖果肖像”庆祝万圣节法国一名抢劫犯曾为iPod及8欧元抢韩媒:中国学生“弃日择韩” 赴韩留学俄罗斯一科技园项目涉嫌违法 或致数百新10英镑钞票印简 奥斯丁头像 被批伊朗或取消向巴基斯坦供应天然气巨额合乌克兰加入欧盟协定签署期或推迟到20女子坚持每天喝3升水 4周后外貌似年西班牙首相关注美监听行动 称将听取情法国将实施冬季禁逐令 拖欠房租者也可英媒体窃听案开审 检方称三记者认罪背外国驻韩外交官5年犯法48起 外交豁联合国计划成立预警机构 防范小行星撞普京力压奥巴马获评福布斯年度最具影响美国加州一著名辣椒酱厂被指味道难闻遭美国最新汇率报告未将中国列为“汇率操新学期开学没几天 另类检讨书频现靓女难过关只因像冰冰浩气长存勺子和筷子秋天的童话朱小丹会见香港审计署署长孙德基业绩急刹车茅台很受伤广告查询热线穆沙拉夫再添新罪名大学生赶作业也疯狂暑期实践成空谈?茅台连夜公布增持方案不靠谱“小爸爸”略占上风疯狂的“全运雇佣军”广州本土餐饮业逆市增长蒋洁敏领导职务被免买家看完房另寻中介买原中介起诉索赔被九江双蒸助力经销商转型未来战略发力腰粤将争金 巾帼当“先锋”“挡车哥”现身粤卫生厅廖新波力挺网络全科医生选择国际课程班切忌一味跟风
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘