一、脚本位置
1、Script标签尽可能放到Body底部,以减少脚本文件下载对整个页面UI渲染的影响。
2、Script标签永远不要紧跟Link标签后面。
二、组织脚本
1、合并多个文件在一个Script中加载:
<script type="text/javascript" src="/scripts/jquery.min.js&/scripts/jquery.validation.js"></script>
三、无阻塞的脚本
1、无阻塞的脚本——在 Window对象的 Load事件触发后再下载脚本。
2、延迟的脚本加载——Script标签添加 Defer属性
<script type="text/javascript" src="/scripts/jquery.min.js" defer></script>
3、动态脚本加载
通过 JS动态创建 Script元素,但必须确保在页面加载完之后再执行。下面提供一个封装函数:
![](https://img-blog.csdnimg.cn/img_convert/c35980ac3bb3d8ccfe632e559b0bf1de.gif)
![](https://img-blog.csdnimg.cn/img_convert/f904dd983aedead1482ea1db2397391f.gif)
function loadScript(url, callback)
{
var script = document.createElement("script");
script.type="text/javascript";
if(script.readyState){ //IE
script.onreadystatechange = function(){
if(script.readyState=="loaded"|| script.readyState=="complete"){
script.onreadystatechange = null;
callback();
}
};
}
else{
script.onload=function(){
callback();
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
// Execute loadScript
loadScript("file1.js", function(){
loadScript("file2.js", function(){
loadScript("file3.js", function(){
alert("All files are loaded!");
});
});
});
4、XMLHttpRequest 脚本注入
跨域使用时有问题,不是我的菜。