javascript js 文件延迟加载方法

js一开始不想加载所有js文件，来提高页面的响应速度，下面介绍几种异步加载js文件的方法

1。使用jquery getScript方法加载javascript 文件

$.getScript("test.js", function(){
  //alert("Script loaded and executed.");
});

第一个参数：待载入 JS 文件地址

第二个参数：成功载入后回调函数

2.html5中异步加载js的方法，更加简便

目前firefox和chrome都是实现了script标签的async属性.这个新的属性能让我们以一种更 简单的方式防止浏览器阻塞

async

<script async src="myscript.js" onload=""></script>

defer

script标签也有个defer属性,目前所有浏览器都已实现, 在firefox和chrome的早期版本没有实现此属性,IE从一开始就支持此属性.

<script defer src="myscript.js" onload=""></script>

async 和 defer的区别是什么

带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理, 在script下载完成后调用,用于做一些和此script相关的初始化工作.它们的不同之处在于script执行的 时机.带有async的script,一旦下载完成就开始执行(当然是在window的onload之前).这意味着这些script 可能不会按它们出现在页面中的顺序来执行,如果你的脚本互相依赖并和执行顺序相关,就有很大的可能出问题, 例如变量或者函数未定义之类的错误. 而对于带有defer的script,它们会确保按在页面中出现的顺序来执行,它们执行的时机是在页面解析完后,但在 DOMContentLoaded事件之前.

defer和async对浏览器的支持
目前来看,最新版本的firefox和chrome(还有同样webkit内核的safari)都已支持这两个属性,也都支持script的load事件. IE的话对于defer是一直都支持的,async属性IE6~9都没有支持,onload是在IE9中新加入的属性.