Web前端性能優(yōu)化經(jīng)驗分享

　　最近一直有給新同學(xué)做前端方面的培訓，也有去參與公司前端的招聘，所以把自己資料庫里面很多高效且有用的知識做了些規整分類(lèi)，然后再分享一篇關(guān)于前端優(yōu)化方面的總結。而且春節一過(guò)就又是招聘的高峰期了，在校的、跳槽的、浮躁的都開(kāi)始進(jìn)入面試的大軍，前端優(yōu)化也是前端面試一般會(huì )問(wèn)到的東西，所以希望能對朋友們有用。

　　1.請減少HTTP請求

　　基本原理：

　　在瀏覽器(客戶(hù)端)和服務(wù)器發(fā)生通信時(shí)，就已經(jīng)消耗了大量的時(shí)間，尤其是在網(wǎng)絡(luò )情況比較糟糕的時(shí)候，這個(gè)問(wèn)題尤其的突出。

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

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

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

　　解決辦法：

　　合并圖片(css sprites)，合并CSS和JS文件;圖片較多的頁(yè)面也可以使用 lazyLoad 等技術(shù)進(jìn)行優(yōu)化。

　　2.請正確理解 Repaint 和 Reflow

　　注：Repaint 和 Reflow 也就是重繪和重排，請允許我在這賣(mài)弄下我有限認識的那么幾個(gè)英語(yǔ)單詞...囧

　　基本原理：

　　Repaint(重繪)就是在一個(gè)元素的外觀(guān)被改變，但沒(méi)有改變布局(寬高)的情況下發(fā)生，如改變visibility、outline、背景色等等。

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

　　減少性能影響的辦法：

　　上面提到通過(guò)設置style屬性改變結點(diǎn)樣式的話(huà)，每設置一次都會(huì )導致一次reflow，所以最好通過(guò)設置class的方式;　有動(dòng)畫(huà)效果的元素，它的position屬性應當設為fixed或absolute，這樣不會(huì )影響其它元素的布局;如果功能需求上不能設置position為fixed或absolute，那么就權衡速度的平滑性。

　　總之，因為 Reflow 有時(shí)確實(shí)不可避免，所以只能盡可能限制Reflow的影響范圍。

　　3.請減少對DOM的操作

　　基本原理：

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

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

　　解決辦法：

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

　　減少對DOM元素的查詢(xún)和修改，查詢(xún)時(shí)可將其賦值給局部變量。

　　注：在IE中:hover會(huì )降低響應速度。

　　4.使用JSON格式來(lái)進(jìn)行數據交換

　　基本原理：

　　JSON是一種輕量級的數據交換格式，采用完全獨立于語(yǔ)言的文本格式，是理想的數據交換格式。同時(shí)，JSON是 JavaScript原生格式，這意味著(zhù)在 JavaScript 中處理 JSON數據不需要任何特殊的 API 或工具包。

　　與XML序列化相比，JSON序列化后產(chǎn)生的數據一般要比XML序列化后數據體積小，所以在Facebook等知名網(wǎng)站中都采用了JSON作為數據交換方式。

　　JS操作JSON：

　　在JSON中，有兩種結構：對象和數組。

　　1. 一個(gè)對象以 “ { ” 開(kāi)始，“ } ” 結束。每個(gè)“名稱(chēng)”后跟一個(gè) “ : ” ;“名稱(chēng)/值 對”之間使用 “ , ”(逗號)分隔。 名稱(chēng)用引號括起來(lái);值如果是字符串則必須用引號括起來(lái)，數值型則不需要。如：

原文轉自：http://www.uml.org.cn/Test/201307115.asp