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

VincentFF 發布于2019-08-21 11:51 / 1235人閱讀

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

最近對單頁面比較感興趣，想用單頁面實現原生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，這樣加載就不會有問題了。

GPU云服務器云服務器網站的優化怎么做網站的搜索引擎優化單位網站所需服務器點所對應的數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87189.html

Web最佳實踐閱讀總結(1)

摘要：介紹最近開始刷一些書和題此系列是介紹在讀最佳實踐的一些收獲和體會。先修改諸如命名，格式等不涉及具體邏輯的內容重構過程中要持續測試，在多個瀏覽器測試，確保重構的部分功能正確。介紹最近開始刷一些書和題,此系列是介紹在讀Web最佳實踐的一些收獲和體會。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...

liaosilzu2007 2019-08-01 17:44 評論0 收藏0
Web最佳實踐閱讀總結(1)

摘要：介紹最近開始刷一些書和題此系列是介紹在讀最佳實踐的一些收獲和體會。先修改諸如命名，格式等不涉及具體邏輯的內容重構過程中要持續測試，在多個瀏覽器測試，確保重構的部分功能正確。介紹最近開始刷一些書和題,此系列是介紹在讀Web最佳實踐的一些收獲和體會。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...

Cympros 2019-08-21 16:55 評論0 收藏0
Web最佳實踐閱讀總結(1)

摘要：介紹最近開始刷一些書和題此系列是介紹在讀最佳實踐的一些收獲和體會。先修改諸如命名，格式等不涉及具體邏輯的內容重構過程中要持續測試，在多個瀏覽器測試，確保重構的部分功能正確。介紹最近開始刷一些書和題,此系列是介紹在讀Web最佳實踐的一些收獲和體會。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...

DirtyMind 2019-08-30 15:53 評論0 收藏0
Python--Redis實戰：第二章：使用Redis構建Web應用：第四節：數據行緩存

摘要：實際執行緩存操作的函數需要用到數據行的延遲值，如果某個數據行的延遲值不存在，那么程序將取消對這個數據行的調度。上一篇文章實戰第二章使用構建應用第三節網頁緩存下一篇文章實戰第二章使用構建應用第五節網頁分析上一篇文章： Python--Redis實戰：第二章：使用Redis構建Web應用：第三節：網頁緩存下一篇文章：Python--Redis實戰：第二章：使用Redis構建Web應用：第...

TwIStOy 2019-07-30 18:01 評論0 收藏0