一, 加载和执行
1.0脚本位置,由于 javaScript的阻塞特性,脚本位置可以放在<body>标签底部 ,以尽量减少整个页面下载的影响。
<html>
<head>
<title>下载的js文件 尽可能放在body标签底部</title>
<body>
<p>hello world~</p>
<--放在这里-->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</head>
</html>
1.1 当然<script>标签初始下载时会阻塞页面渲染,合并脚本,减少<script>标签,无论外链文件还是内嵌文件都是如此。
<html>
<head>
<title>下载的js文件 尽可能放在body标签底部</title>
<body>
<p>hello world~</p>
<--可用雅虎提供的合并处理器,以供通过他们的内容传输网络(CDN)来分发
Yahoo!User Interface(YUI)Library文件 可以使用一个url来获取任意数量的YUI文件 -->
<script type="text/javascript"
src="http//yui.yahooapis.com/file1.js&file2.js&file3.js"></script>
</body>
</head>
</html>
1.2 无阻塞的脚本的秘笈在于,在页面加载完后下载JavaScript代码。用专业术语来说,这意味着在window对象的load事件触发后再下载脚本。
1.3 延迟脚本,Html4 为<script>标签定义了一个扩展属性:defer ,目标浏览器支持的话,也是一个有用的解决脚本下载阻塞的方案,带有defer属性的JavaScript文件下载的时,它不会阻塞浏览器的其他进程,因此这类文件可以与页面中的其他资源并行下载。
<html>
<head>
<title>script defer example</title>
<body>
<p>hello world~</p>
<script defer>alert("defer")</script>
<script>alert("script")</script>
<script>
window.onload=function(){
alert("load");
}
</script>
<p>支持defer的浏览器 打印结果顺序为:"script", "defer" ,"load"
注意!!! 带有 defer的script标签 是在onload执行之前调用 而不是跟着第二个后面</p>
</body>
</head>
</html>
1.3动态脚本元素,使用动态创建的<script>元素来下载并执行代码。
//下面的函数封装来标准及IE特有的实现方法
//loader.js
function loadScript(url,callback){
var script = document.createElement("script")
script.type = "text/javascript";
if(script.readyState){//IE
script.onreadstatechange = function(){
if(script.readyState == "loaded"||script.readyState == "complete"){
script.onreadychange = null;
callback();
}
}
}else{//other 浏览器
script.onload = function(){
callback();
};
}
script.src=url;
document.getElemenByTagName("head")[0].appendChild(script);
}
//使用 单文件
loadScript("file1.js",function(){
alert("File is loaded!!!")
})
//使用 多文件
loadScript("file1.js",function(){
loadScript("file2.js",function(){
alert("All File is loaded!!!")
})
})
1.4 XMLHttpRequest 脚本注入
var xhr = new XMLHttpRequest();
xhr.open("get","file1.js",true);
xhr.onreadystatechange=function(){
if(xhr.readystate == 4){
if(xhr.states >= 200 && xhr.states <300 || xhr.states == 304){
var script = document.createElement("script");
script.type = "text/javascript";
script.text = xhr.responeText;
document.body.appendChild(script);
}
}
}
xhr.send(null);
1.5向页面添加大量的JavaScript代码只需要两步1.添加动态加载所需的代码 2.加载初始化页面所需要的剩下代码
//放在<body>标签闭合之前 loader.js 上面1.3处代码
<script type="text/javascript" src="loader.js"></script> //步骤一
<script type="text/javascript" >//步骤二
loadScript("the-rest.js",funciton(){
application.init();
})
</script>