gpt4 book ai didi

javascript - 脚本 block 的js执行机制

转载 作者:行者123 更新时间:2023-11-28 02:09:20 25 4
gpt4 key购买 nike

我正在学习使用闭包库,Google 提醒我们小心使用该库:

这不起作用:

<script src="closure-library/closure/goog/base.js"></script>
<script>
// DON'T DO THIS.
goog.require('goog.dom');
var newHeader = goog.dom.createDom('h1');
</script>

我知道为什么,因为goog.require将添加相关脚本goog.dom动态地,它将执行 goog.dom.xx立即同时goog.dom脚本还没有下载,那么就会抛出错误。

但是我想知道为什么会这样:

<script src="closure-library/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
</script>
<script>
var newHeader = goog.dom.createDom('h1');
</script>

goog.dom将在 goog.require 之后立即调用,但为什么它不抛出错误。

看来这是由于这两段代码位于两个script造成的。 block 。

所以我想知道是否有人可以解释不同的JavaScript执行机制script block 和不同位置(头部或 body 内)?

<小时/>

罗曼的回答更新:

the parser sees this:

<script src="closure-library/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
</script>
<script src="closure-library/closure/goog/dom.js"></script>
<script>
var newHeader = goog.dom.createDom('h1');
</script>

尽管 <script src="closure-library/closure/goog/dom.js"></script>添加在 var newHeader = goog.dom.createDom.... 之前,dom.js是要下载的,goog.dom.create....吗?将在 dom.js 之后执行是否已完全下载并执行?但我听说js执行是异步的。我错过了什么吗?

最佳答案

从“入门”页面:

The goog.require() call adds the code for goog.dom.createDom() immediately before the script tag containing the line var newHeader = goog.dom.createDom('h1').

脚本加载器通过将脚本元素插入到 DOM 中来加载脚本。它将它们插入在“当前脚本元素”之后。这就是为什么在使用动态加载脚本的功能之前需要“关闭”脚本元素的原因。

如果这是您的源 html:

<script src="closure-library/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
</script>
<script>
var newHeader = goog.dom.createDom('h1');
</script>

解析器看到这个:

<script src="closure-library/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
</script>
<script src="closure-library/closure/goog/dom.js"></script>
<script>
var newHeader = goog.dom.createDom('h1');
</script>

但是如果你的来源是这样的:

<script src="closure-library/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
var newHeader = goog.dom.createDom('h1');
</script>

解析器看到这个:

<script src="closure-library/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
var newHeader = goog.dom.createDom('h1');
</script>
<script src="closure-library/closure/goog/dom.js"></script>

这当然行不通。

脚本执行是同步的。下载带有 script 元素的脚本会阻止脚本的执行(以及页面的呈现)。这就是为什么您不应该将不必要的脚本元素放入 <head> 中。 。这会阻止解析器,从而阻止后续所有内容(也称为您的文档)的渲染,直到下载脚本为止。

在 HTML5 中,有一个属性 script tags ( async )声明浏览器不应等待脚本下载。但默认行为是等待。

关于javascript - 脚本 block 的js执行机制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17337969/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com