jQuery getScript()vs document.createElement(’script’)
假设这两种方法都正确加载脚本,并且在使用脚本之前等待适当的时间(和/或使用回调),这些方法之间的主要区别是什么。
注意:我理解第一个使用jQuery(这是一个更大的下载等)。 我真正感兴趣的是这些方法的后效。 是否将脚本放在与另一个不同的范围内? 等等。
jQuery的:
function loadScript() { $.getScript('http://www.mydomain/myscript.js'); }
附加到身体:
function loadScript() { var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'http://www.mydomain/myscript.js'; script.async = true; document.body.appendChild(script); }
附加头:
function loadScript() { var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'http://www.mydomain/myscript.js'; script.async = true; head.appendChild(script); }
如果存在,jQuery会将script
元素附加到head
,否则附加到document
元素。 在引擎盖下,代码类似 。 最终结果将是相同的:两种方法都在全局范围内执行新代码。
Jquery方法的文档说:
使用GET HTTP请求从服务器加载JavaScript文件,然后执行它。
这意味着导入的javascript将在成功加载后调用straigt。
附加到头部:这意味着浏览器将脚本标记添加为最后一个子项并执行内容(如果在head标记的末尾添加标记manuelly,则相同)。 附加到正文:这意味着浏览器将脚本标记添加为正文标记的最后一个子标记并执行该内容(如果在正文标记的末尾添加标记manuelly,则相同)。
值得一提的是,jQuery的getScript
函数默认禁用缓存,这意味着浏览器会在每次请求页面时下载脚本(请参阅此处的上一个答案)。 另一方面,您的loadScript
函数应该利用缓存。