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 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
angular.js分页代码的实例
Jul 27 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
js实现碰撞检测
Jan 29 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
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
php生成随机颜色的方法
2014/11/13 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
办公室秘书自我鉴定
2014/01/18 职场文书
入党自我鉴定
2014/03/25 职场文书
门店业绩提升方案
2014/06/08 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
中秋节晚会开场白
2015/05/29 职场文书
使用pytorch实现线性回归
2021/04/11 Python
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
TensorFlow的自动求导原理分析
2021/05/26 Python