码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript异步加载

时间:2019-06-20 15:36:22      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:浏览器   sync   syn   callback   style   处理   round   color   同步   

js特点:单线程异步  (其实就是多线程,只是说用异步的方式表现出来了而已)

同步的会阻塞代码,在html中,只有script标签中的src会阻塞代码,可以通过defer属性和async属性进行解决

JavaScript的异步加载:异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。

第一种:defer  只针对IE浏览器

<script type="text/javascript" defer></script>

第二种:async  只能加载src中的脚本,不能把代码也在script标签中

<script type="text/javascript" src="xxx.js" async="async"></script>

下面这种写法是错误的

<script async="async" src="03.js">
        var abc = 123;   //不能这样写
</script>

第三种:动态添加script标签

<body>
    <script>
        function asyncScript(url,callback){
            var script = document.createElement("script");//新建一个script标签
            

            // div.onclick = function(){}    先绑定事件,然后再点击

            if(script.readyState){
                script.onreadystatechange = function(){
                    //script.readyState发生改变时触发script.onreadystatechange
                    if(script.readyState == "complete" || script.readyState == "loaded"){
                        callback()
                    }
                }
            }else{
                script.onload = function(){//script.onload-->表示加载完成以后执行
                    callback()
                }
            }
            script.src = url;    //参数传递进来       src加载url是一个异步的过程
            // document.head.appendChild(script);//IE7和IE5上document没有head的DOM对象属性。
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(script);
            
        }
        

asyncScript("test.js",function(){ test() }) </script> </body>

 

JavaScript异步加载

标签:浏览器   sync   syn   callback   style   处理   round   color   同步   

原文地址:https://www.cnblogs.com/conlover/p/11058935.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!