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 相关文章推荐
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
一个网马的tips实现分析
2010/11/28 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
fastadmin中调用js的方法
2019/05/14 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
OpenCV实现人脸识别
2017/04/07 Python
简单的python后台管理程序
2017/04/13 Python
python 数据的清理行为实例详解
2017/07/12 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python实现简单井字棋小游戏
2020/03/05 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
python 获取字典键值对的实现
2020/11/12 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
25道Java面试题集合
2013/05/21 面试题
2015年汽车销售工作总结
2015/04/07 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
Java 死锁解决方案
2022/05/11 Java/Android