WEB開發者必讀的HTML＋CSS前端優化技巧

引言：

對於剛學完HTML+CSS的初學者們，剛開始寫代碼的你們還沒有前端優化的概念，其實我們不只是會做出一些網頁出來，前端優化也必須被注入到代碼里。有時候我們會發現一些細少的差別，為什麼有的網站打開的速度特別快，有的網站打開的時候前面還有一會大白板時。這時你們有沒有想過什麼導致有這種差別呢？單從用戶體驗的角度上來講，您願意為打開一個網站等待多長時間？那麼問題來了，前端優化，我們應該做些什麼呢？如何加快網站響應的速度呢？

網頁內容

減少http請求次數

大部分網站響應時間都花費在了下載網頁資源上，這裡的資源指的是：圖片、CSS、JS、和Flash等。我們這裡講的減少請求次數是縮短響應時間的關鍵點。

一般情況下，可以分為兩種：

一是通過簡化頁面設計來減少請求次數。

二是網頁比較複雜的腳本或CSS文件可以採用多個腳本或打包放在一個文件裡面，圖片採用CSS Sprites(圖象拼合技術)，把多個圖拼成一副圖片，然後通過CSS來控制在什麼地方顯示這張圖的什麼位置，從而來減少請求次數，這一塊的內容，大家可以參照京東下面這一塊的CSS定位來實現。

避免頁面跳轉

避免頁面跳轉是什麼呢？就是當客戶端收到伺服器的跳轉回復時，客戶端再次根據伺服器回復中的location指定的地址再次發送請求，也是就說，SEO上常用的301重定向

比如說：

我現在要讓訪問源碼時代的同學，進到源碼論壇，這就就是伺服器端301重定向的實現方法

RewriteEngine On

RewriteCond % !^www.itsource.cn$ [NC]//這是客戶端請求的地址

RewriteRule ^(.*)$ http://bbs.itsource.cn/$1 [R=301,L]//這是客戶端實際看到的網頁

延遲載入

我們這裡講的延遲載入需要我們先知道網頁最初載入最小的內容是什麼，剩下的內容就可以使用延遲載入的實現。

最典型的是Javascript可以延遲載入內容，這個做法是開發網頁的時候先確保網頁在沒有javascript的時候也可以很好的顯示正常的頁面效果，然後通過延遲載入腳本來完成一些高級的功能效果的做法。

提前載入

這種方法，恰好與上面的方法相反，也就是說先提前載入一些網頁中的資源，它又分三類：

1.無條件提前載入

該方法就是當網頁載入完成後，馬上去載入一些其他內容，如淘寶會在載入完成功後會去載入一些圖片拼合後的圖片

2.有條件載入

根據用戶輸入的信息來推斷需要載入的內容，比如說百度搜索。

有預期的載入

這個就比較高大上一些了，這個情況一般是在網頁重新設計的時候，由於用戶的訪問行為，本地有舊網頁的緩存，而新設計的網站沒有，設計者可以通過在舊網頁中預先加入一些新網站中可能會用到內容，這樣的話，新網頁就會先下載一些資源到本地。

減少DOM元素數量

如果網頁中的元素過多也對網頁的性能有影響，同時也會加重網頁載入和腳本的執行，大家可以想一下，平時在使用JS的時候，我們要實現一些效果，是不是得先找到相關DOM元素，然後再執行相關操作。 如果我們網頁中的元素過多，是不是就會有一個非常明顯的時差呢！所以減少DOM元素數量，仍然影響網頁性能。

根據域名劃分內容

很多時候，我們在查看其它大型的網站的時候，圖片的地址和網站的主域名還不一樣，會採用多個域名來存放相關資源的，那為什麼要這樣使用呢？其實，瀏覽器一般對同一個域名的下載連接數有所限制，根據域名劃分下載內容，可以間接的增大瀏覽器並行下載連接。大大提高了網站整體的下載資源能力。從而達到優化性能的作用。

減少iframe數量

之前，我們講過怎麼使用iframe，但是在實際的項目中，我們在使用的時候請先注意它的優缺點。

優點：

可以用來載入速度較慢的內容，腳本可以並行下載

缺點：

使用iframe內容為空時也會消耗載入時間並會阻止頁面載入

避免404

404就是常見的沒有找到伺服器資源，一是：影響用戶體驗，打開一個返回無用信息的頁面。二是網頁中需要載入一個外部腳本，結果返回一個404，不僅阻塞了其他腳本下載，下載回來的內容(404)客戶端還會將其當成Javascript去解析。

CSS

將樣式表置頂

由於網頁內容從上往下的載入方式，我們儘可能的將CSS樣式放在網頁的head中會讓網頁顯得載入速度更快，對於內容比較多的網頁非常重要，至少不會讓用戶一直等待一個白屏上，這樣的用戶體驗也是相當好的。

假如我們把樣式表放在底部的話，就是出現一種情況，瀏覽器會拒絕渲染已經下載的網頁，因為多數瀏覽器在實現時都努力避免重新繪製。所以這一樣也是一個重點。

避免CSS表達式

有一些基礎CSS3的小夥伴們一直很仰慕它強大的二開能力，喜歡用一些CSS表達式來動態的設置CSS屬性，在IE5~IE8中支持，其他瀏覽器中表達式會被忽略。

其它CSS表達式的問題在於它被重新計算的次數遠比我們想像的要多，所以我們還是盡量避免使用它來防止使用不當造成的性能開消過多。

用link標籤代替@import

在網頁的設計中，請盡量使用link標籤來引用CSS，避免使用@import來引用，原因很簡單，您可以理解為就是將CSS樣式放在網頁中的內容底部就可以了。

圖片

優化圖像

在網頁的製作中，我們會發現，banner這一類的圖片載入起來非常的慢，同時也影響網站的速度，少者幾百K，大者幾M。那麼究竟這樣的圖片還有沒有優化的空間呢！？

今天我給大家推介一個圖片優化的平台，它就是設計師們經常去的智圖網，同時我們也可以來看一個例子：

大家可以看到，原圖和優化過後的（智圖）圖片，相差了500多K，如果對於圖片比較多的網站，我們把整站的圖片都用來優化一下，那麼可以想像一下，這是要節省多少流量呀！所以這些圖片優化我要強力推薦一下了。

避免空的圖片src

我們在使用img標籤的時候，盡量避免使用空的圖片src，因為空的圖片src仍然會使瀏覽器發送請求到伺服器，這樣完全是浪費時間，而且浪費伺服器的資源。尤其是你的網站每天被很多人訪問的時候，這種空請求造成的傷害不容忽略

優化CSS Sprite

Spirite中水平排列圖片，垂直排列會增加文件大小；

Spirite中把顏色較近的組合在一起可以降低顏色數，理想狀況是低於256色以便適用PNG8格式；

不要在Spirite的圖像中間留有較大空隙。這雖然不大會增加文件大小,但對於用戶代理來說它需要更少的內存來把圖片解壓為像素地圖。

不要在HTML中縮放圖片

避免使用大圖實現圖片大小縮放來適應頁面，如果你需要小圖片，就直接使用小圖片吧。原因很簡單，針對不同的設備可以做到最好的效果，而不是載入就大的圖，來整體實現效果，如果是手機端用戶，這個開消還是挺大的，畢竟這是一個講流量的時代。

使用小且可緩存的favicon.ico

一般企業網站或站長都喜歡加一個圖標文件favicon.ico，不管你伺服器有還是沒有，瀏覽器都會去嘗試請求這個圖標。所以我們要確保這個圖標存在並且文件盡量小，最好小於1k 設置一個長的過期時間

總結：

最後，本文主要針對初級入門網頁設計人員，該文內容僅涉及到HTML、CSS、Javascript、images等內容，當然還有一些其它的方法，我們在下一期的文章中指出。

當然，上面提及的一些常歸的前端優化小技巧你GET到了嗎？請不要在你的網頁中出現與此類似的錯誤，要不然真的很影響用戶體驗，畢竟，現在是WEB2.0的時代，如果用戶對你的網頁不滿意，那就是對開發者的否定，所以為了做出更好更優秀的網頁，我們儘可能多的去關注這些小細節。

寫本文的目的，就是為了更好的讓初級的小夥伴們快速成長起來。做一個優秀的開發人員，同時寫出來的內容可以用於同行交流體會，如果你還有更好的方法和技巧，請在下方的交流區里留言，我會第一時候回復您。謝謝！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！