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

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

让你望而却步的密码管理服务已获得100万美元的种子基金 SDCC 2013开始公开征集讲师和演讲主题 不用图片和JS,照样创建绚丽的动态CSS3菜单 是福还是祸?开发者饱经风雨的内心独白 设计师/开发者看过来,七月35款新工具速递! Hadoop进军机器学习:Cloudera收购Myrrix共创“Big Learning” 张民杰:三人团队的OpenStack机会 White Elephant:开发者必备的Hadoop利器 不及分析师预期:微软第四季财报揭晓 净利49.7亿美元 Facebook收购英国手机代码验证公司Monoidics Apache基金会废弃其C++标准库 鲍尔默宣称微软有一百万台服务器,这个数字真的靠谱吗? 全球6000开发者:iOS、Android、WP最痴情谁? 提升网站知名度的十大方法 IBM移动平台首席架构师Greg Truty:MobileFirst从底层架构开始 Hallo.js:一款所见即所得的Web编辑器 数据分析≠Hadoop+NoSQL,不妨先看完善现有技术的10条捷径 移动周报:百度收购91,19亿美金背后的博弈 植物大战僵尸2:“免费+内付费”模式引发争论 [CTO俱乐部第103期] 高德和四维图新技术高管谈地图导航的发展与挑战 Java 7爆最新漏洞,10年前的攻击手法仍有效 Twitter联合创始人Biz Stone谈Facebook用户体验 提倡零广告 英雄会:企业的人才漏斗 开发者的武林大会 一次错误估算带来的启示 苹果开发者中心被黑:开发者信息或被窃取 SIM卡加密存漏洞 将影响数亿计的手机用户 搜狗茹立云:探索引擎产品落地 浏览器+搜索模式会成主流吗? 大势所趋,IBM Acme Air至少使用Netflix的5个开源工具 【观察】跨越“朦胧期”的云计算:产业、核心技术、生态圈以及突破点 Rovio Account:平台化之路修成正果 甲骨文总裁马克•赫德采访实录:用软硬件集成一体机打垮对手 烦啊~~~~ 谢谢!如何让对话框的大小不受屏幕分辩率的影响??? 请问怎样避免多用户同时访问数据库中的表? 简单问题:怎样用url打开一个文档?多谢 怎么控制小数的位数? 这个QQ炸弹好厉害,是什么原理呢? 我的问题怎么老是出现在这个地方。。。。 一个对话框程序调用dll中函数的问题! 请教有关类的扩展 请问WIN2000专业版IIS为什么连接限制是10 急,为什么我的数据库会出现这样的错误? 寻求一个好的全屏翻译软件(在线等候,在线给分) 寻找《编译原理与时间》电子文档下载url 升级了,散分小庆.认识的朋友进来捧个场,不认识的也进来热闹热闹!忠心感谢:-) 奇怪的问题 如何解决在一个表单中多个提交按钮的问题? 请问怎样关闭135端口 Photoshop7.0的一个简单问题,大师们帮帮忙! 关于动态查询的问题? 请问如何验证代理服务器? 超过半个小时不作任何操作就把这个连接KILL掉,改如何做呢? 如何才能做出只存在于托盘栏的程序! 搜集VB绘图源代码,多多益善 北京市里有没有支持asp.net的服务器空间提供吗? GGJJDDMM 帮帮我啊~~~~ 新手的问题--如何作到点击页面中的提交按钮,只刷该页面的DataGrid部分,而其它部分控件值不变?(在线给分) 大家帮忙,要取得客户端的信任,用服务器控件对客户端进行读写文件的资料? 谁说我们要和兄弟会和解了? 一直都是你们在攻击我们,靠还和解?道歉差不多。 版本的差异造成的问题,ADO连接SQL Server。求教!!! 海宜派(NSU Pie) 为什么insert into语句不能完成添加? 在线等一个简单的问题! 能用DOS盘启动然后用GHOST 备分LINUX分区吗?我想备份我的LINUX系统。 SQL中能否用CopyMemory这样的函数??? 我的猫竟拨不上号 一个菜问题 type和typedef有什么区别? 100分问题,在线等,本地XSL,XML,使用VB脚本,使用MSChart生成图形,刷新几次后IE崩溃,高分求解 socket.setSoTimeout() BCB使用ClientDataSet调用Sybase存储过程的问题 趟过“地雷阵”的铁面总理 (转载) 我的电脑为何会自动开机? emf是什么打印格式? 小偷 请问我以后删贴、结贴是不是要先向EA、ginger、大师申请? 如何实现这种查询?急!!!! 高分求救:Dos下控制(HP等)打印机打印汉字的编程,请各位帮帮我好吗? 能否将下面的代码简化呢?? 请大家给介绍几本C++学习的入门书籍,好吗? type和typedef有什么区别? 本人姓刘,现在正在给自己的孩子起名,希望大家多多帮忙! 过滤、灼烧都需使用的仪器是 中风的病人出现一侧肢体不能活动的症状,因为哪个结构受伤 A:肌肉 B:血管 C:大脑 D:脊髓单项选择 Don't worry.I think you can finish it in time _____(without difficulty) 人和动物体内有许多器官,请说说你所知道器官的名称 急等 肌糖元不能象肝糖元那样分解供能,那要它有什么用呢? 飞机在做俯冲拉起运动时,可以看做是圆周运动,若飞机在最低点附近做半径R为180m的圆周运动飞行员的质量M是70kg,飞机经过最低点P点时的速度v为360km/h.计算此时飞行员对座位的压力为多少? 人体内的肠子有多长呢? 动物体内主要的能力储备形式是 马拉硫磷溶于四氯化碳中,为什么在水解后弃去四氯化碳层,而在加硫酸铜后又取用四氯化碳层进行比色?会的答,不懂的别来要分. 人体内的物质代谢和能量代谢主要发生在(消化道内,细胞内,血管内,内环境) John can do it ___,even not better than you.A as well as B.As wellC.so well 四氯化碳与亚硫酸钠反映?产生什么? 一千元的红木柴火一位专做老红木家具生意的古董商,无意中在僻静的穷山村里,发现了一个非常珍贵的老式红木旧柜子,惊喜过后,古董商开始动了心思.他先是与柜子的主人闲扯聊天,好不容易 John can do it _____,even not better than you.为什么答案是as well as而不是as well 蝗虫适于飞翔的是A、前翅 B、后翅 C、后足 D、前、后翅 公路飞机跑道是什么?谁能给个较权威的定义? 一个完整的反射活动仅靠一个神经元能完成吗?1.膝跳反射.靠几个?2.缩手反射.靠几个? 硫酸溶液里加四氯化碳 萃取为什么向硫酸溶液里加四氯化碳后震荡不属于萃取? 飞机场跑道和航道有什么区别? 神经元的轴突可连接到下一个神经元的树突或细胞体形成突触,那么请问下突触在细胞体表面是可以随意形成的吗 基础体温 低温到高温有两天的中间地带我的低温温度是36.2 ,16号,17号排卵试纸测到强阳2天,18号变成弱阳,18号温度是36.5,19号温度是36.6 ,20号温度是36.8 .那到底是18号排的卵还是20号排的卵啊?我 为什么肾会出现痛疼呢? 急下列叙述正确的是——A ①是效应器,能接受⑤传来的信号做出反应 B ④是感受器,能接受外界刺激产生神经冲动 C 神经冲动传导顺序是④③⑤②① D ③能将来自⑤的神经冲动传至④,引起 为什么我基础体温低温区出现高温?就两天然后又迅速下降?出现7天的低温后才开始进入高温区? 比较硬的树并且能用来做柴火的 胰岛素、胰高血糖素对肝糖元、肌糖元的作用分别是什么?都有作用吗? 怎样才能排铅 父母家里不烧煤,烧柴火和木头,想知道烧这些会产生一氧化碳吗?会也像烧煤一样煤烟中毒吗? John can do it ----,even not better than you.A.as well as B.as well C.so well as D.so welleven能当即使来讲吗? 以a J t v u o Q 等字母开头的有关电脑的单词 1.呼出气与肺泡气的不同说明了什么?呼出气 肺泡气 氧气 16% 14.2% 二氧化碳 4% 5.3% 氮气 74% 74.5% 水蒸气 6% 6% 2.得了急性支气管炎的患者若不及时治疗,为什么容易引发肺炎? 肝糖元和肌糖元的异同RT,老师讲过,但我有点忘了.我记得其中一个是补充血糖的,还有另外一个不是,望补充! 肝糖元可以重新形成C6H12O6,肌糖元则通过无氧呼吸形成乳糖,造成这种差异的根本原因是 在生火时,小明用木棍小心将柴火架空.这样做的目的是什么 食肉动物的肠子的长度与食草动物的肠子的长度有明显区别吗? Q开头的单词第二个字母是不是都是U啊 为什么“CO2分压由高到低的顺序通常是组织细胞.静脉血,肺泡气,呼出气” 希望能解释的清楚一些……谢谢 为什么说食草动物的微生物消化具有重要生理意义? 怀孕了该补充哪些营养素? 人体所需能量的主要来源是()这些能量最初均来自于() 食草动物的体内寄生虫哪儿来的 营养素在白天补充好,还是晚上补充好 人体的体外环境除了消化道和呼吸道之外,还有什么是属于体外环境的(高中生物) 电流表在生物体内电流方向如何偏转 枕木是什么材料作成的? 为什么肺泡气比呼出气的氧分压小 而CO2分压反而大呼出去的气来自肺泡气吧?肺泡气的氧分压比呼出气的小 多排出去的氧气哪来的呢?为什么又留下一些二氧化碳在肺泡里呢 注意 不是问跟 为什么波长越短,它的能量就越大呢?什么是质量?物质和物体有什么区别吗?如题作解. 枕木与枕木的距离有什么说法?枕木与枕木的距离有什么说法?为什么都是440 或 540 肝糖元和肌糖元都能分解吗? 一道地理题:延安的地域形态是条带状还是放射状? 不允许作为营养素补充剂的矿物质是? 灼烧仪器要全的! 地理中城市的地域形态如何区分团块状 组团状 条带状 放射状 吃水果蔬菜可以补充哪些营养素求解 灼烧用的仪器有哪些... 为什么我低温期的基础体温也比较高?(36.5) 为什么肌糖元不可以重新分解成葡萄糖?MS肝糖元都可以分解成葡萄糖的说……为甚麽肌糖元就不行? 灼烧要用的实验器械? 生物高手膝跳反射需要几个神经元? l don't think he can finish it on time.(改为反意疑问句) 韩国军方网络司令部涉嫌干预大选 防长调查显示日本半数国民反对《特定秘密保澳洲85岁志愿者因慈善工作获得“默多埃及再发军警遇袭事件 三名警察执勤时日本赛马失控与轿车相撞当场丧生 司机希腊经济危机使国内中产阶级损失惨重(美国多名政客支持监听行为 称总统不必以色列耄耋作家展望巴以和平并存 遭官澳媒称澳政府拟摒弃前任政府对亚洲战略报告称全美国一年有500名少年儿童死阿根廷执政党保住国会最大党地位 但选加拿大婚外情网站欲进驻新加坡 遭民众印度拟射火星探测器 欲争亚洲第一被批美监管机构调查房地产信托投资基金日本一杂志启用胖模特 专为胖女孩设计德国政界对美监听默克尔愤怒 欲传唤斯美媒:监听默克尔行动在奥巴马得知后便美国多名政客支持监听行为 称总统不必习近平会见南非副总统莫特兰蒂法国极右政党领导人演讲 遭乌克兰女权浙江临海户外休闲用品展开幕 欲探索跨淮安将进行 新行政区划调整奥登13分已是近5场最高 状元来CB圣诞约会穿什么最闪亮?都帮你想好了!云南省加强民主协商建设 推进民主法制新华社发猛文:别让伪金融创新掏空百姓银行加班处理员工离职潮,世道真的变了支付平台加速跑马圈地 支付通携智城控重磅!王石认输了?《恶灵之门》:生命中不能承受之重槽点丨大风过后霾自散,明天不行等后天读点丨这才是骨子里的高贵【圣诞彩蛋】卡西欧自拍神器免费送!观点丨冯仑:泼妇原理博湃养车,又一资本游戏的出局者!实务丨如何使用信托架构进行海外投融资青海西宁奏响“花儿的春天”新年音乐会中国将强势登陆新德里国际图书展综述:埃及庆祝“日光节” 力图振兴旅最高法院院长周强:加强对金融债权司法观察丨耗资超千亿,险资掀起一轮“举牌贵州雷山县“十二五”旅游综合收入突破
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘