Chrome 开发者峰会 - 性能摘要

Paul Lewis

#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、样式计算、绘制和合成。
  • 绘制的开销extremely。在《Paint Storm》中,你可能会不必要地重复昂贵的绘画工作。
  • 层用于缓存已绘制的元素。
  • 输入处理程序(触摸和鼠标滚轮监听器)可能会终止响应能力;如果可以,请避免使用输入处理程序。无法降到最低限度的地区。

#perfmatters:即时移动网络应用

关键渲染路径是指浏览器在能够开始绘制网页之前所需要的所有内容(JavaScript、HTML、CSS、图片)。必须优先在关键渲染路径上分发资源,尤其是对于使用网络受限设备(例如移动网络智能手机的用户)的用户。Bryan 介绍了 Google 的团队如何确定 PageSpeed Insights 网站的资源并确定其优先级,从而将加载时间从 20 秒缩短到 1 秒以上!

幻灯片

  • 避免使用会阻止内容呈现的 JavaScript 和 CSS。
  • 优先显示可见内容。
  • 异步加载脚本。
  • 在服务器端以 HTML 形式呈现初始视图,并使用 JavaScript 进行扩充。
  • 尽量减少阻止渲染的 CSS;仅提供显示初始视口所需的样式,然后提供其余内容。
  • 内嵌在阻碍呈现的 CSS 中的大型数据 URI 对呈现性能有害;它们会阻碍图片网址的非阻塞资源。