JavaScript异步加载

Posted 2022-01-27 conlover

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript异步加载相关的知识，希望对你有一定的参考价值。

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异步加载的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript异步编程异步的脚本加载

JavaScript异步加载

javascript脚本如何异步加载，有啥作用

使用async属性异步加载执行JavaScript

javascript 异步加载