谷歌 Web 开发最佳实践手册(4.1):关键渲染路径

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:优化页面渲染中的关键路径对于改善Web页面性能而言至关重要。我们的目标是找到页面上对用户最重要的内容,并且在加载页面的时候优先显示这些内容。

提供响应迅速的Web用户体验需要浏览器做很多工作,而大部分工作对于Web开发人员而言是透明的。我们可能只知道写一些脚本,然后一张好看的页面就出现在了屏幕上。但是浏览器究竟是怎样将我们的HTML,CSS和JavaScript脚本渲染成屏幕上的像素的呢?

从浏览器接收到HTML,CSS和JavaScript脚本,到将它们渲染为像素点的过程中有许多中间步骤。要优化性能,就要了解这些步骤,也就是所谓的关键渲染路径(Critical Rendering Path)。

progressive-rendering

通过优化关键渲染路径,我们能够显著提高页面初次渲染的性能。此外,理解关键渲染路径还能为构建性能优异的交互式应用打下良好的基础。其实,页面交互过程中的更新过程也是大致类似的,一般是以每秒60帧的速度无限循环,在循环中更新。不过我们暂时还没有讲到那一步,还是先让我们来快速介绍一下浏览器是如何显示一个简单的Web页面的。

课程

  1. 创建对象模型 – 在浏览器真正渲染页面之前,它需要首先构建DOM树和CSSOM树。也就是说,我们需要尽快将HTML和CSS发送到浏览器。
  2. 渲染树结构、布局和绘制 – CSSOM和DOM树会被合并成单一的渲染树,用于计算每个可视元素的布局,并成为屏幕绘制过程的输入参数。优化其中的每一步对于优化渲染性能而言都至关重要。
  3. 渲染阻塞性CSS – 在默认情况下,CSS会被当做渲染中的阻塞性资源,也就是说浏览器即使已经处理好了某些页面内容,只要CSSOM没有构建好,便不会进行渲染。所以要给你的CSS瘦身,提高传输速度,并使用媒体类型和查询来解除阻塞。
  4. 用JavaScript增加交互活动 – JavaScript允许我们操作页面的每个方面:内容、样式和用户交互行为。然后JavaScript也会阻塞DOM的构建,延缓页面的渲染。你可以通过异步加载以及去除关键加载路径中不必要的脚本来优化性能。
  5. 通过Navigation Timing衡量关键渲染路径 – 一般而言,如果一样东西你没有办法度量,你就没有办法优化。好在我们有Navigation Timing API,让我们有办法度量关键渲染路径中每一步的性能。
  6. 分析关键渲染路径的性能 – 识别并且解决关键渲染路径中的瓶颈环节需要对常见的性能陷阱有深刻的理解。让我们自己动手,寻找常见的性能模式,帮助你优化页面。
  7. 优化关键渲染路径 – 为了尽可能加快初次渲染速度,我们需要做三方面的优化:减少关键资源的数目,减少关键字节的数目,缩短关键路径的长度。
  8. PageSpeed的规则和推荐做法 – 优化关键渲染路径时的注意事项,及其缘由。。
收藏 评论

关于作者:njuyz

(新浪微博:@njuyz) 个人主页 · 我的文章 · 11

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部