14、网页结构、效率分析与自动数据 API 创建

网页结构、效率分析与自动数据 API 创建

网页结构与效率分析

在网页性能优化领域，对网页结构和效率的分析至关重要。研究人员通过自定义分布式分析软件爬取 Tranco 列表中的前 10,000 个网站，收集了网页的元数据，包括 JavaScript 和 CSS 的使用情况、所使用的框架和库等。

分析结果显示，超过 70% 的外部加载 JavaScript 资源和近 90% 的 CSS 资源以渲染阻塞代码的形式加载，这极大地降低了网页的最大可实现加载性能。此外，在页面渲染之前，平均只有约 40% 的渲染阻塞 JavaScript 和 15% 的 CSS 被使用，这表明大多数被分析的网站在性能提升方面具有巨大潜力。对 CSS 本身的测试发现，约 75% 的加载 CSS 选择器在最终的 HTML 页面中没有匹配项。

在测试过程中，还收集了网页的桌面版和移动版数据。总体而言，移动版的效率低于桌面版。对最流行的框架进行详细评估后发现，大多数情况下，其各项指标与全球平均水平相比没有显著变化。

为了解决这些问题，研究人员提出了一些解决方案。对于 CSS 效率问题，已经存在将其拆分为渲染关键和非关键文件的技术。而对于 JavaScript，由于函数之间可能存在依赖关系，异步加载函数时若不能及时可用会抛出错误。一种可能的解决方案是使用基于 Promise 的框架，通过严格的基于 Promise 的语法，异步加载的 JavaScript 文件的函数可以通过基于 Promise 的代理调用，该代理会等待函数加载完成后再调用。但这需要对编写的代码进行深入分析，且可能不是一种即插即用的解决方案，还需要进一步研究。

同时，当前优化渲染阻塞资源效率的解决方案可能难以集成