[转载]Javascript 同步异步加载详解
http://handyxuefeng.blog.163.com/blog/static/4545217220131125022640/
<script src="http://yourdomain.com/script.js"></script>
2. 常见异步加载(Script DOM Element)
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
异步加载又叫非阻塞,浏览器在下载执行 js 同时,还会继续进行后续页面的处理。
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
3. onload 时的异步加载
(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();
4.异步加载的其它方法
- XHR Eval
- XHR Injection
- Script in Iframe
- Script Defer
- document.write Script Tag
- 还有一种方法是用 setTimeout 延迟0秒 与 其它方法组合。
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();
<script type="text/javascript">
/*
var ...
*/
</script>
<script src="file.js" defer></script>
<script src="file.js" async></script>
- type 属性在HTML 4中是必须的,在HTML5中是可选的。
- async 属性是HTML5中新增的。
- 个别属性(xml:space)在HTML5中不支持。
- 没有 async 属性,script 将立即获取(下载)并执行,然后才继续后面的处理,这期间阻塞了浏览器的后续处理。
- 如果有 async 属性,那么 script 将被异步下载并执行,同时浏览器继续后续的处理。
- HTML4中就有了defer属性,它提示浏览器这个 script 不会产生任何文档元素(没有document.write),因此浏览器会继续后续处理和渲染。
- 如果没有 async 属性 但是有 defer 属性,那么script 将在页面parse之后执行。
- 如果同时设置了二者,那么 defer 属性主要是为了让不支持 async 属性的老浏览器按照原来的 defer 方式处理,而不是同步方式。
<head>
<script src=“…”></script>
</head>
- 阻止了后续的下载;
- 在IE 6-7 中 script 是顺序下载的,而不是现在的 “并行下载、顺序执行” 的方式;
- 在下载和解析执行阶段阻止渲染(rendering);
...
<script src=“…”></script>
</body>
- 不阻止其它下载;
- 在IE 6-7 中 script 是顺序下载的;
- 在下载和解析执行阶段阻止渲染(rendering);
var se = document.createElement
('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
- 不阻止其它下载;
- 在所有浏览器中,script都是并行下载;
- 只在解析执行阶段阻止渲染(rendering);
var se = new Image();
se.onload = registerScript();
se.src = 'http://anydomain.com/A.js';
把下载 js 与 解析执行 js 分离出来
- 不阻止其它下载;
- 在所有浏览器中,script都是并行下载;
- 不阻止渲染(rendering)直到真正需要时;
[转载]Javascript 同步异步加载详解的更多相关文章
- Javascript 异步加载详解
Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...
- Javascript 异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- javascript异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- 转:web前端面试题合集 (Javascript相关)(js异步加载详解)
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- js模块加载详解
看着java中各种import加载,在回过头来看看javascript还在自己造轮子,写各种XX的模块加载框架,ECMASCRIPT6不知什么时候能够普及.不过DT归DT,该学的还是要学. 一 同步加 ...
- [转]Javascript实现图片的预加载详解
下面的函数实现了一个我们想要的最基本的图片预加载效果 function preloadimages(arr){ var newimages=[] var arr=(typeof arr!=" ...
- WEB容器启动——web.xml加载详解
最近在看spring的源码,关于web.xml文件在容器(Tomcat.JBOSS等)启动时加载顺序问题很混乱,通过搜集资料,得出以下的结论: 1.加载顺序与它们在 web.xml 文件中的先后顺序无 ...
随机推荐
- JPEG图像压缩算法流程详解
JPEG图像压缩算法流程详解 JPEG代表Joint Photographic Experts Group(联合图像专家小组).此团队创立于1986年,1992年发布了JPEG的标准而在1994年获得 ...
- Linux内核0.11 makefile文件说明
# # if you want the ram-disk device, define this to be the # size in blocks. # 如果要使用 RAM 就定义块的大小(注释掉 ...
- virsh 操作kvm虚拟机
#查看你的硬件是否支持虚拟化.命令: [root@VM_166_143 data]#egrep '(vmx|svm)' /proc/cpuinfo #安装基础包 [root@VM_166_143 da ...
- python调用Sikuliapi
Sikuli是由MIT(麻省理工学院) 研究团队发布的一种图形化编程技术(编程小白的福音),使用Sikuli你只需要会写HelloWorld这种最基本的编程技能即可,用Sikuli不需要去写出一行行复 ...
- Flexpod的开关机顺序
Flexpod = Cisco UCS + Cisco Nexus + Netapp (中文名叫做“融合基础架构”) 之前没有接触过这套系统,不太明白怎么个开关机的顺序,借公司停电的机会实际演练了一番 ...
- [转帖]中国SaaS死或生之一:“网红”CRM的大起大落
中国SaaS死或生之一:“网红”CRM的大起大落 http://www.cniteyes.com/archives/33709 文章摘要:从“大众情人”到被人遗弃,如何从CRM身上审视中国Sa ...
- PHP qq第三方登录,install时,报Not Found
最近在学习qq的第三方登录,先在慕课网中观看了相关视频,懂了原理. 然后进行操作时,在下载好SDK后,在../install/install.html中,配置了相关的openid,oppkey,cal ...
- Best Time to Buy and Sell Stock IV
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- 清理elasticsearch的索引
curl -XDELETE 'http://172.16.1.16:9200/logstash-2013.03.*' 清理掉了所有 3月份的索引文件,其中*是通配符 下面是主页上的详细介绍,其他部分可 ...
- springboot学习笔记-3 整合redis&mongodb
一.整合redis 1.1 建立实体类 @Entity @Table(name="user") public class User implements Serializable ...