浅谈无阻塞加载脚本方法

最新推荐文章于 2023-03-13 23:20:48 发布

星旅zl

最新推荐文章于 2023-03-13 23:20:48 发布

阅读量338

点赞数

分类专栏： JS相关

本文链接：https://blog.csdn.net/nzzl54/article/details/91366244

版权

本文探讨了实现无阻塞加载脚本的三种方法：延迟脚本、XMLHttpRequest脚本注入和动态脚本加载。尽管延迟脚本在跨浏览器支持上有限，XMLHttpRequest存在域限制和额外HTTP请求的问题，但动态脚本加载被认为是最佳方案，能够快速下载并执行。通过示例代码展示了如何使用动态脚本加载，并推荐了一个适用于多脚本加载场景的增强版库LazyLoad。

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

无阻塞的脚本是创建响应迅速的web应用的第一步，其秘诀就是在页面加载完成后才加载JS，也就是尽量在window.onload事件触发后再下载脚本。

这里对比几种无阻塞加载脚本的方法

一、延迟的脚本

使用script扩展属性defer，由于只有Internet Explorer 支持 defer 属性，所以基本不建议使用这种方式，使用方法为：

<script defer="defer">

二、XMLHttpRequest脚本注入技术

用XHR来下载JS文件，然后通过创建动态script元素将代码注入页面中：

var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function(){
   if(xhr.readyState == 4){
      //动态添加脚本
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.text = xhr.responseText;
      document.body.appendChild(script);
   }
}

优点：

1、下载JS但不立即执行，可以把脚本的执行推迟到想执行的时候

2、浏览器通用代码，都能正常工作

缺点：

1、js文件要和请求页面处于相同的域，因此大型web应用通常不会采用该技术。

2、需要HTTP请求

三、动态脚本加载

可以直接封装为一个JavaScript,这里我直接叫loadScript.js

function loadScript(urlS,callback){
      //动态加入脚本到
        var script  = document.createElement("script");
        script.type="text/javascript";
        if(script.readyState){  //IE
           script.onreadystatechange = function(){
              if(script.readyState == "loaded" || script.readyState == "complete"){
                  script.onreadystatechange = null;
                  callback();
              }            
           }
        }else{
          script.onload = function(){
              callback();