優(yōu)化網(wǎng)站起始載入所花費的時間

VincentFF 發(fā)布于2019-08-21 11:51 / 1246人閱讀

摘要：因上面我是等著方法觸發(fā)后才開始載入文件，所以使用或者差別不大如果是要完全避免上面的問題則是要等依賴的加載成功，觸發(fā)方法時再去加載該則可以解決因加載速度比依賴的的加載速度更快出現(xiàn)的問題。

最近對單頁面比較感興趣，想用單頁面實現(xiàn)原生app的效果，但單頁面應(yīng)用將多頁面匯集到一個頁面上，由此可知初始加載的數(shù)據(jù)會很大，這樣會導(dǎo)致在初始加載網(wǎng)頁的時候會有一個比較漫長的等待時長，特別是網(wǎng)絡(luò)不好的情況下等待時長就更不能讓用戶滿足。

為了解決這個問題，我想到一個解決方法，在頁面先不加載js和css文件，首先展示一些準(zhǔn)備好的圖片或者等待頁面（數(shù)據(jù)盡量小），然后等onload事件觸發(fā)的時候再一一將js文件和css文件載入到頁面。

window.onload = function(){
          var scripts = ["/static/js/jquery-1.8.3.min.js","/static/js/fuc.js","/static/js/app.js"];
          var s = 0;
          scripts.forEach(function(scriptSrc){
              var head = document.getElementsByTagName("head")[0];
                 var script = document.createElement("script");
                script.type = "text/javascript";
                script.charset = "utf-8";
                script.async = true;
                script.timeout = 120000;
                script.src = scriptSrc;
                head.appendChild(script);
                script.onload=function(){
                    s++;
                    if(s == scripts.length){
                        var load = document.getElementById("load");
                        var app = document.getElementById("app");
                        load.style.display = "none";
                        app.style.display = "block";
                    }
                }
          });
      }

如代碼所示，當(dāng)所有的js都成功加載后，再將主頁面對應(yīng)的div顯示出來，這樣用戶的體驗才會比較良好。這里定義了一個變量s，當(dāng)變量s等于加載的js的數(shù)量的時候才會顯示主頁面，所以如果出現(xiàn)一個沒有成功加載都會導(dǎo)致頁面不會出現(xiàn)。值得一提的是async這個屬性等于true的時候是異步加載，這樣加載速度會更加快，但是這也會出現(xiàn)一個問題：如果出現(xiàn)一個js會依賴另一個js的時候就會可能出現(xiàn)錯誤，就比如上面的代碼中的app.js用到了jquery，當(dāng)app.js加載速度會jquery-1.8.3.min.js更快的時候會提前渲染，此時jquery并沒有加載，所以app.js使用到j(luò)query的地方就會報錯。

Script異步加載還可以用defer屬性，defer屬性與async不同的是defer載入成功不會自動渲染而是等到onload事件觸發(fā)時才會開始執(zhí)行，而async屬性是文件載入成功就立即執(zhí)行。

因上面我是等著onload方法觸發(fā)后才開始載入js文件，所以使用async或者defer差別不大
如果是要完全避免上面的問題則是要等依賴的js加載成功，觸發(fā)script.onload方法時再去加載該js,則可以解決因加載速度比依賴的js的加載速度更快出現(xiàn)的問題。還有一種方法，就是把所有的js打包到一個js里面，我這里是使用了webpack打包程序?qū)⒄麄€程序都打包到了一個js，這樣加載就不會有問題了。