对来自特定发起者/来源的iframe的加载和执行时间进行基准测试

Question

我有一个带有主脚本X的网站。这个脚本根据页面类型加载外部脚本（异步），每个脚本都在它自己的iframe中分开，但这些脚本可能会加载其他脚本。该网站有很多页面需要进行基准测试，因此需要自动化流程。

网站本身，主脚本X和iframe无法更改。

该网站加载其他不相关的脚本/图像，但会影响具有原始X的特定iframe的加载+执行时间。

我需要知道那些iframe在绝对和相对时间内的加载和执行时间（例如，主脚本X在页面上300ms后加载，需要50ms才能执行，加载iframe1，iframe1在350ms后加载并需要100ms才能执行，加载另一个脚本在450ms之后加载并且需要30ms = iframe 1在350ms之后开始并且在480ms之后结束 - 对于具有原点X的每个其他iframe重复。

这可能与Node.js / Puppeteer一起使用，如果可以，我可以使用哪些函数/库来完成任务？

Answer 1

您有两种选择：

1. 聆听相应事件，节省时间并计算结果
2. 使用现有库生成HAR文件

选项1：倾听事件

您可以在木偶戏中听取request，response（或requestfinished）等事件，记下他们的时间戳（例如使用Date.now()）并比较它们。您对要听的事件有充分的自由（和责任）。

例：

page.on('request', request => {
    if (request.url() === 'URL of your frame') {
        const timestamp = Date.now();
        // store time somewhere
    }
});
// listen to other events and store their timings in addition

根据页面的复杂程度，您可能希望使用数组来存储数据甚至是数据库。

选项2：HAS文件

使用像puppeteer-har或chrome-har这样的库来创建页面加载过程的HAR文件（我自己没有使用过这些文件）。

引用什么是HAR文件（source）：

HAR文件格式是一种不断发展的标准，其中包含的信息既灵活又可扩展。您可以预期HAR文件包括时间细分，包括：

1. 获取DNS信息需要多长时间
2. 每个对象需要多长时间才能被请求
3. 连接服务器需要多长时间
4. 将资产从服务器传输到每个对象的浏览器所需的时间

数据存储为JSON文档，从低级数据中提取含义并不总是很容易。但通过练习，HAR文件可以快速帮助您识别网页的关键性能问题，让您有效地针对网站中可以带来最佳结果的区域进行开发。

有多种现有工具可视化HAR文件（like this one），你甚至可以用drop a HAR file into a Chrome instance来分析它。

如果您想进一步自动化该过程，您还可以编写自己的脚本来解析HAR文件。因为它是一个JSON文件，所以很容易做到。