个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在阅读 this article关于 document.write ，它指出:
Sometimes the scripts are added by the document.write. Don’t use this method, as the rest of the page will await for script loading and execution.
If the remote server hands up, the page will may take too much to load.
我不太明白使用 document.write 之间的区别和 DOM API 在阻塞方面。我在 Chrome 中使用以下 <head> 运行了一个简单的实验 block :
1) 使用 document.write :
<head>
<script src="index-1.js"></script>
<script>
var url = 'index-2.js'
document.write('<script src="'+url+'"></scr'+'ipt>');
</script>
<link rel="stylesheet" href="index.css">
</head>
2) 使用 DOM API :
<head>
<script src="index-1.js"></script>
<script>
var script = document.createElement('script');
script.src = 'index-2.js';
document.documentElement.firstChild.appendChild(script);
</script>
<link rel="stylesheet" href="index.css">
</head>
在这两种情况下，Chrome 都会等待脚本 index-1.js在加载前执行 index-2.js .这是图片:
所以我很困惑。我做错了或理解错了吗？
编辑:
如果我在链接标签后添加第三个脚本标签
<link rel="stylesheet" href="index.css">
<script src="index-3.js"></script>
然后我得到以下结果:
最佳答案
在第一个代码示例中，浏览器等待index-2.js。在运行任何进一步的脚本之前和显示您的页面之前加载和执行。据说这是一个"blocking"加载。在加载脚本之前，它会阻止解析器的进一步处理。
在第二个代码示例中(插入了 .appendChild() 的脚本)，浏览器不会等待 index-2.js。在继续其他脚本或显示您的页面之前加载或运行。这里index-2.js异步加载，同时继续处理页面中的其他内容。据说这是一个"non-blocking"加载。它不会在加载时阻止浏览器的进一步进展。一旦它在后台加载完动态脚本，浏览器就可以随时执行它(可能是在它目前无事可做的时候)。当它实际执行时，它会因浏览器而异，并且不受规范约束。
因此，时间与index-1.js无关.那是一个同步脚本标签。它在两个例子中都是阻塞的。浏览器不会处理过去的 <script>标签。
区别在于插入 index-2.js 后会发生什么.
执行顺序是由规范定义的，因此您必须关注或衡量它。这取决于浏览器何时真正决定通过网络加载脚本，因此您不能使用加载条形图来查看执行情况。显然，它不能在解析器知道脚本之前开始加载它，它必须在需要执行它之前加载它，但在此期间，浏览器可以使用自己的逻辑来决定何时加载它。由于每个浏览器对其尝试从一台主机下载的同时资源的数量有限制，因此它决定下载脚本的确切时间很容易因浏览器而异。
并且，请记住，使用 .appendChild() 插入的非阻塞脚本可以在浏览器需要的任何时间运行。它几乎可以立即运行(如果浏览器在其缓存中有该脚本并且因为它正在等待其他资源而无事可做)或者它可以在整个加载过程快结束时运行它。当您使用 .appendChild() 插入它时，您是在指示浏览器不要阻止当前页面的解析和加载来运行此脚本，但是只要浏览器具有该脚本的内容，它就可以随时运行它。
当您使用 document.write() 插入它时，您指示浏览器在当前脚本标记运行完毕后立即运行它，这显然意味着它也必须立即加载。
如果你把这个:
<script src="index-3.js"></script>
就在<link>之前标签，那么你的时间轴就会像你看到的那样讲述整个故事 index-3.js在第二个代码示例中运行得更快，因为它不会等待 index-2.js加载并运行。事实上，如果你把 console.log()每个 index-1.js 中的条目, index-2.js和 index-3.js , 然后你可以看到执行顺序的不同。
仅供引用，您还可以使用 async和 defer <script> 中的属性用于制作内联的标签 <script>标签是非阻塞的。更多关于这些选项的讨论:load and execute order of scripts .
关于javascript - `document.write` 和 DOM API 在阻止后续请求方面没有区别 - 为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36195762/
26
4
0
平时很少在jquery中用到this。查看代码时发现用到了，就调试出this的值，心想原来如此。还是挺有用的。这里总结一下this与$(this)的区别和使用。 $(this)生成的是什么？
使用单例类和应用程序范围的托管 bean 来保存应用程序数据有区别吗？ 我需要查找某些 JNDI 资源，例如远程 bean 接口(interface)，因此我为自己编写了一个单例来缓存我的引用并且只允
如果您仔细查看包含的图片，您会注意到您可以使用 Eclipse IDE 重构 Groovy 代码并将方法转换为闭包，反之亦然。那么，闭包到底是什么，它与方法有什么不同呢？有人可以举一个使用闭包的好例子
vagrant box repackage有什么区别( docs ) 和 vagrant package ( docs )？ 我意识到 vagrant package仅适用于 VirtualBox 提
我想看看是否有人可以解释为什么以下代码适用于 valueOf 但不适用于其他代码。 import java.math.BigDecimal; public class Change { publ
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicates: What is Closures/Lambda in PHP or Javascript in layman te
This question already has answers here: Vagrant, Docker, Puppet, Chef (3个答案) 2年前关闭。 docker和chef有什么共同
以下代码在95％的机器上产生相同的输出，但是在几台机器上却有所不同。在 Debug模式下，输出: Changing from New to Fin OK 但在 Release模式下: Changing
////Creating Object var Obj; // init Object Obj= {}; 它们之间有什么区别两个？ 有没有可能把它变成一个单行？ 这样使用有什么好处吗？
我想找出定时器服务之间的区别。我应该使用哪个以及何时使用。我正在使用 Jboss 应用服务器。 1) java.ejb.Schedule。 @Schedule注解或配置自xml。 2) javax.e
我发现在 C++ 中可以通过三种不同的方式将对象传递给函数。假设我的类(class)是这样的: class Test { int i; public: Test(int x);
有什么区别。 public class Test { public static void main(String args[]) { String toBeCast = "c
如果我有一列，设置为主索引，设置为INT。 如果我不将其设置为自动递增，而只是将唯一的随机整数插入其中，与自动递增相比，这是否会减慢 future 的查询速度？ 如果我在主索引和唯一索引为 INT 的
这两种日期格式有什么区别。第一个给出实际时间，第二个给出时间购买添加时区偏移值。 NSDateFormatter * dateFormatter = [[NSDateFormatter alloc]
如果有一个函数，请说foo: function foo() { console.log('bar'); } 那么在 JavaScript 中，从另一个函数调用一个函数有什么区别，如下所示: f
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
代码是什么: class Time { private: int hours; int minutes; int seconds; pu
我知道这是非常基本的，但有人介意解释一下这两个数组声明之间的区别吗: #include array myints; ...和: int myints[5]; ...以及为什么 myints.size
我学会了如何根据 http://reference.sitepoint.com/css/specificity 计算 css 特异性但是，基于this reference，我不明白伪类(来自c)和伪元
为什么在运行 2) 时会出现额外的空行？对我来说 1 就像 2。那么为什么 2) 中的额外行？ 1) export p1=$(cd $(dirname $0) && pwd) #
我是一名优秀的程序员,十分优秀！