前端性能優化完全是一個(gè)技(jì)術(shù)話(huà)題，但(dàn)是對于項目的用戶體(tǐ)驗有(yǒu)非常大(dà)的影(yǐng)響，如果你(nǐ)的網站(zhàn)打開(kāi)要等待三五秒(miǎo)或者等到浏覽器(qì)提示無法連接，那(nà)網站(zhàn)哪來(lái)的流量，哪來(lái)的品牌影(yǐng)響和(hé)用戶忠誠度，掙錢(qián)就算(suàn)了。

3s，作(zuò)為(wèi)判斷一個(gè)用戶忍受你(nǐ)網站(zhàn)速度的限度，如果超過3s，用戶已經對這個(gè)網站(zhàn)産生(shēng)了負面的抵觸心理(lǐ)。

前端性能優化和(hé)web标準有(yǒu)什麽關系，接着第一篇 悟道(dào)web标準——統一思想，遵循标準 ，這是對你(nǐ)遵循web标準的一個(gè)補償或者是對标準的一個(gè)認可(kě)。

引用：

落後的頁面工程師(shī)體(tǐ)系，美工代勞的頁面代碼，唯獨IE才能浏覽的頁面代碼，不需要寫代碼用圖形工具直接導出的頁面代碼，大(dà)量的流量消耗的頁面代碼，速度慢的像蝸牛的頁面代碼，程序員看到就頭大(dà)發麻的頁面代碼，每次改版修改都要打動幹戈，重複産生(shēng)的頁面代碼，一種讓頁面工程師(shī)和(hé)民工一樣的頁面代碼。

我們當然要革命它，取代他，創造全新的頁面工程師(shī)體(tǐ)系和(hé)頁面質量，獨立的頁面工程師(shī)完成的頁面代碼，跨越平台的頁面代碼，隻要能解析頁面的設備都能夠訪問和(hé)浏覽，手寫的頁面代碼，整齊劃一，層次分明(míng)，最低(dī)流量消耗的頁面代碼，程序員喜歡的頁面代碼，訪問速度超快的頁面代碼，改版可(kě)重複利用的頁面代碼，讓頁面工程師(shī)擡起頭來(lái)，驕傲的稱自己是工程師(shī)，書(shū)寫的也是計(jì)算(suàn)機代碼的頁面代碼。

前端優化正好給Web标準提供了一個(gè)檢驗的機會(huì)，用“實踐是檢驗真理(lǐ)的唯一标準”來(lái)判斷标準化到底好不好，對不對。

前端性能優化了解yahoo性能優化N條的同學應該不會(huì)陌生(shēng)，安裝一個(gè)YSlow評分并對照着優化就可(kě)以了，但(dàn)是有(yǒu)沒有(yǒu)想過為(wèi)什麽要這麽做(zuò)就可(kě)以提升速度，這些(xiē)與Web标準有(yǒu)沒有(yǒu)某種關聯或者因果呢。

我把這些(xiē)個(gè)條目分成三類，服務端運算(suàn)優化，傳輸優化，客戶端運算(suàn)優化：

第一類，服務器(qì)端優化

服務器(qì)端就是對你(nǐ)的網站(zhàn)的動态語言的執行(xíng)（asp，php），數(shù)據庫查詢，存儲等速度，總的來(lái)說就是輸入/輸出的運算(suàn)。這些(xiē)跟前端沒關系，但(dàn)是影(yǐng)響着前端。YSlow裏面沒有(yǒu)，鬼知道(dào)你(nǐ)網站(zhàn)的服務器(qì)性能如何，看不出來(lái)，就自行(xíng)優化服務器(qì)性能，數(shù)據庫性能，多(duō)買點服務器(qì)擴容。

yslow有(yǒu)一條盡早刷新 Buffer （Flush the Buffer Early），貌似是不等html完成生(shēng)成就傳輸。

提高(gāo)域名的DNS解析速度。減少(shǎo)DNS的解析個(gè)數(shù)。這個(gè)不好歸類，暫時(shí)放到這裏吧(ba)。

第二類，傳輸優化

這類是大(dà)頭，很(hěn)煩，首先是字節，字節越小(xiǎo)越好，怎麽能小(xiǎo)下來(lái)，最有(yǒu)效的方式就是google的方案，把首頁做(zuò)的極其精簡，圖片，html，靜态文件都很(hěn)小(xiǎo)，再就是緩存，把文件放到本地緩存區(qū)讀取。還(hái)有(yǒu)http請(qǐng)求數(shù)，減少(shǎo)文件傳輸中的排隊等待。

字節優化： 減少(shǎo)冗餘html，結構化，語義化的html來(lái)實現，行(xíng)為(wèi)，表現，結構分離，獨立的html文件将變得(de)很(hěn)小(xiǎo)。

壓縮文本文件，css，html，js去掉注釋、空(kōng)格、換行(xíng)等。

降低(dī)圖片字節，選擇合适的圖片類型，png-8是一個(gè)好東西，再用工具将圖片進行(xíng)壓縮去掉，比如png-8的壓縮工具。用合适的圖片尺寸，不要把大(dà)圖控制(zhì)一下寬高(gāo)就用上(shàng)了。

gzip壓縮一下，減小(xiǎo)服務器(qì)端傳輸到客戶端時(shí)候的字節。

flash文件和(hé)flash+xml的動态flash也減小(xiǎo)字節

緩存： 服務器(qì)端配置一下，提高(gāo)緩存的命中率和(hé)把不經常修改的文件緩存了。 Add Expires headers、Etags、ajax使用get方式便于緩存。

把能分離出來(lái)的css，js分離成外部文件便于緩存。 使flash和(hé)xml文件可(kě)緩存。

打通(tōng)不同運營商的限制(zhì)

CDN提高(gāo)不同類型運營商的網絡傳輸速度，電(diàn)信，網通(tōng)，鐵(tiě)通(tōng)，教育網統統搞定。

請(qǐng)求數(shù)： 減少(shǎo)文件請(qǐng)求數(shù)，能合并到一起的合并一下，css，js，圖片等，減小(xiǎo)排隊等待和(hé)服務器(qì)端開(kāi)銷。

分域提高(gāo)同時(shí)加載數(shù)，優化排隊等待。

避免404無效請(qǐng)求數(shù)。 避免重定向。

延遲加載和(hé)預載： 把暫時(shí)不用的文件等主體(tǐ)頁面加載完了再加載，把用戶稍後要看浏覽的內(nèi)容預先加載進來(lái)，相冊浏覽就是很(hěn)好的例子，先用小(xiǎo)圖片放大(dà)再把大(dà)圖展示出來(lái)，看本張圖片時(shí)把下一張預載進來(lái)等等。

第三類：客戶端優化

討(tǎo)厭的IE的濾鏡和(hé)CSS expressions少(shǎo)用，小(xiǎo)心把浏覽器(qì)搞挂，CUP 100%死機。 CSS放到前面，js能放到後面的放在代碼後面。将頁面盡早展示給用戶。 減少(shǎo)iframe的使用，避免CPU扛不住。 減少(shǎo)DOM個(gè)數(shù)，減低(dī)浏覽器(qì)解析壓力。

使用 《link》 而不是@importChoose 《link》 over @import，在 IE 中 @import 指令等同于把 link 标記寫在 HTML 的底部。而這與第一條相違背。

提高(gāo)js的執行(xíng)效率，話(huà)題太大(dà)不提了

縮小(xiǎo) Cookie，針對 Web 組件使用域名無關性的 Cookie （Use Cookie-free Domains for Components）

還(hái)有(yǒu)小(xiǎo)圖片的repeat背景會(huì)提高(gāo)浏覽器(qì)的CPU占用。 合理(lǐ)的DOM排序，把重要的內(nèi)容代碼前置，優先加載。

再就是些(xiē)沒對号入座的雅虎性能優化的條目。

至此可(kě)以檢驗到頁面工程師(shī)不是蓋的，需要對代碼、文件，http協議，緩存，服務器(qì)等精準的學習和(hé)控制(zhì)，達到提供用戶最最基本的體(tǐ)驗——訪問速度的體(tǐ)驗。

Web标準的分離思想和(hé)結構化語義化html促成了以上(shàng)很(hěn)多(duō)條的實施，這是美工時(shí)代所不能比拟的。