CSS 什么是渐进式渲染

引言

您是否曾经测试过您网站的加载速度？如果没有，互联网上有许多工具可以测试网站的速度。搜索其中一个并进行测试。根据Google的调查，如果网站的加载速度超过3秒，这意味着您失去了32%的访问者。

因此，如果您采取行动减少网站的加载速度，渐进式渲染就出现了，它允许开发人员提高网站的加载速度。

什么是渐进式渲染

在讨论渐进式渲染技术之前，让我们试着理解”渐进式渲染”这个词。渐进式意味着逐个显示，就像正常进度一样，您可能在下载、上传文件，甚至更新手机应用时见过。

渲染的意思是在网页上显示内容。因此，渐进式渲染这个词的完整含义是逐个显示网页的不同部分，而不是一次显示所有内容。

这是渐进式渲染的定义。

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

渐进式渲染的工作原理是什么

现在，让我们了解渐进式渲染的工作原理。

如果我们在浏览器上渲染正常的网页，它会一次加载网页的所有内容，包括HTML、CSS和JavaScript。但是在渐进式渲染中，开发人员需要将代码分解为较小的部分进行逐步渲染，正如上面的部分所讨论的那样。

在渲染的第一部分，网站应该加载组件，例如标题、页面主体背景或主要交互部分。之后，网站应该开始加载CSS来为组件添加样式。这样访问者就可以开始与网页进行交互。

之后，我们需要加载剩余的带有CSS和JavaScript的HTML组件来为代码添加行为。此外，我们应该异步加载JavaScript。

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

实现渐进式渲染的不同技术

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

懒加载

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

通过这种方式，我们可以使用懒加载技术来改善网页的性能。

优先显示网页内容

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

此外，我们还可以初始渲染所需的CSS。例如，我们需要从API获取数据，之后需要渲染这些数据。因此，如果我们将所有CSS一起渲染，那么也会渲染关于未找到数据的CSS，我们可以在获取数据后再进行渲染。

这样，我们可以以高优先级显示内容，然后在网页上显示其他内容。

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

以下是渐进式渲染的一些优点。

更快的网页加载速度

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

提高用户体验

渐进式渲染提高了网站的加载速度，用户可以更好地与网站进行互动。它还增加了网站的访问量。

提高网站的SEO

在SEO中，网页加载速度是一个重要特性。Google的爬虫会遍历每个页面并评估网站的内容。如果加载速度较低，爬虫可能会跳过该网页，而如果网页加载速度低于1秒，它会将该网站排在竞争对手之间。

结论

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