前一段时间看一本《高性能网站建设进阶指南》这本书，提到页面中的js并不是同步加载的，这就会导致如果几个js文件是互为牵制的话，可能会造成有未读取到的js没有及时生成元素而报错的问题，而今天也是在网上看到了一篇叫做js同步加载最佳实践的文章，提出了一个能把多个js文件实现同步加载的最佳的办法。
1.方法思路：
a.在页面底部添加一个叫做first的js文件，这个文件里有一个loadScript的方法，这个方法有两个参数一个是url，另一个是返回函数，而这个loadjs的方法则是通过XMLHttpRequest对象readyState的五个状态来为页面添加含有src属性的script代码。
b.在页面中调用这个first.js文件，并在页面底部调用这个方法，需要添加几个js就调用几次。
2.方法代码：
a.编写first.js的loadScript的方法
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 { //Others script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }
b.在页面内调用这个脚本文件，并执行loadScript的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>loading效果</title> </head> <body> <mce:script type="text/javascript" src="js/first.js" mce_src="js/first.js"></mce:script> <mce:script type="text/javascript"><!-- loadScript("js/jquery-1.4.2.min.js", function(){ //初始化你的代码 }) loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js", function(){ //初始化你的代码 }); loadScript("http://partner.googleadservices.com/gampad/google_ads2.js", function(){ //初始化你的代码 }); // --></mce:script> </body> </html>
3.直接把js写在head之间和同步加载的效果对比
同步加载js效果：
直接把js写在head之间效果：
注：
1.关于这篇加载 Javascript 最佳实践请参考这个地址《加载 Javascript 最佳实践》。
2.loadScript用到的XMLHttpRequest的一些readyStae状态的知识，请参考为之漫笔（李松峰）先生blog的一篇文章，有详细的讲解
《readyState的五种状态详解》