来自特定 initiator/origin 的 iframe 的基准加载和执行时间
Benchmarking loading and execution time of iframes from specific initiator/origin
我有一个带有主脚本 X 的网站。此脚本根据页面类型加载外部脚本（异步），每个脚本都在其自己的 iframe 中分开，但这些脚本可能会加载其他脚本。该网站有很多页面需要进行基准测试，因此该过程需要自动化。
网站本身、主脚本 X 和 iframe 无法更改。
该网站加载其他 scripts/images 不相关但会影响源 X 的特定 iframe 的加载+执行时间。
我需要知道这些 iframe 在绝对和相对时间上的加载和执行时间（例如，主脚本 X 在页面上 300 毫秒后加载，执行需要 50 毫秒，加载 iframe1，iframe1 在 350 毫秒后加载并需要 100 毫秒才能执行）执行，加载另一个脚本，该脚本在 450 毫秒后加载并花费 30 毫秒 = iframe 1 在 350 毫秒后开始并在 480 毫秒后完成 - 对每个其他具有原点 X 的 iframe 重复。
使用 Node.js / Puppeteer 可以吗？如果可以，我可以使用哪个 functions/libs 来完成任务？
你有两个选择：
- 听取相应的事件，节省他们的时间并计算结果
- 使用现有库生成 HAR 文件
选项 1：监听事件
您可以在 puppeteer 中收听 request, response (or 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：HAR 文件
使用像puppeteer-har or chrome-har这样的库来创建页面加载过程的HAR文件（我自己没有使用过这些）。
引用什么是HAR文件 (source):
The HAR file format is an evolving standard and the information contained within it is both flexible and extensible. You can expect a HAR file to include a breakdown of timings including:
- How long it takes to fetch DNS information
- How long each object takes to be requested
- How long it takes to connect to the server
- How long it takes to transfer assets from the server to the browser of each object
The data is stored as a JSON document and extracting meaning from the
low-level data is not always easy. But with practice a HAR file can
quickly help you identify the key performance problems with a web
page, letting you efficiently target your development efforts at areas
of your site that will deliver the greatest results.
有多种现有工具可以可视化 HAR 文件（like this one) and you can even drop a HAR file into a Chrome instance 对其进行分析。
如果你想更加自动化这个过程，你也可以编写自己的脚本来解析HAR文件。因为它是一个 JSON 文件，所以这很容易做到。
Firefox 和 Chrome 提供下载已加载网站的 HAR 存档。这是一个包含所有请求、来源、目标和加载时间的 JSON 文件。
我不能把我的源代码放到网上，因为我没有版权，但是分析这个文本文件可以实现我需要的一切（使用递归循环来获得未知数量的发起者深度请求）。
我有一个带有主脚本 X 的网站。此脚本根据页面类型加载外部脚本（异步），每个脚本都在其自己的 iframe 中分开，但这些脚本可能会加载其他脚本。该网站有很多页面需要进行基准测试，因此该过程需要自动化。
网站本身、主脚本 X 和 iframe 无法更改。
该网站加载其他 scripts/images 不相关但会影响源 X 的特定 iframe 的加载+执行时间。
我需要知道这些 iframe 在绝对和相对时间上的加载和执行时间（例如，主脚本 X 在页面上 300 毫秒后加载，执行需要 50 毫秒，加载 iframe1，iframe1 在 350 毫秒后加载并需要 100 毫秒才能执行）执行，加载另一个脚本，该脚本在 450 毫秒后加载并花费 30 毫秒 = iframe 1 在 350 毫秒后开始并在 480 毫秒后完成 - 对每个其他具有原点 X 的 iframe 重复。
使用 Node.js / Puppeteer 可以吗？如果可以，我可以使用哪个 functions/libs 来完成任务？
你有两个选择：
- 听取相应的事件，节省他们的时间并计算结果
- 使用现有库生成 HAR 文件
选项 1：监听事件
您可以在 puppeteer 中收听 request, response (or 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：HAR 文件
使用像puppeteer-har or chrome-har这样的库来创建页面加载过程的HAR文件（我自己没有使用过这些）。
引用什么是HAR文件 (source):
The HAR file format is an evolving standard and the information contained within it is both flexible and extensible. You can expect a HAR file to include a breakdown of timings including:
- How long it takes to fetch DNS information
- How long each object takes to be requested
- How long it takes to connect to the server
- How long it takes to transfer assets from the server to the browser of each object
The data is stored as a JSON document and extracting meaning from the low-level data is not always easy. But with practice a HAR file can quickly help you identify the key performance problems with a web page, letting you efficiently target your development efforts at areas of your site that will deliver the greatest results.
有多种现有工具可以可视化 HAR 文件（like this one) and you can even drop a HAR file into a Chrome instance 对其进行分析。
如果你想更加自动化这个过程，你也可以编写自己的脚本来解析HAR文件。因为它是一个 JSON 文件，所以这很容易做到。
Firefox 和 Chrome 提供下载已加载网站的 HAR 存档。这是一个包含所有请求、来源、目标和加载时间的 JSON 文件。
我不能把我的源代码放到网上，因为我没有版权，但是分析这个文本文件可以实现我需要的一切（使用递归循环来获得未知数量的发起者深度请求）。