關于前端開發的那些事
原創其實我做前端的時間也不是很長，寫這篇文章也是和一些初學的前端開發人員做一次經驗的分享與交流，如果有錯誤的地方還需要大家諒解和指正。
說起前端開發，我們就從一些讓人打瞌睡的概念說起吧。
關于WEB標準
什么是WEB標準？也許很多人會認為是DIV+CSS。其實這是一個錯誤的說法，WEB標準是一系列的技術規范，而目前主要包括XHTML1.0、CSS2.1、DOM1.0和ECMAJavaScript。當然了，WEB標準也不僅僅是一個規范，而是一系列規范的總稱。而上面說的DIV+CSS是XHTML1.1結合CSS2.0的一種制作方法，嚴格來應該說是XHTML+CSS。
而WEB標準是由三大塊組成的。首先是結構，主要是對網頁的數據對象進行整理分類，技術體現分別是HTML，XML，XHTML。（在這里大家可能會問，HTM不也是網頁的一種嗎？是的，實際上HTM與HTML沒有本質意義的區別，原因是為了兼容一些不能識別四位擴展名的老系統（win32），開發者為了滿足DOS僅能識別8+3的文件名而已。）；其次就是表現，用于沒有結構化的信息顯示以及視覺上的處理，分別包含為樣式，顏色，大小等等，主要應用于CSS上。最后一個就是行為，用于文檔對象模型定義與交互的體現，分別是DOM與MAScript來完成。
關于布局
在這個問題之前，我先跟大家談談一個故人，那就是“table”，table也就是表格。早期的網站大部分都是用table來布局的，準確來說應該是用表格來布局。因為如果用table來布局，這時我們就不能叫table了，因為它幾乎能完成所有結構上的事情。那為什么不用table來布局呢？這就是我們要談的節約成本，提升速度了。
首先，table的可維護性低，太多的table屬性要修改起來讓人眼花繚亂，比如border=”0”,align=”left”等等，要修改得每個頁面都要更改。第二，嵌套太過復雜，tr td會讓你找到吐。第三，不能重用。第四，添加交互效果太難。第五，加載速度過慢。等等，每個問題都無不牽扯到成本和速度的問題。
如果采用XHTML+CSS來布局，上面的幾種問題完全可以解決。因為我們可以做到網頁表現與內容分離，也就是用XHTML來作為數據的表現，而所有的樣式表現將由CSS來全部控制。這樣不僅結構清晰，頁面體積也會大大的減小，瀏覽器兼容性更好。當然還有很多好處，比如有利于SEO優化，更容易被搜索引擎收錄，樣式重用，維護方便，錯誤修改頁面調整更加快捷等等。所以W3C推薦使用WEB標準開發的原因相信大家也很清楚了。
關于優化規范
針對規范的問題在前段阿里技術嘉年華上跟淘寶前端開發專家嗷嗷交流過，嗷嗷認為，大家了解最多的是網站性能優化的34條黃金法則，我們稱之為雅虎軍規，但也不能說是規范，它只是一個建議。但不同的公司都有著不同的背景會導致每個公司都會加上自己的一些特殊的東西。所以讓人感覺有很多，每個人出來講都不一樣了。其實最基礎的我還是覺得雅虎軍規，就是前人的方法總結了，可能由于時代在變，有些方案也會發生變化，所以要自己再去深入研究。
雅虎現在前端沒有以前那么好，就是雅虎輝煌的時候很多人都去看看人家是怎么做的。現在雅虎就沒有像以前那么重視了，或者是由于公司的一些原因。我們可能也不是太了解，但是他們曾經留下那些經驗是非常好的。
關于字符集
在每個頁面的<head>中我們都有設置了字符集，而在通常的情況下我們用最多的時”UTF-8(國際標準編碼)”和”GB2312(中文編碼)”. 一般來說，在前端表現上面我們用UTF-8，后臺cms我們就使用GB2312。
- <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
有時候我們在打開一些網頁上會顯示口口口口????這樣的字符，可能是你在在寫charset的時候用了歐洲語系，比如ISO-8859-1等等，導致瀏覽器無法辨別語種；再者是因為你的頁面編碼不對，這時我們要通過保存為來改變頁面編碼?？梢酝ㄟ^記事本或者EditPlus操作：
在這里主要介紹三個編碼（部分內容借鑒汪旭的一篇帖子）：
ANSI編碼：簡單的說就是把所有的空格、標點符號、數字、大小寫字母分別用連續的字解狀態表示，一直編到第127號，這樣計算機就可以用不同字節來存儲英語的文字了。所以人們就把這個方案叫做ANSI的“ASC II”編碼。這個肯定是不適合在國內使用的。
GB2312編碼：這個編碼的出現也是計算機普及到我們中國時，這時我們的漢字如何通過計算機表現出來呢？6000多個常用的漢字如何去保存呢？其實也就是通過兩個大于127的字符連載一起是，就表示一個漢字。前面的一個字節（他稱之為高字節）從0xA1用到0xF7，后面一個字節（低字節）從0xA1到0xFE，這樣我們就可以組合出大約7000多個簡體漢字了。
以上圖片是“51CTO傳媒”這幾個字的編碼，如果我們使用ANSI編碼的話，漢字在頁面上是識別不出來的。而在BIG5的編碼里，只能識別出“媒”字，識別不出“傳”字。這也是因為在繁體字庫里面沒有“傳”這個字。
UTF-8和UTF-16編碼：UNICODE 來到時，一起到來的還有計算機網絡的興起，UNICODE 如何在網絡上傳輸也是一個必須考慮的問題，于是面向傳輸的眾多 UTF（UCS Transfer Format）標準出現了，顧名思義，UTF8就是每次8個位傳輸數據，而UTF16就是每次16個位，只不過為了傳輸時的可靠性，從UNICODE到UTF時并不是直接的對應，而是要過一些算法和規則來轉換。
世界上所有網頁編碼統計圖（來自網絡）
從圖上我們很容易看出，UFT-8屬于一直上升的狀態。在目前所有的網頁編碼中UTF-8編碼是比較主流的。
關于性能和視覺
在前端開發上性能和視覺效果永遠是矛盾的，魚與熊掌不能兼得。而淘寶前端開發專家嗷嗷認為，這是很正常，比如設計師喜歡用圖，因為圖能更好的體現出UI效果，但是這些圖要在客戶端呈現的時候，肯定需要下載花費時間的，等待的時候讓你覺得性能變差了，但這也不是完成不能解決的。一些方案比如我們現在利用CSS技術把幾個圖合成一個，盡量控制它的請求數。也有一些我們比較推薦的是方案，比如我們用一些新技術，IE6這種它不支持的，那我們就可以跟設計帥說那我們在好的瀏覽器中就做出好的效果，低版本的瀏覽器達到可用的效果就可以，消耗又少很多。這樣就盡量找個平衡點，不能這個不能做，那個不能做。
那么我們應該如何去最大化的提升它的性能？
除了上面說的幾點外，還有緩存的合理設置和資源的合并，合理的緩存設置以及減少外部的腳本和樣式能夠大大的減少HTTP的請求數，進而提升網站的瀏覽速度。也就是說，緩存越多越好，外部資源越少越好。
【編輯推薦】
