代碼性能優(yōu)化

HTML
1.網(wǎng)頁三要素title（標(biāo)題）、keywords（關(guān)鍵字）、description（描述）
2.一個(gè)頁面h2標(biāo)簽只能出現(xiàn)一次

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

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

3.書寫順序　　
這個(gè)書寫順序指的是各個(gè)樣式的書寫順序，下面是推薦的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都是耗費(fèi)瀏覽器性能的操作，這兩者尤以reflow為甚；因?yàn)槊看蝦eflow，瀏覽器都要重新計(jì)算每個(gè)元素的形狀和位置。由于reflow和repaint都是非常消耗性能的，我們的瀏覽器為此做了一些優(yōu)化。瀏覽器會(huì)將reflow和repaint的操作積攢一批，然后做一次reflow。但是有些時(shí)候，你的代碼會(huì)強(qiáng)制瀏覽器做多次reflow。

4.標(biāo)準(zhǔn)化各種瀏覽器前綴
帶瀏覽器前綴的在前，標(biāo)準(zhǔn)屬性在后。

5屬性值為浮動(dòng)小數(shù)0.，可以省略之前的0

6.如果只有一項(xiàng)值，最好不要應(yīng)用復(fù)合屬性。以免帶來不必要的麻煩。
比如 .sample1 {font-weight: bold} ，如果寫成 .sample1 {font: bold} 就沒任何作用了。再舉個(gè)列子，比如 .sampl2 {background-color: #CCCCCC; } ，如果寫成 .sampl2 {background: #CCCCCC; } ，瀏覽器雖然能正確解釋，但這不是規(guī)范的寫法，因?yàn)檫@樣會(huì)導(dǎo)致瀏覽器多次計(jì)算其他無用的屬性。

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

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

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

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

11.避免使用css @import
這樣做會(huì)導(dǎo)致css無法并行下載，因?yàn)槭褂聾import引用的文件只有在引用它的那個(gè)css文件被下載、解析之后，瀏覽器才會(huì)知道還有另外一個(gè)css需要下載，這時(shí)才去下載，然后下載后開始解析、構(gòu)建render tree等一系列操作。 瀏覽器會(huì)在頁面所有css下載并解析完成后才會(huì)開始渲染頁面，因此css @import引起的css解析延遲會(huì)加長(zhǎng)頁面留白期。 所以，要盡量避免使用css @import而盡量采用link標(biāo)簽的方式引入。

12.避免使用復(fù)雜的選擇器，層級(jí)越少越好
有時(shí)候項(xiàng)目的模塊越來越多，功能越來越復(fù)雜，我們寫的CSS選擇器會(huì)內(nèi)套多層，越來越復(fù)雜。建議選擇器的嵌套最好不要超過三層

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

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

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

16.不濫用浮動(dòng)
雖然浮動(dòng)不可避免，但不可否認(rèn)很對(duì)css bug是由浮動(dòng)引起的，css Lint一旦檢測(cè)出樣式文件中有超過10次的浮動(dòng)便會(huì)提示警告

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

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

19.不聲明過多的font-size

20.不在選擇符中使用ID標(biāo)識(shí)符

21.值為0時(shí)不需要任何單位

22.移除空的規(guī)則

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

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

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

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

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

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

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

4.for循環(huán)最佳寫法(把length提出來或者預(yù)存出來，用一個(gè)內(nèi)存地址變量指引數(shù)值來替代迭代器，這樣寫的好處是降低時(shí)間復(fù)雜度)
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.實(shí)現(xiàn)元素移動(dòng)的動(dòng)畫過程有三中方法 定位 、 margin 、translate ，但是transform里面的translate 是最佳選擇，它比前兩者的效率高幾十倍，因?yàn)樗粫?huì)
觸發(fā)整個(gè)頁面的重排，從而大大降低了頁面渲染時(shí)間

5.能用css實(shí)現(xiàn)的效果就不要用js