关于渐进式渲染技术提高网页加载性能

[Hibop]

背景

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。

在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

一些举例：

• 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
• 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
• 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在这里找到=====> node异步加载HTML片段

异步加载 HTML 片段

https://www.ebayinc.com/stories/blogs/tech/async-fragments-rediscovering-progressive-html-rendering-with-marko/
文章要点总结：
在eBay，我们非常重视网站速度，并一直在寻找方法让开发人员创建速度更快（fast-loading）的网络应用程序(web-apps)。这涉及完全理解和控制网页如何传递到Web浏览器。渐进式HTML呈现是一种相对古老的技术，可以用来提高网站的性能，但它已经在新一代的的Web应用程序中丢失了。这个想法很简单：**通过尽早和多次刷新，让Web浏览器在更先的下载和呈现页面。浏览器从服务器流式传输（甚至在响应结束之前）， 总是具有解析和响应HTML的有用部分。此功能允许更早地下载HTML和外部资源，并允许更早地呈现页面的某些部分。结果是，不管是真实的加载时间还是用户感知时间都将被改善。

在这篇博文中，我们将深入探讨一种我们称之为“异步碎片”的技术，该技术利用渐进式HTML渲染来提高网站速度，而不会使网络应用程序的构建方式大大复杂化。具体示例我们将使用Node.js，Express.js和Marko模板引擎（支持流式传输，刷新和异步呈现的JavaScript模板引擎）。即使您没有使用这些技术，本文也可以让您深入了解如何进一步优化您的选择。