JS异步加载及解决方式

最新推荐文章于 2024-04-25 15:19:41 发布

七月是我的生日

最新推荐文章于 2024-04-25 15:19:41 发布

阅读量4.1k

点赞数 3

分类专栏： JS学习文章标签： js异步加载问题

本文链接：https://blog.csdn.net/qq_43955202/article/details/90648986

版权

JS学习专栏收录该内容

30 篇文章 1 订阅

订阅专栏

1.js中的同步加载和异步加载有什么不同？
javascript语言是单线程机制。所谓单线程就是按次序执行，执行完一个任务再执行下一个。
对于浏览器来说，也就是无法在渲染页面的同时执行代码。
同步加载：也就是说一个事件处理程序没加载完之前，不会加载后面的程序。
异步加载：也就是并发加载，会同时处理几个事件处理程序。
举个生活中的例子：
早上起床,先刷牙,再烧水,等水烧开了洗脸,再整理发型.是同步
先刷牙,再烧水,再整理发型,等水壶滴的一声通知我水烧开了,我再取刚烧开的水洗脸,是异步.
2.js是同步加载的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <strong></strong>
    </div>
    <p></p>
    <span></span>
</body>
</html>

js在执行上述代码时：
首先绘制DomTree：
在这里插入图片描述
3.JS实现异步加载的三种方式
1.defer 异步加载，但是要等到dom文档全部解析完毕才会被执行。（可以在行间书写js代码）（只适用于IE）

<script type="text/javascript" src="demo.js" defer="defer"></script>

//行内js
<script type="text/javascript"  defer="defer">
console.log（“a”）；
</script>

2.async 异步加载1，加载完毕就会执行，async只能加载外部js脚本，不能把js书写在script标签内(W3C标准方法)

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

3.创建script，插入到DOM中，加载完毕后callback（通吃的方法）

<body>
    <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '123.js';
    document.head.appendChild(script);   
    
    //123.js 文件
//     function test(){
//     console.log('a');
// }
    </script>
</body>

直接调用外部链接js文件中的test（）函数；

  <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '123.js';
    document.head.appendChild(script);   
    
    //123.js 文件
//     function test(){
//     console.log('a');
// }
    //直接调用 test();
   // test();  
    // test is not undefined  （因为js文件会有一个加载的过程）

    //使用定时器，1s后调用test（）；
    setTimeout(function(){
        test();
    },1000)  //1s后打印了a
    </script>

判断js文件是否加载完毕之后进行后续操作：
chrome，oprea，firefox，safari

 script.onload = function(){
              test();
             }  //script.onload 在js加载完后触发```

 script.onreadystatechange = function(){
                if(script.readyState == 'complete' || script.readyState == 'loaded')
                 {
                     test();
                 }
             }  //根据状态变化判断js是否加载完毕执行后续操作

封装函数：


    <script>
    function loadscript(url,callback){
    var  script = document.createElement('script');
    script.type = "text/javascript";
    //chrome,opera,firefox,safari
    script.onload = function(){
        callback();
    }
    //IE
    script.onreadystatechange = function(){
        if(this.readyState == 'complete' || 
        this.readyState == 'loaded')
        {
            callback();
        }
    }
    script.src = url;
    document.head.appendChild(script);
}
loadscript('123.js',function (){
    test();
});
</script>

因为IE会有状态判断的过程，如果程序小所消耗的时间极少，那么ie状态下函数就不会被触发，所以将加载js文件放到最后可以避免这个错误。

七月是我的生日

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JS异步加载及解决方式

1.js中的同步加载和异步加载有什么不同？javascript语言是单线程机制。所谓单线程就是按次序执行，执行完一个任务再执行下一个。对于浏览器来说，也就是无法在渲染页面的同时执行代码。同步加载：也就是说一个事件处理程序没加载完之前，不会加载后面的程序。异步加载：也就是并发加载，会同时处理几个事件处理程序。举个生活中的例子：早上起床,先刷牙,再烧水,等水烧开了洗脸,再整理发型.是同步...
复制链接

扫一扫