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

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

ADO三大对象的属性、方法、事件及常数(二)-VB资料 ADO三大对象的属性、方法、事件及常数(三)-VB资料 ADO三大对象的属性、方法、事件及常数(一)-VB资料 Data 控件使用有密码的 Access 数据库 -VB资料 Excel、Access、VB的结合应用 Microsoft SQL Server 7.0安装问题(二)-VB资料 主题: MDB文件的导出 使用 DAO-VB资料 Microsoft Access秘密、技巧和陷阱-VB资料 SQL的基本操作(1.数据类型) -VB资料 SQL的基本操作(2.数据库的相关操作)-VB资料 SQL的基本操作(3.表的相关操作) -VB资料 SQL的基本操作(4.数据的检索)-VB资料 SQL在VB中的使用及访问远程数据库 Text 转换为 Access MDB -VB资料 VB5.0数据库基础 非编程方式访问数据库-VB资料 VB用编程方式访问数据库 VB 5.0数据库设计技术讲座(4) VB5.0数据库编程经验小集 VB5在处理数据库时的几个“BUG” VB6.0中的几个新增数据库工具 VB处理数据库时求数据表记录总数的最佳方法 VB访问数据库的方案比较 VB数据库编程经验两则 VB数据库编空字段的处理 VB数据库多字段记录的录入 VB数据库记录查询四法 vb应用程序访问sql server方法探讨 VB中超长OLE数据库字段的操纵方法 VB中将数据转换为数据库文件 VB中远程数据库的访问 一个应该很简单的问题!散分了! sybase12安装后sybase server启动不起来,服务启动没有问题 请问oracle JDBC 中classes12.jar、classes12_g.jar、classes12dms.jar这三者有什么区别? ( 召唤HTML编辑控件(ActiveX) 为什么没有遍历所有文件和目录?哪位可以帮忙调试一下。 请问如何再java里面执行oracle数据库指令如;exp,imp等等 高分求助!关于触发器。来者有分!在线等待! 工作累了﹖沒有精神﹖來我這里喝一杯吧﹐ Ghost2001如何备份win2000系统 工作累了﹖沒有精神﹖來我這里喝一杯吧 关于图像缩放求援? 各位老大!有没有用C#写的浏览器的程序? 请问如何再java里面执行oracle数据库指令如;exp,imp等等 C#调用C++写的动态链接库中函数的问题! dns的转发项是灰色,说是根服务器,怎么办? 求助!如何实现鼠标移动Image控件 无法终止程序, 条件判断出问题 ,奇怪 为什么对象释放出错? 在FormDestroy中释放对象时出现 'Invalid pointer operation'的错误。 MDI子窗体在MDI父窗体内不能显示的问题,希望高手指点!!! 小问题,高手行!!! JSP 关于中文乱码 哪位高手请提供下面题目的源代码, 急!!! 【求助】DELPHI中ADO连接DBF库超过256K就显示不出数据? 菜鸟问题 asp调用WORD的问题 安装oracle8.0.5时的小问题 Win2k & WinXP 桌面全空 弱问题,关于SIZEOF 服务器生成的图片发到客户端打印效果不理想,如何解决? IIS的站点一启动就会占用所有IP。如何解决? 如何连接两个数据源 cisco3550交换机如何配置? 快狗里的 conn.asp ,,有一个问题,谢谢大家~!!! 如何用javascript实现字号缩放? 紧急 在线等待 有趣的问题 小弟刚涉及socket不久,望大哥们指点。 主板又无法启动了◎! 关于dataset数据集的问题,请教???? 急呀,快来帮帮我呀! 高分求救网络传数据问题 分不够可以在加 在线等待 急 关于非MDI的非主窗体的最小化问题 工作累了﹖沒有心情﹖來我里喝一杯吧 大家一起来研究下这个问题~~ 如何查询两个时间之间的记录? ASP中不能显示word文档(存于BLOB字段),救命啊! 如何设置窗体为必须响应的模式 金牌杀手的传说 如何确定linux内核是否支持frame buffer? 目前的scjp考试中有没有用socket进行网络编程的内容啊? 怎样改变ListView的每一行的高度? 关于VC+mapx的学习 His bag is made of (leather).对括号内提问____ his bag ____ ____ ()1.The film is very interesting and exciting.I enjoy ____ it.A.seeing B.see C.to see D.saw 谁能帮我总结下英语词组中...to do sth、...do sth和...doing sth的规律吗? 请问是the bag is made by leather还是made of leather? 你刚看了一部电影,觉得很乏味,你可以这样表达:()the movie is interesting Mary is a very( )girl.She often asks questioMary is a very( )girl.She often asks questions选哪个要理由 创建文明城市中学生怎样做英语作文 _____interesting and exciting the movie is A what B how an C what an D how Mary was a very careful girl,you could find_______ fault in whatever she didA) no (B) the (C) a (D) any 有关会计的英语翻译,就一句话,谢谢各位大侠We are not convinced that diverting already stretched resources at the Board to complete issuance of the proposal at this time, and asking preparers to implement it, is merited. 有什么英语短语是表示前句的否定的?譬如现在有一句话:We must make clear that in which situation this will happen and (in which situation this will not happen). 有没有一些表示前句的否定的短语可以代替括号里 仿照首句,在横线填写恰当的词语.太阳不语,自是一种光辉.蓝天不语,自是一种_______;高山不语,自是一种_______;松柏不语,自是一种_______;鲜花不语,自是一种_______; 改句子(英语题目)1:We have a class meeting once a week .对划线句提问--once week2:I get up early in the morning in the past .改为同义句3:He has been there for two weeks .改为同义句4:My classmated have already gone to the mu It made me kind of angry to wait for him改为同义句 看起来是否定其实是肯定的英语短语看好了,是表面上看是否定,其实是肯定的,越多越好,但多写点常用的, He spent 1000 dollars on the house at the end of the street.(同义句)The house at the end of the street _____ ____ 1000 dollars. this thing made me angry"angry"在句中充当的成分 给这些单词写第三人称,过去式,现在分词help likemakeenjouescape对,是enjoy 打错了 谁能翻译一下 Darling,I will be sincere to love you If to love and to be loved is fair,then I say I love you,you will also say you love me! 查英语语法:NEITHER OF之后谓语动词用单数还是复数? 预定旅馆的英语想把这几句话翻成英语我在通过venere您那里预定了一个三人间,2月25号入住,26号离开.另外我需要带什么凭证吗? 急,If you also love me,you will not be so indifferent to me.是什么意思.? I'm waiting for you . love you also will be I to believe that you will also understand me to your love . I'm waiting for you 预定饭店 英文 谁帮我用英文写一份预定饭店的文章 不限制多少单词只要把预定饭店的过程写清楚就好 我明天用急 since前用什么时态,后用什么时态 I\'m waiting for 我已经预定好酒店的英文怎么说 如何用英语打电话预约火车票和旅馆 不定式的用法. since前后该用什么时态啊? during over since for的用法和时态 不定式的用法 预订和宾馆的英语 since表示自从后面除了接一般过去时还可以接什么时态 英语中第三人称复数后边是不是一定要用复数 Is there any problems和are there any problems--那句话是正确的?我当然知道是Is there any problems正确,但是很多年过去了,好像英语水平到了瓶颈期!今天早上和外国同事交流的时候,说出这个句子,感觉好别 since和for的区别时态时态! None Neither作主语,谓语动词的单复数怎么用? is there any 或 are there any感觉差不多?口语中好像没听见过are there any 全部都是is there any 用的,就是想搞清楚一下,比方说 is there any coach in this gym?or are the any coaches in this gym?如果想提问是否有 coach 有关 赞成反对 的英语短语 英语:动词后 只加 doing 不加 to do的词有哪些? neither of 后面加单数还是复数 同意的英语是什么(词组) 现在完成时 中常用since 做时间状语吗?现在完成时 中常用since + 时间点,或者是 for + 时间段来 做时间状语吗? is there any milk 还是are there any milk它们有什么区别呢? 同意···建议 翻译成英语 短语 英语中 什么词加do 什么词加doing 什么词加to do越多越好 根据上下文用Is there a ...或Are there any...造句(例子)A:I need a haircut."Is there a barber shop"near here?B:Yes,there's one Elm Street.(1)A:I want to send an e-mail.__________________near here?B:No,there aren't,but there are some near t 英语短语同意句转换Can you tell me how to get to the hospital 同意句Can you tell me ( ) ( ) ( ) the hospital.=亲们= 帮个忙呗.谢谢了、、、 初二英语35,36,37,38题要解析 Either of **和 neither of **是单数还是复数? 短语“反对做某事”的英文是什么 问,either of 谓语动词用单数还是复数? This purse is made of a leather 语病在哪 the film is interesting as well as exciting(保持原句意思) the film is __ interesting _ exciting neither she nor I...后面的谓语动词是单数还是复数
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘