无阻塞加载JavaScript：解决页面渲染卡顿问题

无阻塞加载JavaScript：解决页面渲染卡顿问题

浏览器在加载静态资源和JavaScript代码时均采用线性加载机制。因此，常规做法是将script标签置于</body>之前，以避免阻塞UI线程，确保页面内容优先渲染。

然而，部分场景下开发者希望JavaScript在网页头部尽早加载，同时又担忧其阻塞导致网站加载速度变慢。此时，采用无阻塞加载JavaScript的技术成为解决方案。

动态脚本元素（Dynamic Script Elements）

动态脚本元素（Dynamic Script Elements）

DOM接口允许通过JavaScript动态生成HTML文档中的绝大多数内容。利用标准DOM方法，可以轻松地创建一个新的script元素：

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下载中最常用的模式，因其具备跨浏览器兼容性且实现简单易懂。

以上关于无阻塞加载JavaScript的内容旨在解决因JS加载影响页面显示的问题，供读者参考。