44、基于渐进流式传输的网页加载优化

基于渐进流式传输的网页加载优化

1. 引言

在当今数字化时代，网页加载速度是用户体验的关键因素之一。然而，蜂窝网络覆盖存在显著差距，尤其是在农村地区，这导致网页加载时间过长，远远超出可接受的范围。例如，在以 32 KB/s 的速度下载时，facebook.com 在首次有内容渲染之前需要近 3 分钟。在 20 个最受欢迎的可加载网页中（来自 2020 年 10 月 27 日的 Alexa 顶级列表），当以 8 KB/s 的速度下载时，除了 google.com 之外的 19 个网页都会因加载过慢而超时。即使是小网页，如果没有正确优化，也会导致加载时间延长和能耗增加。

本文旨在通过修改加载行为，从技术可行性和用户接受度两方面探索加速网页初始加载的方法。核心概念是流式传输服务器端预处理的内容和布局信息，以便在客户端逐步增强网页渲染，实现更快的首次有内容渲染（FCP）。

2. 背景知识

2.1 网页的典型获取和渲染流程

为了渲染网页，浏览器首先向专用服务器发送请求，以获取网页的主 HTML 文件。在主 HTML 文件下载完成后，解析器会遍历每个 HTML 文档语句。该文件可能引用多个外部资源，这些资源并非嵌入在 HTML 文件本身中，而是通过同步或异步方式链接。默认情况下，链接是同步的，因此会阻塞渲染。

从主 HTML 文件首次接收到数据到页面首次渲染的过程称为关键渲染路径，它描述了所有阻塞渲染的文件的获取和处理，包括创建 DOM 和 CSSOM，并受到阻塞渲染的 JavaScript 解析的干扰。通过推测解析可以优化这一步骤，解析器会“提前查看”并获取后续所需的资源，以并行化部分所需的网络请求。但在使用推测解析完成主