异步加载的三种方案

最新推荐文章于 2024-09-03 13:48:14 发布

wangmt_968

最新推荐文章于 2024-09-03 13:48:14 发布

阅读量3.2k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/Wmt980514/article/details/123055320

版权

本文探讨了JavaScript中异步加载的三种方案：defer、async和按需加载。defer会在DOM解析完成后执行，async则在文件加载完毕后立即执行，无论DOM状态。同时，文章还介绍了浏览器的工作线程，包括JS引擎线程、GUI渲染线程、事件监听线程、计时器线程和网络线程。

摘要由CSDN通过智能技术生成

1.defer 异步加载，要等到dom文档全部解析完成之后才会执行

2.async 异步加载，只要js文件加载完就执行，只能加载外部链接的js文件

3.按需加载

 <!-- 按需加载 -->
    <script type="text/javascript">
        function asyncLoaded(url,callback){
            var script = document.createElement("script");
//                script.src = url;   假如说网速非常好，直接执行完成了，后面就监听不到状态的改变了
            if(script.readyState){
                script.onreadystatechange = function(){
                    if(script.readyState == "complete" || script.readyState =="loaded"){
//                            执行某个函数
                        callback()
                    }
                }
            }else{
                script.onload = function(){
//                        执行某个函数
                    callback()
                }
            }
            script.src = url;    //异步的过程
            document.head.appendChild(scr