英文原文：Zack Grossbart，編譯：伯樂(lè)在線——王筱
你的網(wǎng)站正常運(yùn)轉(zhuǎn)」現(xiàn)在我們來(lái)讓它運(yùn)轉(zhuǎn)的更快差导。網(wǎng)站的性能由頁(yè)面載入速度和代碼執(zhí)行效率決定。一些服務(wù)可以讓你的網(wǎng)站載入更快蒸矛，比如壓縮JS和CDN，但是讓代碼執(zhí)行的更快你要做的事情。
代碼中很小的改動(dòng)都可能對(duì)性能造成巨大的影響雏掠。快速靈活的網(wǎng)站和可怕的“無(wú)響應(yīng)腳本”對(duì)話框可能只有幾行代碼的差別劣像。這篇文章告訴你如何通過(guò)用Chrome開(kāi)發(fā)者工具（Chrome Developer Tools）找到這幾行關(guān)鍵的代碼乡话。
設(shè)置一個(gè)基線
我們來(lái)看一個(gè)簡(jiǎn)單的“顏色排序器”應(yīng)用，這個(gè)應(yīng)用展示了一個(gè)由各種顏色構(gòu)成的網(wǎng)格耳奕，你可以拖拽這些顏色進(jìn)行混合绑青。每一個(gè)點(diǎn)都是一個(gè)div標(biāo)簽加上一些讓它看起來(lái)是圓的的CSS。

用chrome開(kāi)發(fā)者工具進(jìn)行JS性能分析

用chrome開(kāi)發(fā)者工具進(jìn)行JS性能分析

創(chuàng)建一個(gè)Profile
時(shí)間線(timeline)告訴我們代碼運(yùn)行花費(fèi)的時(shí)間堡称，但是并沒(méi)有幫助我們知道代碼運(yùn)行的時(shí)候發(fā)生了什么。我們可以做一些改動(dòng)然后不斷的測(cè)每次代碼運(yùn)行的時(shí)間艺演，但這是盲目的却紧。profiles給我們提供了更好的方法。profiler告訴我們哪些函數(shù)的執(zhí)行占用了大部分時(shí)間钞艇。讓我們切換到chrome開(kāi)發(fā)者工具的“Profiles”標(biāo)簽頁(yè)開(kāi)始性能測(cè)試啄寡，這里一共提供了三種類型的性能測(cè)試。

1. javascript cpu 性能測(cè)試
   顯示javascript占用了多少CPU
2. css選擇器性能測(cè)試
   顯示處理CSS選擇器占用的CPU
3. 堆椓ㄕ眨快照
   顯示javascript對(duì)象的內(nèi)存占用情況
   我們想要javascript代碼執(zhí)行的更快挺物，所以我們進(jìn)行CPU性能測(cè)試。我們開(kāi)始性能測(cè)試飘弧，刷新頁(yè)面然后停止识藤。
   
   用chrome開(kāi)發(fā)者工具進(jìn)行JS性能分析
   
   通過(guò)性能分析首先知道很多函數(shù)在執(zhí)行〈瘟妫“顏色排序器”使用了jQuery和jQuery UI,來(lái)處理些管理插件和解析表達(dá)式之類的事情痴昧。我發(fā)現(xiàn)列表最頂端的是decimalToHex和makeColorSorter兩個(gè)函數(shù)。這兩個(gè)函數(shù)占用了CPU13.2%的時(shí)間冠王，這是做優(yōu)化的好地方赶撰。
   我們可以點(diǎn)擊函數(shù)調(diào)用旁邊的“下一個(gè)”箭頭來(lái)查看完整的函數(shù)調(diào)用堆棧。展開(kāi)后柱彻，可以看到decimalToHex是被makeColorSorter調(diào)用的豪娜，makeColorSorter是通過(guò)$(document).ready調(diào)用的。
   代碼如下

$(document).ready( function() {
    makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
    makeSortable();
});

弄清楚這兩個(gè)函數(shù)是哪里調(diào)用的哟楷，也就弄清楚了讓顏色可以排序并不是最大的性能問(wèn)題瘤载。通常情況下性能問(wèn)題都是由多余的排序操作造成的，但是在我的代碼中相比與排序增加DOM元素花費(fèi)了更多時(shí)間卖擅。
我想要讓這些函數(shù)執(zhí)行的更快鸣奔，但是首先我想要將我的改動(dòng)區(qū)隔開(kāi)墨技。在頁(yè)面載入過(guò)程中會(huì)發(fā)生很多事情，我不想要這些影響到我的性能分析扣汪。

區(qū)隔問(wèn)題
我做了第二個(gè)版本私痹，這個(gè)版本中“顏色排序器”在我點(diǎn)擊按鈕之后才載入统刮，而不是在document ready的時(shí)候載入侥蒙。這就把文檔載入的過(guò)程分離出去鞭衩，讓我可以只對(duì)顏色分類進(jìn)行性能測(cè)試娃善。調(diào)完性能之后我可以立刻改回去聚磺。
讓我們調(diào)用新的函數(shù)testColorSorter并把它綁定到一個(gè)可點(diǎn)擊的按鈕上。

function testColorSorter() {
    makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
    makeSortable();
}
<button id="clickMe" onclick="testColorSorter();">Click me</button>

在我們進(jìn)行性能分析之前改變應(yīng)用可能導(dǎo)致意外的結(jié)果蜒蕾。這個(gè)改動(dòng)看起來(lái)很安全咪啡，但是我還是要重新運(yùn)行性能檢測(cè)器來(lái)看看我是不是無(wú)意中改變了什么撤摸。我會(huì)開(kāi)始一次新的性能分析褒纲，點(diǎn)擊應(yīng)用中的按鈕然后停止外厂。

用chrome開(kāi)發(fā)者工具進(jìn)行JS性能分析

用chrome開(kāi)發(fā)者工具進(jìn)行JS性能分析

讓代碼更高效
性能分析器只告訴我們哪個(gè)函數(shù)造成的問(wèn)題兼砖，所以我們要查看下函數(shù)的源碼來(lái)了解函數(shù)做了些什么既棺。

function decimalToHex(d) {
    var hex = Number(d).toString(16);
    hex = "00".substr(0, 2 - hex.length) + hex;
    console.log('converting '+ d +' to '+ hex);
    return hex;
}

“顏色排序器”中的每一個(gè)顏色點(diǎn)都有一個(gè)16進(jìn)制的色彩值丸冕，例如#86F01B和#2345FE.這些值表示一種顏色中紅，綠眼姐，藍(lán)三原色各自的數(shù)值。例如的背景色是#2456FE,代表紅色的值是36罢杉，綠色的值是86贡歧，藍(lán)色的是254，每一個(gè)數(shù)值必須是0到255之間的律想。
decimalToHex函數(shù)把這用RGB值表示的顏色轉(zhuǎn)化為頁(yè)面中我們使用的16進(jìn)制顏色蜘欲。這個(gè)函數(shù)十分的簡(jiǎn)單晌柬，但是我還是留下了一個(gè)可以去掉的調(diào)試代碼console.log在那里年碘。
decimalToHex 函數(shù)還在數(shù)字之前加上了補(bǔ)位屿衅。這是很重要的一點(diǎn)莹弊，因?yàn)橛行?0進(jìn)制數(shù)字對(duì)應(yīng)的是1個(gè)16進(jìn)制數(shù)字忍弛。比如十進(jìn)制中的10對(duì)應(yīng)著16進(jìn)制中的C，但是在CSS中需要一個(gè)兩位數(shù)蔗彤。為了讓這個(gè)進(jìn)制換算更快速，我們讓這段代碼不是那么泛化然遏。我知道每個(gè)需要補(bǔ)位的數(shù)字長(zhǎng)度都為1待侵，所以我們可以這樣重寫(xiě)這個(gè)函數(shù)姨裸。

function decimalToHex(d) {
    var hex = Number(d).toString(16);
    return hex.length === 1 ? '0' + hex : hex; 
}

第三個(gè)版本的“顏色排序器”只有在需要補(bǔ)位的時(shí)候才改變字符串，并且不用調(diào)用substr函數(shù)中狂。有了這個(gè)新函數(shù)胃榕，運(yùn)行時(shí)間是137毫秒。再次對(duì)代碼進(jìn)行性能測(cè)試苦掘，可以發(fā)現(xiàn)decimalToHex函數(shù)只占用了總時(shí)間的%0.04,到了列表的下部鹤啡。

用chrome開(kāi)發(fā)者工具進(jìn)行JS性能分析

減小改動(dòng)
“顏色排序器”中的多彩顏色是用過(guò)正弦曲線生成的涮母。在光譜中設(shè)置一個(gè)中心點(diǎn)叛本，然后以一定的偏移來(lái)創(chuàng)建這個(gè)曲線彤钟。這就把顏色變成了一個(gè)“彩虹模型”逸雹。我們還可以通過(guò)改變紅綠藍(lán)三原色的使用頻率來(lái)改變顏色云挟。

function makeColorSorter(frequency1, frequency2, frequency3,
phase1, phase2, phase3, center, width, len) {
    for(var i = 0; i < len; ++i)
    {
        var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
        var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
        var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);
        console.log( 'red: ' + decimalToHex(red));
        console.log('green: ' + decimalToHex(green));
        console.log( 'blue: ' + decimalToHex(blue));
        var div = $( '<div class="colorBlock"></div>' );
        div.css( 'background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue));
        $( '#colors' ).append(div);
    }
}

我們要去掉console.log函數(shù)。這些調(diào)用非常的糟糕休蟹，因?yàn)槊看螆?zhí)行都會(huì)調(diào)用decimalToHex函數(shù)，這意味著decimalToHex函數(shù)會(huì)被多調(diào)用2倍的次數(shù)绑榴。這個(gè)函數(shù)大幅度的改變了DOM結(jié)構(gòu)翔怎。每次循環(huán)赤套，都向id為colors的div中添加一個(gè)新的div珊膜。這就讓我懷疑這就是e.extend.mergefunction做的事情。用性能分析器做一個(gè)小實(shí)驗(yàn)就可以搞清楚。
我想要一次把所有的div添加進(jìn)去堪遂，而不是在每個(gè)循環(huán)中添加一個(gè)新的div萌庆。創(chuàng)建一個(gè)變量來(lái)存儲(chǔ)數(shù)據(jù)践险，然后在最后一次性添加進(jìn)去。

function makeColorSorter(frequency1, frequency2, frequency3,
phase1, phase2, phase3, center, width, len) {
    var colors = "";
    for(var i = 0; i < len; ++i)
    {
    var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
    var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
    var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center); 
    colors += '<div class="colorBlock" style="background-color: #' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue) + '"></div>';
    }
    $('#colors').append(colors);
}

這個(gè)小改動(dòng)意味著DOM只在添加所有div的時(shí)候做一次改變彭则。用時(shí)間線進(jìn)行測(cè)試俯抖，我們發(fā)現(xiàn)從點(diǎn)擊到渲染花費(fèi)了31毫秒芬萍。這個(gè)dom變動(dòng)，使得第四個(gè)版本的運(yùn)行時(shí)間降低了86%北戏。我可以再次打開(kāi)性能分析器(profiler)漫蛔，發(fā)現(xiàn)e.extend.merge函數(shù)占用了很少的時(shí)間惩猫，在列表中已經(jīng)看不到它了。
我們還可以完全移除decimalToHex函數(shù)讓代碼更快一點(diǎn)拌阴。因?yàn)镃SS支持RGB顏色奶镶，所以我們不需要把他們轉(zhuǎn)換到16進(jìn)制〕д颍現(xiàn)在我們可以這樣寫(xiě)makeColorSorter函數(shù)。

function makeColorSorter(frequency1, frequency2, frequency3,
phase1, phase2, phase3, center, width, len) {
var colors ="";
for( var i = 0; i < len; ++i)
{
    var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
    var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
    var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);
    colors +='<div class="colorBlock" style="background-color: rgb(' + red + ',' + green + ',' + blue + ')"></div>';
}
$('#colors').append(colors);
}

第五個(gè)版本的執(zhí)行只用了26毫秒而且代碼行數(shù)從28行減少到18行酌媒。
在你的應(yīng)用中進(jìn)行Javascript性能分析
實(shí)際工作中的應(yīng)用要比“顏色排序器”復(fù)雜的多秒咨，但是做性能分析要遵循同樣的基本原則

1. 設(shè)置一個(gè)基線掌挚，這樣你就知道你是從何處開(kāi)始的。
2. 把問(wèn)題從應(yīng)用的其他代碼隔離出來(lái)陡厘。
3. 在一個(gè)可控的環(huán)境下進(jìn)行優(yōu)化糙置，頻繁的使用時(shí)間線（timelines）和性能分析器（profiles）

還有一些性能優(yōu)化的準(zhǔn)則

1. 從最慢的部分開(kāi)始是目，這樣在時(shí)間優(yōu)化上可以得到最大的提升。
2. 控制環(huán)境网持。如果你換了電腦或者做了任何大的改動(dòng)功舀，都要設(shè)置新的基線。
3. 多次分析以防你電腦的異常導(dǎo)致得到不正確的結(jié)果列敲。

每個(gè)人都想要他的網(wǎng)站更快帖汞，你必須開(kāi)發(fā)新的功能翩蘸，但是新的功能通常會(huì)讓網(wǎng)站更慢。所以花費(fèi)時(shí)間來(lái)做性能優(yōu)化是有價(jià)值的扶踊。
性能分析和優(yōu)化使得最終版顏色分類器的執(zhí)行時(shí)間減少了92%郎任。你的網(wǎng)站可以變快多少舶治？