任务的script evaluation environment settings object set包含多个environment settings object的场景及示例解析

Great question—this part of the WHATWG spec is definitely tricky to wrap your head around. Let's break down when this collection ends up with multiple environment settings objects, and walk through your example to see it in action.

Short Answer #

A task's script evaluation environment settings object set will include multiple entries when the task's execution indirectly re-enters script execution from a different browsing context (like a popup window, iframe, or auxiliary tab) without the original task completing. This happens when script in one context triggers an event that runs script in another context, all within the bounds of a single macro task.

Why This Happens #

Per the WHATWG spec, these re-entrant calls don't start a new task—they run synchronously within the existing task. Each time script runs in a new browsing context, its corresponding environment settings object (which holds context-specific details like the global object, security policies, and associated document) gets added to the task's collection. This collection is later used to accurately report long tasks across all contexts involved in the task's execution.

Example Walkthrough #

Your proposed example is spot-on for demonstrating this scenario. Let's unpack it step by step:

setTimeout(() => {
 console.log("task has been started");
 const auxiliary = window.open("about:blank");
 /// 或同源地址
 auxiliary.document.body.onclick = () => {
 auxiliary.document.writeln(`<script>const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { console.log(entry); } }); observer.observe({entryTypes: ['longtask']});</script>`);
 auxiliary.document.writeln("Here we go");
 auxiliary.document.body.onclick = "";
 };
 auxiliary.document.body.click();
 const start = performance.now();
 while(performance.now() < start + 3000);
 console.log("heavy computation in the entry script is over");
})

What's happening here: #

• Initial macro task: The setTimeout callback starts a new macro task tied to the main window's environment settings object.
• Create auxiliary context: window.open("about:blank") creates a new browsing context (popup) with its own distinct environment settings object.
• Trigger cross-context script: We bind a click handler to the popup's body, then immediately call click() on it. This runs the handler synchronously within the original macro task—adding the popup's environment settings object to the task's collection.
• Long task execution: The 3-second blocking loop runs in the main context. Since this is part of the same macro task that also triggered script in the popup, the task's script evaluation environment settings object set now contains both the main window and popup's objects.
• Long task reporting: The PerformanceObserver in the popup will catch this long task, and the reported entry will reflect that multiple contexts were involved in the task's execution.

Key Takeaway #

Any time a single macro task causes script to run in more than one browsing context (via synchronous event triggers, nested script execution across contexts, etc.), all corresponding environment settings objects get added to the task's collection. This ensures long task reports account for all contexts affected by the long-running operation.

内容的提问来源于stack exchange，提问作者MaximPro