检测给定页面使用的外部资源和文件大小

Posted 2023-03-06

【中文标题】检测给定页面使用的外部资源和文件大小

【英文标题】：Detect external resources and file sizes used by a given page

【发布时间】：2012-11-14 07:26:34

【问题描述】：

使用 javascript，我想检测网站正在使用多少 JavaScript、CSS 和图像。最重要的是，我想获取每个资产的文件大小。这可能吗？如果可以，你会怎么做？

【问题讨论】：

遗憾的是，我认为页面内的 JS 无法满足您的需求。 html5 文件系统 API 可能会有所帮助（有检索文件信息的功能 - w3.org/TR/file-system-api '5.1 元数据接口'），但我认为如果可能的话，您需要一个非常复杂的过程来实现它。

【参考方案1】：

关于检测网站上使用的外部 javascript、css 和图像的数量，可以通过获取所有脚本、图像和样式标签，然后通过将文档域与资产进行比较来检查它们是否为 外部域。

至于使用 javascript 检查外部资源的大小，这可能很难。即使您可以尝试例如使用 ajax 重新获取脚本和 css 文件以获取文件的内容（以估计其大小），但在估计图像大小时会出现问题。我猜可能会使用 html5 文件 api 或 canvas 来了解图像的大小。