js性能優化調試（Js性能優化）

本文目錄一覽：

1、Web前端性能優化的實用技巧匯總
2、谷歌瀏覽器怎麼打開js調試工具
3、前端性能優化總結(一)-js、css優化
4、javascript的性能優化有哪些
5、谷歌瀏覽器怎麼調試js

Web前端性能優化的實用技巧匯總

今天小編要跟大家分享的文章是關於Web前端性能優化的實用技巧匯總。javascript在瀏覽器中運行的性能，可以認為是開發者所面臨的最嚴重的可用性問題。這個問題因為javascript的阻塞性而變得複雜，事實上，多數瀏覽器使用單一進程來處理用戶界面和js腳本執行，所以同一時刻只能做一件事。js執行過程耗時越久，瀏覽器等待響應的時間越長。

一.提高載入性能

1.IE8,FF,3.5,Safari4和Chrome都允許並行下載js文件，當script下載資源時不會阻塞其他script的下載。但是js下載仍然會阻塞其他資源的下載，如圖片。儘管腳本下載不會互相影響，但頁面仍然必須等待所有js代碼下載並執行完才能繼續。因此仍然存在腳本阻塞問題.推薦將所有js文件放在body標籤底部以減少對整個頁面的影響。

2.減少頁面外鏈腳本文件的數量將會提高頁面性能：

http請求會帶來額外的開銷，因此下載單個300k的文件將比下載10個30k的文件效率更高。

3.動態腳本載入技術：

無論何時啟動下載，文件的下載和執行都不會阻塞頁面其他進程。

functionlaodScript(url,callback){

varscript=document.createElement(‘script’);_

_cript.type=’text/javascript’;

__f(script.readyState){//ie

____cript.onreadystatechange=function(){_____

if(script.readyState==’loaded’||script.readyState==’complete’){_______

_cript.onreadystatechange=null;_______

callback()_____

____

}else{//其他瀏覽器___

script.onload=function(){_____

_allback()

___}_

script.src=url;_

document.getElementsByTagName(‘head’)[0].appendChild(script);

}

//使用

loadScript(‘./a.js’,function(){_

loadScript(‘./b.js’,function(){___

loadScript(‘./c.js’,function(){_____

console.log(‘載入完成’)___

})_

})

4.無阻塞載入類庫——LABjs,使用方法如下：

//鏈式調用時文件逐個下載，.wait()用來指定文件下載並執行完畢後所調用的函數

$LAB.script(‘./a.js’)_

.script(‘./b.js’)_

.wait(function(){__

_pp.init();

})

//為了保證執行順序，可以這麼做,此時a必定在b前執行

$LAB.script(‘./a.js’).wait()_

.script(‘./b.js’)_

.wait(function(){___

_pp.init();

})

二.數據存取與JS性能

1.在js中，數據存儲的位置會對代碼整體性能產生重大影響。數據存儲共有4種方式：字面量，變數，數組項，對象成員。他們有著各自的性能特點。

2.訪問字面量和局部變數的速度最快，相反，訪問數組和對象相對較慢

3.由於局部變數存在於作用域鏈的起始位置，因此訪問局部變數的比訪問跨域作用變數更快

4.嵌套的對象成員會明顯影響性能，應盡量避免

5.屬性和方法在原型鏈位置越深，訪問他的速度越慢

6.通常我們可以把需要多次使用的對象成員，數組元素，跨域變數保存在局部變數中來改善js性能

三.DOM編程

1.訪問DOM會影響瀏覽器性能，修改DOM則更耗費性能，因為他會導致瀏覽器重新計算頁面的幾何變化。

註：如過在一個對性能要求比較高的操作中更新一段HTML，推薦使用innerHTML，因為它在絕大多數瀏覽器中運行的都很快。但對於大多數日常操作而言，並沒有太大區別，所以你更應該根據可讀性，穩定性，團隊習慣，代碼風格來綜合決定使用innerHTML還是createElement()

2.HTML集合優化

HTML集合包含了DOM節點引用的類數組對象，一直與文檔保持連接，每次你需要最新的信息時，都會重複執行查詢操作，哪怕只是獲取集合里元素的個數。

①_優化一——集合轉數組collToArr

functioncollToArr(coll){_

for(vari=0,a=[],len=coll.length;i

a._ush(coll[i]);

returna

}

②緩存集合length

③訪問集合元素時使用局部變數（即將重複的集合訪問緩存到局部變數中，用局部變數來操作）

3.遍歷DOM

①使用只返回元素節點的API遍歷DOM,因為這些API的執行效率比自己實現的效率更高：

td{border:1pxsolid#ccc;padding:5px;margin:auto;}

tdp{text-align:left;}

tdpspan{text-align:center;display:block;}

屬性名

被替代屬性

children

childNodes

childElementCount

childNodes.length

firstElementChild

firstChild

lastElementChild

lastChild

nextElementSibling

nextSibling

previousElementSibling

previousSibling

_諮≡衿_PI——querySelectorAll()

querySelectorAll()方法使用css選擇器作為參數並返回一個NodeList——包含著匹配節點的類數組對象，該方法不會返回HTML集合，因此返回的節點不會對應實時文檔結構，著也避免了HTML集合引起的性能問題。

let_rr=_ocument.querySelectorAll(‘div.warning,_iv.notice_’)

4.重繪和重排

瀏覽器在下載完頁面的所有組件——html,js,css,圖片等之後，會解析並生成兩個內部數據結構——_OM樹，渲染樹.一旦DOM樹和渲染樹構建完成，瀏覽器就開始繪製頁面元素（paint）.

①重排發生的條件：

添加或刪除可見的DOM元素位置變化元素尺寸改變內容改變頁面渲染器初始化瀏覽器窗口尺寸變化出現滾動條時會觸發整個頁面的重排_嘏瘧囟ㄖ鞀

5.渲染樹變化的排列和刷新

大多數瀏覽器通過隊列化修改並批量執行來優化重排過程，然而獲取布局信息的操作會導致隊列強制刷新。

offsetTop,offsetWidth…

scrollTop,scrollHeight…

clientTop,clientHeight…

getComputedStyle()

一些優化建議：將設置樣式的操作和獲取樣式的操作分開：

//設置樣式

body.style.color=’red’;

body.style.fontSize=’24px’

//讀取樣式

letcolor=body.style.color

let_ontSize=_ody.style.fontSize

另外，獲取計算屬性的兼容寫法：

functiongetComputedStyle(el){_

varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,”);_

returncomputed

}

6.最小化重繪和重排

①.批量改變樣式

/*使用cssText

*/el.style.cssText=’border-left:1px;_order-right:2px;_adding:20px’;

②.批量修改dom的優化方案——使元素脫離文檔流-對其應用多重改變-把元素帶迴文檔

functionappendDataToEl(option){

vartargetEl=option.target||document.body,___

createEl,___

data=option.data||[];_//讓容器脫離文檔流，減少重繪重排_

vartargetEl_display=targetEl.style.display;_

targetEl.style.display=’none’;

//*****創建文檔片段來優化Dom操作****_

varfragment=document.createDocumentFragment();_//給元素填充數據_

for(vari=0,max=data.length;i

createEl=

document.createElement(option.createEl);___

for(varitemindata[i]){_____

if(item.toString()===’text’){_______

createEl.appendChild(document.createTextNode(data[i][item]));________ontinue;___________

_f(item.toString()===’html’){_______

createEl.innerHTML=item,data[i][item];_______

continue;_____

}_____

_reateEl.setAttribute(item,data[i][item]);_______

//****將填充好的node插入文檔片段****___

fragment.appendChild(createEl);___

//****將文檔片段統一插入目標容器****_

targetEl.appendChild(fragment);_

//顯示容器，完成數據填充_

targetEl.style.display=

targetEl_display;

}

//使用

varwrap=document.querySelectorAll(‘.wrap’)[0];

vardata=[_

_name:’xujaing’,text:’選景’,title:’xuanfij’},_

{name:’xujaing’,text:’選景’,title:’xuanfij’},_

{name:’xujaing’,text:’選景’,title:’xuanfij’}];

appendDataToEl({_

target:wrap,_

createEl:’div’,

_ata:data

});

上面的優化方法使用了文檔片段:_蔽頤前鹽牡燈尾迦氳澆詰闃惺保導噬媳惶砑擁鬧皇歉悶蔚淖詠詰悖皇瞧偽舊懟？梢允溝_om操作更有效率。

②.緩存布局信息

//緩存布局信息

letcurrent=el.offsetLeft;

current++;

el.style.left=current+’px’;

if(current300){_

stop();

}

④.慎用:hover

如果有大量元素使用:hover,那麼會降低相應速度，CPU升高

⑤.使用事件委託（通過事件冒泡實現）來減少事件處理器的數量，減少內存和處理時間

functiondelegation(e,selector,callback){_

e=e||window.event;_

vartarget=e.target||e.srcElement;

_if(target.nodeName!==selector||

target.className!==selector||target.id!==selector){___

return;

_}_

if(typeofe.preventDefault===’function’){__

_.preventDefault();___

e.stopPropagation();

}else{___

e.returnValue=false;

e.cancelBubble=true;_

}

__allback()}

四.演算法和流程式控制制

1.循環中減少屬性查找並反轉(可以提升50%-60%的性能)

//for循環

for(vari=item.length;i–){_

process(item[i]);

}

//while循環

varj=item.length;

while(j–){_

process(item[i]);

}

2.使用Duff裝置來優化循環（該方法在後面的文章中會詳細介紹）

3.基於函數的迭代（比基於循環的迭代慢）

items.forEach(function(value,index,array){__rocess(value);})

4.通常情況下switch總比if-else快，但是不是最佳方案

五.字元串和正則表達式

1.除了IE外，其他瀏覽器會嘗試為表達式左側的字元串分配更多的內存，然後簡單的將第二個字元串拷貝到他的末尾，如果在一個循環中，基礎字元串位於最左側，就可以避免重複拷貝一個逐漸變大的基礎字元串。2.使用[\s\S]來匹配任意字元串3.去除尾部空白的常用做法：

if(!String.prototype.trim){_

String.prototype.trim=function(){___

returnthis.replace(/^\s+/,”).replace(/\s\s*$/,”)_

}

六.快速響應的用戶界面

1.瀏覽器的UI線程：用於執行javascript和更新用戶界面的進程。

2.在windows系統中定時器解析度為15毫秒，因此設置小於15毫秒將會使IE鎖定，延時的最小值建議為25ms.

3.用延時數組分割耗時任務：

functionmultistep(steps,args,callback){_

vartasks=steps.concat();

__etTimeout(function(){___

vartask=tasks.shift();___

task.apply(null,args||[]);_//調用Apply參數必須是數組

___

if(tasks.length0){_____

setTimeout(arguments.callee,25);

___else{_____

_allback();___

},25);

}

4.記錄代碼運行時間批處理任務：

functiontimeProcessArray(items,process,callback){_

vartodo=item.concat();

__etTimeout(function(){___

varstart=+newDate();

__o{_____

_rocess(todo.shift());___

}while(todo.length0(+newDate()-start____f(todo.length0){_____

_etTimeout(arguments.callee,25);

___else{____

_allback(items);_

_,25)

}

5.使用WebWorker：它引入了一個介面，能使代碼運行且不佔用瀏覽器UI線程的時間。一個Worker由如下部分組成：

①一個navigator對象，包括app

谷歌瀏覽器怎麼打開js調試工具

首先我們打開開發者工具，你可以直接在頁面上點擊右鍵，然後選擇審查元素或者在Chrome的工具中找到或者你直接記住這個快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打開控制台)，或者直接按F12。

打開的開發者工具就長下面的樣子，建議大家將開發者工具彈出作為一個獨立的窗口：

1、Elements標籤頁

這個就是查看、編輯頁面上的元素，包括HTML和CSS：

左側就是對頁面HTML結構的查看與編輯，你可以直接在某個元素上雙擊修改元素的屬性，或者你點右鍵選;Edit as Html;直接對元素的HTML進行編輯，或者刪除某個元素，所有的修改都會即時在頁面上得到呈現。（註：看到上面右鍵菜單的最後一個選項;審查元素了么？這是不是說明這個開發者工具的頁面也是HTML來的呢？你點一下就知道了哦，嘿嘿）

你還可以對某個元素進行監聽，在JS對元素的屬性或者HTML進行修改的時候，直接觸發斷點，跳轉到對改元素進行修改的JS代碼處：

Elements標籤頁的右側可以對元素的CSS進行查看與編輯修改：

你還可以通過這裡看到各CSS選擇器設置的CSS值的覆蓋情況。

下面的Metrics可以看到元素占的空間情況（寬、高、Padding、Margin）

注意到上面的Properties沒有？這個很有用哦，可以讓你看到元素具有的方法與屬性，比查API手冊要方便得多哦（要注意某些方法和屬性在IE、FireFox等其他瀏覽器下面的支持情況哦）。

2、Resources標籤頁

Resources標籤頁可以查看到請求的資源情況，包括CSS、JS、圖片等的內容，同時還可以查看到存儲相關的如Cookies、HTML5的Database和LocalStore等，你可以對存儲的內容編輯和刪除。

這裡的CSS文件有一個好玩的特性，你可以直接修改CSS文件，並且修改即時生效哦：

3、Network標籤頁

Network標籤頁對於分析網站請求的網路情況、查看某一請求的請求頭和響應頭還有響應內容很有用，特別是在查看Ajax類請求的時候，非常有幫助。注意是在你打開Chrome開發者工具後發起的請求，才會在這裡顯示的哦。

點擊左側某一個具體去請求URL，可以看到該請求的詳細HTTP請求情況：

我們可以在這裡看到HTTP請求頭、HTTP響應頭、HTTP返回的內容等信息，對於開發、調試，都是很有用的。

4、Scripts標籤頁

很明顯，這個標籤頁就是查看JS文件、調試JS代碼的，直接看下圖的說明：

還有你可以打開Javascript控制台，做一些其他的查看或者修改：

你甚至還可以為某一XHR請求或者某一事件設置斷點：

5、Timeline標籤頁

注意這個Timeline的標籤頁不是指網路請求的時間響應情況哦（這個在Network標籤頁里查看），這個Timeline指的JS執行時間、頁面元素渲染時間：

點擊底部的Record就可以開始錄製頁面上執行的內容。

6、Profiles標籤頁

這個主要是做性能優化的，包括查看CPU執行時間與內存佔用：

7、Audits標籤頁

這個對於優化前端頁面、加速網頁載入速度很有用哦（相當與Yslow）：

點擊run按鈕，就可以開始分析頁面，分析完了就可以看到分析結果了

它甚至可以分析出頁面上樣式表中有哪些CSS是沒有被使用的哦：

8、Console標籤頁

就是Javascript控制台了：

這個除了查看錯誤信息、列印調試信息（console.log()）、寫一些測試腳本以外，還可以當作Javascript API查看用。

例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入;並執行：

怎麼樣，一目了然了吧？再例如我想查看日期函數都有哪些方法：

（註：注意在這裡看到的某些方法和屬性是ES5新增的，記得兼容其他瀏覽器的支持情況哦）

Google Chrome除了簡潔、快速，現在的Chrome的插件也非常的豐富了。而對於web開發者來說，Chrome對於HTML5、CSS3等一些新標準的支持也是比較完善的，而且Chrome的開發者工具我個人認為真的非常好用，這就是為什麼我向web開發者推薦使用Chrome的原因。

前端性能優化總結(一)-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 時，每隔一段時間觸發一次，像水滴一樣

參考鏈接：

javascript的性能優化有哪些

類型轉換類型轉換是大家常犯的錯誤，因為JavaScript是動態類型語言，你不能指定變數的類型。 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，所以直接調用這個方法效率會更高使用直接量其實這個影響倒比較小，可以忽略。什麼叫使用直接量，比如，JavaScript支持使用[param,param,param,…]來直接表達一個數組，以往我們都使用new Array(param,param,…)，使用前者是引擎直接解釋的，後者要調用一個Array內部構造器，所以要略微快一點點。同樣，var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快。字元串遍歷操作對字元串進行循環操作，譬如替換、查找，應使用正則表達式，因為本身JavaScript的循環速度就比較慢，而正則表達式的操作是用C寫成的語言的API，性能很好。高級對象自定義高級對象和Date、RegExp對象在構造時都會消耗大量時間。如果可以復用，應採用緩存的方式。DOM相關插入HTML 很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，並設置他們的innerHTML來將自己的HTML代碼插入到頁面中。對象查詢使用[「」]查詢要比.items()更快，這和前面的減少對象查找的思路是一樣的，調用.items()增加了一次查詢和函數的調用。創建DOM節點通常我們可能會使用字元串直接寫HTML來創建節點，其實這樣做無法保證代碼的有效性字元串操作效率低,所以應該是用document.createElement()方法，而如果文檔中存在現成的樣板節點，應該是用cloneNode()方法，因為使用createElement()方法之後，你需要設置多次元素的屬性，使用cloneNode()則可以減少屬性的設置次數——同樣如果需要創建很多元素，應該先準備一個樣板節點。定時器如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設置一個定時器。

谷歌瀏覽器怎麼調試js