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