什么是渐进式渲染？|极客笔记

什么是渐进式渲染？

渐进式渲染指的是一种对网页内容的渲染方式，渐进式渲染可以提高网页的用户体验，使网页更快地加载并显示出内容。渐进式渲染实现的原理是，在网页加载的过程中，不断地迭代式地渲染内容。也就是说，在网页的加载过程中，先渲染出一部分内容，然后再慢慢地渲染出剩余的内容，最终将整个页面渲染出来。

与传统渲染方式相比，渐进式渲染能够更快地展示出页面内容，让用户快速获取需要的信息，从而提高用户体验。在移动设备上，渐进式渲染也非常适合，因为移动网络的带宽和速度相对较慢，在这种情况下，渐进式渲染可以让用户更快地获得需要的信息。

渐进式渲染的原理

渐进式渲染的实现原理是，当浏览器下载 HTML、CSS 和 JavaScript 文件时，它可以同时将 HTML 解析成 DOM（Document Object Model，文档对象模型）树，并将样式应用到文档中。在解析文档时，浏览器会根据 HTML 标签和外部资源（例如图片）的顺序自上而下地解析文档。因此，在文档解析的过程中，可以使用较小的 HTML 和 CSS 样式表，以便更快地将页面内容展示给用户。

在渐进式渲染中，通常需要遵循以下几个步骤：

减少 HTTP 请求数量。减少 HTTP 请求可以加快网页的加载速度，使得渐进式渲染更加流畅。
异步加载 JavaScript。将 JavaScript 标记为 async，以便异步加载 JavaScript 文件，不会阻止页面的加载。
延迟加载图片。延迟加载图片可以使页面更快地加载，同时也可以减少页面的加载时间。

渐进式渲染的优势

渐进式渲染有很多优势，包括：

加速页面加载速度。在渐进式渲染中，浏览器可以在加载过程中逐步渲染内容，快速地展示出页面内容，提高用户体验。
减少页面加载时间。渐进式渲染可以同时下载 HTML、CSS 和 JavaScript 文件，并根据文件大小将它们分段下载，从而减少页面的加载时间。
减少 HTTP 请求。渐进式渲染减少了 HTTP 请求的数量，从而提高了网页的加载速度，同时也提高了用户体验。

渐进式渲染的示例代码

以下是一个简单的网页，使用了渐进式渲染的技术。

<!DOCTYPE html>
<html>
<head>
  <title>Progressive Rendering Demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <script async src="script.js"></script>
</head>
<body>
  <header>
    <h1>Progressive Rendering Demo</h1>
  </header>
  <main>
    <section>
      <h2>This is the First Section</h2>
      <p>This is the content of the first section.</p>
    </section>
    <section>
      <h2>This is the Second Section</h2>
      <p>This is the content of the second section.</p>
    </section>
    <footer>
      <p>© 2021 Progressive Rendering</p>
    </footer>
  </main>
  <img data-src="image.jpg" alt="Example Image" class="lazyload">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
</body>
</html>

在这个示例中，我们首先使用了 async 属性异步加载了 script.js 文件。在 body 标签中包含了 img 标签，使用了 lazyload 类来实现图片的延迟加载，当 img 标签出现在可视区域时才会进行下载和渲染。

渐进式渲染的局限性

渐进式渲染的局限性主要体现在以下几个方面：

无法迅速渲染复杂的页面。对于复杂的页面，渐进式渲染可能需要更长的时间来完成加载和渲染，从而影响用户体验。
对于搜索引擎优化（SEO）不友好。由于渐进式渲染的实现方式，如果页面的内容仅能通过 JavaScript 生成，但搜索引擎无法执行 JavaScript，这会对 SEO 产生负面影响。
对于某些依赖于可视状态的功能不友好。例如，对于需要在用户可视区域内运行的轮播等内容，使用渐进式渲染的方式难以实现。

结论

综上所述，渐进式渲染是一种提高网页加载和渲染速度的技术，能够提高用户体验，特别是在移动设备上。渐进式渲染的实现方式需要遵循特定的步骤，如减少 HTTP 请求、异步加载 JavaScript，延迟加载图片等。尽管渐进式渲染具有很多优点，但也有一些局限性，例如在复杂页面上的效果不理想等。因此，在实际应用中需要权衡使用渐进式渲染的优缺点，并对应用场景选择最合适的技术实现方式。