摘要：前端性能優(yōu)化總結(jié)資源優(yōu)化緩存最好的資源優(yōu)化就是不加載資源。緩存主要分為強(qiáng)制緩存和協(xié)商緩存。的值為服務(wù)端返回的數(shù)據(jù)到期時(shí)間。的使用教程為了保證正常的，有些渲染性能優(yōu)化還是有必要的。

最好的資源優(yōu)化就是不加載資源。緩存也是最見(jiàn)效的優(yōu)化手段。說(shuō)實(shí)話，雖然說(shuō)客戶端緩存發(fā)生在瀏覽器端，但緩存主要還是服務(wù)端來(lái)控制，與我們前端關(guān)系并不是很大。但還是有必要了解一下。

緩存包括服務(wù)端緩存和客戶端緩存，本文只談客戶端緩存。所謂客戶端緩存主要是http緩存。http緩存主要分為強(qiáng)制緩存和協(xié)商緩存。

Expires（http1.0）

在http1.0中使用Expires來(lái)做強(qiáng)制緩存。Exprires的值為服務(wù)端返回的數(shù)據(jù)到期時(shí)間。當(dāng)再次請(qǐng)求時(shí)的請(qǐng)求時(shí)間小于返回的此時(shí)間，則直接使用緩存數(shù)據(jù)。但由于服務(wù)端時(shí)間和客戶端時(shí)間可能有誤差，這也將導(dǎo)致緩存命中的誤差。

Cache-Control

Cache-Control有很多屬性，不同的屬性代表的意義也不同。

private：客戶端可以緩存

public：客戶端和代理服務(wù)器都可以緩存

max-age=t：緩存內(nèi)容將在t秒后失效

no-cache：需要使用協(xié)商緩存來(lái)驗(yàn)證緩存數(shù)據(jù)

no-store：所有內(nèi)容都不會(huì)緩存。

瀏覽器第一次請(qǐng)求數(shù)據(jù)時(shí)，服務(wù)器會(huì)將緩存標(biāo)識(shí)與數(shù)據(jù)一起響應(yīng)給客戶端，客戶端將它們備份至緩存中。再次請(qǐng)求時(shí)，客戶端會(huì)將緩存中的標(biāo)識(shí)發(fā)送給服務(wù)器，服務(wù)器根據(jù)此標(biāo)識(shí)判斷。若未失效，返回304狀態(tài)碼，瀏覽器拿到此狀態(tài)碼就可以直接使用緩存數(shù)據(jù)了。

Last-Modified

服務(wù)器在響應(yīng)請(qǐng)求時(shí)，會(huì)告訴瀏覽器資源的最后修改時(shí)間

if-Modified-Since

瀏覽器再次請(qǐng)求服務(wù)器的時(shí)候，請(qǐng)求頭會(huì)包含此字段，后面跟著在緩存中獲得的Last-Modified（最后修改時(shí)間）。服務(wù)端收到此請(qǐng)求頭發(fā)現(xiàn)有if-Modified-Since，則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行對(duì)比，如果大于被請(qǐng)求資源最后修改時(shí)間則返回304，瀏覽器從緩存獲取資源。如果小于被請(qǐng)求資源最后修改時(shí)間，則返回200，并返回最新資源，瀏覽器從服務(wù)端獲取最新的資源，并緩存。

Etag

由服務(wù)器生成的每個(gè)資源的唯一標(biāo)識(shí)字符串

If-None-Match

再次請(qǐng)求服務(wù)器時(shí)，瀏覽器的請(qǐng)求報(bào)文頭部會(huì)包含此字段，后面的值為在緩存中獲取的標(biāo)識(shí)。服務(wù)器接收到次報(bào)文后發(fā)現(xiàn)If-None-Match則與被請(qǐng)求資源的唯一標(biāo)識(shí)進(jìn)行對(duì)比。如果相同，說(shuō)明資源沒(méi)有被修改過(guò)，返回304，瀏覽器從緩存獲取資源，如果不同說(shuō)明資源被修改過(guò)，則返回200，并返回最新資源，瀏覽器從服務(wù)端獲取最新資源，并緩存。

Last-Modified與ETag是可以一起使用的，服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag，一致的情況下，才會(huì)繼續(xù)比對(duì)Last-Modified，最后才決定是否返回304。

如果使用前端打包工具，可以在打包文件時(shí)候在給文件添加版本號(hào)或者h(yuǎn)ash值，同樣可以區(qū)分資源是否過(guò)期。

使用CDN托管靜態(tài)資源

可以借助gulp、webpack等打包工具對(duì)js、css等文件合并與壓縮

圖片懶加載、按需加載，當(dāng)滾動(dòng)到圖片可視區(qū)域才去加載圖片

小圖片并且基本不會(huì)改動(dòng)的圖片使用base64編碼傳輸。base64不要濫用，即使小圖片經(jīng)過(guò)base64編碼之后也會(huì)生成很長(zhǎng)的字符串，如果濫用base64反而會(huì)適得其反

雪碧圖，這個(gè)也是針對(duì)基本不會(huì)更改的圖片才使用雪碧圖，因?yàn)槿绻粡垐D片修改，會(huì)導(dǎo)致整個(gè)雪碧圖重新生成，如果亂用也會(huì)適得其反。

借助webpack、gulp等工具壓縮資源

服務(wù)端開(kāi)啟gzip壓縮（壓縮率非?？捎^，一般都在30%之上）

如果有用打包工具，打包優(yōu)化要做好，公共資源、提取第三方代碼、不需要打包的庫(kù)...

讀過(guò)前面js運(yùn)行機(jī)制的應(yīng)該知道，從瀏覽器輸入url，到頁(yè)面出現(xiàn)在屏幕上，都發(fā)生了哪些事（tcp握手、dns解析等不在認(rèn)知范圍）。

FPS 16ms 小于10ms完成最好 Google devtool 查看幀率

如果瀏覽器FPS到達(dá)60，就會(huì)顯得比較流暢，大多數(shù)顯示器的刷新頻率是60Hz，瀏覽器會(huì)自動(dòng)按照這個(gè)頻率刷新動(dòng)畫(huà)。
按照FPS等于60來(lái)計(jì)算，平均一幀的時(shí)間為1000ms/60 = 16.7ms，所以每次渲染時(shí)間不能超過(guò)16ms，如果超過(guò)這個(gè)時(shí)間就會(huì)出現(xiàn)丟幀、卡頓現(xiàn)象。

可以在chrome瀏覽器開(kāi)發(fā)者工具中的Timeline中查看刷新率，可以查看所有幀率耗時(shí)情況以及某一幀的執(zhí)行情況。Timeline的使用教程：https://segmentfault.com/a/11...

為了保證正常的FPS，有些渲染性能優(yōu)化還是有必要的。下面所介紹的都是有關(guān)渲染優(yōu)化的策略。

盡量使用css3來(lái)做動(dòng)畫(huà)

總所周知，css的性能要比js快，所以能使用css，盡量不用js來(lái)實(shí)現(xiàn)

避免使用setTimeout或setInterval，盡量使用requestAnimationFrame來(lái)做動(dòng)畫(huà)或者高頻Dom操作。

因?yàn)閟etTimeout和setInterval無(wú)法保證callback函數(shù)的執(zhí)行時(shí)機(jī)，很可能在幀結(jié)束的時(shí)候執(zhí)行，從而導(dǎo)致丟幀，但是requestAnimationFrame可以保證callback函數(shù)在每幀動(dòng)畫(huà)開(kāi)始的時(shí)候執(zhí)行
requestAnimationFrame的中文MDN地址：https://developer.mozilla.org...

復(fù)雜的計(jì)算操作使用Web Workers

如果有需要復(fù)雜的數(shù)據(jù)操作，比如對(duì)一個(gè)有一個(gè)個(gè)元素的數(shù)組遍歷求和，那么Web Workers在適合不過(guò)了。

Web Workers可以讓JavaScript腳本運(yùn)行在后臺(tái)線程（類似于創(chuàng)建一個(gè)子線程），而后臺(tái)線程不會(huì)影響到主線程中的頁(yè)面。不過(guò)，使用Web Workers創(chuàng)建的線程是不能操作DOM樹(shù)。
有關(guān)Web Workers的更多可以查看MDN詳解：https://developer.mozilla.org...

css放在頭部，js放在尾部。

讀過(guò)前面js運(yùn)行機(jī)制的應(yīng)該知道頁(yè)面渲染是怎樣一個(gè)過(guò)程，不再贅述了。css放在頭部會(huì)避免生成html樹(shù)之后重新布局的閃屏現(xiàn)象，js一般對(duì)頁(yè)面的影響較大，一般放在尾部最后執(zhí)行。

事件防抖（debounce）與節(jié)流（throttle）

針對(duì)高頻觸發(fā)的事件（mousemove、scroll）等事件，如果不加以控制會(huì)在短時(shí)間內(nèi)觸發(fā)很多事件。

函數(shù)防抖是指頻繁觸發(fā)的情況下，只有足夠的空閑時(shí)間，才執(zhí)行代碼一次。場(chǎng)景：注冊(cè)時(shí)郵箱的輸入框，隨著用戶的輸入，實(shí)時(shí)判斷郵箱格式是否正確，當(dāng)?shù)谝淮屋斎胧录|發(fā)，設(shè)置定時(shí)：在800ms之后執(zhí)行檢查。假如只過(guò)了100ms，上次的定時(shí)還沒(méi)執(zhí)行，此時(shí)清除定時(shí)，重新定時(shí)800ms。直到最近一次的輸入，后面沒(méi)有緊鄰的輸入了，這最近一次的輸入定時(shí)計(jì)時(shí)結(jié)束，終于執(zhí)行了檢查代碼。

const filter  = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;  
$("#email").on("keyup",checkEmail());  
function checkEmail(){  
    let timer=null;  
    return function (){  
        clearTimeout(timer);  
        timer=setTimeout(function(){  
            console.log("執(zhí)行檢查");  
        },800);  
    }  
}  

函數(shù)節(jié)流是指一定時(shí)間內(nèi)js方法只跑一次。就是本來(lái)一秒要執(zhí)行100次的變成一秒執(zhí)行10次。
場(chǎng)景：函數(shù)節(jié)流應(yīng)用的實(shí)際場(chǎng)景，多數(shù)在監(jiān)聽(tīng)頁(yè)面元素滾動(dòng)事件的時(shí)候會(huì)用到。

var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判斷是否已空閑，如果在執(zhí)行中，則直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函數(shù)節(jié)流");
        canRun = true;
    }, 300);
};

Dom操作

前端開(kāi)發(fā)人員都知道Do操作是非常耗時(shí)的（曾親測(cè)過(guò)30*30的表格遍歷添加樣式）。所以盡量避免頻繁的Dom操作，如果避免不了就盡量對(duì)DOm操作做優(yōu)化。

1.：緩存Dom查詢，比如通過(guò)getElementByTagName("div")獲取Dom集，而不是逐個(gè)獲取。

2： 合并Dom操作，使用createDocumentFragment()

    var frag = document.createDocumentFragment()
    for (i<10) {
        var li = document.createElement("li")
        frag.appendChild(li)
    }
    document.body.appendChild(frag)

 3： 使用React、Vue等框架的虛擬dom（原理目前還不明白），可以更快的實(shí)現(xiàn)dom操作。

盡量避免重繪（rePaint）和回流（reFlow）

如果使用js修改元素的顏色或者背景色就會(huì)觸發(fā)重繪，重繪的開(kāi)銷還是比較昂貴的，因?yàn)闉g覽器會(huì)在某一個(gè)DOM元素的視覺(jué)效果改變后去check這個(gè)DOM元素內(nèi)的所有節(jié)點(diǎn)。

如果修改元素的尺寸和位置就會(huì)發(fā)生回流，回流開(kāi)銷更大，它會(huì)在某一個(gè)DOM元素的位置發(fā)生改變后觸發(fā)，而且它會(huì)重新計(jì)算所有元素的位置和在頁(yè)面中的占有的面積，這樣的話將會(huì)引起頁(yè)面某一個(gè)部分甚至整個(gè)頁(yè)面的重新渲染。

css3硬件加速

瀏覽器渲染時(shí)，會(huì)分為兩個(gè)圖層：普通圖層和復(fù)合圖層。

普通文檔流內(nèi)可以理解為一個(gè)復(fù)合圖層，absolute、fixed布局雖然可以脫離普通文檔流，但它仍然屬于普通圖層，不會(huì)啟動(dòng)硬件加速。上面說(shuō)的重繪（rePaint）和回流（reFlow）說(shuō)的就是普通圖層上的重繪和回流。

復(fù)合圖層會(huì)啟動(dòng)硬件加速。和普通圖層不在同一個(gè)圖層，所以復(fù)合圖層不會(huì)影響普通圖層，如果一個(gè)元素被提升到復(fù)合圖層，再操作該元素時(shí)，就不會(huì)引起普通圖層的重繪和回流，從而提升渲染性能。

如何啟動(dòng)硬件加速：

1.使用translate3d和translateZ

webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

2.使用opacity
需要?jiǎng)赢?huà)執(zhí)行的過(guò)程中才會(huì)創(chuàng)建合成層，動(dòng)畫(huà)沒(méi)有開(kāi)始或結(jié)束后元素還會(huì)回到之前的狀態(tài)

3.使用will-chang屬性
這個(gè)屬性比較不常用，一般配合opacity與translate使用

針對(duì)webkit瀏覽器，啟用硬件加速有些時(shí)候可能會(huì)導(dǎo)致瀏覽器頻繁閃爍或抖動(dòng)，可以使用下面方法消除：

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

如果使用硬件加速，請(qǐng)使用z-index配合使用， 因?yàn)槿绻@個(gè)元素添加了硬件加速，并且index層級(jí)比較低， 那么在這個(gè)元素的后面其它元素（層級(jí)比這個(gè)元素高的，或者相同的，并且releative或absolute屬性相同的）， 會(huì)默認(rèn)變?yōu)閺?fù)合層渲染，如果處理不當(dāng)會(huì)極大的影響性能

避免強(qiáng)制同步布局和布局抖動(dòng)

瀏覽器渲染過(guò)程為：js/css(javascript) > 計(jì)算樣式(style) > 布局(layout) > 繪制(paint) > 渲染合并圖層（Composite）

JavaScript：JavaScript實(shí)現(xiàn)動(dòng)畫(huà)效果，DOM元素操作等。
Style（計(jì)算樣式）：確定每個(gè)DOM元素應(yīng)該應(yīng)用什么CSS規(guī)則。
Layout（布局）：計(jì)算每個(gè)DOM元素在最終屏幕上顯示的大小和位置。
Paint（繪制）：在多個(gè)層上繪制DOM元素的的文字、顏色、圖像、邊框和陰影等。
Composite（渲染層合并）：按照合理的順序合并圖層然后顯示到屏幕上。

在js中如果讀取style屬性的某些值就會(huì)讓瀏覽器強(qiáng)行進(jìn)行一次布局、計(jì)算，然后再返回值，比如：

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

width,height

請(qǐng)求了getComputedStyle(), 或者 IE的 currentStyle

所以，如果強(qiáng)制瀏覽器在執(zhí)行JavaScript腳本之前先執(zhí)行布局過(guò)程，這就是所謂的強(qiáng)制同步布局。
比如下面代碼：

requestAnimationFrame(logBoxHeight);

// 先寫后讀，觸發(fā)強(qiáng)制布局
function logBoxHeight() {
    // 更新box樣式
    box.classList.add("super-big");

    // 為了返回box的offersetHeight值
    // 瀏覽器必須先應(yīng)用屬性修改，接著執(zhí)行布局過(guò)程
    console.log(box.offsetHeight);
}

// 先讀后寫，避免強(qiáng)制布局
function logBoxHeight() {
    // 獲取box.offsetHeight
    console.log(box.offsetHeight);

    // 更新box樣式
    box.classList.add("super-big");
}

在JavaScript腳本運(yùn)行的時(shí)候，它能獲取到的元素樣式屬性值都是上一幀畫(huà)面的，都是舊的值。因此，如果你在當(dāng)前幀獲取屬性之前又對(duì)元素節(jié)點(diǎn)有改動(dòng)，那就會(huì)導(dǎo)致瀏覽器必須先應(yīng)用屬性修改，結(jié)果執(zhí)行布局過(guò)程，最后再執(zhí)行JavaScript邏輯。

如果連續(xù)多次強(qiáng)制同步布局，就會(huì)導(dǎo)致布局抖動(dòng)
比如下面代碼：

function resizeAllParagraphsToMatchBlockWidth() {
  for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.width = box.offsetWidth + "px";
  }
}

作者：SylvanasSun
鏈接：https://juejin.im/post/59da456951882525ed2b706d
來(lái)源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

我們知道瀏覽器是一幀一幀的刷新頁(yè)面的，對(duì)于每一幀，上一幀的布局信息都是已知的。
強(qiáng)制布局就是使用js強(qiáng)制瀏覽器提前布局，比如下面代碼：

// bed  每次循環(huán)都要去獲取left ，就會(huì)發(fā)生一次回流
function logBoxHeight() {
  box.style.left += 10
  console.log(box.style.left)
}

// goog 
var width = box.offsetWidth;

function resizeAllParagraphsToMatchBlockWidth() {
  for (var i = 0; i < paragraphs.length; i++) {
    // Now write.
    paragraphs[i].style.width = width + "px";
  }
}

DOMContentLoaded與Load

DOMContentLoaded 事件觸發(fā)時(shí)，僅當(dāng)DOM加載完成才觸發(fā)DOMContentLoaded，此時(shí)樣式表，圖片，外部引入資源都還沒(méi)加載。而load是等所有的資源加載完畢才會(huì)觸發(fā)。

1. 解析HTML結(jié)構(gòu)。
2. 加載外部腳本和樣式表文件。
3. 解析并執(zhí)行腳本代碼。
4. DOM樹(shù)構(gòu)建完成。//DOMContentLoaded
5. 加載圖片等外部文件。
頁(yè)面加載完畢。//load

視覺(jué)優(yōu)化

等待加載時(shí)間可以合理使用loading gif動(dòng)圖一定程度上消除用戶等待時(shí)間的煩躁感

代碼對(duì)性能的影響可大可小，但是養(yǎng)成一個(gè)良好的寫代碼習(xí)慣和高質(zhì)量的代碼，會(huì)潛移默化的提高性能，同時(shí)也能提高自己的水平。廢話不多說(shuō)，直接看我總結(jié)的部分要點(diǎn)（因?yàn)檫@一部分知識(shí)點(diǎn)太多，需要大家寫代碼的時(shí)候多多總結(jié)）。

避免全局查找

訪問(wèn)局部變量會(huì)比訪問(wèn)全局變量快，因?yàn)閖s查找變量的時(shí)候現(xiàn)在局部作用局查找，找不到在逐級(jí)向上找。

// bad
function f () {
    for (...){
        console.log(window.location.href)
    }
}

//good
function f () {
    var href = window.location.href
    for (...){
        console.log(href)
    }
}

循環(huán)技巧

// bed 
for(var i = 0; i < array.length; i++){
    ....
}
// good
for(var i = 0, len = array.length; i < len; i++){
    ....
}
// 不用每次查詢長(zhǎng)度

不要使用for in 遍歷數(shù)組

for in是最慢的，其他的都差不多，其中直接使用for循環(huán)是最快的。for in只是適合用來(lái)遍歷對(duì)象。

使用+""代替String()吧變量轉(zhuǎn)化為字符串

var a = 12
//bad
a = String(a)

// good
var a = 12
a = a + ""

這個(gè)還有很多類似的，比如使用*1代替parseInt()等都是利用js的弱類型，其實(shí)這樣對(duì)性能提升不是很大，網(wǎng)上有人測(cè)試過(guò)，進(jìn)行十幾萬(wàn)次變量轉(zhuǎn)換，才快了零點(diǎn)幾秒。

刪除dom

刪除dom元素要?jiǎng)h除注冊(cè)在該節(jié)點(diǎn)上的事件，否則就會(huì)產(chǎn)生無(wú)法回收的內(nèi)存，在選擇removeChild和innerHTML=""二者之間盡量選擇后者，據(jù)說(shuō)removeChild有時(shí)候無(wú)法有效的釋放節(jié)點(diǎn)（具體原因不明）

使用事件代理處理事件

任何可以冒泡的事件都可以在節(jié)點(diǎn)的祖先節(jié)點(diǎn)上處理，這樣對(duì)于子節(jié)點(diǎn)需要綁定相同事件的情況就不用分別給每個(gè)子節(jié)點(diǎn)添加事件監(jiān)聽(tīng)，而是都提升到祖先節(jié)點(diǎn)處理。

通過(guò)js生成的dom對(duì)象必須append到頁(yè)面中

在IE下，js創(chuàng)建的額dom如果沒(méi)有添加到頁(yè)面，這部分內(nèi)存是不會(huì)被回收的

避免與null比較

可以使用下面方法替換與null比較
1.如果該值為引用類型，則使用instanceof檢查其構(gòu)造函數(shù)
2.如果該值為基本類型，使用typeof檢查類型

盡量使用三目運(yùn)算符代替if else

if(a>b){num = a}
else{num = b}

// 可以替換為
num = a > b ? a : b

當(dāng)判斷條件大于3中情況時(shí)，使用switch代替if

因?yàn)閟witch的執(zhí)行速度比if要快，也別是在IE下，速度大約是if的兩倍

先總結(jié)這么多，其實(shí)性能優(yōu)化還有很多，像預(yù)加載、服務(wù)端渲染、css選擇器優(yōu)化等等。等有機(jī)會(huì)再總結(jié)