js异步问题怎么解决

JavaScript017

js异步问题怎么解决,第1张

异步加载又叫非阻塞加载,浏览器在下载执行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代码。

1、break;

 for(var i=1i<=5i++){

            if(i>2){

           break( 跳出循环 循环结束 下面的语句不执行了) }

            document.write(i)}

         在while循环中 使用break 

         打印出我是软件大道的程序员 5次 但是 第4次的时候就不打印了 

         let i=1

         while(i<=5){

          if(i==4){ break  }

            document.write('<br>我是软件大道的程序员'+i)

             i++}

        break语句用于终止某个循环,使程序跳到循环块外的下一条语句,

        在循环中位于break后的语句将不再执行,

        break 语句不仅可以用在for循环中,也可以用在其他循环中 ,

2、  continue;

for(var i=1i<=5i++){

        if(i==3){continue结束本次循环,进入下次循环 

            continue( 跳过 不会终止循环,但是会跳过本次循环) }

            if(i==3) continue

          document.write(i)}

        for(var i=1i<=5i++){

            let chenji = parseInt(prompt('第'+i+'位同学请输入成绩'))

             初级调试 使用console.log或者alert 

            console.log(chenji)

            alert(chenji) 

            if(chenji<0){

                 document.write('<br>第'+i+'位同学成绩有误')

                continue

                document.write('<br>终止程序')

                break }

else{document.write('<br>第'+i+'位同学请输入成绩:'+chenji)}

}

3、双重循环