想要寫(xiě)出高性能的前端代碼璧针，就必須了解到瀏覽器的工作原理淤年，明白瀏覽器是怎么加載一個(gè)頁(yè)面的，我們的性能問(wèn)題就是從這里彈起糊渊，至少要知道如何減少http請(qǐng)求，因?yàn)檫@會(huì)減少一半甚至更多的http請(qǐng)求慧脱。
我們?cè)陂_(kāi)發(fā)的過(guò)程中渺绒，需要遵循一些原則，這樣才能盡可能的避免我們?cè)陂_(kāi)發(fā)中遇到的一些坑菱鸥。
1.編寫(xiě)符合當(dāng)代瀏覽器的代碼
2.用css來(lái)進(jìn)行布局
3.使用漸進(jìn)式增強(qiáng)的方法
4.各司其職
瀏覽器工作原理大概如下：
首先html先被解析為dom樹(shù)宗兼，然后第二顆樹(shù)是dom樹(shù)和css樣式表結(jié)合構(gòu)成的渲染樹(shù)，根據(jù)這棵渲染樹(shù)氮采，瀏覽器就開(kāi)始顯示了殷绍，先把你的元素畫(huà)到屏幕上，從左上到右下結(jié)束扳抽。其中css和html的解析是同時(shí)進(jìn)行的。
所以你能從以下兩個(gè)方面改進(jìn)性能殖侵。
1.減少html中元素的數(shù)量
2.減少重繪（注意兩點(diǎn)贸呢，第一：要改動(dòng)的元素在dom樹(shù)中越深越好，越深越獨(dú)立拢军，對(duì)其他節(jié)點(diǎn)影響越少楞陷，第二對(duì)dom操作盡可能一次完成）
用css布局，處理邊界茉唉。不要讓盒子依賴與外部固蛾，
漸進(jìn)式增強(qiáng)，使用特征檢測(cè)來(lái)進(jìn)行漸進(jìn)式增強(qiáng)度陆。使用特征檢測(cè)艾凯，可以盡可能的使用瀏覽器自帶的功能，這樣性能更好懂傀，開(kāi)銷更少趾诗。我們強(qiáng)烈建議使用特征檢測(cè)，而不是瀏覽器版本號(hào)檢測(cè)。因?yàn)榘姹咎?hào)檢測(cè)會(huì)是一個(gè)巨大的負(fù)擔(dān)恃泪。
有一個(gè)很好的實(shí)現(xiàn)功能檢測(cè)的方式是使用Modernizer的開(kāi)放源碼庫(kù)郑兴。
在任何時(shí)候要盡可能用css完成交互，因?yàn)闉g覽器天生就可以處理他們贝乎，這樣我們會(huì)獲得更好的性能情连。同時(shí)css的代碼量要比js少很多。
性能準(zhǔn)則：
1.減少http請(qǐng)求
2.使用cdn加速
3.避免空 src和href屬性值（會(huì)產(chǎn)生http請(qǐng)求）
4.增加過(guò)期頭（最好有一個(gè)版本控制機(jī)制览效，其中一個(gè)辦法就i時(shí)在文件名上加入時(shí)間戳却舀，比如把一個(gè)很通用的css取名為base20120303.css）
5.啟GZIP壓縮
6.把css放到頭部
7.把javaScript放到尾部
8.避免使用css表達(dá)式
9.刪除不使用的css語(yǔ)句
10.對(duì)javaScript、css進(jìn)行壓縮
11.減少重繪
圖片精靈可以減少http請(qǐng)求朽肥，但是多大的圖片精靈分開(kāi)成小的禁筏，這個(gè)需要實(shí)驗(yàn)。
