<script src="/UploadFiles/2021-04-02/outside.js">

他的支持度是<=IE9的. 

并且，他的执行顺序，是严格依赖的，即:


<script src="/UploadFiles/2021-04-02/outside1.js">

当页面解析完后，他便会开始按照顺序执行 outside1 和 outside2文件。

如果你在IE9以下使用defer的话，可能会遇到 它们两个不是顺序执行的，这里需要一个hack进行处理，即在两个中间加上一个空的script标签


<script src="/UploadFiles/2021-04-02/outside1.js">

ASYNC加载
async是H5新定义的一个script 属性。 他是另外一种js的加载模式。

  
渲染引擎解析文件，如果遇到script(with async)
  
继续解析剩下的文件，同时并行加载script的外部资源
  
当script加载完成之后，则浏览器暂停解析文档，将权限交给JS引擎，指定加载的脚本。
  
执行完后，则恢复浏览器解析脚本

可以看出async也可以解决 阻塞加载 这个问题。不过，async执行的时候是异步执行，造成的是，执行文件的顺序不一致。即:


<script src="/UploadFiles/2021-04-02/outside1.js">

这时，谁先加载完，就先执行谁。所以，一般依赖文件就不应该使用async而应该使用defer.

defer的兼容性比较差，为IE9+,不过一般是在移动端使用，也就不存在这个problem了。
脚本异步
脚本异步是一些异步加载库(比如require)使用的基本加载原理. 直接上代码:


function asyncAdd(src){
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}
//加载js文件
asyncAdd("test.js");



这时候，可以异步加载文件，不会造成阻塞的效果.

但是，这样加载的js文件是无序的，无法正常加载依赖文件。

这时候，我们需要对上述函数进行优化.


var asyncAdd = (function(){
  var head = document.head,
    script;
  return function(src){
    script = document.createElement('script');
    script.src= src;
    script.async=false;
    document.head.appendChild(script);
  }
})();
//加载文件
asyncAdd("first.js");
asyncAdd("second.js");
//或者简便一点
["first.js","second.js"].forEach((src)=>{async(src);});



但是，使用脚本一步加载的话，需要等待css文件加载完后，才开始进行加载，不能充分利用浏览器的并发加载优势。而使用静态文本加载async或者defer则不会出现这个问题。


使用脚本异步加载时，只能等待css加载完后才会加载

使用静态的async加载时，css和js会并发一起加载


关于这三种如何取舍，那就主要看leader给我们目标是什么，是兼容IE8,9还是手机端，还是桌面浏览器，或者两两组合。 

但是对于单独使用某一个技能的场景，使用时需要注意一些tips。


1、js文件放置位置应该放置到body末尾

2、如果使用async的话，最后加上defer以求向下兼容


<script src="/UploadFiles/2021-04-02/test.js">

通常，我们使用的加载都是defer加载，因为很强的依赖关系。
以上就是本文的全部内容，希望对大家的学习有所帮助。

                                
                                

                                    javascript文件加载,javascript文件加载优化 
                                
华山资源网 Design By www.eoogi.com
                            
                        
                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            
                        
                        

                            

                                
                                    上一篇
                                    
jQuery on()绑定动态元素出现的问题小结
                                
                            
                            

                                
                                    下一篇
                                    
初识angular框架后的所思所想
                                
                            
                        
                        
                        
华山资源网 Design By www.eoogi.com
                        

                            

                                
                                
                                    评论“学习javascript文件加载优化”
                                
                            
                            

                                

                                    

                                        

                                            

                                                

                                                    
                                                
                                                

                                                    
                                                
                                                

                                                    

                                                    

                                                    

                                                
                                                

                                                     再想想
                                                    
                                                    
                                                    
                                                    
                                                    
                                                
                                            
                                            

                                        
                                    
                                    

                                    

                                        
暂无评论...