代碼性能優化

HTML
1.網頁三要素title（標題）、keywords（關鍵字）、description（描述）
2.一個頁面h2標簽只能出現一次

CSS
1.命名與備注　　
命名是提高代碼可讀性的第一步，也是及其重要的一步。很多人都有這樣的體會：命名是寫代碼中最讓程序員頭疼的事情之一，尤其是對母語非英語的開發人員來說，要找一個合適貼切的名字并不容易。提高自己命名的能力，可以多看看別人的代碼。下面是CSS中的一些命名相關的建議：頭：header　內容：content/container　尾：footer　導航：nav側欄：sidebar　欄目：column　頁面外圍控制整體佈局寬度：wrapper　左右中：left right cente登錄條：loginbar　標志：logo　廣告：banner　頁面主體：main　熱點：hot　新聞：news　下載：download子導航：subnav　菜單menu子菜 submenu　搜索：search　友情鏈接：friendlink　頁腳：footer版權：copyright　滾動：scroll　內容：content　標簽：tags　文章列表：list　　提示信息：msg　　小技巧：tips　欄目標題：title　加入：joinus　指南：guide服務：service　注冊：regsiter 狀態：status　投票：vote　合作伙伴：partner　導航：nav　主導航：mainnav　子導航：subnav　頂導航：topnav　邊導航：sidebar　左導航：leftsidebar　右導航：rightsidebar　　菜單：menu子菜單：submenu 標題: title 摘要: summary。

2.提取重復樣式
這一個方法很容易理解，簡單說就是提取相同的樣式成為一個單獨的類再引用，這樣不僅可以精簡CSS文件大小，而且CSS代碼變少，更易于重用和維護。

3.書寫順序　　
這個書寫順序指的是各個樣式的書寫順序，下面是推薦的CSS書寫順序(1)位置屬性(position, top, right, z-index, display, float等)(2)大小(width, height, padding, margin)(3)文字系列(font, line-height, letter-spacing, color- text-align等)(4)背景(background, border等)(5)其他(animation, transition等)，reflow和repaint都是耗費瀏覽器性能的操作，這兩者尤以reflow為甚；因為每次reflow，瀏覽器都要重新計算每個元素的形狀和位置。由于reflow和repaint都是非常消耗性能的，我們的瀏覽器為此做了一些優化。瀏覽器會將reflow和repaint的操作積攢一批，然后做一次reflow。但是有些時候，你的代碼會強制瀏覽器做多次reflow。

4.標準化各種瀏覽器前綴
帶瀏覽器前綴的在前，標準屬性在后。

5屬性值為浮動小數0.，可以省略之前的0

6.如果只有一項值，最好不要應用復合屬性。以免帶來不必要的麻煩。
比如 .sample1 {font-weight: bold} ，如果寫成 .sample1 {font: bold} 就沒任何作用了。再舉個列子，比如 .sampl2 {background-color: #CCCCCC; } ，如果寫成 .sampl2 {background: #CCCCCC; } ，瀏覽器雖然能正確解釋，但這不是規范的寫法，因為這樣會導致瀏覽器多次計算其他無用的屬性。

7.減少文件的大小
比如屬性值簡寫#FFFFFF可以簡寫為#FFF,#BB44DD可以簡寫為#B4D

8.多用精靈圖
一個網頁上有很多的小圖片，比如有20個，如果我們都請求一遍，就需要使用20個http請求，這是很耗時的，但是我們可以把這些圖片合成一個大的圖片，然后將之作為 background-img插入進去， 根據不同的圖片設置不同的background-postion即可，雖然在不同的位置需要請求很多的圖片，但是，實際上我們查看網絡只會請求一次

9.精簡頁面的樣式文件，去掉不用的樣式　　
很多時候，我們會把所有的樣式文件合并成一個文件，但是這樣有一個問題：很多其他頁面的CSS同時引用到當前頁面中，而當前頁面并沒有用到它們，這種情況會造成兩個問題:(1)樣式文件偏大，影響加載速度　(2)瀏覽器會進行多余的樣式匹配，影響渲染時間。正確的處理方法是根據當前頁面需要的css去合并那些當前頁面用到的CSS文件。PS：合并成一個文件有一個優點：樣式文件會被瀏覽器緩存，進入到其他頁面樣式文件不用再去下載。這條規則應根據場景來區別對待，如果是大項目，應該合并成不同的樣式文件，如果是簡單的項目，建議合并成一個文件即可。如果無法確認項目規模，建議分開成不同的樣式文件，日后要合并也比較方便。

10.將 css放在 head中　　
如果將 css放在其他地方比如 body中，則瀏覽器有可能還未下載和解析到 css就已經開始渲染頁面了，這就導致頁面由無 css狀態跳轉到 css狀態，用戶體驗比較糟糕。除此之外，有些瀏覽器會在 CSS下載完成后才開始渲染頁面，如果 CSS放在靠下的位置則會導致瀏覽器將渲染時間推遲。

11.避免使用css @import
這樣做會導致css無法并行下載，因為使用@import引用的文件只有在引用它的那個css文件被下載、解析之后，瀏覽器才會知道還有另外一個css需要下載，這時才去下載，然后下載后開始解析、構建render tree等一系列操作。 瀏覽器會在頁面所有css下載并解析完成后才會開始渲染頁面，因此css @import引起的css解析延遲會加長頁面留白期。 所以，要盡量避免使用css @import而盡量采用link標簽的方式引入。

12.避免使用復雜的選擇器，層級越少越好
有時候項目的模塊越來越多，功能越來越復雜，我們寫的CSS選擇器會內套多層，越來越復雜。建議選擇器的嵌套最好不要超過三層

13.避免讓選擇符看起來像正則表達式
css添加了一些類似~=的復雜屬性，也不是所有瀏覽器都支持，需謹慎使用

14.正確使用display的屬性
由于display的作用，某些組合樣式會無效，徒增樣式體積的同時也影響性能
display:inline;后不應再使用width、height、margin、padding、float。
display：inline-block后不應再使用float。
display:block后不應再使用vertical-align。
display:table后不應再使用margin、left。

15.利用繼承減少代碼量　　
我們知道有一部分CSS代碼是可以繼承的，如果父元素已經設置了該樣式，子元素就不需要去設置該樣式，這個也是提高性能的行之有效的方法。常見的可以繼承的屬性比如：Color、Font 、Letter-spacing、Line-height 、List-style 、Text-align 、Text-indent 、Text-transform 、White-space 、Word-spacing 等等。不可繼承的比如：position，display，float等。

16.不濫用浮動
雖然浮動不可避免，但不可否認很對css bug是由浮動引起的，css Lint一旦檢測出樣式文件中有超過10次的浮動便會提示警告

17.不濫用web字體
對于中文網站來說，Web Fonts可能很陌生，但是國外卻很流行，Web Fonts通常體積龐大，而且一些瀏覽器在下載Web Fonts時會阻塞頁面渲染，損傷性能。

18.不重復定義h2~h7元素，不給h2~h7元素定義過多的樣式

19.不聲明過多的font-size

20.不在選擇符中使用ID標識符

21.值為0時不需要任何單位

22.移除空的規則

23.不要在ID選擇器前面進行嵌套，ID本來就是唯一的而且人家權值那么大，前方嵌套完全是浪費性能。

24.減少通配符*或者類似[hidden="true"]這類選擇器的使用，挨個查找所有...這性能能好嗎？當然重置樣式這些必須的東西是不能少的。

25.有些人喜歡在類名前面加上標簽名：p.ty_p 來進行更加精確的定位，但是這樣往往效率更差，類名應該在全局范圍除非公用是唯一的，所以這種做法是應該便面的。

26.避免使用 Filter：
IE 特有的 AlphaImageLoader filter 是為了解決 IE6 及以前版本不支持半透明的 PNG 圖片而存在的。但是瀏覽器在下載 filter 里面的圖片時會“凍結”瀏覽器，停止渲染頁面。同時 filter 也會增大內存消耗。最不能忍受的是 filter 樣式在每個頁面元素（使用到該 filter 樣式）渲染時都會被瀏覽器分析一次，而不是像一般的背景圖片渲染模式：使用過該背景圖片的所有元素都是被瀏覽器一次性渲染的。
針對這種情況，最好的解決辦法就是使用 PNG8。

JS
1.減少DOM操作
在腳本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection類型的集合，在平時使用的時候大多將它作為數組來使用，因為它有 length屬性，也可以使用索引訪問每一個元素。不過在訪問性能上則比數組要差很多，原因是這個集合并不是一個靜態的結果，它表示的僅僅是一個特定的查詢，每次訪問該集合時都會重新執行這個查詢從而更新查詢結果。所謂的 “訪問集合” 包括讀取集合的 length屬性、訪問集合中的元素。因此，當你需要遍歷 HTML Collection的時候，盡量將它轉為數組后再訪問，以提高性能。即使不轉換為數組，也請盡可能少的訪問它，例如在遍歷的時候可以將 length屬性、成員保存到局部變量后再使用局部變量。

2.減少http請求
一方面，恰當的緩存設置可以大大的減少 HTTP請求，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過 HTTP Header中的Expires設置一個很長的過期頭 ;變化不頻繁而又可能會變的資源可以使用 Last-Modifed來做請求驗證。盡可能的讓資源能夠在緩存中待得更久。另一方面，Lazy Load Images，能在某些條件下或者頁面剛加載時減少 HTTP請求數。對于圖片而言，在頁面剛加載的時候可以只加載第一屏，當用戶繼續往后滾屏的時候才加載后續的圖片。這樣一來，假如用戶只對第一屏的內容感興趣時，那剩余的圖片請求就都節省了

3.js腳本寫在body標簽的最下方
瀏覽器是可以并發請求的，這一特點使得其能夠更快的加載資源，然而外鏈腳本在加載時卻會阻塞其他資源，例如在腳本加載完成之前，它后面的圖片、樣式以及其他腳本都處于阻塞狀態，直到腳本加載完成后才會開始加載。如果將腳本放在比較靠前的位置，則會影響整個頁面的加載速度從而影響用戶體驗。

4.for循環最佳寫法(把length提出來或者預存出來，用一個內存地址變量指引數值來替代迭代器，這樣寫的好處是降低時間復雜度)
var divs = document.getElementsByITagName('div')

for(var i=0,len = divs.length;i<len;i++){

}
for(var i = 0 , div ; div = divs[ i++ ] ; ){
dosomething(div)
}

4.實現元素移動的動畫過程有三中方法 定位 、 margin 、translate ，但是transform里面的translate 是最佳選擇，它比前兩者的效率高幾十倍，因為它不會
觸發整個頁面的重排，從而大大降低了頁面渲染時間

5.能用css實現的效果就不要用js