在前端按需加載js是優化性能的一個方向,
現在script標簽加載js基本是異步的,為了減少白屏可以在頁面body加載完之后再去按需加載js,script也是標簽所以我們可以像img等標簽一樣去使用它,下面是封裝的函數,利用回調可以控制js的執行順序,
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 { //其他 script.onload=function () { callback(); } }; script.src=url; document.getElementsByTagName("head")[0].appendChild(script); }
就可以快速的使用了
loadScript('http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js',function () { console.log($) })
但這種方法對於需要加載很多js的頁面來說很不方便,可以使用現在流行的模塊化按需引入。