悟道web規范:前端功能優化

前端功能優化完全是一個技術論題，可是對于項目的用戶體會有非常大的影響，假如你的網站打開要等候三五秒或者等到閱讀器提示無法連接，那網站哪來的流量，哪來的品牌影響和用戶忠誠度，掙錢就算了。

3s，作為判斷一個用戶忍受你網站速度的限度，假如超過3s，用戶已經對這個網站產生了負面的沖突心理。
前端功能優化和web規范有什么關系，接著第一篇 悟道web規范——統一思想，遵循規范 ，這是對你遵循web規范的一個補償或者是對規范的一個認可。

引用:

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

我們當然要革新它，替代他，發明全新的頁面工程師系統和頁面質量，獨立的頁面工程師完結的頁面代碼，跨過渠道的頁面代碼，只要能解析頁面的設備都能夠拜訪和閱讀，手寫的頁面代碼，整齊劃一，層次分明，最低流量耗費的頁面代碼，程序員喜歡的頁面代碼，拜訪速度超快的頁面代碼，改版可重復利用的頁面代碼，讓頁面工程師抬起頭來，自豪的稱自己是工程師，書寫的也是計算機代碼的頁面代碼。
前端優化正好給Web規范供給了一個查驗的機會，用“實踐是查驗真理的唯一規范”來判斷規范化到底好欠好，對不對。

前端功能優化了解yahoo功能優化N條的同學應該不會陌生，裝置一個YSlow評分并對照著優化就能夠了，可是有沒有想過為什么要這么做就能夠提升速度，這些與Web規范有沒有某種關聯或者因果呢。

我把這些個條目分紅三類，服務端運算優化，傳輸優化，客戶端運算優化：

第一類，服務器端優化

服務器端便是對你的網站的動態語言的履行(asp,php)，數據庫查詢，存儲等速度，總的來說便是輸入/輸出的運算。這些跟前端沒關系，可是影響著前端。YSlow里面沒有，鬼知道你網站的服務器功能如何，看不出來，就自行優化服務器功能，數據庫功能，多買點服務器擴容。
yslow有一條盡早改寫 Buffer (Flush the Buffer Early)，貌似是不等html完結生成就傳輸。
進步域名的DNS解析速度。削減DNS的解析個數。這個欠好歸類，暫時放到這里吧。

第二類，傳輸優化

這類是大頭，很煩，首先是字節，字節越小越好，怎么能小下來，最有效的方法便是google的計劃，把主頁做的極其精簡，圖片，html，靜態文件都很小，再便是緩存，把文件放到本地緩存區讀取。還有http請求數，削減文件傳輸中的排隊等候。

字節優化：

1. 削減冗余html，結構化，語義化的html來實現，行為，表現，結構別離，獨立的html文件將變得很小。
2. 緊縮文本文件，css，html，js去掉注釋、空格、換行等。
3. 下降圖片字節，選擇適宜的圖片類型，png-8是一個好東西，再用東西將圖片進行緊縮去掉，比方png-8的緊縮東西。用適宜的圖片尺寸，不要把大圖操控一下寬高就用上了。
4. gzip緊縮一下，減小服務器端傳輸到客戶端時分的字節。
5. flash文件和flash+xml的動態flash也減小字節

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

請求數：
削減文件請求數，能合并到一同的合并一下，css，js，圖片等，減小排隊等候和服務器端開銷。
分域進步一起加載數，優化排隊等候。
防止404無效請求數。
防止重定向。

延遲加載和預載：
把暫時不用的文件等主體頁面加載完了再加載，把用戶稍后要看閱讀的內容預先加載進來，相冊閱讀便是很好的例子，先用小圖片放大再把大圖展現出來，看本張圖片時把下一張預載進來等等。

第三類：客戶端優化

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

再便是些沒對號入座的yahoo功能優化的條目。至此能夠查驗到頁面工程師不是蓋的，需要對代碼、文件，http協議，緩存，服務器等精準的學習和操控，達到供給用戶最最根本的體會——拜訪速度的體會。

Web規范的別離思想和結構化語義化html促成了以上很多條的施行，這是美工年代所不能比擬的。