javascript加载问题

2019年8月4日 182次阅读

第一个问题：

关于动态脚本元素

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

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

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

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

为什么动态脚本元素下载并执行文件而不阻止其他页面进程,另一个将？

第二个问题：

我知道页面下载和渲染必须停止并等待脚本完成才能继续,因此我将脚本放在底部< / body>之前

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

谁知道这个？谢谢

最佳答案

I want to know what is difference between Dynamic Script Elements and
this codes

您的代码段是动态脚本元素.它会动态添加到页面中,并且本身不会出现在页面的HTML中.

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

Why does Dynamic Script Elements download and execute file without
blocking other page processes and the other will?

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

Is it necessary to use XMLHttpRequest Script Injection or other
libraries like lazyload when I put scripts at the bottom, and why?

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

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

点赞