异步加载js 三种实现方案
2013-03-04 14:45
260 查看
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。
(1) defer,只支持IE
有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。
如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。
示例:
(2) async:
示例:
注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
注释:有多种执行外部脚本的方法:
如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
(3) 创建script,插入到DOM中,加载完毕后callBack,见代码:
(1) defer,只支持IE
defer属性的定义和用法(我摘自w3school网站)
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。
如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。
示例:
<script type="text/javascript" defer="defer"> alert(document.getElementById("p1").firstChild.nodeValue); </script>
(2) async:
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用,则会异步执行。示例:
<script type="text/javascript" src="demo_async.js" async="async"></script>
注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
注释:有多种执行外部脚本的方法:
如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
(3) 创建script,插入到DOM中,加载完毕后callBack,见代码:
function loadScript(url, callback){ var script = document.createElement_x("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: Firefox, Safari, Chrome, and Opera script.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script); }
相关文章推荐
- js异步加载三种方案
- JS异步加载的三种实现方式
- 终于解决:在客户端和服务端都用dojo Loader来实现异步加载后,Node.js的全局变量__dirname无法使用
- 异步加载数据的三种实现
- js面试题:实现对象深度克隆(deepClone)的三种方案
- js异步加载的三种解决方案
- AngularJS+RequireJs实现动态加载JS和页面的方案研究
- JS异步加载的三种方式
- 详解JS异步加载的三种方式
- 现代浏览器JS异步加载方案
- 原生js实现ajax异步加载
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- 异步加载js文件并执行js方法:实现异步处理网页的复杂效果(转)
- JS异步加载的三种方式
- jquery.lazyload.js 插件实现图片异步延迟加载
- asp.net 使用js分页实现异步加载数据
- lazyload.js实现图片异步延迟加载
- js异步加载的三种解决方案
- 异步加载数据的三种实现
- asp.net 使用js分页实现异步加载数据