Question

第一个问题：

关于动态脚本元素

var script  = document.createElement ("script");
script.type = "text/javascript";
script.src  = "script.js"; document.getElementsByTagName_r("head")[0].appendChild(script);

这项技术的重要之处在于无论发起下载的位置如何，都会下载并执行文件而不会阻止其他页面进程。您甚至可以将此代码放在＆lt; head＆gt;中一个文档而不影响页面的其余部分。

我想知道动态脚本元素与此代码之间的区别是什么

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

为什么动态脚本元素会在不阻止其他页面进程的情况下下载和执行文件而另一个会阻止？

第二个问题：

我知道页面下载和渲染必须停止并等待脚本完成才能继续，所以我将脚本放在底部＆lt; / body＆gt;之前

当我将脚本放在底部时，是否有必要使用XMLHttpRequest脚本注入或其他库，如lazyload？为什么？

有人知道吗？感谢

Answer 1

我想知道动态脚本元素和动态脚本元素之间的区别这个代码

您的代码段是动态脚本元素。它会动态添加到页面中，并不会在页面的HTML中本地存在。

页面HTML中存在的脚本标记在浏览器在解析页面期间遇到它们时按顺序执行。第一个脚本元素在任何其他脚本元素之前执行，然后是第二个，依此类推。因为页面HTML中的任何位置都可以嵌入脚本元素，并且它们必须按顺序执行，所以页面中的脚本元素必须先加载并在HTML的其余部分之后执行，然后才能将其解析并添加到页面中。

动态脚本元素为什么不下载和执行文件阻止其他页面进程，另一个会吗？

我不确定你在这里寻找什么样的答案。它以这种方式工作，因为这是浏览器/ HTML规范的设计者决定它将如何工作的方式。动态添加的脚本异步执行，与页面加载无关。存在于页面HTML中的脚本元素相对于其他脚本以及关于页面元素的加载以可预测的顺序执行。这对于某些类型的脚本（例如document.write()）非常重要，因此这些规范的设计者允许您具有可预测的顺序顺序（其本质上必须阻止直到完成）或异步加载。 defer和async属性还允许您更改页面HTML中存在的脚本标记的行为。因此，这样您就可以拥有最有利的行为。

是否有必要使用XMLHttpRequest脚本注入或其他当我把脚本放在底部时，像lazyload这样的库，为什么？

不，没有必要使用脚本注入。将脚本放在页面底部将允许其上方的页面元素显示给用户，而无需等待脚本执行（如果这是您的目标）。除了页面加载性能之外，还有许多其他原因可以动态加载脚本。例如，某些脚本仅在需要时根据页面将执行的操作加载。

有关脚本执行顺序的更多信息，包括脚本标记中defer和async属性的效果，请参阅此详细帖子：load and execute order of scripts

Answer 2

脚本标记的位置具有历史意义。在早期容易经常document.write()用于Dom可以改变这就是脚本块可以阻止渲染的原因。但是有一个属性说我不会改变Dom继续。

页面末尾的脚本标记与下载过程触发的时间相关，因此可以优化加载过程。

lazyload libs有助于你在某些运行时条件下只需要一些其他的框架/库。这完全取决于页面加载时间以及页面对用户交互的反应速度。

javascript加载问题

2 个答案: