前端性能的一些了解

如果你是一個小網站，日pv很小的話，當然不太用在意性能這方面東西，但是你是一個大型網站的，日均pv十萬甚至數十萬以上的網站，那麼性能就是一個不可忽視的問題。全國各地網絡環境的不一樣，就會導緻網站通路速度的差異，速度越快的話，比如我們常說的首屏時間，一般來說，使用者在一個頁面停留3秒如果還沒有頁面顯示，那麼使用者很可能就會走，是以這對于産品是很大的問題，是以應當引起重視。

現在我們分析一下可能影響我們網站性能的原因，大家應該都聽說過著名的雅虎軍規，他提出網站性能優化的34條法則，有興趣的話應該好好看看。（​​http://www.imooc.com/view/50​​）這裡的視訊也可以看看。但是雅虎軍規不一定都适用，比如視訊網站，我們需要的是視訊先播放出來，這個要具體網站具體分析。

查資料，網站性能優化不光雅虎的34條軍規，還有就是平時寫代碼的時候，一定要減少代碼量，能省就省，能複用的就複用，比如我們平時的css代碼要把相似的代碼子產品化，然後到用的時候引用就可以，然後釋出之前進行壓縮代碼，dom繪制是很浪費性能的，是以要注意不要把html代碼的結構寫的太深，一般不要炒作三層結構，我昨天看慕課網上講前端性能優化有一個很好的是視訊，這位老師還講了很多關于後端優化很的措施，建議大家看看，還有計算機網絡，http協定這些網絡方面的優化都是需要注意的問題，性能優化是一整套方案，不一定要前後端分離的太開，比如一個頁面的渲染問題，可以交給前端渲染，也可以後端渲染，有時候後端直接渲染好，然後發給你，這也有可能起到一定作用，還有就是有很多具體可操作的方案；

雅虎軍規是主要，盡可能并行，dns查詢是很費時間的，是以有可能的話要提前欲取，

<link rel="dns-prefetch" href="//widget.foo.com">      

比如這樣，還有要注意css也是很影響性能的，他需要有以下的知識，1.永遠不要從一個固定/資源域名提供

服務 因為這會引起DNS查詢并進一步延遲渲染。 因為當網站通路量大的時候，将不得不有些資源在不同的子域名，2.先提供服務，讓浏覽器先忙着

3.合并他，讓他隻需要一個http請求，

4.壓縮并簡化他，讓所占空間盡可能少

5.緩存他的一切，不要讓再次請求重複的資源

還有一些很細的解決辦法，使用JPGs，還有谷歌現在用的比較新的webp技術，這些都是優化圖檔的一個好的方式，當然最好的方式不用圖檔，如今css3和html5的出現，使得用代碼寫圖檔成為了可能。

css sprites的好處自然不用多說可以減少http請求，但是他也是有一些副作用的

1.在合成一張圖之後，如果一張圖檔發生變化，那麼裡面的整個圖檔都要發生變化，當然好的設計師會單獨儲存每個圖檔的資訊，進行重新合成就行了，但是這遠沒有切圖來的友善。

2.項目在改變圖檔的位置的時候，大型的sprite會導緻無盡的測試和圖檔狀态的重新擺放，

3.有些人濫用會把背景圖檔也當作sprite使用，會對文檔的語義化産生影響，降低html的alt和title潛在益處。

可以說是處處有性能問題，最常見的css選擇器的寫法，也存在一些性能問題，讓css選擇器盡快的找到要渲染的特定樣式，

比如這樣的代碼

#social a {…}      

浏覽器會定位到social下所有的a選擇器，如果是大量的a标簽的話，這樣就會渲染到太多我們不需要的元素了，現在我們可以看看關鍵選擇器，在我們使用組合選擇器的時候，其實有時候遠不如其中的關鍵選擇器來的有效，是以我們要簡化css選擇器的書寫，隻要能讓浏覽器更快的找到要渲染的元素，我們為了讓浏覽器找到特定的元素，會寫出這樣的代碼

html body .wrapper #content a {}      

#nav a {}