您的位置：首页 > Web前端 > JavaScript

使用动态脚本元素加载js

2016-08-19 15:22 218 查看

大概了解

这种技术通过动态创建

<script>

元素来加载js，重点在于无论何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

使用动态脚本元素下载文件时，返回的代码通常会立即执行（Firefox和Opera除外，它们等待此前所有动态脚本节点执行完毕）。在该脚本文件包含其他脚本调用的接口时，就会带来问题，所以你必须跟踪并确保脚本下载完成并准备就绪。

代码

<!doctype html>
<head>
<script>
function loadJs(url,callback){
var script = document.createElement("script");
script.type = "text/javascript";

if(script.readyState){//IE触发事件，通常只检测两种值，loaded,complete
script.onreadystatechange == function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;//防止事件被处理两次
callback();
}
}
}else{//其他浏览器在<script>元素接受完成时触发load事件
script.onload = function() {
callback();
}
}

script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}

loadJs("test1.js",function() {
loadJs("test2.js",function() {
alert("all js are loaded");
})
})
</script>
</head>
<body>
<p>加载js</p>
</body>
</html>

上述代码会先加载test1.js，然后加载test2.js。如果多个js下载顺序很重要，更好的做法是将他们按正确的顺序合并成一个文件。

小结（核心）

减少js对性能的影响，有如下方法

</body>
闭合标签之前，将所有
<script>
放在页面底部，确保脚本执行前页面完成渲染

合并脚本，
<script>
越少，加载越快

使用动态脚本元素加载js

使用
<script>
标签的defer属性（仅适用于IE和Firefox3.5+）

使用xhr对象加载js并注入页面

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 动态脚本加载

相关文章推荐

新的分享

章节导航