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

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

网页结构与效率分析

在网页性能优化方面，外部加载的 JavaScript 和 CSS 资源大多以渲染阻塞代码的形式加载，这极大地降低了页面的最大可实现加载性能。具体而言，超过 70% 的 JavaScript 和近 90% 的 CSS 属于此类情况。而且，平均只有约 40% 的渲染阻塞 JavaScript 和 15% 的 CSS 在页面渲染前被使用，这显示出大多数被分析网站在性能提升上存在巨大潜力。对 CSS 本身的测试发现，约 75% 的加载 CSS 选择器在最终 HTML 页面中没有匹配项。此外，移动版本网页的效率普遍低于桌面版本。

为解决这些问题，在代码加载方面，部分代码可异步加载。对于 CSS，已有技术可将其拆分为渲染关键和非关键文件。但 JavaScript 情况不同，因其函数间可能存在依赖关系，异步加载的函数若未及时可用会引发错误。一种可能的解决方案是利用 Promise 的框架，通过基于严格 Promise 语法的代理调用异步加载的 JavaScript 文件中的函数，不过这需要对代码进行深入分析，且可能并非能直接应用的解决方案，还需进一步研究。同时，当前优化渲染阻塞资源效率的解决方案可能难以融入现有工作流程，因此需要易于使用且普遍适用的解决方案。

在数据收集与分析过程中，也面临着一些挑战。收集的数据有效性只能在一定程度上进行测试，且由于数据集规模大，无法逐页测试。此外，需要编写复杂软件来爬取和分析大量网页，且依赖如 puppeteer 提供的代码覆盖信息等工具，受时间限制无法独立评估这些工具。未来的研究计划包括进一步分析数据，爬取网站时纳入字体等其他资源，并使用 puppeteer 隐身插件降低被网站阻止的概率。 </