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

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

1. 引言

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

为解决这一问题，本文提出了一种通过修改加载行为来加速网页初始加载的方法，该方法基于流式传输服务器端预处理的内容和布局信息，以实现客户端渐进式增强的网页渲染，从而加快首次有内容绘制的速度。

2. 背景知识

2.1 网页获取和渲染流程

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

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