我讨厌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的时间,如果想要知道网页加载占用内存的量我们就需要使用内存分析工具来查看了。
相关推荐
国内镜像一键装AI工具:Diffusion WebUI、LamaCleaner、ChatGLM2等国内镜像一键装AI工具:Diffusion WebUI、LamaCleaner、ChatGLM2等国内镜像一键装AI工具:Diffusion WebUI、LamaCleaner、ChatGLM2等国内镜像一键装...
蓝色统一开发平台后台管理UI响应式模板基于Bootstrap3.0.1制作,自适应分辨率,兼容PC端和移动端,全套模板,包括注册、登录、UI库首页、排版、UI元素、按钮、图标、树状结构、可拖拽列表、三级菜单、表格、表单、...
资源名称:精彩绝伦的Android UI设计:响应式用户界面与设计模式资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
深入讲解iOS开发入门以及应用,重点讲解了UI设计方面的相关基础及实例;包含多套原版资料以及详实的案例分享,可查看同名资料,绝对超值。
RatingBar主要用在电子相册、网上书店和对文章进行评分的功能。... 对于博文地址:【Android 开发】:UI控件之 RatingBar 评分控件的使用 http://blog.csdn.net/xukunhui2/article/details/9034413
Adplus UI是对Adplus.exe的封装,后者是微软提供的调试工具,是个利器,但虽为利器却少有人用,原因在于它仅支持命令行的方式运作,而命令又稍嫌复杂。Adplus UI的功德就在于把不友好的命令行变成用户友好的界面形式...
swift砖块系列:UI基础框架,有各种工具方便快速搭建APP.zip
android ui设计:响应式用户界面与设计模式
全新版本全新工具-进击Apple IOS 13的SwiftUI开发实战,使用最新的Mac OS X集成开发工具Xcode11进行SwiftUI构建用户界面,让同学们最近的距离接触IOS与用户界面开发。课程分为了SwiftUI开发的基础部分与进阶部分,...
android UI 可视化开发工具 小巧、方便、灵活
Unity UGUI Assets Store上付费UGUI工具集:https://www.assetstore.unity3d.com/cn/#!/content/27226
默笙工具箱V2.0 带后台(现实君工具箱UI)默笙工具箱V2.0 带后台(现实君工具箱UI)默笙工具箱V2.0 带后台(现实君工具箱UI)默笙工具箱V2.0 带后台(现实君工具箱UI)默笙工具箱V2.0 带后台(现实君工具箱UI)默笙...
swift砖块系列:UI基础框架,有各种工具方便快速搭建APP --- SwiftBrick-master.zip
Mastering Windows Presentation Foundation Build responsive UIs for desktop applications with WPF, 2nd Edition (Sheridan Yuen)
MFC对话框程序中添加工具栏及工具栏上的Button响应UPDATE_COMMAND_UI消息
UI自动化辅助工具:UISpy.exe,比spy++功能强大些 在win7和win10实验可用,其他版本系统未实验过
Guna UI 是一种用于 .NET 平台的现代用户界面(UI)控件库,旨在帮助开发人员快速创建漂亮、交互性强、功能丰富的桌面应用程序。Guna UI 提供了一系列高度可定制的控件,使开发人员能够以简单的方式构建现代化的用户...
跟踪工具:Catcher_L1 v3.10.01,从串口输出调试信息,只做普通UI应用的话,大致不会用到,用PC仿真工具就好了 烧录工具:FlashTool_UI v3.1.05 或 FlashTool_v3.0844.00 其 他:PL2303_Driver_XP2K v204102
这是一个工具包用来帮助设计和开发 Android 用户界面,包含三个单独的工具: Android Asset Studio UI Prototyping Stencils Android Design Preview
《HenCoder Android 开发进阶:UI 1-2 Paint 详解》 的练习项目