javascript - Javascript 引擎如何在浏览器中执行 Javascript？

Question

提问不是为了解决问题，提问是为了更好地理解系统

专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由​​ javascript 引擎执行。由于没有看过Engine的源码，所以有以下几点疑问，

让我们假设我正在从远程服务器加载几个文件，即 FILE_1.js 和 FILE_2.js。FILE_2.js 中的代码需要 FILE_1.js 中的一些代码。所以我包含了如下文件，

<script type="text/javascript" src="FILE_1.js" ></script>
<script type="text/javascript" src="FILE_2.js" ></script>

希望我已经完成了 Javascript 引擎的要求。不幸的是，我在 FILE_1.js 中编写了 5000KB 的代码，但是我在 FILE_2.js 中有 5KB 的代码。由于服务器是多线程的，FILE_2.js 肯定会在 FILE_1.js 完成之前加载到我的浏览器中。

javascript 引擎如何处理这个？

如果将代码从 FILE_2.js 移动到 inline-script 标签如下，javascript 引擎采取什么措施来管理这种依赖性？

<script type="text/javascript" src="FILE_1.js" ></script>
<script type="text/javascript" >
// Dependent code goes here
</script>

注意:我不期待单字答案单线程。我只想深入了解谁在管理浏览器或 JavaScript 引擎或普通人发出的请求？如果请求/响应由普通人处理，那么 javascript 引擎如何意识到这一点？

Answer 1

当我发布关于代码行为的答案时，我总是喜欢去两个地方:

1. 规范
2. 实现

规范:

DOM API 明确指定脚本必须按顺序执行:

If the element has a src attribute, does not have an async attribute, and does not have the "force-async" flag setThe element must be added to the end of the list of scripts that will execute in order as soon as possible associated with the Document of the script element at the time the prepare a script algorithm started.

来自 4.1 Scripting .请先检查此规则的异常(exception)列表 - 具有 defer 或 async 属性。这在 4.12.1.15 中有详细说明。 .

想象一下，这是有道理的:

 //FILE_1.js
     var trololo = "Unicorn";
     ....
     // 1 million lines later
     trololo = "unicorn";
     var message = "Hello World";
//FILE_2.js
     alert(message); // if file 1 doesn't execute first, this throws a reference error.

通常最好使用模块加载器(这会延迟脚本插入和执行，并会为您正确管理依赖项)。

目前，最好的方法是使用类似 Browserify 的方法。或 RequireJS .将来，我们将能够使用 ECMAScript 6 模块。

实现:

好吧，你提到了它，我无法抗拒。所以，如果我们检查 Chromium blink来源(在 WebKit 中仍然类似):

bool ScriptLoader::prepareScript(const TextPosition& scriptStartPosition, 
                                    LegacyTypeSupport supportLegacyTypes)
    {
    .....
    } else if (client->hasSourceAttribute() && // has src attribute
              !client->asyncAttributeValue() &&// and no `async` or `defer`
              !m_forceAsync                    // and it was not otherwise forced                                   
              ) { // - woah, this is just like the spec
   m_willExecuteInOrder = true; // tell it to execute in order
   contextDocument->scriptRunner()->queueScriptForExecution(this, 
                                                            m_resource,
                                      ScriptRunner::IN_ORDER_EXECUTION);

太好了，所以我们可以在源代码中看到它按解析顺序添加了它们 - 就像规范所说的那样。

让我们看看如何 script runner does :

void ScriptRunner::queueScriptForExecution(ScriptLoader* scriptLoader,
                                          ResourcePtr<ScriptResource> resource,
                                          ExecutionType executionType){
     .....
     // Adds it in the order of execution, as we can see, this just 
     // adds it to a queue
     case IN_ORDER_EXECUTION:
        m_scriptsToExecuteInOrder.append(PendingScript(element, resource.get()));
        break;
     }

并且，使用计时器，它会在准备就绪时一个一个地触发它们(或者立即，如果没有任何待处理的情况):

 void ScriptRunner::timerFired(Timer<ScriptRunner>* timer)
 {
 ...
    scripts.swap(m_scriptsToExecuteSoon);
    for (size_t i = 0; i < size; ++i) {
    ....
        //fire!
        toScriptLoaderIfPossible(element.get())->execute(resource);
        m_document->decrementLoadEventDelayCount();
    }