關(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(點(diǎn)擊下載aqy106_lib.css)。另外對(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ā)或后來接手的人看的，如果能做到簡(jiǎn)潔、高效、重用性、可讀性強(qiáng)，相信，你離大師的級(jí)別也不遠(yuǎn)了。

　3、 CSS Sprite(圖片精靈、背景定位技術(shù))

現(xiàn)在的網(wǎng)頁(yè)，各種各樣的媒體、圖標(biāo)、背景都是多得眼花繚亂的，特別是背景圖片、圖標(biāo)是我們網(wǎng)頁(yè)中使用最多的，按照以前的使用的話，插入一個(gè)個(gè)的小圖標(biāo)或圖片用來控制來進(jìn)行修飾，這些不和內(nèi)容相關(guān)的圖標(biāo)圖片也一并混排在內(nèi)容中了，且頁(yè)面中一大堆無關(guān)的圖標(biāo)圖片，還不方便管理。并且還有一個(gè)很大的弊病，一個(gè)圖片在頁(yè)面中是一個(gè)http的請(qǐng)求，頁(yè)面中存在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)行了分離;其次能減少頁(yè)面請(qǐng)求的個(gè)數(shù)，那么減輕了服務(wù)器的負(fù)擔(dān);再次，能夠提高頁(yè)面加載的速度，加快頁(yè)面載入速度，提升用戶體驗(yàn)。

另外，將圖標(biāo)圖片作為背景來進(jìn)行加載，都是在文檔的主要內(nèi)容進(jìn)行加載完畢，再加載樣式時(shí)才進(jìn)行請(qǐng)求的(細(xì)心的大家也許也發(fā)現(xiàn)，網(wǎng)絡(luò)不好的時(shí)候，頁(yè)面加載進(jìn)來的是亂七八糟的，待一會(huì)樣式加載進(jìn)來后，頁(yè)面馬上正常了，其實(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)楹尾挥媚?

　　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)，但國(guó)內(nèi)的機(jī)器仍以IE6為主流，IE6在國(guó)內(nèi)的法消亡還需時(shí)日，作為前端開發(fā)沒法規(guī)避的情況下，暫時(shí)也只能折衷的進(jìn)行兼容。不過雖然繁多復(fù)雜，但我們可以化繁為簡(jiǎn)，重點(diǎn)問題重點(diǎn)處理，基本上IE6的問題解決了，也就解決最大的問題了。

當(dāng)然，這個(gè)IE6的問題太多了，需要用另外的篇幅去進(jìn)行說明了，這里就不再跟大家再作深入的研究了，給大家提個(gè)醒，讓我們一些新同學(xué)在成長(zhǎng)過程中能夠有目的地去學(xué)習(xí)、發(fā)現(xiàn)和處理問題就OK了。

　　3、 圖片的優(yōu)化

雖然現(xiàn)在的富媒體越來越多了，網(wǎng)頁(yè)展現(xiàn)的數(shù)據(jù)從單一的圖文向音頻、視頻、動(dòng)畫等類型擴(kuò)展，但受限于網(wǎng)絡(luò)傳送帶寬、速率等影響，圖片仍以最高的可壓縮比、傳送速度快、展現(xiàn)效果好等優(yōu)點(diǎn)作為一個(gè)主角在網(wǎng)頁(yè)呈現(xiàn)和展示方面活躍著。目前網(wǎng)頁(yè)主流的格式現(xiàn)在常用的也就不外乎幾種：png、gif、jpg，其他一些在網(wǎng)頁(yè)中不常用的格式暫不在本次的討論之列。

　　3.1圖片格式知多少

相信png、jpg、gif這些格式大家都能大概的了解和清楚一些使用，這里就不再細(xì)說，這里說一些使用中注意的事項(xiàng)或是大家不夠深入了解的東西。

png：png有多個(gè)不同的位數(shù)的格式：png8、png24、png32。前端的新同學(xué)們常常遇到的就是png在IE6中不透明，其實(shí)IE6是支持PNG透明的，不過只支持png8的透明而已，具體可以看我的頁(yè)面中圖標(biāo)，就是用了png8的透明，但是png8下不支持半透明，所以頂部的這個(gè)有背景色的時(shí)候用了png32配合JS處理了一下透明效果，不然有白白的邊在IE6里太難看了。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頁(yè)面(點(diǎn)擊打開GOOGLE 的 404頁(yè)面)，將圖片進(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í)間。

但這種圖像的處理也需要另外的軟件，所以不熟悉的情況下操作起來也有一定的困難，這里有一個(gè)在線版的轉(zhuǎn)換工具，有興趣的大家可以試試，嘗嘗鮮：點(diǎn)擊打開

當(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è)，已知的是Firework8中圖片輸出的算法也沒有Firework CS4的好，具體可以親測(cè)。

這里不再進(jìn)行深入的論述，大家清楚了上面的格式的差別和軟件的問題后，在具體的工作中通過不停的比較就能得出上面這些結(jié)論。

　　JavaScript：

因本人也是JS菜鳥一個(gè)，也正在努力學(xué)習(xí)的階段，沒法跟大家深入的講JavaScript的一些核心代碼分析什么的，所以講一些無關(guān)緊要的所謂的理論問題。

頁(yè)面除了數(shù)據(jù)層的html、展示層的css，還有一個(gè)動(dòng)畫和交互層的腳本，那就是JavaScript。JavaScript可以說是目前Web開發(fā)中一個(gè)非常流行的語(yǔ)言了，如果一個(gè)前端工程師能夠精通此語(yǔ)言，就單一項(xiàng)語(yǔ)言也能成就一份非常不錯(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í)的周期，簡(jiǎn)化了前端的開發(fā)，加快了開發(fā)速度，同時(shí)避免各類瀏覽器的兼容性問題。目前前端開發(fā)者使用JS框架是種很普遍的現(xiàn)象，但是我們的開發(fā)應(yīng)該按需要。

來源：伯樂在線