javascript脚本加载
1、延迟脚本
脚本会被延迟到整个页面都解析完毕后再运行。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" defer="defer" src="test1.js"></script> 5 <script type="text/javascript" defer="defer" src="test2.js"></script> 6 </head> 7 <body> 8 </body> 9 </html>
其中包含的脚本要延迟到浏览器遇到</html>标签后再执行。html5规范中要求延迟脚本按照他们出现的先后顺序执行，但是，现实中并非这样，所以，我们编程时最好包含一个延迟脚本。为了更好的兼容浏览器，将延迟脚本放在页面底部仍然是最好的选择
2、异步脚本
这是html5属性，应该立即下载脚本，但不妨碍页面其他工作，建议异步脚本不要在页面加载期间修改DOM
<!DOCTYPE html> <html> <head> <script type="text/javascript" async src="test1.js"></script> <script type="text/javascript" async src="test2.js"></script> </head> <body> </body> </html>
标记为async的脚本不保证按照他们出现的先后顺序执行
3、 创建script，插入到DOM中，加载完毕后callBack
1 var script = document.createElement_x("script") 2 script.type = "text/javascript"; 3 if (script.readyState){ //IE 4 script.onreadystatechange = function(){ 5 if (script.readyState == "loaded" || 6 script.readyState == "complete"){ 7 script.onreadystatechange = null; 8 callback(); 9 } 10 }; 11 } else { //Others: Firefox, Safari, Chrome, and Opera 12 script.onload = function(){ 13 callback(); 14 }; 15 }
16 document.body.appendChild(script);
4、同步加载缺点
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的
