1. 減少HTTP請求 和 傳輸報(bào)文大小

1） CSS SPRITE（雪碧圖、精靈圖）技術(shù)

2） 使用字體圖標(biāo)(ICON FONT) 或者 SVG等矢量圖：

?? · 渲染更快：它們是基于代碼渲染，相對(duì)于位圖（png/jpg/gif）需要將圖片編碼再渲染

?? · 不容易失真變形

3） 圖片懶加載（延遲加載）技術(shù)

??? · 第一次加載圖片時(shí)不去請求真實(shí)圖片，提高第一次頁面的速度

??? · 當(dāng)頁面加載完，把出現(xiàn)在用戶視野的圖片做真實(shí)加載。節(jié)約流量，減少對(duì)服務(wù)器的壓力

??? · 對(duì)于數(shù)據(jù)我們盡可能的分批加載，不要一次請求過多的數(shù)據(jù)。比如：分頁技術(shù)。

4）音頻文件取消預(yù)加載（preload='none'），增加第一次渲染頁面速度，用戶需要時(shí)再加載。

5） 客戶端和服務(wù)器的數(shù)據(jù)傳輸盡可能使用JSON格式，XML 格式比 JSON 格式更大

6） 把CSS、JS、圖片等文件進(jìn)行合并壓縮

?? · 合并：爭取CSS 和JS 都只導(dǎo)入一個(gè)。 => webpack 可以實(shí)現(xiàn)自動(dòng)合并壓縮

?? · 壓縮： 基于webpack只可以實(shí)現(xiàn)文件壓縮，圖片需要使用其他工具壓縮，還可以使用服務(wù)器的GZIP壓縮。

7）圖片地圖：對(duì)于多次使用的圖片（尤其是背景圖）盡可能把它提取為公共樣式，而不是重新設(shè)置 background

8）圖片BASE64：tool.css-js.com 這個(gè)網(wǎng)站可以轉(zhuǎn)換圖片，使用BASE64 代碼替代圖片，減去瀏覽器傳輸圖片時(shí)的轉(zhuǎn)換步驟，但會(huì)導(dǎo)致文件中代碼復(fù)雜，極不利于維護(hù)。不過 webpack 中可以配置圖片為BASE64，解決了這一問題。

2. 設(shè)置各種緩存、預(yù)處理和長鏈接機(jī)制

1）把不常更改的靜態(tài)資源做緩存處理：

?? · 304 或? ETAG的協(xié)商緩存

?? · Cache-control 和 Epires HTTP的強(qiáng)緩存

2）DNS緩存或預(yù)處理，減少DNS的查找。

3）設(shè)置本地的離線存儲(chǔ)（Manifest）或者把一些不經(jīng)常更改的數(shù)據(jù)做本地臨時(shí)存儲(chǔ)（webstorage、indexdb）

4）Connection：keep-alive 建立TCP長鏈接

5）CDN 地域分布式服務(wù)器，多加服務(wù)器。

3. 代碼方面性能優(yōu)化

1）減少對(duì)閉包的使用：

? · 過多的使用閉包會(huì)產(chǎn)生很多不銷毀的內(nèi)存，容易導(dǎo)致內(nèi)存溢出——棧溢出。

? · 減少閉包的嵌套：減少作用域鏈的查找層級(jí)。

? · 棧溢出=>死遞歸

function fn ()? {?

???? fn()

}

fn();

// 解決方法1：使用異步的方式

function func () {

????? setTimeout( func, 0)

}

func();

// 解決方法2：相互引用 => 引用類型之間相互調(diào)用，形成嵌套式內(nèi)存

let obj1 = {

???? name : 'noe'

}

let obj2 = {

???? name : 'two',

???? i : onj1

}

obj1.i = obj2

2） 關(guān)于動(dòng)畫： CSS3的transform處理的動(dòng)畫 > 傳統(tǒng)CSS樣式 > JS的requestAnimationFrame??? > 定時(shí)器動(dòng)畫

?? · 將動(dòng)畫放在脫離文檔流的元素上，這樣不會(huì)對(duì)其他元素位置造成影響。

?? · 避免使用iframe：因?yàn)閕frame 會(huì)嵌入其他頁面，這樣父頁面渲染的時(shí)候，還要將子頁面也同時(shí)渲染。

?? · 當(dāng)頁面處于休眠無訪問狀態(tài)（在一個(gè)瀏覽器中打開一個(gè)新的頁面，上一個(gè)頁面不關(guān)閉），此時(shí)requestAnimationFrame 動(dòng)畫會(huì)自動(dòng)暫停，直到恢復(fù)訪問才開始。而定時(shí)器無論什么狀態(tài) ，只有不處理，就會(huì)一直運(yùn)行，消耗瀏覽器性能。

3） 減少直接對(duì)DOM的操作：減少DOM的回流和重繪。

4） 低耦合高內(nèi)聚（基于封裝的方式(方法封裝、插件、組件、框架、類庫等封裝)，減少頁面中的冗余代碼，提高代碼的重復(fù)使用率）

5） 盡可能使用事件委托

6）避免出現(xiàn)死循環(huán)或者嵌套循環(huán)：嵌套循環(huán)會(huì)成指數(shù)增加循環(huán)次數(shù)。

7） 項(xiàng)目中盡可能使用異步編程來模擬出多線程的效果，避免主線程阻塞。

8）避免使用CSS表達(dá)式

9）函數(shù)的防抖和節(jié)流

10）減少使用eval：防止壓縮代碼的時(shí)候，由于符號(hào)書寫不合規(guī)，導(dǎo)致代碼混亂。

11）減少CSS3 filter濾鏡 的使用。

12）盡可能減少選擇器的層級(jí)：選擇器是從右向左解析

.box a { }

a { }

// 以上那個(gè)性能更好？ 答：第二個(gè)，因?yàn)?span id="s0sssss00s" class="color-default">選擇器是從右向左解析。

13）手動(dòng)回收堆棧內(nèi)存（賦值為null）