js代碼小優化（JS代碼優化）

本文目錄一覽：

• 1、如何優化js代碼？
• 2、如何通過優化JS代碼來適合網站優化
• 3、前端性能優化總結(一)-js、css優化

如何優化js代碼？

一、 讓代碼簡潔：一些簡略的表達方式也會產生很好的優化

eg：x=x+1;在不影響功能的情況下可以簡寫為x++;

二、 變數名方法名盡量在不影響語意的情況下簡單。（可以選擇首字母命名）

eg：定義數組的長度可以取名為：ArrLen而不需要取為ArrayLength。

三、 關於JS的循環，循環是一種常用的流程式控制制。

JS提供了三種循環：for(;;)、while()、for(in)。在這三種循環中for(in)的效率最差，因為它需要查詢Hash鍵，因此應盡量少用for(in)循環，for(;;)、while()循環的性能基本持平。當然，推薦使用for循環，如果循環變數遞增或遞減，不要單獨對循環變數賦值，而應該使用嵌套的++或–運算符。

四、 如果需要遍曆數組，應該先緩存數組長度，將數組長度放入局部變數中，避免多次查詢數組長度。

因為我們常常要根據字元串、數組的長度進行循環，而通常這個長度是不變的，比如每次查詢a.length，就要額外進行一個操作，而預先把var len=a.length，則就少了一次查詢。

五、 盡量選用局部變數而不是全局變數。

局部變數的訪問速度要比全局變數的訪問速度更快，因為全局變數其實是window對象的成員，而局部變數是放在函數的棧里的。

六、 盡量少使用eval。

每次使用eval需要消耗大量時間，這時候使用JS所支持的閉包可以實現函數模板。

七、 減少對象查找

因為JavaScript的解釋性，所以a.b.c.d.e，需要進行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達式重複出現，只要可能，應該盡量少出現這樣的表達式，可以利用局部變數，把它放入一個臨時的地方進行查詢。

八、 字元串連接。

如果是追加字元串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要連接多個字元串，應該少使用+=，如s+=a;s+=b;s+=c;應該寫成s+=a + b + c；

而如果是收集字元串，比如多次對同一個字元串進行+=操作的話，最好使用一個緩存。怎麼用呢？使用JavaScript數組來收集，最後使用join方法連接起來，如下

var buf = new Array();for(var i = 0; i 100; i++){ buf.push(i.toString());}var all = buf.join(“”);

九、 類型轉換

1. 把數字轉換成字元串，應用”” + 1，雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說：(“” +) String() .toString() new String()

盡量使用編譯時就能使用的內部操作要比運行時使用的用戶操作要快。

String()屬於內部函數，所以速度很快，而.toString()要查詢原型中的函數，所以速度遜色一些，new String()用於返回一個精確的副本。

2. 浮點數轉換成整型，這個更容易出錯，很多人喜歡使用parseInt()，其實parseInt()是用於將字元串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()。Math是內部對象，所以Math.floor()其實並沒有多少查詢方法和調用的時間，速度是最快的。

3. 對於自定義的對象，如果定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之後，會嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個方法效率會更高

十、 盡量作用JSON格式來創建對象，而不是var obj=new Object()方法。

因為前者是直接複製，而後者需要調用構造器，因而前者的性能更好。

十一、 當需要使用數組時，也盡量使用JSON格式的語法，

使用JSON格式的語法即直接使用如下語法定義數組：[parrm,param,param…],而不是採用new Array(parrm,param,param…)這種語法。因為使用JSON格式的語法是引擎直接解釋的。而後者則需要調用Array的構造器。

十二、 對字元串進行循環操作，例如替換、查找，就使用正則表達式。

因為JS的循環速度比較慢，而正則表達式的操作是用C寫成的API，性能比較好。

十三、 插入HTML

很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，並設置他們的innerHTML來將自己的HTML代碼插入到頁面中。

十四、 對象查詢

使用[「」]查詢要比.items()更快

十五、 定時器

如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設置一個定時器。

十六、 盡量減少DOM調用

在Web開發中，JavaScript的一個很重要的作用就是對DOM進行操作。可是對DOM的操作是非常昂貴的，因為這會導致瀏覽器執行迴流 （reflow）操作。我們應該儘可能的減少DOM操作。

如何通過優化JS代碼來適合網站優化

一、 讓代碼簡潔：一些簡略的表達方式也會產生很好的優化

eg：x=x+1;在不影響功能的情況下可以簡寫為x++;

二、 變數名方法名盡量在不影響語意的情況下簡單。（可以選擇首字母命名）

eg：定義數組的長度可以取名為：ArrLen而不需要取為ArrayLength。

三、 關於JS的循環，循環是一種常用的流程式控制制。

JS提供了三種循環：for(;;)、while()、for(in)。在這三種循環中for(in)的效率最差，因為它需要查詢Hash鍵，因此應盡量少用for(in)循環，for(;;)、while()循環的性能基本持平。當然，推薦使用for循環，如果循環變數遞增或遞減，不要單獨對循環變數賦值，而應該使用嵌套的++或–運算符。

四、 如果需要遍曆數組，應該先緩存數組長度，將數組長度放入局部變數中，避免多次查詢數組長度。

因為我們常常要根據字元串、數組的長度進行循環，而通常這個長度是不變的，比如每次查詢a.length，就要額外進行一個操作，而預先把var len=a.length，則就少了一次查詢。

五、 盡量選用局部變數而不是全局變數。

局部變數的訪問速度要比全局變數的訪問速度更快，因為全局變數其實是window對象的成員，而局部變數是放在函數的棧里的。

六、 盡量少使用eval。

每次使用eval需要消耗大量時間，這時候使用JS所支持的閉包可以實現函數模板。

七、 減少對象查找

因為JavaScript的解釋性，所以a.b.c.d.e，需要進行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達式重複出現，只要可能，應該盡量少出現這樣的表達式，可以利用局部變數，把它放入一個臨時的地方進行查詢。

八、 字元串連接。

如果是追加字元串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要連接多個字元串，應該少使用+=，如s+=a;s+=b;s+=c;應該寫成s+=a + b + c；

而如果是收集字元串，比如多次對同一個字元串進行+=操作的話，最好使用一個緩存。怎麼用呢？使用JavaScript數組來收集，最後使用join方法連接起來，如下

var buf = new Array();for(var i = 0; i 100; i++){ buf.push(i.toString());}var all = buf.join(“”);

九、 類型轉換

1. 把數字轉換成字元串，應用”” + 1，雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說：(“” +) String() .toString() new String()

盡量使用編譯時就能使用的內部操作要比運行時使用的用戶操作要快。

String()屬於內部函數，所以速度很快，而.toString()要查詢原型中的函數，所以速度遜色一些，new String()用於返回一個精確的副本。

2. 浮點數轉換成整型，這個更容易出錯，很多人喜歡使用parseInt()，其實parseInt()是用於將字元串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()。Math是內部對象，所以Math.floor()其實並沒有多少查詢方法和調用的時間，速度是最快的。

3. 對於自定義的對象，如果定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之後，會嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個方法效率會更高

十、 盡量作用JSON格式來創建對象，而不是var obj=new Object()方法。

因為前者是直接複製，而後者需要調用構造器，因而前者的性能更好。

十一、 當需要使用數組時，也盡量使用JSON格式的語法，

使用JSON格式的語法即直接使用如下語法定義數組：[parrm,param,param…],而不是採用new Array(parrm,param,param…)這種語法。因為使用JSON格式的語法是引擎直接解釋的。而後者則需要調用Array的構造器。

十二、 對字元串進行循環操作，例如替換、查找，就使用正則表達式。

因為JS的循環速度比較慢，而正則表達式的操作是用C寫成的API，性能比較好。

十三、 插入HTML

很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，並設置他們的innerHTML來將自己的HTML代碼插入到頁面中。

十四、 對象查詢

使用[「」]查詢要比.items()更快

十五、 定時器

如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設置一個定時器。

十六、 盡量減少DOM調用

在Web開發中，JavaScript的一個很重要的作用就是對DOM進行操作。可是對DOM的操作是非常昂貴的，因為這會導致瀏覽器執行迴流 （reflow）操作。我們應該儘可能的減少DOM操作。

前端性能優化總結(一)-js、css優化

移動互聯網時代，用戶對於網頁的打開速度要求越來越高。首屏作為直面用戶的第一屏，其重要性不言而喻。優化用戶體驗更是我們前端開發非常需要 focus 的東西之一。

從用戶的角度而言，當打開一個網頁，往往關心的是從輸入完網頁地址後到最後展現完整頁面這個過程需要的時間，這個時間越短，用戶體驗越好。所以作為網頁的開發者，就從輸入url到頁面渲染呈現這個過程中去提升網頁的性能。

所以輸入URL後發生了什麼呢？在瀏覽器中輸入url會經歷域名解析、建立TCP連接、發送http請求、資源解析等步驟。

http緩存優化是網頁性能優化的重要一環，這一部分我會在後續筆記中做一個詳細總結，所以本文暫不多做詳細整理。本文主要從網頁渲染過程、網頁交互以及Vue應用優化三個角度對性能優化做一個小結。

首先談談拿到服務端資源後瀏覽器渲染的流程：

關鍵渲染路徑是瀏覽器將 HTML、CSS、JavaScript 轉換為在屏幕上呈現的像素內容所經歷的一系列步驟。也就是我們剛剛提到的的的瀏覽器渲染流程。

為儘快完成首次渲染，我們需要最大限度減小以下三種可變因素:

首先，DOM 和 CSSOM 通常是並行構建的，所以 CSS 載入不會阻塞 DOM 的解析。

然而，由於 Render Tree 是依賴於 DOM Tree 和 CSSOM Tree 的，

所以他必須等待到 CSSOM Tree 構建完成，也就是 CSS 資源載入完成(或者 CSS 資源載入失敗)後，才能開始渲染。因此，CSS 載入會阻塞 Dom 的渲染。

由此可見，對於 CSSOM 縮小、壓縮以及緩存同樣重要，我們可以從這方面考慮去優化。

當瀏覽器遇到 script 標記時，會阻止解析器繼續操作，直到 CSSOM 構建完畢，JavaScript 才會運行並繼續完成 DOM 構建過程。

當頁面中元素樣式的改變並不影響它在文檔流中的位置時（例如：color、background-color、visibility 等），瀏覽器會將新樣式賦予給元素並重新繪製它，這個過程稱為重繪。

迴流（Reflow）

當 Render Tree 中部分或全部元素的尺寸、結構、或某些屬性發生改變時，瀏覽器重新渲染部分或全部文檔的過程稱為迴流。

有時即使僅僅迴流一個單一的元素，它的父元素以及任何跟隨它的元素也會產生迴流。現代瀏覽器會對頻繁的迴流或重繪操作進行優化：瀏覽器會維護一個隊列，把所有引起迴流和重繪的操作放入隊列中，如果隊列中的任務數量或者時間間隔達到一個閾值的，瀏覽器就會將隊列清空，進行一次批處理，這樣可以把多次迴流和重繪變成一次。

當你訪問以下屬性或方法時，瀏覽器會立刻清空隊列:

因為隊列中可能會有影響到這些屬性或方法返回值的操作，即使你希望獲取的信息與隊列中操作引發的改變無關，瀏覽器也會強行清空隊列，確保你拿到的值是最精確的。

避免頻繁操作樣式，最好一次性重寫 style 屬性，或者將樣式列表定義為 class 並一次性更改 class 屬性。

避免頻繁操作 DOM，創建一個 documentFragment，在它上面應用所有 DOM 操作，最後再把它添加到文檔中。

也可以先為元素設置 display: none，操作結束後再把它顯示出來。因為在 display 屬性為 none 的元素上進行的 DOM 操作不會引發迴流和重繪。

避免頻繁讀取會引發迴流/重繪的屬性，如果確實需要多次使用，就用一個變數緩存起來。

對具有複雜動畫的元素使用絕對定位，使它脫離文檔流，否則會引起父元素及後續元素頻繁迴流。

圖片懶載入在一些圖片密集型的網站中運用比較多，通過圖片懶載入可以讓一些不可視的圖片不去載入，避免一次性載入過多的圖片導致請求阻塞（瀏覽器一般對同一域名下的並發請求的連接數有限制），這樣就可以提高網站的載入速度，提高用戶體驗。

將頁面中的img標籤src指向一張小圖片或者src為空，然後定義data-src（這個屬性可以自定義命名，我才用data-src）屬性指向真實的圖片。src指向一張默認的圖片，否則當src為空時也會向伺服器發送一次請求。可以指向loading的地址。注意，圖片要指定寬高。

當載入頁面時，先把可視區域內的img標籤的data-src屬性值負給src，然後監聽滾動事件，把用戶即將看到的圖片載入。這樣便實現了懶載入。

事件委託其實就是利用JS事件冒泡機制把原本需要綁定在子元素的響應事件（click、keydown……）委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。

優點：

例如有一個列表需要綁定點擊事件，每一個列表項的點擊都需要返回不同的結果。

傳統寫法：

傳統方法會利用for循環遍歷列表為每一個列表元素綁定點擊事件，當列表中元素數量非常龐大時，需要綁定大量的點擊事件，這種方式就會產生性能問題。這種情況下利用事件委託就能很好的解決這個問題。

改用事件委託：

輸入搜索時，可以用防抖debounce等優化方式，減少http請求；

這裡以滾動條事件舉例：防抖函數 onscroll 結束時觸發一次，延遲執行

節流函數：只允許一個函數在N秒內執行一次。滾動條調用介面時，可以用節流throttle等優化方式，減少http請求；

下面還是一個簡單的滾動條事件節流函數：節流函數 onscroll 時，每隔一段時間觸發一次，像水滴一樣

參考鏈接：