什么是渐进渲染？

---

简介

您是否曾经测量过您网站的加载速度？如果没有，互联网上有很多工具可以测试网站速度。搜索任何一个并测量它。根据谷歌进行的调查，如果网站加载速度超过 3 秒，则意味着您将损失 32% 的访客。

因此，如果您采取措施降低网站的加载速度，将会有所帮助，而渐进渲染就出现在这里，它允许开发人员提高网站的加载速度。

什么是渐进渲染？

在讨论渐进渲染技术之前，让我们尝试理解渐进渲染这个词。因此，渐进意味着像正常进度一样一个接一个地显示，您可能在下载或上传文件甚至更新移动应用程序时见过。

渲染的含义是在网页上显示内容。因此，渐进渲染这个词的完整含义是逐个显示网页的不同组件，而不是将所有内容一起显示。

以下是渐进渲染的定义。

渐进渲染是一种技术，其中 Web 开发人员将网页代码分解成更小、更易于管理的块，并逐个显示所有块以提高网页的性能。

渐进渲染是如何工作的？

现在，让我们了解渐进渲染是如何工作的。

如果我们在浏览器上渲染普通网页，它会将网页的所有内容一起加载，包括 HTML、CSS 和 JavaScript。但在渐进渲染中，开发人员需要将代码分解成更小的部分以进行渐进渲染，如上一节所述。

在渲染的第一部分，网站应该加载诸如标题、主体背景或网页的主要可交互部分之类的组件。之后，网站应该开始加载 CSS 来设置组件的样式。因此，访客可以开始与网页交互。

之后，我们需要加载其余的 HTML 组件以及 CSS 和 JavaScript 以向代码中添加行为。此外，我们应该异步加载 JavaScript。

每当我们需要在下载或从 API 获取数据后显示图像或任何内容时，都应该最后显示。

实现渐进渲染的不同技术

现在，我们将学习在网站上实现渐进渲染的不同方法。

延迟加载

顾名思义，它会延迟加载网页的内容。在延迟加载技术中，我们只能在需要时加载网页的内容。例如，您必须在一个网页上显示 100 张图片；最初，用户只能看到 10 张图片，用户需要滚动网页才能看到其他图片。在这种情况下，我们可以最初加载前 10 张图片，并在用户滚动网页时加载其他图片。

这样，我们可以使用延迟加载技术来提高网页性能。

优先考虑网页内容

渐进渲染的另一种方法是优先考虑所需内容。例如，在加载网页时，我们可以首先显示内容的可交互部分，然后加载其他内容。

此外，我们最初可以只渲染所需的 CSS。例如，我们需要从 API 获取数据，然后我们需要渲染数据。因此，如果我们将所有 CSS 一起渲染，它也会渲染未找到数据的 CSS，我们可以将其渲染在获取数据之后。

因此，通过这种方式，我们可以最初显示优先级高的内容，然后在网页上显示其他内容。

为什么开发人员应该使用渐进渲染？

这里我们解释了渐进渲染的一些优势。

更快的网页加载速度

渐进渲染的主要好处是它提高了网页的速度。它将网页内容分成块加载，因此用户在打开网页时可以立即开始与网页交互。

改善用户体验

由于渐进渲染提高了网站的加载速度，用户可以更多地参与网站。它还可以增加网站的访问量。

改进网站的 SEO

在 SEO 中，网页速度是重要的功能之一。谷歌的爬虫会爬取每个页面并评估网站的内容。如果加载速度慢，爬虫可能会跳过网页，如果网页速度小于 1 秒，它会在竞争对手之间对网站进行排名。

结论

渐进渲染是一种通过以更小的块或在需要时渲染网页的 HTML、CSS 和 JavaScript 内容来提高网页性能的技术。我们还讨论了实现渐进渲染的两种方法以及使用渐进渲染的好处。