性能優(yōu)化的話大致有以下幾個(gè)部分:
加載優(yōu)化
圖片優(yōu)化
CSS優(yōu)化
腳本優(yōu)化
渲染優(yōu)化

加載優(yōu)化

1.減少http請(qǐng)求

基本原理：

http協(xié)議是無(wú)狀態(tài)的應(yīng)用層協(xié)議，意味著每次http請(qǐng)求都需要建立通信鏈路、進(jìn)行數(shù)據(jù)傳輸，而在服務(wù)器端，每個(gè)http都需要啟動(dòng)獨(dú)立的線程去處理。這些通信和服務(wù)的開(kāi)銷(xiāo)都很昂貴，減少http請(qǐng)求的數(shù)目可有效提高訪問(wèn)性能。

一個(gè)正常HTTP請(qǐng)求的流程簡(jiǎn)述：如在瀏覽器中輸入"www.xxxx.com"并按下回車(chē)，瀏覽器再與這個(gè)URL指向的服務(wù)器建立連接，然后瀏覽器才能向服務(wù)器發(fā)送請(qǐng)求信息，服務(wù)器在接受到請(qǐng)求的信息后再返回相應(yīng)的信息，瀏覽器接收到來(lái)自服務(wù)器的應(yīng)答信息后，對(duì)這些數(shù)據(jù)解析執(zhí)行。

而當(dāng)我們請(qǐng)求的網(wǎng)頁(yè)文件中有很多圖片、CSS、JS甚至音樂(lè)等信息時(shí)，將會(huì)頻繁的與服務(wù)器建立連接，與釋放連接，這必定會(huì)造成資源的浪費(fèi)，且每個(gè)HTTP請(qǐng)求都會(huì)對(duì)服務(wù)器和瀏覽器產(chǎn)生性能負(fù)擔(dān)。

網(wǎng)速相同的條件下，下載一個(gè)100KB的圖片比下載兩個(gè)50KB的圖片要快。所以，需要減少HTTP請(qǐng)求。

a ?.使用圖片精靈合并圖片
b ?.合并css. javaScipt
將瀏覽器一次訪問(wèn)需要的javascript和CSS合并成一個(gè)文件，這樣瀏覽器就只需要一次請(qǐng)求。
開(kāi)源的php項(xiàng)目——Minify，它可以幫助你合并，精簡(jiǎn)，壓縮和緩存Js以及CSS文件
c .合理使用緩存
使用緩存可以減少向服務(wù)器的請(qǐng)求數(shù)，節(jié)省加載時(shí)間，所以所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長(zhǎng)Cache（長(zhǎng)Cache資源的更新可使用時(shí)間戳）
? i>緩存一切可緩存的資源
?ii>使用長(zhǎng)Cache(使用時(shí)間戳更新Cache)

2. 壓縮HTML. CSS. JavaScript

減少資源大小可以加快網(wǎng)頁(yè)顯示速度，所以要對(duì)HTML、CSS、JavaScript等進(jìn)行代碼壓縮，并在服務(wù)器端設(shè)置GZip。
a. 壓縮（例如，多余的空格、換行符和縮進(jìn)）
壓縮用：YUI Compressor，它的特點(diǎn)是：移除注釋?zhuān)灰瞥~外的空格；細(xì)微優(yōu)化；標(biāo)識(shí)符替換。
http://ganquan.info/yui/?hl=zh-CN
菜鳥(niǎo)工具：https://c.runoob.com/
b. 啟用GZip

gzip是GNUzip的縮寫(xiě)，它是一個(gè)GNU自由軟件的文件壓縮程序。 Gzip通?？梢詼p少70%網(wǎng)頁(yè)內(nèi)容的大小，包括腳本、樣式表、圖片等文件。

3. 無(wú)阻塞

將css和js放到外部文件中引用, css放頭, js放尾
寫(xiě)在HTML頭部的JavaScript（無(wú)異步），和寫(xiě)在HTML標(biāo)簽中的Style會(huì)阻塞頁(yè)面的渲染，因此CSS放在頁(yè)面頭部并使用Link方式引入，避免在HTML標(biāo)簽中寫(xiě)Style，JavaScript放在頁(yè)面尾部或使用異步方式加載。

瀏覽器會(huì)在下載完成全部CSS之后才對(duì)整個(gè)頁(yè)面進(jìn)行渲染，Javascript則相反，瀏覽器在加載javascript后立即執(zhí)行，有可能會(huì)阻塞整個(gè)頁(yè)面，造成頁(yè)面顯示緩慢。

4. 加載方式

首屏加載
首屏的快速顯示，可以大大提升用戶對(duì)頁(yè)面速度的感知，因此應(yīng)盡量針對(duì)首屏的快速顯示做優(yōu)化。

5. 按需加載

將不影響首屏的資源和當(dāng)前屏幕資源不用的資源放到用戶需要時(shí)才加載，可以大大提升重要資源的顯示速度和降低總體流量。
PS：按需加載會(huì)導(dǎo)致大量重繪，影響渲染性能
a. LazyLoad
b. 滾屏加載
c. 通過(guò)Media Query加載

6. 預(yù)加載

大型重資源頁(yè)面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁(yè)面。但Loading時(shí)間過(guò)長(zhǎng)，會(huì)造成用戶流失。
對(duì)用戶行為分析，可以在當(dāng)前頁(yè)加載下一頁(yè)資源，提升速度。
a. 可感知Loading(如進(jìn)入空間游戲的Loading）
b. 不可感知的Loading（如提前加載下一頁(yè)）

7. 避免重定向

重定向(Redirect)就是通過(guò)各種方法將各種網(wǎng)絡(luò)請(qǐng)求重新定個(gè)方向轉(zhuǎn)到其它位置。
重定向會(huì)影響加載速度，降低了用戶體驗(yàn)，所以應(yīng)在服務(wù)器正確設(shè)置避免重定向。
重定向過(guò)程：客戶瀏覽器發(fā)送http請(qǐng)求，web服務(wù)器接受后發(fā)送302狀態(tài)碼響應(yīng)及對(duì)應(yīng)新的location給客戶瀏覽，客戶瀏覽器發(fā)現(xiàn)是302響應(yīng)，則自動(dòng)再發(fā)送一個(gè)新的http請(qǐng)求，請(qǐng)求url是新的location地址，服務(wù)器根據(jù)此請(qǐng)求尋找資源并發(fā)送給客戶。

8. 減少Cookie

Cookie會(huì)影響加載速度，所以靜態(tài)資源域名不使用Cookie。

9. 異步加載第三方資源

第三方資源不可控會(huì)影響頁(yè)面的加載和顯示，因此要異步加載第三方資源。

圖片優(yōu)化

圖片是最占流量的資源，因此盡量避免使用它，使用時(shí)需要注意：

壓縮圖片（PS：過(guò)度壓縮圖片大小會(huì)影響圖片顯示效果）
使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG ）
降低圖片保存質(zhì)量
使用圖片精靈（sprite）:把所有的圖片放到同一個(gè)圖片里，通過(guò)CSS來(lái)顯示圖片的一部分
選擇合適的圖片格式(1webP優(yōu)于JPG 2. PNG8優(yōu)于GIF）
選擇合適的大?。?. 首次加載不大于1014KB ? ? 2. 不寬于640（基于手機(jī)屏幕一般寬度））
圖片較多的頁(yè)面也可以使用 lazyLoad 等技術(shù)進(jìn)行優(yōu)化。
不要使用非圖片原始尺寸來(lái)縮放圖片。

CSS優(yōu)化

1.避免在HTML文檔內(nèi)寫(xiě)Style屬性

a、阻塞頁(yè)面渲染
b、不利于開(kāi)發(fā)維護(hù)

2.避免css表達(dá)式

CSS表達(dá)式的問(wèn)題在于它被重新計(jì)算的次數(shù)遠(yuǎn)比我們想象的要多，不僅在網(wǎng)頁(yè)繪制或大小改變時(shí)計(jì)算，即使我們滾動(dòng)屏幕或者移動(dòng)鼠標(biāo)的時(shí)候也在計(jì)算，因此我們還是盡量避免使用它來(lái)防止使用不當(dāng)而造成的性能損耗。

3.移除空的css規(guī)則

a. 增加了css文件大小
b. 影響css樹(shù)的執(zhí)行

4.正確使用display屬性

display屬性會(huì)影響頁(yè)面的渲染，因此請(qǐng)合理使用。
a. display:inline后不應(yīng)該再使用width、height、margin、padding以及float
b. display:inline-block后不應(yīng)該再使用floatc） display:block后不應(yīng)該再使用vertical-align

5.不濫用float屬性

float在渲染時(shí)計(jì)算量比較大，盡量減少使用。

6.不濫用Web 字體

Web字體需要下載，解析，重繪當(dāng)前頁(yè)面，盡量減少使用。

7.不聲明過(guò)多的font-size

過(guò)多的Font-size引發(fā)CSS樹(shù)的效率。

8.值為0時(shí)不加單位

為了瀏覽器的兼容性和性能，值為0時(shí)不要帶單位。

9.避免讓選擇符看起來(lái)像正則表達(dá)式

a.CSS3添加了一些類(lèi)似~=等復(fù)雜屬性，也不是所有瀏覽器都支持，需謹(jǐn)慎使用。
b.高級(jí)選擇器執(zhí)行耗時(shí)長(zhǎng)且不易讀懂，避免使用。

10.當(dāng)需要設(shè)置的樣式很多時(shí), 設(shè)置className而不是直接去操作style

11.標(biāo)準(zhǔn)化各種瀏覽器前綴

a. 無(wú)前綴應(yīng)放在最后
b. CSS動(dòng)畫(huà)只用 （-webkit- 無(wú)前綴）兩種即可
c. 其它前綴為 -webkit- -moz- -ms- 無(wú)前綴 四種，（-o-Opera瀏覽器改用blink內(nèi)核，所以淘汰）

腳本優(yōu)化

1.減少重繪和回流

Repaint(重繪)就是在一個(gè)元素的外觀被改變的情況下發(fā)生，如改變背景色等。瀏覽器重新繪制改變部分內(nèi)容。

Reflow(重排)就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會(huì)重新計(jì)算元素的幾何屬性，會(huì)使渲染樹(shù)中受到影響的部分失效，瀏覽器會(huì)驗(yàn)證DOM樹(shù)上的所有其它結(jié)點(diǎn)的visibility屬性，這也是Reflow低效的原因。如：改變窗囗大小、改變文字大小、內(nèi)容的改變、瀏覽器窗口變化，style屬性的改變等等。如果Reflow的過(guò)于頻繁，CPU使用率就會(huì)噌噌的往上漲.

重排/回流何時(shí)發(fā)生？

當(dāng)頁(yè)面布局和幾何屬性改變時(shí)就會(huì)發(fā)生回流。下述情況會(huì)發(fā)生瀏覽器回流：

a、添加或者刪除可見(jiàn)的DOM元素；
b、元素位置改變；
c、元素尺寸改變——邊距、填充、邊框、寬度和高度
d、內(nèi)容改變——比如文本改變或者圖片大小改變而引起的計(jì)算值寬度和高度改變；
e、頁(yè)面渲染初始化；
f、瀏覽器窗口尺寸改變——resize事件發(fā)生時(shí)；

var s = document.body.style;
s.padding = "2px"; // 回流+重繪
s.border = "1px solid red"; // 再一次 回流+重繪
s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪
s.fontSize = "14px"; // 再一次 回流+重繪

// 添加node，再一次 回流+重繪
document.body.appendChild(document.createTextNode('abc!'));

2.避免不必要的DOM操作

對(duì)DOM操作的代價(jià)是高昂的，這在網(wǎng)頁(yè)應(yīng)用中的通常是一個(gè)性能瓶頸。

在《高性能JavaScript》中這么比喻：“把DOM看成一個(gè)島嶼，把JavaScript(ECMAScript)看成另一個(gè)島嶼，兩者之間以一座收費(fèi)橋連接”。所以每次訪問(wèn)DOM都會(huì)交一個(gè)過(guò)橋費(fèi)，而訪問(wèn)的次數(shù)越多，交的費(fèi)用也就越多。所以一般建議盡量減少過(guò)橋次數(shù)。

修改和訪問(wèn)DOM元素會(huì)造成頁(yè)面的Repaint和Reflow，循環(huán)對(duì)DOM操作更是罪惡的行為。所以需要合理使用JavaScript變量?jī)?chǔ)存內(nèi)容，考慮大量DOM元素中循環(huán)的性能開(kāi)銷(xiāo)，在循環(huán)結(jié)束時(shí)一次性寫(xiě)入。

b.減少對(duì)DOM元素的查詢和修改，查詢時(shí)使用局部變量緩存DOM節(jié)點(diǎn)。

c.避免使用document.write

d.如果需要?jiǎng)討B(tài)更改CSS樣式，盡量采用觸發(fā)reflow次數(shù)較少的方式。
逐條更改元素的幾何屬性，理論上會(huì)觸發(fā)多次reflow。
通過(guò)直接設(shè)置元素的className直接設(shè)置，只會(huì)觸發(fā)一次reflow。

e.將動(dòng)畫(huà)效果應(yīng)用到position屬性為absolute或fixed的元素上
有動(dòng)畫(huà)效果的元素，它的position屬性應(yīng)當(dāng)設(shè)為fixed或absolute，這樣不會(huì)影響其它元素的布局。

f.避免使用table布局
由于瀏覽器的流布局，對(duì)渲染樹(shù)的計(jì)算通常只需要遍歷一次就可以完成。但table及其內(nèi)部元素除外，它可能需要多次計(jì)算才能確定好其在渲染樹(shù)中節(jié)點(diǎn)的屬性，通常要花3倍于同等元素的時(shí)間。
table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái)，顯示比div+css布局慢。

事件優(yōu)化

1.緩存列表 .length

2.盡量使用事件委托，避免批量綁定事件

3.盡量使用ID選擇器，ID選擇器是最快的

渲染優(yōu)化

1.HTML使用Viewport
Viewport可以加速頁(yè)面的渲染，使用以下代碼：
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

2.減少DOM節(jié)點(diǎn)
a.Dom節(jié)點(diǎn)太多影響頁(yè)面的渲染，應(yīng)盡量減少Dom節(jié)點(diǎn)
b.正常頁(yè)面的DOM元素?cái)?shù)量一般不應(yīng)該超過(guò)1000。
c.DOM元素過(guò)多會(huì)使DOM元素查詢效率，樣式表匹配效率降低，是頁(yè)面性能最主要的瓶頸之一。

3.動(dòng)畫(huà)優(yōu)化
a. 盡量使用CSS3動(dòng)畫(huà)
b. 合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeout
c. 適當(dāng)使用Canvas動(dòng)畫(huà): 5個(gè)元素以內(nèi)使用css動(dòng)畫(huà)，5個(gè)以上使用Canvas動(dòng)畫(huà)（iOS8可使用webGL）

4.高頻事件優(yōu)化
Touchmove、Scroll 事件可導(dǎo)致多次渲染
a） 使用requestAnimationFrame監(jiān)聽(tīng)?zhēng)兓?，使得在正確的時(shí)間進(jìn)行渲染
b） 增加響應(yīng)變化的時(shí)間間隔，減少重繪次數(shù)

5.GPU（Graphics Processing Unit）加速
CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會(huì)觸發(fā)GPU渲染，請(qǐng)合理使用。

PS：過(guò)渡使用會(huì)引發(fā)手機(jī)過(guò)耗電增加。

顯卡的處理器稱(chēng)為圖形處理器（GPU），它是顯卡的“心臟”，與CPU類(lèi)似，只不過(guò)GPU是專(zhuān)為執(zhí)行復(fù)雜的數(shù)學(xué)和幾何計(jì)算而設(shè)計(jì)的，這些計(jì)算是圖形渲染所必需的。