无阻塞加载js,防止因js加载不了影响页面显示的问题

浏览器加载静态资源和js的方式都是线性加载，所以一般情况可以将js放到</body>前，防止ui线程的阻塞。

而某些时候我们既希望js在整个网页的头部就加载，又担心js阻塞导致网站加载缓慢，就可以用到无阻塞加载js技术。

dynamic script elements 动态脚本元素

dom允许我们使用javascript动态创建html的几乎所有文档内容，一个新的<script>元素可以非常容易的通过标准dom创建：

var script = document.createelement ("script"); 
script.type = "text/javascript"; 
script.src = "file1.js";  
document.body.appendchild(script); 

新的<script>元素加载file1.js源文件。此文件当元素添加到页面后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了firefox和opera，它们将等待此前的所有动态脚本节点执行完毕）。

大多数情况下，我们希望调用一个函数就可以实现javascript文件的动态下载。下面的函数封装实现了标准实现和ie实现：

function loadscript(url, 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 { //others 
    script.onload = function(){ callback(); 
   };  
  } 
  script.src = url; 
  document.getelementsbytagname("head")[0].appendchild(script);  
 } 
 
loadscript("file1.js", function(){ //调用 
  alert("file is loaded!");  
}); 

此函数接受两个参数：javascript文件的url和一个当javascript接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步src属性，并将javascript文件添加到head。

动态脚本加载是非阻塞javascript下载中最常用的模式，因为它可以跨浏览器，而且简单易用。

以上这篇无阻塞加载js,防止因js加载不了影响页面显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。