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

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

渐进式渲染的优点

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

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

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

渐进式渲染技术

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

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

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

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

• 现代延迟加载： html 现在支持 <img> 元素的 loading="lazy" 属性，该属性告诉浏览器延迟加载页面可见部分之外的图像，直到用户滚动到靠近它们的位置。例如：

   <img src="image.jpg" loading="lazy" alt="Opis slike">

• javascript 滚动跟踪： 你可以使用 javascript 来跟踪滚动位置，当图像接近屏幕可见部分时，即可触发加载图像（通过将图像坐标与当前滚动位置）。

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

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

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

科威旅游管理系统源码

系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

150

查看详情

3. 异步 html 片段

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

4. 资源的预加载和预取

使用 <link rel="preload"> 或 <link rel="prefetch"> 在需要之前加载关键资源，例如样式、脚本或字体。这样可以更快地加载内容，特别是对于不是立即需要但稍后在页面上使用的资源。

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

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

6. css 关键路径（critical css）

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

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

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

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

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

结论

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

以上就是渐进式渲染：提高内容显示的性能的详细内容，更多请关注php中文网其它相关文章！