Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

关键渲染路径

_优化关键渲染路径_是指优先显示与当前用户操作有关的内容。

要提供快速的网络体验,浏览器需要做许多工作。这类工作大多数是我们这些网络开发者看不到的:我们编写标记,屏幕上就会显示出漂亮的页面。

但浏览器到底是如何使用我们的 HTML、CSS 和 JavaScript 在屏幕上渲染像素的呢?

从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理,从而将它们转变成渲染的像素这一过程中有一些中间步骤,优化性能其实就是了解这些步骤中发生了什么 - 即关键渲染路径

渐进式页面渲染

通过优化关键渲染路径,我们可以显著缩短首次渲染页面的时间。 此外,了解关键渲染路径还可以为构建高性能交互式应用打下基础。

处理交互式更新的过程是相同的,只是在连续循环中完成,理想情况下每秒可以处理 60 帧!不过,我们先来看一下浏览器如何显示简单的网页。

关键渲染路径

你将通过详细了解移动浏览器和桌面浏览器如何渲染页面,学习如何提高任何网站的速度。

在这一简短的课程中,你将学习关键渲染路径,也就是浏览器将 HTML、CSS 和 JavaScript 转换成实际运作的网站必须采取的一系列步骤。 接着,你将利用工具来衡量性能,并运用简单的策略尽快向屏幕中渲染画面。 你将学习如何利用 Google Chrome 的开发者工具—— PageSpeed Insights 和时间表视图,找到所需的数据并立即提高性能!

这个免费的课程可以在 Udacity 找到

参加课程