29 lines
1.6 KiB
Plaintext
29 lines
1.6 KiB
Plaintext
---
|
|
title: 什么是渐进式渲染？
|
|
---
|
|
|
|
渐进式渲染是指用于提高网页性能（特别是提高感知加载时间）的技术，以便尽快渲染内容以供显示。
|
|
|
|
在宽带互联网普及之前的时代，它曾经非常流行，但它仍然被用于现代开发中，因为移动数据连接变得越来越受欢迎（而且不可靠）！
|
|
|
|
## 图片的懒加载
|
|
|
|
页面上的图片不会一次性全部加载。只有当用户滚动到显示图片的页面部分或附近时，才会加载图片。
|
|
|
|
* `<img loading="lazy">` 是一种现代方式，指示浏览器推迟加载屏幕外的图像，直到用户滚动到它们附近。
|
|
* 使用 JavaScript 监视滚动位置，并在图像即将出现在屏幕上时加载图像（通过将图像的坐标与滚动位置进行比较）。
|
|
|
|
## 优先显示可见内容（或首屏渲染）
|
|
|
|
仅包含用户浏览器中将首先渲染的页面所需的最少 CSS/内容/脚本，以便尽快显示，然后您可以使用延迟脚本或监听 `DOMContentLoaded`/`load` 事件来加载其他资源和内容。
|
|
|
|
## 异步 HTML 片段
|
|
|
|
在后端构建页面时，将 HTML 的部分内容刷新到浏览器。有关该技术的更多详细信息，请参见 [此处](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)。
|
|
|
|
## 其他现代技术
|
|
|
|
* [渐进式水合](https://www.patterns.dev/posts/progressive-hydration/)
|
|
* [流式服务器端渲染](https://www.patterns.dev/posts/server-side-rendering/)
|
|
* [选择性水合](https://www.patterns.dev/posts/react-selective-hydration/)
|