#perfmatters:面向性能高手的工具技术
熟悉各种开发工具是成为性能专家的关键。Colt 逐步介绍了性能的三大支柱:网络、计算和渲染,并介绍了每个领域的关键问题以及可用于查找和消除这些问题的工具。
- 现在,您可以通过桌面设备使用您熟悉和喜爱的开发者工具在 Android 设备上对 Chrome 进行性能分析。
- 性能工作的迭代循环是:收集数据、获得数据洞见、采取行动。
- 优先考虑网页的关键呈现路径上的素材资源。
- 避免粉刷;价格非常昂贵。
- 避免应用的关键时刻发生内存抖动和执行代码。
#perfmatters:优化网络性能
网络和延迟通常会占网站总网页加载时间的 70%。这个比例很大,但也意味着您在该网站上所做的任何改进都会为用户带来巨大收益。在本次演讲中,Ilya 介绍了 Chrome 中最近做出的一些能够缩短加载时间的更改,以及您可以在环境中进行的一些更改,以帮助将网络负载保持在最低水平。
- Chrome M27 包含经过改进的全新资源调度程序。
- Chrome M28 为 SPDY 网站(甚至)提高了速度。
- Chrome 的简单缓存已焕然一新。
- SPDY / HTTP/2.0 大大提高了传输速度。nginx、Apache 和 Jetty(仅列举了三个)可以使用成熟的 SPDY 模块。
- QUIC 是基于 UDP 构建的新实验性协议;这是早期产品,但事实证明用户会赢。
#perfmatters:60fps 布局和渲染
在项目中达到 60fps 会直接影响到用户互动度,并且是其成功的关键。在本演讲中,Nat 和 Tom 讨论了 Chrome 的渲染管道、丢帧的一些常见原因以及如何避免丢帧。
- 帧的时长为 16 毫秒。其中包含 JavaScript、样式计算、绘制和合成。
- 绘制的成本极高。在 Paint Storm 中,你会不必要地重复昂贵的绘制工作。
- 层用于缓存已绘制的元素。
- 输入处理程序(触摸和鼠标滚轮监听器)可能会致使响应速度变慢;请尽可能避免您无法将其降至最低。
#perfmatters:移动 Web 应用
关键渲染路径是指浏览器在开始绘制网页之前需要的任何内容(JavaScript、HTML、CSS、图片)。必须优先在关键渲染路径上分发资源,尤其是对网络受限设备(例如使用移动网络的智能手机)的用户。Bryan 介绍了 Google 团队是如何为 PageSpeed Insights 网站确定资源并确定优先级的流程,将加载时间从 20 秒缩短到仅 1 秒多!
- 消除阻塞渲染的 JavaScript 和 CSS。
- 优先显示可见内容。
- 异步加载脚本。
- 在服务器端将初始视图渲染为 HTML 并使用 JavaScript 进行扩充。
- 尽量减少阻塞渲染的 CSS;仅提供显示初始视口所需的样式,然后提供其余样式。
- 内嵌在阻止呈现的 CSS 中的大型数据 URI 会降低呈现性能;它们会阻塞图片网址非阻塞的资源。