HTML+CSS前端優(yōu)化技巧有哪些

這篇文章主要介紹了HTML+CSS前端優(yōu)化技巧有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

 引言：

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

接下來的文章中源碼時代Web前端（http://www.itsource.cn）講師會給大家介紹一些常歸的提高網(wǎng)頁性能的實踐和相應的解決方案，讓未來的你們在處理前端性能優(yōu)化上，對自己做出來的產(chǎn)品更有信心。

網(wǎng)頁內(nèi)容

減少http請求次數(shù)

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

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

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

二是網(wǎng)頁比較復雜的腳本或CSS文件可以采用多個腳本或打包放在一個文件里面，圖片采用CSS   Sprites(圖象拼合技術(shù))，把多個圖拼成一副圖片，然后通過CSS來控制在什么地方顯示這張圖的什么位置，從而來減少請求次數(shù)，這一塊的內(nèi)容

避免頁面跳轉(zhuǎn)

避免頁面跳轉(zhuǎn)是什么呢？就是當客戶端收到服務器的跳轉(zhuǎn)回復時，客戶端再次根據(jù)服務器回復中的location指定的地址再次發(fā)送請求，也是就說，SEO上常用的301重定向

比如說：

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

RewriteEngine On

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

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

延遲加載

我們這里講的延遲加載需要我們先知道網(wǎng)頁最初加載最小的內(nèi)容是什么，剩下的內(nèi)容就可以使用延遲加載的實現(xiàn)。

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

提前加載

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

1.無條件提前加載

該方法就是當網(wǎng)頁加載完成后，馬上去加載一些其他內(nèi)容，如淘寶會在加載完成功后會去加載一些圖片拼合后的圖片

2.有條件加載

根據(jù)用戶輸入的信息來推斷需要加載的內(nèi)容，比如說百度搜索。

有預期的加載

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

減少DOM元素數(shù)量

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

根據(jù)域名劃分內(nèi)容

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

減少iframe數(shù)量

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

優(yōu)點：

可以用來加載速度較慢的內(nèi)容，腳本可以并行下載

缺點：

使用iframe內(nèi)容為空時也會消耗加載時間并會阻止頁面加載

避免404

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

CSS

將樣式表置頂

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

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

避免CSS表達式

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

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

用link標簽代替@import

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

圖片

優(yōu)化圖像

在網(wǎng)頁的制作中，我們會發(fā)現(xiàn)，banner這一類的圖片加載起來非常的慢，同時也影響網(wǎng)站的速度，少者幾百K，大者幾M。那么究竟這樣的圖片還有沒有優(yōu)化的空間呢！？

今天我給大家推介一個圖片優(yōu)化的平臺，它就是設計師們經(jīng)常去的智圖網(wǎng)。

原圖和優(yōu)化過后的（智圖）圖片，相差了500多K，如果對于圖片比較多的網(wǎng)站，我們把整站的圖片都用來優(yōu)化一下，那么可以想象一下，這是要節(jié)省多少流量呀！所以這些圖片優(yōu)化我要強力推薦一下了。

避免空的圖片src

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

優(yōu)化CSS Sprite

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

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

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

不要在HTML中縮放圖片

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

使用小且可緩存的favicon.ico

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML+CSS前端優(yōu)化技巧有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!