渐进式渲染：提高内容显示的性能

渐进式渲染是一组用于提高网页性能的技术，特别是在向用户显示内容的速度方面。页面的部分内容会逐渐显示和加载，而不是一次性加载整个页面。目标是尽快显示内容，从而改善感知加载时间 - 用户感知页面正在加载的时间。

---

渐进式渲染的优点

1. 更快的显示时间 - 用户更快地看到第一个内容，这改善了用户体验，尤其是在较慢的网络上。

2. 针对较弱设备的优化 - 功能较弱的设备可以更轻松地显示初始内容而不会出现延迟。

3. SEO 使用 - 搜索引擎索引最初加载的元素，这有助于更好的页面排名。

---

渐进式渲染技术

用于渐进式渲染的技术包括图像和其他资源的延迟加载、服务器端渲染（SSR）和客户端水合代码SPA申请。

虽然渐进式渲染在互联网较慢的时代尤其重要，但由于移动网络的广泛使用可能不可靠，它在当今的开发中仍然有用。以下是一些用于渐进式渲染的技术。

1. 图像延迟加载（Lazy loading）

在这种技术中，页面上的图像不会一次全部加载。相反，仅当用户滚动到图像所在的页面部分时才加载图像。这样，资源的使用更加经济，页面加载速度更快，因为只有最重要的内容首先显示。

• 现代延迟加载： HTML 现在支持 的 loading="lazy" 属性elements，它告诉浏览器延迟加载页面可见部分之外的图像，直到用户滚动到它们附近。例如：

   <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" loading="lazy" alt="Opis slike">

• JavaScript 滚动跟踪： 可以使用 JavaScript 来跟踪滚动位置，当图像接近屏幕可见部分时，即可触发加载图像（通过比较图像的坐标）具有当前滚动位置的图像）。

2. 可见内容优先（渲染覆盖层上方的内容）

“首屏内容”是指无需滚动即可在浏览器中立即可见的内容。为了让页面尽快显示这个关键内容，只需要加载基础CSS、初始页面渲染脚本等必要的资源即可。

最小化资源：加载页面时，您应该只包含呈现页面第一部分所需的最少量的 CSS、内容和脚本。其他资源可以使用 defer 脚本或通过监视 DOMContentLoaded 或 load 等事件来延迟，以便在初始显示后加载其他资源。

3. 异步 HTML 片段

这种技术允许服务器将部分 HTML 发送到浏览器，以便立即渲染页面，而其余部分则依次加载。这种方法对于内容来自服务器的动态页面特别有用 - 首先显示页面的一部分，然后添加其他部分。

4. 资源的预加载和预取

使用 或 在需要之前加载样式、脚本或字体等关键资源。这使得内容加载速度更快，特别是对于不是立即需要但稍后在页面上使用的资源。

5. 代码分割和动态 JavaScript 加载

将 JavaScript 代码分解为更小的部分（块），仅在需要时加载，从而减少下载的初始数据量。

6. CSS 关键路径（Critical CSS）

仅隔离加载最重要的CSS用于初始页面显示，其余部分可以异步加载。这使得视觉内容可以更快地渲染，而页面的其余部分在后台加载。

7. 服务器端渲染（SSR）和静态站点生成（SSG）

在将页面的某些部分发送给用户之前在服务器上呈现它们。这允许用户立即查看内容，而无需等待 JavaScript 加载，从而获得更好的性能和 SEO。

8. 渐进式网络应用程序 (PWA)

使用 PWA 技术，即使用户不在线也可以加载和访问应用程序，从而减少网络负载，即使在网络连接较差的情况下也能快速加载内容。

---

结论

渐进式渲染有助于实现更快的内容渲染，从而减少感知加载时间。尽管互联网连接速度更快，但由于移动设备使用的增加和移动网络质量的变化，这些技术仍然有用。通过这种方式，您可以为用户提供更好的体验，更快地访问页面上最重要的信息。

以上是渐进式渲染：提高内容显示的性能的详细内容。更多信息请关注PHP中文网其他相关文章！