异步加载js的方式有哪些？同步和异步的区别?如何解决跨域问题？

2024年5月22日 245次阅读 来源: LuckXinXin

为什么异步加载js文件？加载方式？（至少两种方式）
异步加载的方式有4种

a)  使用jquery框架，即$(document).ready(function(){ })
或者写成$(function(){ })，
（DOM结构绘制完毕就执行，不必等到所有资源都加载完成）。
注意需要引入jquery并且能兼容所有浏览器

$(document).ready(function() { 
    alert("加载完成！");
});


b) 给<script>标签添加属性async='async'

async属性只适用于外部脚本，不能保证脚本按顺序执行，异步下载一旦下载完立即执行会阻塞页面渲染，HTML5新增属性需要chrom  firefox ie9支持

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

c)  给<script>标签添加属性defer='defer'

defer属性只适用于外部脚本，能保证脚本按顺序执行，异步下载等到DOM树渲染完之后才执行，兼容所有浏览器。

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

d）加载es6模块的时候设置type=module，默认应用defer属性----即HTML解析器在遇到有src属性的<script type='module'>时，模块文件便开始下载，直到文档被完全解析，模块才会执行

<script  type='module'  src='module.js'></script>

d)  动态创建<script>标签，并插入到document中，这样就做到非阻塞的下载js代码。兼容所有浏览器。立即开始异步加载 js

(function(){ 
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "http://code.jquery.com/jquery-1.7.2.min.js";
    var tmp = document.getElementsByTagName('script')[0];
    tmp.parentNode.insertBefore(script, tmp);
})();

e)  onload时的异步加载，在低版本的IE中不能用onload()

(function() { 
     function async_load(){ 
         var s = document.createElement('script');
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'js/jQuery.js';
         var x = document.getElementsByTagName('script')[0];
         x.parentNode.insertBefore(s, x);
     }
     if (window.attachEvent)
         window.attachEvent('onload', async_load);//IE浏览器下，事件名要加上on
     else
         window.addEventListener('load', async_load, false);//非IE下，事件名不需要加上on
 })();

这和前面的方式差不多，但关键是它不是立即开始异步加载 js ，而是在onload 时才开始异步加载。这样就解决了阻塞onload 事件触发的问题。
判断js加载完成，实现按需加载，兼容IE

function  loadScript(url,calback){   
  
    var script = document.createElement('script');  
  
    script.type = 'text/javascript';  
  
    script.async = 'async';  
  
    script.src  = url;  
    var reg = /^(complete|loaded)$/  
  
    document.body.appendChild(script);  
  
    if(script.readyState){   
        //IE下 
        script.onreadystatechange = function(){       
            if( reg.test(script.readyState) ){        
                script.onreadystatechange = null;  
                callback();  
            }  
         }  
  
    }else{   
        script.onload = function(){   
            callback();  
        }  
    }  
}

补充：DOMContentLoaded 与 OnLoad 事件

DOMContentLoaded : 页面(document)已经解析完成，页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。

OnLoad：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。

同步加载和异步加载的区别

a) 同步加载：我们平时最常使用的就是在一个<script>标签里面只有一个src属性，并且给这个src属性赋值，这就是同步加载模式。

<script src="js/jQuery.js"></script>

同步加载，又称阻塞加载，会阻止浏览器的后续处理和解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。

b) 异步加载：异步加载又叫做非阻塞加载，浏览器在下载或者执行js的同时，还会继续进行后续页面的处理。

区别：同步加载的网络 timeline 是瀑布模型，而异步加载的网络 timeline 是并发模型

    原文作者：LuckXinXin
    原文地址: https://blog.csdn.net/LuckXinXin/article/details/105565033
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞