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

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《渐进式渲染：提高内容显示的性能》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

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

渐进式渲染的优点

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 等事件来延迟，以便在初始显示后加载其他资源。

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

结论

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

今天关于《渐进式渲染：提高内容显示的性能》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！