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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
优雅地使用loading(推荐)
Apr 20 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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
Symfony2联合查询实现方法
2016/03/18 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
es6函数中的作用域实例分析
2020/04/18 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
VSCode 配置uni-app的方法
2020/07/11 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python实现批量下载文件
2015/05/17 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python把转列表为集合的方法
2019/06/28 Python
Python整数对象实现原理详解
2019/07/01 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
超市促销实习自我鉴定
2013/09/23 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
家长学校教学计划
2015/01/19 职场文书
社会实践心得体会范文
2016/01/14 职场文书
高三数学教学反思
2016/02/18 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python