<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          提高js加載速度,實現js無阻塞加載方式,高性能的加載執行JavaScript

          時間:?2017-11-01閱讀:?4704標簽:?性能

          由于js的堵塞特性,當瀏覽器在加載javascript代碼時,不能同時做其他任何事情,如果javascript執行時間越久,瀏覽器等待響應的時間就越久。所以為了解決防止先執行js代碼,然后再繼續頁面的解析和渲染,我們一般采用調整js腳本的位置,通過采用將所有的<script>標簽盡可能的放在<body>標簽的底部,來減少對整個頁面加載的影響。

          如果js文件比較多,會產生大量的Http請求,我們都知道http請求是比較耗費性能的事情,例如你加載1個100kb的文件比加載10個10Kb的文件速度要快,因此我們會采用合并壓縮js腳本來達到優化速度的效果,當然有許多出色的工具可以加快JavaScript裝入的速度。比如Lab.js,使用它你就可以并行裝入JavaScript文件,加快總的裝入過程。你還可以為需要裝入的腳本設置某個順序,那樣就能確保依賴關系的完整性。而且開發者聲稱其網站上的速度提升了2倍。

          除了上述內容以外,這篇文章主要講解如果延時加載js和動態加載js,達到頁面無堵塞的效果。

          js的延時加載

          defer的使用 

          defer是一個常用的優化方案,它表示腳本會被延遲到文檔完全被解析和顯示之后再執行,加載后續文檔元素的過程將和js腳本的加載并行進行(異步),這樣頁面加載會更快。  

          <script src="main.js" defer></script>


          async的使用  

          async是html5的屬性,async 屬性規定一旦腳本可用,則會異步執行。async不保證按照腳本出現的先后順序執行,因此,確保兩者之前互不依賴非常重要,指定async屬性的目的是不讓頁面等待兩個腳本的下載和執行,從而異步加載頁面其他內容,異步腳本一定會在頁面的load事件前執行,但可能會在DOMContentLoaded事件觸發之前或之后執行。支持異步腳本的瀏覽器有Firefox 3.6、Safari 5 和Chrome。

          <script async src="main.js"></script>


          注意點

          1、建議異步腳本不要在加載期間修改DOM,當js不需要改變DOM結構時推薦使用異步加載(比如一些統計代碼,它與頁面執行邏輯無關,也不會改變DOM結構)。

          2、延遲腳本并不一定會按照順序執行,因此,確保兩者之前互不依賴非常重要。


          js的動態加載


          由于文檔對象模型(DOM)允許您使用 JavaScript 動態創建 HTML 的幾乎全部文檔內容。  當然也就應許我們動態創建<script>元素,例如:
          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);
          }

          說明:此方法讓元素添加到頁面之后立刻開始下載。此技術的重點在于:無論在何處啟動下載,文件的下載和運行都不會阻塞其他頁面處理過程。您甚至可以將這些代碼放在<head>部分而不會對其余部分的頁面代碼造成影響(除了用于下載文件的 HTTP 連接)。使用上述方法:

          loadScript("main.js", function(){
             console.log("File is loaded!");
          });

          如何需要在頁面中動態加載很多 JavaScript 文件,我們可以在回調方法中多次調用即可。


          js動態注入

          創建一個XMLHttpRequest對象,然后下載 JavaScript 文件,接著用一個動態 <script> 元素將 JavaScript 代碼注入頁面。例如:

          var xhr = new XMLHttpRequest();
          xhr.open("get", "main.js", true);
          xhr.onreadystatechange = function(){
           if (xhr.readyState == 4){
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
             var script = document.createElement ("script");
             script.type = "text/javascript";
             script.text = xhr.responseText;
             document.body.appendChild(script);
            }
           }
          };
          xhr.send(null);

          向服務器發送一個GET 請求 ,去獲取main.js文件,當狀態成功,我們把獲取的js文件動態加載到頁面。采取了它的好處是:它下載后不會自動執行,這使得您可以推遲執行,直到一切都準備好了。另一個優點是,同樣的代碼在所有現代瀏覽器中都不會引發異常。需要注意的是,加載的js文件不能跨域獲取,所以一般網站通常不采用 XHR 腳本注入技術。


          總結:

          1. 盡可能的將<script>標簽放到頁面底部,也就是</body>閉合標簽之前,這能確保在腳本執行前頁面已經完成了渲染。

          2.盡可能的合并js文件。減少http請求,加載速度也就越快。

          3.盡可能的壓縮js文件。減少文件體積,加快加載的速度。

          4.<script>標簽使用defer或async屬性。異步加載js。

          5.使用動態創建的<script>元素來下載并執行代碼。

          6.使用 XHR 對象下載 JavaScript 代碼并注入頁面中。



          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/44

          怎樣測試 JavaScript 的函數性能

          通過衡量執行某個函數所花費的時間,以“證明”某些實現比另一些實現更高效始終是一個很好的主意。這也是確保性能在進行一些修改后不受影響并找出瓶頸的好方法。良好的性能有助于獲得良好的用戶體驗。良好的用戶體驗能夠留住用戶

          如何優化css expression性能?

          IE 瀏覽器中 CSS Expression 特性的最大的問題:會反復執行,每秒鐘可能執行了成百上千次,有嚴重的性能問題。何對 CSS Expression 進行優化呢?至少:如果我們將 CSS Expression 在匹配的元素中僅執行一次,性能將會提升很大。

          vue + webpack 前端性能優化

          對于程序開發者而言,開發一個項目不僅僅注重效率和功能,前端的性能問題也是非常重要的。這直接影響用戶的體驗,從而間接的也反應該項目質量的好壞

          小程序Canvas性能優化實戰

          在小程序中使用canvas組件繪制地鐵圖,地鐵圖包括地鐵線路、站點圖標、線及站點名稱文字,繪制元素為線、圓、圖片、文字。 支持拖動平移和雙指縮放。

          Js中的調節器:提高應用程序的性能

          調節器是瀏覽器中通過限制代碼要處理的事件數量來提高性能的常用技術。當你想以受控的速率執行回調時,應該使用調節器,它允許你在每個固定的時間間隔內重復處理過渡狀態。

          讓你的 React 組件跑得再快一點

          React 基于虛擬 DOM 和高效 Diff 算法的完美配合,實現了對 DOM 最小粒度的更新。大多數情況下,React 對 DOM 的渲染效率足以我們的業務日常。但在個別復雜業務場景下,性能問題依然會困擾我們。此時需要采取一些措施來提升運行性能

          Java與Node.js性能PK

          如果你打開瀏覽器,搜索“Java與Node.js哪個更快”,你會發現大部分答案聲稱Node.js更快,也有一些人持相反意見。Java使用JIT編譯器,其性能甚至可以超過C++。在這種情況下,為什么這么多人還是聲稱Node.js要比Java快呢?

          React性能優化整理

          通過判斷減少數據變化觸發的重新渲染, 以及之后的 DOM diff;函數式語言當中, 語言設計允許兩個對象一樣, 舉例 Clojure:;每個函數體當中生成的對象都會有新的引用, useMemo 可以保留一致的引用.

          大型php網站性能和并發訪問優化方案

          網站性能優化對于大型網站來說非常重要,一個網站的訪問打開速度影響著用戶體驗度,網站訪問速度慢會造成高跳出率,小網站很好解決,那對于大型網站由于欄目多,圖片和圖像都比較龐大,那該怎么進行整體性能優化呢

          優化 web 應用程序性能方案總結

          在開發 web 應用程序時候,性能都是必不可少的話題。而大部分的前端優化機制都已經被集成到前端打包工具 webpack 中去了,當然,事實上仍舊會有一些有趣的機制可以幫助 web 應用進行性能提升

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网