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

为什么异步加载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 是并发模型

©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页