#perfmatters:面向性能忍者的工具技术
熟练使用开发工具是成为性能专家的关键。Colt 详细介绍了性能的三大支柱:网络、计算和渲染,并简要介绍了每个领域的主要问题以及用于发现和消除这些问题的工具。
- 现在,您可以使用桌面版 Chrome 中熟悉的开发者工具对 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、样式计算、绘制和合成。
- 绘制费用极高。绘制风暴是指不必要地重复昂贵的绘制工作。
- 层用于缓存绘制的元素。
- 输入处理脚本(触摸和滚轮监听器)可能会降低响应速度;请尽可能避免使用它们。您无法将其降到最低。
#perfmatters:免安装移动 Web 应用
关键渲染路径是指浏览器在开始绘制网页之前所需的任何内容(JavaScript、HTML、CSS、图片)。必须优先提交关键渲染路径上的资源,对于网络受限的设备(例如使用移动网络的智能手机)上的用户而言,这一点尤为重要。Bryan 详细介绍了 Google 团队如何为 PageSpeed Insights 网站确定资源并确定其优先级,将其加载时间从 20 秒缩短到 1 秒多一点!
- 移除会阻塞渲染的 JavaScript 和 CSS。
- 优先显示可见内容。
- 异步加载脚本。
- 将初始视图作为 HTML 在服务器端呈现,并使用 JavaScript 进行增强。
- 尽量减少呈现阻塞 CSS;仅提交显示初始视口所需的样式,然后再提交其余样式。
- 在会阻塞渲染的 CSS 中内嵌的大型数据 URI 会影响渲染性能;它们是阻塞资源,而图片网址是非阻塞资源。