1、定时器都是异步操作
2、事件绑定都是异步操作
3、AJAX中一般我们都采取异步操作(也可以同步)
4、回调函数可以理解为异步(不是严谨的异步操作)
异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。方法一:也叫Script DOM Element
(function(){
var scriptEle = document.createElement("script")
scriptEle.type = "text/javasctipt"
scriptEle.async = true
scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"
var x = document.getElementsByTagName("head")[0]
x.insertBefore(scriptEle, x.firstChild)
})()
<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
(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)
})()
但是这种加载方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。
方法二:onload时的异步加载
(function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad)
}else{
window.addEventListener("load", asyncLoad)
}
var asyncLoad = 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)
}
)()
这种方法只是把插入script的方法放在一个函数里面,然后放在window的onload方法里面执行,这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成,页面中的dom元素可用,但是页面中的图片,视频,音频等资源未加载完,作用同jQuery中的ready事件;后者的区别在于页面所有资源全部加载完毕。
方法三:其他方法
由于JavaScript的动态性,还有很多异步加载方法: XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。
XHR Injection(XHR 注入):通过XMLHttpRequest来获取javascript,然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。
//获取XMLHttpRequest对象,考虑兼容性。
var getXmlHttp = function(){
var obj
if (window.XMLHttpRequest)
obj = new XMLHttpRequest()
else
obj = new ActiveXObject("Microsoft.XMLHTTP")
return obj
}
//采用Http请求get方式open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp()
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true)
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 &&xmlHttp.status == 200){
var script = document.createElement("script")
script.text = xmlHttp.responseText
document.getElementsByTagName("head")[0].appendChild(script)
}
}
XHR Eval:与XHR Injection对responseText的执行方式不同,直接把responseText放在eval()函数里面执行。
//获取XMLHttpRequest对象,考虑兼容性。
var getXmlHttp = function(){
var obj
if (window.XMLHttpRequest)
obj = new XMLHttpRequest()
else
obj = new ActiveXObject("Microsoft.XMLHTTP")
return obj
}
//采用Http请求get方式open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp()
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true)
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 &&xmlHttp.status == 200){
eval(xmlHttp.responseText)
//alert($)//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题,应该是还没加载进来
$("#btn1").click(function(){
alert($(this).text())
})
}
}
Script In Irame:在父窗口插入一个iframe元素,然后再iframe中执行加载JS的操作。
var insertJS = function(){alert(2)}
var iframe = document.createElement("iframe")
document.body.appendChild(iframe)
var doc = iframe.contentWindow.document//获取iframe中的window要用contentWindow属性。
doc.open()
doc.write("<script>var insertJS = function(){}<\/script><body onload='insertJS()'></body>")
doc.close()
GMail Mobile:业内JS内容被注释,所以不会执行,在需要的时候,获取script中的text内容去掉注释,调用eval()执行。
<script type="text/javascript">
/*
var ...
*/
</script>
HTML5新属性:async和defer属性
defer属性:IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注:所有的defer脚本必须保证按顺序执行的。
<script type="text/javascript" defer></script>
async属性:HTML5新属性。脚本将在下载后尽快执行,作用同defer,但是不能保证脚本按顺序执行。他们将在onload事件之前完成。
<script type="text/javascript" defer></script>
Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer,这样IE 4之后的所有IE都支持异步加载。
没有async属性,script将立即获取(下载)并执行,期间阻塞了浏览器的后续处理。如果有async属性,那么script将被异步下载并执行,同时浏览器继续后续的处理。
总结: 对于支持HTML5的浏览器,实现JS的异步加载只需要在script元素中加上async属性,为了兼容老版本的IE还需加上defer属性;对于不支持HTML5的浏览器(IE可以用defer实现),可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码,你可以把它放在匿名函数中执行,也可以在onload中执行,也可以通过XHR注入实现,也可以创建一个iframe元素,然后在iframe中执行插入JS代码。
var xmlHttpfunction createXMLHttpRequest(){
//Mozilla 浏览器(将XMLHttpRequest对象作为本地浏览器对象来创建)
if(window.XMLHttpRequest){ //Mozilla 浏览器
xmlHttp = new XMLHttpRequest()
}else if(window.ActiveXObject) { //IE浏览器
//IE浏览器(将XMLHttpRequest对象作为ActiveX对象来创建)
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")
}catch(e){
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}catch(e){}
}
}
if(xmlHttp == null){
alert("不能创建XMLHttpRequest对象")
return false
}
}
//用于发出异步请求的方法
function sendAsynchronRequest(url,parameter,callback){
createXMLHttpRequest()
if(parameter == null){
//设置一个事件处理器,当XMLHttp状态发生变化,就会出发该事件处理器,由他调用
//callback指定的javascript函数
xmlHttp.onreadystatechange = callback
//设置对拂去其调用的参数(提交的方式,请求的的url,请求的类型(异步请求))
xmlHttp.open("GET",url,true)//true表示发出一个异步的请求。
xmlHttp.send(null)
}else{
xmlHttp.onreadystatechange = callback
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlHttp.send(parameter)
}
}
//以上代码是通用的方法,接下来是调用以上的方法
function loadPros(title,count,pid,cid,level){
// 调用异步请求方法
url = "。。。。。。。。"
sendAsynchronRequest(url,null,loadCallBack)
}
// 指定回调方法
function loadCallBack(){
try
{
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if(xmlHttp.responseText != null &&xmlHttp.responseText != ""){
var divProid = document.getElementById('videolist')
divProid.innerHTML = xmlHttp.responseText
for(i=0i<leni++)
{
var video_url = document.getElementById("videolist"+i+"").href
if(video_url != undefined &&video_url != null &&video_url != ""){
window.location.href = video_url
}
}
}
}
}
if (xmlHttp.readyState == 1)
{
//alert("正在加载连接对象......")
}
if (xmlHttp.readyState == 2)
{
//alert("连接对象加载完毕。")
}
if (xmlHttp.readyState == 3)
{
//alert("数据获取中......")
}
}
catch (e)
{
//alert(e)
}
}