12、网页结构与效率的深度分析：聚焦初始页面加载优化潜力

网页结构与效率的深度分析：聚焦初始页面加载优化潜力

1. 引言

如今，网站规模不断增大、复杂度持续提升，但在许多地区，网络带宽不足以让用户在可接受的时间内加载网页，特别是在移动设备上。尽管有多种优化网页加载时间的方法，但现实世界中加载数据的效率和结构缺乏大规模的基线数据，也不清楚优化部分代码对代码效率的潜在影响。

本文对全球排名前 10,000 的网页进行了深入分析，评估了对结构或性能影响最大的方面，并结合使用的技术、框架、代码效率以及桌面和移动版本的差异进行了分析。结果显示，绝大多数（JavaScript 超过 70%，CSS 约 90%）外部加载的资源以渲染阻塞代码的形式加载，平均而言，渲染阻塞的 JavaScript 只有约 40%、CSS 只有约 15% 在页面渲染前被使用，这表明大多数分析的网站有显著的性能提升潜力。

2. 背景

现代浏览器在渲染网页前通常需要加载额外的外部资源。用户请求基于 HTML 的网页后，服务器发送主 HTML 文件，该文件可链接 CSS 和 JavaScript 等资源。当浏览器解析主 HTML 遇到非异步的外部资源链接时，会暂停解析，发送请求获取外部文件，解析完成后再继续解析主 HTML 文件。暂停渲染过程的文件称为渲染阻塞文件。

JavaScript 和 CSS 可通过多种方式插入，如作为外部文件链接（使用 link 和 script 标签）或内部嵌入（使用 style 和 script 标签），CSS 还可通过 style 属性应用为内联样式。通常，外部链接是渲染阻塞的，但 JavaScript 可使用 async 和 defer 属性改变默认行为，而 CSS 除了使用 media 属性或 Ja