公司招了幾個(gè)剛畢業(yè)的學(xué)生脚仔，作為重構(gòu)的新手讓我來帶鲤脏。
首先感謝感謝黨、感謝國家硫嘶、感謝公司給了我這樣的一個(gè)機(jī)會(huì)沦疾，對(duì)我工作的肯定和認(rèn)可刨秆，讓我?guī)н@樣的一個(gè)重構(gòu)團(tuán)隊(duì)衡未，同時(shí)我也明白任務(wù)的艱巨缓醋，但我一定會(huì)將工作做好，不負(fù)公司對(duì)我的期望葫督。（哈哈，好像從小到大，老師都是教育我們要這樣先說的裆馒。）
在網(wǎng)站的發(fā)展史上喷好，初期的網(wǎng)站建設(shè)根本不需要網(wǎng)頁重構(gòu)這個(gè)職位梗搅，Web 1.0時(shí)代的網(wǎng)頁，只需要程序員哆键，一堆堆的表格嵌套就完成闪盔，或者美工進(jìn)行配合完成泪掀，先由美工負(fù)責(zé)設(shè)計(jì)好，再用一些自動(dòng)化的軟件拉伸幾下凭涂，直接將設(shè)計(jì)好的圖就可以通過軟件輸出表格的布局了祝辣，根本不需要重構(gòu)這個(gè)多余的職位。隨著Web 2.0的到來和W3C的規(guī)范得到世人的認(rèn)可切油，內(nèi)容和樣式的分離更方便進(jìn)行開發(fā)和維護(hù)蝙斜，傳統(tǒng)的表格布局和內(nèi)容混排的方式逐漸地被淘汰，美工已不能完全一手包辦越來越復(fù)雜的效果和高要求的頁面布局了澎胡。此因催生了一個(gè)新的職位 —— 前端工程師。
鄙人剛好作為一名Web 2.0成長起來的前端工程師攻谁，雖然說做的項(xiàng)目不多稚伍，但樂于與人分享。雖然分享的也許只是一些很表面甚至有些過時(shí)的東西戚宦，但也只希望為大家提個(gè)醒个曙，最好能起到拋磚引玉的作用。
一受楼、前端工程師的職能和作用垦搬。
什么是前端工程師？有人這樣來表述：我們是工程師中的設(shè)計(jì)師艳汽，是設(shè)計(jì)師中的工程師猴贰。上班不干別的，就是玩河狐，弄點(diǎn)效果米绕，攢兩頁面，搞點(diǎn)創(chuàng)新甚牲。我們就是前端攻城獅（工程師）义郑。當(dāng)然這個(gè)表述有點(diǎn)輕巧、調(diào)侃的味道丈钙，工作絕對(duì)不是玩那么簡單的非驮，有時(shí)候會(huì)為一些效果的實(shí)現(xiàn)或優(yōu)化，弄得加班加點(diǎn)一起開發(fā)雏赦，但其實(shí)有兩一句表述是非常中肯的劫笙，那就是：我們是工程師中的設(shè)計(jì)師芙扎，是設(shè)計(jì)師中的工程師。這句話將前端工程師的角色的定位說得很準(zhǔn)確填大。
前端工程師戒洼，在網(wǎng)站開發(fā)的初期，以工程師的身份來指導(dǎo)網(wǎng)頁的設(shè)計(jì)允华，前端工程師明白程序輸出的方法圈浇，指導(dǎo)設(shè)計(jì)師在設(shè)計(jì)的過程中避免一些不能輸出的數(shù)據(jù)排版，指出哪一些陰影靴寂、透明磷蜀、圓角不能大范圍的使用等等；在進(jìn)行頁面重構(gòu)的過程中百炬，又將以一個(gè)設(shè)計(jì)師的身份將設(shè)計(jì)頁面轉(zhuǎn)化為靜態(tài)頁面褐隆，需要用代碼對(duì)設(shè)計(jì)頁面進(jìn)行最初的還原，實(shí)現(xiàn)好相應(yīng)的前臺(tái)效果剖踊，排列好相應(yīng)讓后臺(tái)開發(fā)的工程師輸出數(shù)據(jù)的地方庶弃，以適應(yīng)后臺(tái)數(shù)據(jù)的輸出并保持頁面的不變形、不走位德澈，在有數(shù)據(jù)輸出正常的情況下歇攻，配合程序去修改樣式，以盡量達(dá)到和設(shè)計(jì)的效果基本一致梆造。所以在這個(gè)頁面設(shè)計(jì)和到程序的實(shí)現(xiàn)過程中掉伏，需要前端工程師起到一個(gè)橋梁的作用。
前端開發(fā)是一項(xiàng)很特殊的工作澳窑，前端工程師的工作說得輕松，看似輕巧供常，但做起來絕對(duì)不是那么的簡單摊聋。在開發(fā)過程中涵蓋的東西非常寬廣，既要從技術(shù)的角度來思考界面的實(shí)現(xiàn)栈暇，規(guī)避技術(shù)的死角麻裁，又要從用戶的角度來思考，怎樣才能更好地接受技術(shù)呈現(xiàn)的枯燥的數(shù)據(jù)源祈，更好的呈現(xiàn)信息煎源。簡單地說，它的主要職能就將網(wǎng)站的數(shù)據(jù)和用戶的接受更好地結(jié)合在一起香缺，為用戶呈現(xiàn)一個(gè)友好的數(shù)據(jù)界面手销。
二、前端工程師的發(fā)展前景如何
前端工程師是是一個(gè)很新的職業(yè)图张，在國內(nèi)乃至國際上真正開始受到重視的時(shí)間不超過5年锋拖≌┖罚互聯(lián)網(wǎng)的發(fā)展速度迅猛，網(wǎng)頁由Web 1.0到Web 2.0兽埃，再到新生的HTML5侥钳、CSS3，到現(xiàn)在手機(jī)柄错、3G網(wǎng)絡(luò)等新科技的興起舷夺，網(wǎng)頁也由最原先的圖文為主，到現(xiàn)在各種各樣的基于前端技術(shù)實(shí)現(xiàn)的應(yīng)用售貌、交互和富媒體的呈現(xiàn)给猾，更多的信息、更豐富的內(nèi)容趁矾、更友好的體驗(yàn)耙册，已經(jīng)成為網(wǎng)站前端開發(fā)的要求，網(wǎng)站的前端開發(fā)發(fā)生了翻天可覆地的變化毫捣。
網(wǎng)站的開發(fā)對(duì)前端的需要越來越重要详拙，高質(zhì)量的前端開發(fā)工程師將會(huì)是后五年內(nèi)一個(gè)非常熱門的職業(yè)，發(fā)展的前景非陈可觀饶辙。
三、前端工程師需要掌握的技能
作為一個(gè)前端工程師斑粱，需要掌握的技能還真的不少弃揽。
最基本的三個(gè)技能：HTML、CSS则北、JavaScript矿微。
這是前端開發(fā)中最基本也是最必須的三個(gè)技能。前端的開發(fā)中尚揣，在頁面的布局時(shí)涌矢， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位快骗，再通過JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互娜庇。雖然表面看起來這些很簡單，但這里面需要掌握的東西絕對(duì)不會(huì)少方篮。在進(jìn)行開發(fā)前名秀，需要對(duì)這些概念弄清楚、弄明白藕溅，這樣在開發(fā)的過程中才會(huì)得心應(yīng)手匕得。
HTML：
指的是超文本標(biāo)記語言 (Hyper Text Markup Language)，這個(gè)也是我們網(wǎng)頁最常用普通的語言了蜈垮，經(jīng)歷了多個(gè)版本的發(fā)展耗跛，現(xiàn)在已經(jīng)發(fā)展到4.01版了裕照，得力于W3C建立的標(biāo)準(zhǔn)和規(guī)范，現(xiàn)在已普遍升級(jí)到了XHTML调塌，XHTML 指可擴(kuò)展超文本標(biāo)簽語言（EXtensible HyperText Markup Language）晋南， XHTML 于2000年的1月26日成為 W3C 標(biāo)準(zhǔn)，是更嚴(yán)格更純凈的 HTML 代碼羔砾，XHTML 的目標(biāo)是取代 HTML负间。XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML姜凄，是一個(gè) W3C 標(biāo)準(zhǔn)政溃。W3C 將 XHTML 定義為最新的HTML版本。所有新的瀏覽器都支持 XHTML态秧。
另外董虱，W3C 與 WHATWG 合作創(chuàng)建一個(gè)新版本的 HTML，就是HTML5申鱼。HTML5 將成為 HTML愤诱、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)，為HTML世界注入更多驚喜捐友，盡管 HTML5 仍處于完善之中淫半，然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持匣砖，顯示出來的生機(jī)和活力已是那樣的激奮人心科吭，特別是前端的工作中，那些針對(duì)瀏覽器兼容的問題將能得到很好的解決猴鲫，更多的效果和應(yīng)用也能更方便的實(shí)現(xiàn)对人。
前端工程師，也必然要與時(shí)俱進(jìn)拂共，緊跟業(yè)界時(shí)代發(fā)展的前沿规伐，不然永遠(yuǎn)只停留在舊的技術(shù)上，只會(huì)被無情的淘汰匣缘。
其實(shí)HTML的元素也就不過幾十個(gè)，常用的元素更少鲜棠，所以掌握起來的話應(yīng)該不困難肌厨。但就是這些看似簡單的元素，很多新手在剛開始的時(shí)候就不注意規(guī)范豁陆，養(yǎng)成一些不好的習(xí)慣柑爸。
1、不要忽略一些細(xì)節(jié)
隨便打開一個(gè)個(gè)網(wǎng)站盒音，隨手點(diǎn)到了163（點(diǎn)擊鏈接可直接查看）的首頁表鳍，163算是一個(gè)比較規(guī)范和專業(yè)的門戶網(wǎng)站了馅而，已經(jīng)用上了HTML5的一些元素了，具體可以看到源文件譬圣。
在頭部的焦點(diǎn)廣告圖那里瓮恭，用小BUG右鍵查看一下元素，看到這樣的一個(gè)圖像標(biāo)簽img代碼：
img必備和可選的參數(shù)都有寫了上了厘熟，但是必備參數(shù)里的一個(gè)值alt沒寫（其實(shí)一些大型的專業(yè)門戶網(wǎng)站其實(shí)也是有存在一些小問題的屯蹦，只要我們細(xì)心一點(diǎn)就能發(fā)現(xiàn)）。雖然這樣alt不寫绳姨，在頁面中也不會(huì)有任何的問題登澜，因?yàn)檫@個(gè)alt屬性也只是在圖像丟失、禁用或加載不到的情況下才顯示飘庄，但是如果一些其他特定的設(shè)備訪問或一些其他條件下圖片不顯示的情況下脑蠕，那這里就是一塊大紅XX和一大塊白塊，多影響用戶體驗(yàn)跪削。
（web前端學(xué)習(xí)交流群：328058344 禁止閑聊谴仙，非喜勿進(jìn)！）
雖然只是一個(gè)小小的alt屬性切揭，但是有時(shí)候是細(xì)節(jié)決定決定成敗狞甚，用與不用，表面上看不出有什么問題廓旬，但是在某些特定的條件產(chǎn)生的作用是無法估計(jì)的哼审，也就是從這些小小的細(xì)節(jié)就可以看出一個(gè)前端工程師的水平如何。
一些前端的新同學(xué)甚至什么也不填孕豹，放一張無任意命名意義的圖上去就算了事涩盾，養(yǎng)成這樣的習(xí)慣是非常不好的。
2励背、規(guī)范語義使用標(biāo)簽
很多同學(xué)說是學(xué)習(xí)div+css春霍，其實(shí)這個(gè)說法是存在誤區(qū)的，甚至是錯(cuò)誤的叶眉。一個(gè)規(guī)范標(biāo)準(zhǔn)的頁面是合理地使用標(biāo)簽址儒，使其更加語義化，如果只是靠一堆堆的div通過層層的嵌套來布局完成的話衅疙，那么莲趣，除了div和a標(biāo)簽這兩個(gè)標(biāo)簽外，所有的HTML元素都沒有存在的必要了饱溢。
上面是一個(gè)前來應(yīng)聘的朋友發(fā)給我看的一個(gè)頁面布局作品（點(diǎn)擊進(jìn)行查看）喧伞，這個(gè)同學(xué)還算是工作了一定時(shí)間的，據(jù)他介紹之前是在游戲公司工作的，但不知是不是當(dāng)時(shí)所在的公司是不是他負(fù)責(zé)前端這塊的潘鲫，不做評(píng)論翁逞。
這個(gè)朋友的頁面在瀏覽器查看沒有什么大問題，瀏覽罵的兼容性還可以說是沒有太大問題的溉仑，雖然從頁面的效果上看起來沒有什么問題挖函，用小bug一看，可以看到他寫的這個(gè)代碼好像還蠻整齊的彼念，所有的東西都是一層層的div挪圾，包裹得很仔細(xì)，類的命名也很有規(guī)律逐沙，但仔細(xì)一看哲思，這個(gè)導(dǎo)航做的很有問題。查看一下源文件吩案，發(fā)現(xiàn)不僅僅只是導(dǎo)航的問題了棚赔，整個(gè)頁面都有問題，所有的body下出現(xiàn)過的HTML標(biāo)簽加起來總共只有七個(gè)徘郭，分別是：div靠益、a、strong残揉、font胧后、input、br抱环、img壳快。先不說他寫行內(nèi)樣式、align在HTML4.01中已經(jīng)丟棄的屬性這些很低級(jí)錯(cuò)誤的問題镇草，一個(gè)很大的問題就是眶痰，語義的使用極不規(guī)范，使用層層的div來包裹定位梯啤。
例如這個(gè)導(dǎo)航可以用一個(gè)無序列表ul來就可以完成了竖伯，這樣簡潔明了，不需要這么多div和巨量的樣式來進(jìn)行控制因宇，最重要的是語義化也比較清晰了七婴。
網(wǎng)頁布局就像是一篇文章那樣，有標(biāo)題察滑、有段落本姥、有加強(qiáng)、有突出杭棵，HTML提供了這么多的元素給我們使用，就是要求我們要按照其語義來使用，該用標(biāo)題的時(shí)候用標(biāo)題（h）魂爪，該用段落的時(shí)候用段落（p）先舷，該重點(diǎn)強(qiáng)調(diào)的時(shí)候用強(qiáng)調(diào)（em, strong），而不是都不管三七二十一滓侍，千篇一律的先用div來包裹再來進(jìn)行控制蒋川。我們使用了這些相應(yīng)語義的HTML元素，同樣可以使用css來進(jìn)行控制的撩笆，可以達(dá)到任何我們想要的布局效果的捺球。css的魅力就在于此。
研究表明夕冲， 語義化的標(biāo)簽氮兵，越少的嵌套，對(duì)瀏覽器的解析就越快歹鱼，顯示的速度就越快泣栈，當(dāng)然對(duì)不同用戶群的用戶體驗(yàn)也就越好！特別是對(duì)于一些特殊群體和閱讀設(shè)備弥姻，如盲人南片，使用的是閱讀HTML的機(jī)器，對(duì)于一塊塊的div庭敦，就不知道哪里是標(biāo)題哪里是正文了疼进，只能閱讀到的是這里有一整塊的內(nèi)容。如果使用的是語義化的標(biāo)簽就不一樣了秧廉，即使看不到屏幕伞广，但也知道哪里是標(biāo)題哪里是標(biāo)題下相應(yīng)的正文。所以定血，我們有css這個(gè)這么神奇的東西幫助我們網(wǎng)頁布局的時(shí)候赔癌，語義化的使用HTML標(biāo)簽，用最少的嵌套和代碼實(shí)現(xiàn)同樣的效果澜沟，就是我們前端工程師所追求的灾票。
再次回到前面div+css布局的一些誤區(qū)，什么是div?它的英文名是division茫虽，意思是分開刊苍、分割、分塊的意思濒析。也就是說div在網(wǎng)頁中是用來進(jìn)行分塊布局或是在沒有更適合的HTML元素的情況下用來配合分塊布局的正什，如果胡亂的濫用div，那么就會(huì)犯上“div控”了号杏。剛?cè)腴T不久的新同學(xué)最容易會(huì)犯這種思想的婴氮。
CSS：
CSS (Cascading Style Sheets)指的是層疊樣式表斯棒，現(xiàn)在普遍在用的版本是CSS 2.1 ，雖然已經(jīng)發(fā)布了3.0的版本主经，且有一些個(gè)人的博客和站點(diǎn)已經(jīng)使用HTML5+CSS3了荣暮，但受目前國內(nèi)的主流瀏覽器IE6的影響，更多的人還是在使用2.1的版本罩驻，在這個(gè)的基礎(chǔ)上有選擇性的使用少量的不影響兼容的CSS3的某些功能穗酥，CSS3的普及還需時(shí)日。不管如何惠遏，CSS3的出現(xiàn)讓我們眼前一亮砾跃，增加了很多新的屬性，如圓角节吮、陰影抽高、漸變、動(dòng)畫课锌、流媒體等等的效果厨内，讓頁面實(shí)現(xiàn)的效果更加方便和容易。
現(xiàn)在要和大家分享的并不是CSS3那些激動(dòng)人心的屬性如何使用和實(shí)現(xiàn)渺贤，因?yàn)檫@些當(dāng)我們學(xué)習(xí)到了一定階段的時(shí)候都會(huì)去學(xué)習(xí)到CSS3這個(gè)將來必將成為王者的使用雏胃，現(xiàn)在與大家分享一些與版本無關(guān)的東西，讓大家在學(xué)習(xí)的過程中少走一些彎路志鞍。
1瞭亮、 Reset
關(guān)于重置也有太多的東西要說了，YUI固棚、Eric Meyer等都有各自不同的方法统翩，甚至有些人是不用重置的，不管怎樣此洲，只要遵循一個(gè)原則：適合自己的就好厂汗。所以不對(duì)這方面過多的強(qiáng)求，也不作過多的討論呜师。因?yàn)橐懻摰脑拵状笃灿懻摬煌耆㈣搿．?dāng)然我自己有一個(gè)自己用的reset的地方，究竟好與不好汁汗，大家有空的時(shí)候可以研究衷畦，最好能把研究的結(jié)果與我分享，我也很愿意聽知牌。
2祈争、 樣式書寫要注意的事項(xiàng)
看過《Efficient, maintainable CSS》的譯文《如何書寫高效、可維護(hù)角寸、組件化的CSS》菩混，里面講到一些樣式的書寫要注意的事項(xiàng)忿墅。還是看一看這個(gè)同樣是一個(gè)新同學(xué)寫的樣式，看上去很整齊沮峡，命名也很有次序球匕，但是仔細(xì)一看，問題還是很多的帖烘，先不說命名，因?yàn)檫@個(gè)得用另外的一個(gè)篇幅去說了橄杨。
如果作為一般的小站這樣寫秘症，樣式的也許只是多幾個(gè)K的大小的問題，在性能上影響并不大式矫，但在大型的網(wǎng)站中乡摹，幾個(gè)K的大小就不容忽視了。
基于前人的總結(jié)采转，個(gè)人認(rèn)為高效的CSS書寫應(yīng)該要注意：
1） 精簡屬性寫法聪廉，提高可觀賞性
很多屬性是有精簡的寫法的系馆，如padding夺巩、margin、background等等旨袒，這些寫法雖然可拆可合察绷，但我們習(xí)慣了精簡的寫法后干签，會(huì)讓css更加整潔、明了拆撼，看起來更加賞心悅目容劳，感覺寫css就是一個(gè)雕刻一件藝術(shù)作品。
2） 使用多重選擇器闸度，提高可重用性
多重選擇器的寫法相信很多人都會(huì)使用竭贩，但是多重選擇器的使用與進(jìn)行二次編輯或多次編輯的時(shí)候會(huì)有一個(gè)矛盾，多次的修改莺禁，有可能需要重新定義的樣式不同留量，這時(shí)候又需要重新的將原先的選擇器進(jìn)行分享出來單獨(dú)定義，這不能不說是一件痛苦的事情睁宰，所以在使用多重選擇器的時(shí)候肪获，最好針對(duì)固定的版塊使用多重選擇器，這樣大大降低你日后維護(hù)柒傻、編輯的成本孝赫。當(dāng)然，這是需要你的時(shí)間和經(jīng)驗(yàn)才能積累起來的红符。
相信很多人都會(huì)考慮到重用這一高效的寫法伐债，所以越少的層級(jí)、越少的繼承就為重用這一方法的實(shí)現(xiàn)提供了可能致开。也許有人會(huì)說峰锁，那我可以采用上面的“使用多重選擇器”來提高css的可重用性啊。其實(shí)這里面還有另外一個(gè)原因双戳，就是更少的層級(jí)虹蒋，渲染所使用的時(shí)間更少。css的渲染與JavaScript的方式完全不一樣飒货，JavaScript的篩選直接使用id魄衅，能夠精準(zhǔn)的定位到相應(yīng)的dom，但是css的層級(jí)多的話反而會(huì)影響到性能塘辅，但具體沒做相應(yīng)的測(cè)試晃虫。此處也許不嚴(yán)謹(jǐn)，請(qǐng)大家賜教扣墩，哪位大俠有空來測(cè)試一下哲银，給一些相應(yīng)的數(shù)據(jù)會(huì)有更好的說服力。但基于重用的原則呻惕，個(gè)人還是建議用最直接荆责、有效的簡短的命名，也同樣就是這樣的一個(gè)原則蟆融，雖然id的唯一性解決了沖突問題草巡，但違反了重用性的原則的同時(shí)也加大了維護(hù)和的成本，如非必要型酥，盡量不用id山憨。
4） 命名面向?qū)傩院兔嫦驅(qū)ο蠼Y(jié)合
其實(shí)命名這個(gè)方面有很長的一個(gè)篇幅可以說的，因命名的方法和各個(gè)人的習(xí)慣也不樣弥喉，有人喜歡用駝峰式郁竟，有人喜歡下杠線，有人喜歡縮寫由境，也有人喜歡全寫棚亩，個(gè)人認(rèn)為這個(gè)主觀色彩太重了，不予作過多的展開虏杰，不管哪一種讥蟆，都是沒有問題的。
和大家分享的是另外一個(gè)問題纺阔，是樣式的命名是面向?qū)傩赃€是面向?qū)ο竽厝惩肯嘈胚@個(gè)也會(huì)困擾著一些同學(xué)。現(xiàn)在就和大家分享一些我的心得笛钝。在分享我的觀點(diǎn)之前质况，先跟大家解釋一下什么是面向?qū)傩糟邓巍⑹裁词敲嫦驅(qū)ο蟆Ｃ嫦驅(qū)傩跃褪敲嫦騝ss的屬性來進(jìn)行命名结榄，面向?qū)ο缶褪敲嫦蛞貥?gòu)的頁面的模塊這個(gè)對(duì)象來進(jìn)行命名中贝。如下圖：
4.2 面向?qū)ο竺?/p>
關(guān)于這個(gè)問題，有人覺得面向?qū)傩院镁世剩驗(yàn)榭梢宰畲笙薅鹊睦煤胏ss的重用性邻寿；也有人認(rèn)為面向?qū)ο蠛茫驗(yàn)槊嫦驅(qū)ο罂梢宰尯笃诘木S護(hù)更方便直接视哑。既然各自都有好處老厌，那我們可不可以將兩者結(jié)合起來呢？答案是肯定的黎炉，而我個(gè)人也是這樣做的。
對(duì)于一些固定的醋拧、常用的慷嗜、重用性非常高的css，可以將其按面向?qū)傩詠磉M(jìn)行命名丹壕，上面的“面向?qū)傩悦钡倪@個(gè)圖這樣庆械，也可以說是一個(gè)小小的框架或是作為一個(gè)底層來方便自己的開發(fā)，放到哪里都是可以使用菌赖，具體可以見我整理的自已用的面向?qū)傩缘腸ss缭乘。另外對(duì)于于具體的版塊就應(yīng)該使用面向?qū)ο螅槍?duì)版塊的對(duì)象來進(jìn)行命名琉用，這樣也讓后期維護(hù)或接手的人來編輯也不會(huì)困難堕绩。163采用的也是采用面向?qū)傩院兔嫦驅(qū)ο蠼Y(jié)合的方法來進(jìn)行命名的。
作為一名前端開發(fā)的工程師邑时，應(yīng)該要有有利節(jié)流的思想奴紧，把css的書寫當(dāng)作一門藝術(shù)來學(xué)習(xí)、來追求晶丘。書寫出一個(gè)高效黍氮、可維護(hù)的樣式往往是通向大師之路的必走之路
。
樣式不僅僅是寫給自己看的浅浮，更要給團(tuán)隊(duì)開發(fā)或后來接手的人看的沫浆，如果能做到簡潔、高效滚秩、重用性专执、可讀性強(qiáng)，相信叔遂，你離大師的級(jí)別也不遠(yuǎn)了他炊。
3争剿、 CSS Sprite（圖片精靈、背景定位技術(shù)）
現(xiàn)在的網(wǎng)頁痊末，各種各樣的媒體蚕苇、圖標(biāo)、背景都是多得眼花繚亂的凿叠，特別是背景圖片涩笤、圖標(biāo)是我們網(wǎng)頁中使用最多的，按照以前的使用的話盒件，插入一個(gè)個(gè)的小圖標(biāo)或圖片用來控制來進(jìn)行修飾蹬碧，這些不和內(nèi)容相關(guān)的圖標(biāo)圖片也一并混排在內(nèi)容中了，且頁面中一大堆無關(guān)的圖標(biāo)圖片炒刁，還不方便管理恩沽。并且還有一個(gè)很大的弊病，一個(gè)圖片在頁面中是一個(gè)http的請(qǐng)求翔始，頁面中存在n個(gè)的這樣的小圖標(biāo)的話罗心，對(duì)服務(wù)器的請(qǐng)求也就有N個(gè)，也許對(duì)于一些小站來說沒什么影響城瞎，但對(duì)于一個(gè)大型網(wǎng)站來說的話渤闷，這個(gè)數(shù)字可就不得了，這時(shí)的服務(wù)器并發(fā)請(qǐng)求就會(huì)多上N乘以用戶的個(gè)數(shù)脖镀，這樣無疑加重了服務(wù)器的負(fù)擔(dān)飒箭。
而解決這個(gè)問題的最好辦法就是CSS Sprite。
將所有的圖片整合到一張大圖上蜒灰，通過css來進(jìn)行定位弦蹂。首先能將內(nèi)容和修飾的元素進(jìn)行了分離；其次能減少頁面請(qǐng)求的個(gè)數(shù)强窖，那么減輕了服務(wù)器的負(fù)擔(dān)盈匾；再次，能夠提高頁面加載的速度毕骡，加快頁面載入速度削饵，提升用戶體驗(yàn)。
另外未巫，將圖標(biāo)圖片作為背景來進(jìn)行加載窿撬，都是在文檔的主要內(nèi)容進(jìn)行加載完畢，再加載樣式時(shí)才進(jìn)行請(qǐng)求的（細(xì)心的大家也許也發(fā)現(xiàn)叙凡，網(wǎng)絡(luò)不好的時(shí)候劈伴，頁面加載進(jìn)來的是亂七八糟的，待一會(huì)樣式加載進(jìn)來后，頁面馬上正常了跛璧，其實(shí)這個(gè)就體現(xiàn)到了文檔加載的先后順序严里，如果不相信的話，可以用小bug或相應(yīng)的工具查看一下是不是這樣的加載順序）追城。
當(dāng)然刹碾，事物都是具有兩面性的，將小圖標(biāo)小圖片整合到一張圖片上座柱，雖說有百利迷帜，但仍有一害的，就是當(dāng)需要更換圖標(biāo)或調(diào)整的時(shí)候色洞，必須要在這張圖片進(jìn)行處理和定位戏锹，需要在Firework等這些圖像處理軟件中定位好坐標(biāo)再去寫相應(yīng)的CSS，會(huì)增加一定的工作量火诸，如果身邊沒有這些工具锦针，處理起來還是會(huì)有些麻煩的。但總的來說置蜀，圖片整合伞插，利大于弊，我們?yōu)楹尾挥媚兀?/p>
1盾碗、 兼容性
2、 以Trident為內(nèi)核的IE舀瓢、以Gecko為內(nèi)核的FireFox廷雅、以Presto為內(nèi)核的Opera、以Webkit為內(nèi)核的google chrome和Safari等四大內(nèi)核的瀏覽器四分天下京髓。
兼容性的問題相信是很多前端工程師肯定會(huì)遇到且最頭痛的一個(gè)問題航缀，且不說目前市面上有這么多的瀏覽器，就僅僅單一的IE系列家族的問題也夠多的了堰怨，特別是IE6芥玉，雖然微軟宣布了IE6的死亡和下臺(tái)，但國內(nèi)的機(jī)器仍以IE6為主流备图，IE6在國內(nèi)的消亡還需時(shí)日灿巧，作為前端開發(fā)沒法規(guī)避的情況下，暫時(shí)也只能折衷的進(jìn)行兼容揽涮。不過雖然繁多復(fù)雜抠藕，但我們可以化繁為簡，重點(diǎn)問題重點(diǎn)處理蒋困，基本上IE6的問題解決了盾似，也就解決最大的問題了。
當(dāng)然雪标，這個(gè)IE6的問題太多了零院，需要用另外的篇幅去進(jìn)行說明了溉跃，這里就不再跟大家再作深入的研究了，給大家提個(gè)醒告抄，讓我們一些新同學(xué)在成長過程中能夠有目的地去學(xué)習(xí)撰茎、發(fā)現(xiàn)和處理問題就OK了。
3玄妈、 圖片的優(yōu)化
雖然現(xiàn)在的富媒體越來越多了乾吻，網(wǎng)頁展現(xiàn)的數(shù)據(jù)從單一的圖文向音頻、視頻拟蜻、動(dòng)畫等類型擴(kuò)展绎签，但受限于網(wǎng)絡(luò)傳送帶寬、速率等影響酝锅，圖片仍以最高的可壓縮比诡必、傳送速度快、展現(xiàn)效果好等優(yōu)點(diǎn)作為一個(gè)主角在網(wǎng)頁呈現(xiàn)和展示方面活躍著搔扁。目前網(wǎng)頁主流的格式現(xiàn)在常用的也就不外乎幾種：png爸舒、gif、jpg稿蹲，其他一些在網(wǎng)頁中不常用的格式暫不在本次的討論之列扭勉。
3.1 圖片格式知多少
相信png、jpg苛聘、gif這些格式大家都能大概的了解和清楚一些使用涂炎，這里就不再細(xì)說，這里說一些使用中注意的事項(xiàng)或是大家不夠深入了解的東西设哗。
png：png有多個(gè)不同的位數(shù)的格式：png8唱捣、png24、png32网梢。前端的新同學(xué)們常常遇到的就是png在IE6中不透明震缭，其實(shí)IE6是支持PNG透明的，不過只支持png8的透明而已战虏。png8和gif都支持全透明和256色拣宰，所以在正常情況下兩者是可以互換的，兩者輸出的大小也差不多烦感，甚至png8比gif更有優(yōu)勢(shì)徐裸，但png8不能像gif那樣做成動(dòng)畫。
而png24和png32也有一些不同啸盏。png24在png8的基礎(chǔ)上增加了顏色的支持?jǐn)?shù)重贺，但是沒有透明信息，png32在png24的基礎(chǔ)上增加了透明的信息。Firework和Photoshop雖然同為Adobe公司的產(chǎn)品气笙，但是輸出的時(shí)候也是有些不太一致的次企。Firework能夠正常的輸出各種規(guī)格的png，但Photoshop不支持8位png+alpha透明的格式潜圃，而且Photoshop中也沒有32位png選項(xiàng)缸棵，其中的png24+透明實(shí)際上就是 png32（不信你可以嘗試用Photoshop輸出一個(gè)png24+透明的png再到Firework中看看就知道了），如果要IE6支持png32的透明谭期，就只能用別的方法了堵第，而我采用了js的方法，用法可見《IE6下PNG圖像透明完美解決方案》（其實(shí)標(biāo)題應(yīng)該改成“IE6下PNG32圖像透明完美解決方案”）
隧出。
gif：gif和png8一樣踏志，都是只支持256色，模式都是索引顏色胀瞪，但gif比png一個(gè)較大的優(yōu)勢(shì)是可以將圖片做成動(dòng)畫针余，而png8不能（現(xiàn)在最新版的png標(biāo)準(zhǔn)是支持一個(gè)文件內(nèi)存放多個(gè)圖像的，也就是說同樣可以做動(dòng)畫的）凄诞。
現(xiàn)在還有一些更非常規(guī)的圖片的用法圆雁，大家可以看到google的404頁面（點(diǎn)擊打開Google的404頁面），將圖片進(jìn)行base64編碼再放到css中（當(dāng)然IE6帆谍、7是無法正常解析的伪朽，嘿嘿）。
這種data: URI的格式能把base64（或其他數(shù)據(jù)）內(nèi)嵌在image標(biāo)簽的屬性當(dāng)中（或者CSS中或JavaScript中）汛蝙，通過對(duì)圖片進(jìn)行base64編碼烈涮，可以實(shí)現(xiàn)將圖片直接嵌入代碼中的目的，如此一來患雇，可以減少HTTP請(qǐng)求，這對(duì)于提升Web性能很有好處宇挫。對(duì)于較小的圖片苛吱，采用這樣處理是非常實(shí)用的，但是IE6/7不能支持這種方法器瘪，因此可以在IE6/7中采用傳統(tǒng)的方法翠储，而在其他瀏覽器中使用這樣的方法來進(jìn)行全面的兼容。
這種做法有利有弊橡疼，好處是可以減少HTTP請(qǐng)求援所，不好的地方是圖像的大小會(huì)增加1/3。因此欣除，這種內(nèi)嵌的方法適合對(duì)小的圖形住拭、小圖標(biāo)等進(jìn)行處理，從而減少瀏覽器打開的連接數(shù)，但對(duì)大的照片滔岳、圖片等則不應(yīng)該使用base64編碼了杠娱，以免影響圖像下載的時(shí)間。
但這種圖像的處理也需要另外的軟件谱煤，所以不熟悉的情況下操作起來也有一定的困難摊求。
當(dāng)然這些都是更深一點(diǎn)的應(yīng)用了，我也在學(xué)習(xí)當(dāng)中刘离，無法再作更深入的論述了室叉，大家可以自行進(jìn)行擴(kuò)展。當(dāng)然硫惕，我也樂于分享你們的觀點(diǎn)茧痕。
擴(kuò)展閱讀：《Data URI scheme》
更多的圖片的格式可以查看一篇老外的文章，也有人進(jìn)行了介紹：
《Tips for choosing a cache image format 》
《The difference between PNG24 and PNG32》
外文不太好的也可以看這里疲憋，有人進(jìn)行了相應(yīng)的概括：
淘寶UED： 《圖片格式與設(shè)計(jì)那點(diǎn)事兒》
尹延超：《 PNG詳解》
6.2 如何輸出合適的圖片
說了這么多的圖片格式相關(guān)的知識(shí)凿渊，現(xiàn)在要實(shí)際操作來說明一下我們?cè)鯓虞敵鲆粋€(gè)適合我們的圖片了。
其實(shí)淘寶UED： 《圖片格式與設(shè)計(jì)那點(diǎn)事兒》這里也說明得夠詳細(xì)了缚柳，這里就不重復(fù)里面的一些方法了埃脏。我們最常用的圖像處理軟件莫過于Firework和Photoshop，所以我們也以這兩個(gè)軟件就重點(diǎn)秋忙。雖然兩個(gè)軟件現(xiàn)在是同出一家彩掐，同屬一個(gè)Adobe Master套裝，但兩者的算法還是有一定的差別的灰追。所以在做圖片處理的時(shí)候有時(shí)候可以在這兩個(gè)軟件中分別進(jìn)行輸出對(duì)比來決定最后圖片的使用堵幽。
注：本文使用的是Adobe Master CS4開發(fā)套裝的，其他的版本沒測(cè)弹澎，已知的是Firework 8中圖片輸出的算法也沒有Firework CS4的好朴下，具體可以親測(cè)。
這里不再進(jìn)行深入的論述苦蒿，大家清楚了上面的格式的差別和軟件的問題后殴胧，在具體的工作中通過不停的比較就能得出上面這些結(jié)論。
JavaScript：
因本人也是JS菜鳥一個(gè)佩迟，也正在努力學(xué)習(xí)的階段团滥，沒法跟大家深入的講JavaScript的一些核心代碼分析什么的，所以講一些無關(guān)緊要的所謂的理論問題报强。
頁面除了數(shù)據(jù)層的html灸姊、展示層的css，還有一個(gè)動(dòng)畫和交互層的腳本秉溉，那就是JavaScript力惯。JavaScript可以說是目前Web開發(fā)中一個(gè)非常流行的語言了碗誉，如果一個(gè)前端工程師能夠精通此語言，就單一項(xiàng)語言也能成就一份非常不錯(cuò)的工作夯膀。
相信大家對(duì)之前Google里的那個(gè)用JavaScript做的紀(jì)念瑪莎·葛蘭姆的動(dòng)畫還不會(huì)陌生诗充，點(diǎn)擊此處觀看，這個(gè)用JavaScript配合圖像定位做成的動(dòng)畫诱建，展示了JavaScript的強(qiáng)大功能蝴蜓。
現(xiàn)在Prototype、JQuery俺猿、Mootools茎匠、Dojo、Extjs等的框架押袍，各種各樣的基于js框架開發(fā)的插件方便我們的開發(fā)诵冒，大大的熱縮短了我們學(xué)習(xí)的周期，簡化了前端的開發(fā)谊惭，加快了開發(fā)速度汽馋，同時(shí)避免各類瀏覽器的兼容性問題。目前前端開發(fā)者使用JS框架是種很普遍的現(xiàn)象圈盔，但是我們的開發(fā)應(yīng)該按需要進(jìn)行選擇
