優化網站起始載入所花費的時間

最近對單頁面比較感興趣，想用單頁面實現原生app的效果，但單頁面應用將多頁面聚集到一個頁面上，由此可知初始加載的數據會很大，這樣會致使在初始加載網頁的時候會有一個比較漫長的等待時長，特別是網絡很差的狀況下等待時長就更不能讓用戶知足。

爲了解決這個問題，我想到一個解決方法，在頁面先不加載js和css文件，首先展現一些準備好的圖片或者等待頁面（數據儘可能小），而後等onload事件觸發的時候再一一將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";
                    }
                }
          });
      }

---

如代碼所示，當全部的js都成功加載後，再將主頁面對應的div顯示出來，這樣用戶的體驗纔會比較良好。這裏定義了一個變量s，當變量s等於加載的js的數量的時候纔會顯示主頁面，因此若是出現一個沒有成功加載都會致使頁面不會出現。值得一提的是async這個屬性等於true的時候是異步加載，這樣加載速度會更加快，可是這也會出現一個問題：若是出現一個js會依賴另外一個js的時候就會可能出現錯誤，就好比上面的代碼中的app.js用到了jquery，當app.js加載速度會jquery-1.8.3.min.js更快的時候會提早渲染，此時jquery並無加載，因此app.js使用到jquery的地方就會報錯。

Script異步加載還能夠用defer屬性，defer屬性與async不一樣的是defer載入成功不會自動渲染而是等到onload事件觸發時纔會開始執行，而async屬性是文件載入成功就當即執行。

因上面我是等着onload方法觸發後纔開始載入js文件，因此使用async或者defer差異不大
若是是要徹底避免上面的問題則是要等依賴的js加載成功，觸發script.onload方法時再去加載該js,則能夠解決因加載速度比依賴的js的加載速度更快出現的問題。還有一種方法，就是把全部的js打包到一個js裏面，我這裏是使用了webpack打包程序將整個程序都打包到了一個js，這樣加載就不會有問題了。