js异步加载的三种解决方案


Posted in Javascript onMarch 04, 2013

默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。

(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); 
}
Javascript 相关文章推荐
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
js消除图片小游戏代码
Dec 11 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 #Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 #Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 #Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 #Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 #Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 #Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 #Javascript
You might like
PHPTree――php快速生成无限级分类
2018/03/30 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
JS前端笔试题分析
2016/12/19 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python 的描述符 descriptor详解
2016/02/27 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python对wav文件的重采样实例
2020/02/25 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
关于建议书的格式范文
2014/05/20 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
2019年大学推荐信
2019/06/24 职场文书
python实现进度条的多种实现
2021/04/29 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android