首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议176:推荐最优化非阻塞模式

关灯直达底部

如果向页面加载大量JavaScript,则推荐的方法可分为两个步骤:

第1步,动态加载JavaScript所需的代码。

第2步,加载页面初始化所需的除JavaScript之外的部分。这部分代码要尽量小,可能只包含loadScript函数,下载和运行非常快,不会对页面造成很大干扰。当初始代码准备好之后,用它来加载其余的JavaScript。


<script type="text/javascript"src="loader.js"></script>

<script type="text/javascript">

loadScript("the-rest.js",function{

Application.init;

});

</script>


在上面代码中,将脚本放置在body的关闭标签</body>之前。这样做有几点好处:首先,可以确保JavaScript运行不会影响页面其他部分显示;其次,当第二部分JavaScript文件完成下载时,所有应用程序所必须的DOM已经创建好了,并且做好被访问的准备,避免使用额外的事件处理来得知页面是否已经准备好了。

向页面加载大量JavaScript的另一个方法是直接将loadScript函数嵌入在页面中,这可以避免另一次HTTP请求,例如:


<script type="text/javascript">

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_r("head")[0].appendChild(script);

}

loadScript("the-rest.js",function{

Application.init;

});

</script>