另一种无阻塞加载脚本的方式是使用XMLHttpRequest(XHR)对象获取脚本并注入页面中。
这种技术会先创建一个XHR对象,然后用他下载JavaScript文件,最后通过常见动态<script>元素将代码注入页面中。
var xhr = new XMLHttpRequest(); xhr.open("get","file.js",true); xhr.onreadystatechange = function(){ if(xhr.readyState===4){ if(xhr.status>=200&&xhr.status<300||xhr.status==304){ var script = document.createElement("script"); script.type = "text/javascript"; script.text = xhr.responseText; document.body.appendChild(script); } } }
以上代码发送GET请求file.js文件,onReadyStateChange检测readyState是否为4(4表示请求完成)和HTTP状态吗是否有效(200表示有效响应,304表示读取缓存)。判断响应有效之后,就动态创建一个<script>标签,内容就是服务器接收到的responseText。
这种方法的优点以及缺点:
优点:下载JavaScript代码可以不立即执行,且兼容性好适合所有主流浏览器。
缺点:JavaScript文件必须与所请求页面处于同一个域,这种情况下JavaScript文件不能从CDN下载,不适合大型的Web应用。
4.一种推荐的无阻塞方案
如果页面有大量的JavaScript代码需要添加,可以先在页面中去外链之前我们封装好的动态读取script脚本的函数loadScript,然后再使用它去加载其他所需脚本,例如:
<script type="text/javascript" src="https://www.jb51.net/loader.js"></script> <script type="text/javascript"> loadScript("file.js",function(){ //do something }); </script>
这样只需在第一个<script>下载比较精简的loader.js文件时对页面有些许影响,之后的<script>并不会有太多影响。
您可能感兴趣的文章: