博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
无阻塞加载脚本
阅读量:6253 次
发布时间:2019-06-22

本文共 1689 字,大约阅读时间需要 5 分钟。

通常加载页面的时候,对于组件是并行下载的,现代大部分浏览器对于Js同样也是支持并行下载,但是在脚本下载、解析并执行完毕之前,不会开始下载任何其他内容。

正常引入:

可以看出,在脚本下载完毕后的一段时间内(该时间在解析执行脚本),不会对其他组件进行下载,以下几种方案解决该问题。

 

1. XHR Eval加载脚本:

即使用ajax引入脚本,并通过eval对其执行。

代码:

 

var xhrObj = getXHRObject();  xhrObj.onreadystatechange = function(){      if(xhrObj.readyState == 4 && xhrObj.status == 200){           eval(xhrObj.respoenseText);      }  }  xhrObj.open('GET', 'js/User/search.js', true);  xhrObj.send();  function getXHRObject(){      var xhrObj = false;      if(window.XMLHttpRequest){            xhrObj = new XMLHttpRequest();        }else{            //IE6,5            xhrObj = new ActiveXObject("Microsoft.XMLHTTP");        }    return xhrObj;  };

 

 

 

该方法的主要缺点是:脚本必须部署在和主页面相同的域中,参见同源策略。

 

 

 

2.XHR注入:

类似于XHR Eval,XHR注入也是通过ajax来获取脚本,不同的是该方法为创建一个script的DOM元素,并将脚本内容插入。

代码(getXHRObject代码如上):

 

var xhrObj = getXHRObject();  xhrObj.onreadystatechange = function(){      if(xhrObj.readyState == 4 && xhrObj.status == 200){           var scriptElm = document.createElement('script');           document.getElementsByTagName('head')[0].appendChild(scriptElem);           scriptElm.text = xhrObj.responseText;      }  }xhrObj.open('GET', 'js/User/search.js', true);  xhrObj.send();

 

 

 

缺点:同上 受同源策略的影响。

 

3.Iframe引入:

该方法为将js改成html文件,并把外部脚本写进为内行脚本,同时需要对父级和iframe文档进行关联,同样受同源策略的影响。

 

 

 

 

缺点:iframe消耗性能大,维护性低,不推荐使用。

 

4.Script DOM Element

通过创建一个script的DOM元素,并设置其src引用脚本。

 

 

代码:

 

var scriptElm = document.createElement('script');  scriptElm.src = "js/User/search.js";           document.getElementsByTagName('head')[0].appendChild(scriptElm);

 

 

 

 

优点:代码短,不受同源策略影响,无需重构代码。

 

 

5.Defer

大部分浏览器支持的属性 在引用时加入

 

 

代码:

<script defer src="js/User/search.js"  ></script>

 

转载于:https://www.cnblogs.com/Darlietoothpaste/p/6517018.html

你可能感兴趣的文章
【B/S学习总结】我的第100篇CSDN博客
查看>>
[Hadoop]chukwa与ganglia的区别
查看>>
数据挖掘工具分析北京房价 (一) 数据爬取采集
查看>>
IOS项目之弹出动画终结篇
查看>>
iOS开发UI篇—ios应用数据存储方式(XML属性列表-plist)
查看>>
OSS移动开发实战2 (30分钟快速搭建移动应用上传回调服务)
查看>>
Swift语言学习No.2: 二维数组
查看>>
jvm gc相关
查看>>
王亟亟的Python学习之路(四)-循环,条件,Range,list和tuple
查看>>
Greenplum 激活standby master失败后的异常修复
查看>>
nanomsg实验——survey
查看>>
Java设计模式(八)----代理模式
查看>>
LinkedList的用法小结
查看>>
Using mongoDB's Profiler analyze the performance of database operations
查看>>
python range() function like postgresql generate_series()
查看>>
一则优化案例
查看>>
[实践]Sonar Xcode8兼容
查看>>
Canvas应用
查看>>
node inspect chrome日志调试
查看>>
书写可维护代码的重要性
查看>>