掌握JavaScript技巧:实现非阻塞动态加载

发表时间: 2023-06-13 20:55
  • 将所有<script>标签放置在页面底部,紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析
  • 将脚本成组打包。页面的<script>标签越少,页面的加载速度就越快,响应也更迅速。不论外部脚本文件还是内联代码都是如此。
  • 有几种方法可以使用非阻塞方式下载Javascript:为<script>标签添加defer属性动态创建<script>元素,用它下载并执行代码

<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 { //Others
script.onload = function(){
   callback();
};
}
script.src = url;

document.getElementsByTagName("head")[0].appendChild(script);

}

loadScript("the-rest.js", function(){
   Application.init();
});
</script>