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

我讨厌debug，相信也没多少开发者会喜欢。但是当代码出错之后肯定是要找出问题出在哪里的。不过网页开发的时候遇到 BUG 是一件再正常不过的事情了，我们不能保证自己的代码万无一失，于是使用浏览器的开发人员工具调试是我们解决问题最快捷的方法了。微软在 Windows 8.1 预览版中带来了全新的 IE11 浏览器，不光加入了诸如 WebGL 支持等功能，还将F12开发人员工具进行了重新设计，这是IE有史以来开发人员工具最大的的更新。 新的开发人员工具更加实用和高效了，接下一周我们将陆续跟大家分享F12开发人员工具功能的使用技巧。 今天将为大家介绍其中的一项新增功能：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的时间，如果想要知道网页加载占用内存的量我们就需要使用内存分析工具来查看了。

标签:开发人员工具IE WebIE11UI响应工具