悟道web規(guī)范:前端功能優(yōu)化

前端功能優(yōu)化完全是一個(gè)技術(shù)論題，可是對(duì)于項(xiàng)目的用戶體會(huì)有非常大的影響，假如你的網(wǎng)站打開要等候三五秒或者等到閱讀器提示無(wú)法連接，那網(wǎng)站哪來(lái)的流量，哪來(lái)的品牌影響和用戶忠誠(chéng)度，掙錢就算了。

3s，作為判斷一個(gè)用戶忍受你網(wǎng)站速度的限度，假如超過(guò)3s，用戶已經(jīng)對(duì)這個(gè)網(wǎng)站產(chǎn)生了負(fù)面的沖突心理。
前端功能優(yōu)化和web規(guī)范有什么關(guān)系，接著第一篇 悟道web規(guī)范——統(tǒng)一思想，遵循規(guī)范 ，這是對(duì)你遵循web規(guī)范的一個(gè)補(bǔ)償或者是對(duì)規(guī)范的一個(gè)認(rèn)可。

引用:

落后的頁(yè)面工程師系統(tǒng)，美工代勞的頁(yè)面代碼，唯獨(dú)IE才干閱讀的頁(yè)面代碼，不需要寫代碼用圖形東西直接導(dǎo)出的頁(yè)面代碼，很多的流量耗費(fèi)的頁(yè)面代碼，速度慢的像蝸牛的頁(yè)面代碼，程序員看到就頭大發(fā)麻的頁(yè)面代碼，每次改版修正都要打動(dòng)干戈，重復(fù)產(chǎn)生的頁(yè)面代碼，一種讓頁(yè)面工程師和民工相同的頁(yè)面代碼。

我們當(dāng)然要革新它，替代他，發(fā)明全新的頁(yè)面工程師系統(tǒng)和頁(yè)面質(zhì)量，獨(dú)立的頁(yè)面工程師完結(jié)的頁(yè)面代碼，跨過(guò)渠道的頁(yè)面代碼，只要能解析頁(yè)面的設(shè)備都能夠拜訪和閱讀，手寫的頁(yè)面代碼，整齊劃一，層次分明，最低流量耗費(fèi)的頁(yè)面代碼，程序員喜歡的頁(yè)面代碼，拜訪速度超快的頁(yè)面代碼，改版可重復(fù)利用的頁(yè)面代碼，讓頁(yè)面工程師抬起頭來(lái)，自豪的稱自己是工程師，書寫的也是計(jì)算機(jī)代碼的頁(yè)面代碼。
前端優(yōu)化正好給Web規(guī)范供給了一個(gè)查驗(yàn)的機(jī)會(huì)，用“實(shí)踐是查驗(yàn)真理的唯一規(guī)范”來(lái)判斷規(guī)范化到底好欠好，對(duì)不對(duì)。

前端功能優(yōu)化了解yahoo功能優(yōu)化N條的同學(xué)應(yīng)該不會(huì)陌生，裝置一個(gè)YSlow評(píng)分并對(duì)照著優(yōu)化就能夠了，可是有沒有想過(guò)為什么要這么做就能夠提升速度，這些與Web規(guī)范有沒有某種關(guān)聯(lián)或者因果呢。

我把這些個(gè)條目分紅三類，服務(wù)端運(yùn)算優(yōu)化，傳輸優(yōu)化，客戶端運(yùn)算優(yōu)化：

第一類，服務(wù)器端優(yōu)化

服務(wù)器端便是對(duì)你的網(wǎng)站的動(dòng)態(tài)語(yǔ)言的履行(asp,php)，數(shù)據(jù)庫(kù)查詢，存儲(chǔ)等速度，總的來(lái)說(shuō)便是輸入/輸出的運(yùn)算。這些跟前端沒關(guān)系，可是影響著前端。YSlow里面沒有，鬼知道你網(wǎng)站的服務(wù)器功能如何，看不出來(lái)，就自行優(yōu)化服務(wù)器功能，數(shù)據(jù)庫(kù)功能，多買點(diǎn)服務(wù)器擴(kuò)容。
yslow有一條盡早改寫 Buffer (Flush the Buffer Early)，貌似是不等html完結(jié)生成就傳輸。
進(jìn)步域名的DNS解析速度。削減DNS的解析個(gè)數(shù)。這個(gè)欠好歸類，暫時(shí)放到這里吧。

第二類，傳輸優(yōu)化

這類是大頭，很煩，首先是字節(jié)，字節(jié)越小越好，怎么能小下來(lái)，最有效的方法便是google的計(jì)劃，把主頁(yè)做的極其精簡(jiǎn)，圖片，html，靜態(tài)文件都很小，再便是緩存，把文件放到本地緩存區(qū)讀取。還有http請(qǐng)求數(shù)，削減文件傳輸中的排隊(duì)等候。

字節(jié)優(yōu)化：

1. 削減冗余html，結(jié)構(gòu)化，語(yǔ)義化的html來(lái)實(shí)現(xiàn)，行為，表現(xiàn)，結(jié)構(gòu)別離，獨(dú)立的html文件將變得很小。
2. 緊縮文本文件，css，html，js去掉注釋、空格、換行等。
3. 下降圖片字節(jié)，選擇適宜的圖片類型，png-8是一個(gè)好東西，再用東西將圖片進(jìn)行緊縮去掉，比方png-8的緊縮東西。用適宜的圖片尺寸，不要把大圖操控一下寬高就用上了。
4. gzip緊縮一下，減小服務(wù)器端傳輸?shù)娇蛻舳藭r(shí)分的字節(jié)。
5. flash文件和flash+xml的動(dòng)態(tài)flash也減小字節(jié)

緩存：
服務(wù)器端裝備一下，進(jìn)步緩存的命中率和把不經(jīng)常修正的文件緩存了。
Add Expires headers、Etags、ajax運(yùn)用get方法便于緩存。
把能別離出來(lái)的css，js別離成外部文件便于緩存。
使flash和xml文件可緩存。
打通不同運(yùn)營(yíng)商的約束
CDN進(jìn)步不同類型運(yùn)營(yíng)商的網(wǎng)絡(luò)傳輸速度，電信，網(wǎng)通，鐵通，教育網(wǎng)通通搞定。

請(qǐng)求數(shù)：
削減文件請(qǐng)求數(shù)，能合并到一同的合并一下，css，js，圖片等，減小排隊(duì)等候和服務(wù)器端開銷。
分域進(jìn)步一起加載數(shù)，優(yōu)化排隊(duì)等候。
防止404無(wú)效請(qǐng)求數(shù)。
防止重定向。

延遲加載和預(yù)載：
把暫時(shí)不用的文件等主體頁(yè)面加載完了再加載，把用戶稍后要看閱讀的內(nèi)容預(yù)先加載進(jìn)來(lái)，相冊(cè)閱讀便是很好的例子，先用小圖片放大再把大圖展現(xiàn)出來(lái)，看本張圖片時(shí)把下一張預(yù)載進(jìn)來(lái)等等。

第三類：客戶端優(yōu)化

1. 討厭的IE的濾鏡和CSS expressions少用，當(dāng)心把閱讀器搞掛，CUP 100%死機(jī)。
2. CSS放到前面，js能放到后邊的放在代碼后邊。將頁(yè)面盡早展現(xiàn)給用戶。
3. 削減iframe的運(yùn)用，防止CPU扛不住。
4. 削減DOM個(gè)數(shù)，減低閱讀器解析壓力。
5. 運(yùn)用而不是@importChooseover @import，在 IE 中 @import 指令等同于把 link 符號(hào)寫在 HTML 的底部。而這與第一條相違背。
6. 進(jìn)步j(luò)s的履行效率，論題太大不提了
7. 縮小 Cookie，針對(duì) Web 組件運(yùn)用域名無(wú)關(guān)性的 Cookie (Use Cookie-free Domains for Components)
8. 還有小圖片的repeat布景會(huì)進(jìn)步閱讀器的CPU占用。
9. 合理的DOM排序，把重要的內(nèi)容代碼前置，優(yōu)先加載。

再便是些沒對(duì)號(hào)入座的yahoo功能優(yōu)化的條目。至此能夠查驗(yàn)到頁(yè)面工程師不是蓋的，需要對(duì)代碼、文件，http協(xié)議，緩存，服務(wù)器等精準(zhǔn)的學(xué)習(xí)和操控，達(dá)到供給用戶最最根本的體會(huì)——拜訪速度的體會(huì)。

Web規(guī)范的別離思想和結(jié)構(gòu)化語(yǔ)義化html促成了以上很多條的施行，這是美工年代所不能比擬的。