哈喽!我叫 Kayce,还是开发者工具的技术文档工程师。对于本开发者工具摘要,我想我要稍微换一下内容,总结一下最近几个 Chrome 版本在开发者工具中所做的一些性能工具改进。
除非另有说明,否则 Chrome 稳定版已提供所有功能。
针对“移动优先”时代的 CPU 节流
适用于 Chrome 54(目前为 Canary 版)。
软件正在席卷世界,移动设备正在吞噬软件。开发者工具正在稳步发展,以更好地满足移动优先的开发环境的需求。开发者工具的移动设备优先工具的最新开发项是 CPU 节流。借助此功能,您可以更好地了解您的网站在资源受限的设备上的表现。
从“Timeline”面板的 CPU Throttling(CPU 节流)下拉菜单中选择一个选项,以降低开发机器的计算能力。
![ALT_TEXT_HERE](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/alttexthere-4d2a07a478acb.png?authuser=9&hl=el)
关于 CPU 节流的一些说明:
- 与网络节流一样,节流会立即生效并持续,直至您将其停用。
- 此功能旨在让您大致了解您的网站在资源受限的设备上可能会呈现出怎样的效果。开发者工具无法真正模拟移动系统芯片的性能特征。
- 限制是相对于开发机器的。换言之,在热门桌面设备上采用 5 倍节流与在有 5 年历史的经济型笔记本电脑上实现 5 倍节流相比产生不同的结果。
尽管如此,只要将 CPU 节流与网络节流和设备模式结合使用,您就可以通过在开发计算机浏览器上方便地查看网站在移动设备上的外观和性能。
时间轴录制的网络视图
下次进行时间轴记录时,请选中网络复选框,以分析网页下载其资源的方式。点击某项资源可在“摘要”窗格中查看其详情。
![时间轴中的网络视图](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/network-view-timeline-b37a7ed4d8b.png?authuser=9&hl=el)
摘要中的 Initiator 字段特别有用。此字段会告知您请求资源的位置。
被动事件监听器
被动事件监听器是一种新兴标准,有助于提升滚动性能。如需了解详情,请参阅您撰写的这篇文章:
开发者工具推出了几项功能,可帮助您找到可受益于 {passive: true}
的一点喜爱。
首先,当同步监听器阻止页面滚动的时间超过合理的时间时,控制台会发出警告。
![同步监听器警告](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/synchronous-listener-warn-0e6fbc2a7bf36.png?authuser=9&hl=el)
你可以在下面的演示中亲自测试:
接下来,您可以使用 Event Listeners 窗格中的小下拉菜单来过滤被动或屏蔽监听器。
![被动监听器过滤器](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/passive-listeners-filter-dec2e483dc09.png?authuser=9&hl=el)
最后,您可以切换监听器的被动或屏蔽状态,方法是将鼠标悬停在监听器上,然后按 Toggle Passive(切换被动状态)。此功能目前仅适用于 touchstart
、touchmove
、mousewheel
和 wheel
事件监听器。
![开启/关闭被动模式](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/toggle-passive-5b52cd4553b19.png?authuser=9&hl=el)
我会在这里总结一下小窍门选中“渲染”抽屉式导航栏上的 Scrolling Performance Issues(滚动性能问题)复选框,以直观地了解潜在的滚动问题。如果页面的某个部分突出显示,则表示该页面上存在一个绑定到该部分的监听器,这可能会对滚动性能产生负面影响。
![滚动性能问题演示](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/scrolling-performance-iss-b5baa74fac517.gif?authuser=9&hl=el)
按活动分组
早在 6 月中旬,“时间轴”面板上的调用树窗格采用了新的排序类别:按活动分组。通过此分组,您可以查看您的网页在解析 HTML、评估脚本、绘制等方面所花的时间。
![按活动分组](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/group-activity-28e0f3f6c9ebf.png?authuser=9&hl=el)
来源面板中的时间轴统计信息
在启用 JS Profile 选项的情况下创建 Timeline 记录,您可以在“Sources”面板中查看每个函数的执行时间明细。
![“来源”面板中的时间轴统计信息](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/timeline-stats-sources-p-d1443a034c712.png?authuser=9&hl=el)
分享你的观点
与往常一样,我们非常期待收到您对开发者工具相关任何方面的反馈或想法。
- 如需提出简短问题、提供反馈,或分享新想法,请在 Twitter 上通过 ChromeDevTools 与我们联系。
- 对于较长的讨论,最好的选择是向邮寄名单或 Stack Overflow 寻求帮助。
- 如有任何关于文档的问题,请在我们的文档代码库中提交问题。
下个月再见吧!