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

引言：

對于剛學(xué)完HTML+CSS的初學(xué)者們，剛開始寫代碼的你們還沒有前端優(yōu)化的概念，其實我們不只是會做出一些網(wǎng)頁出來，前端優(yōu)化也必須被注入到代碼里。有時候我們會發(fā)現(xiàn)一些細(xì)少的差別，為什么有的網(wǎng)站打開的速度特別快，有的網(wǎng)站打開的時候前面還有一會大白板時。這時你們有沒有想過什么導(dǎo)致有這種差別呢？單從用戶體驗的角度上來講，您愿意為打開一個網(wǎng)站等待多長時間？那么問題來了，前端優(yōu)化，我們應(yīng)該做些什么呢？如何加快網(wǎng)站響應(yīng)的速度呢？
接下來的文章中源碼時代Web前端（http://www.itsource.cn）講師會給大家介紹一些常歸的提高網(wǎng)頁性能的實踐和相應(yīng)的解決方案，讓未來的你們在處理前端性能優(yōu)化上，對自己做出來的產(chǎn)品更有信心。

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

減少http請求次數(shù)

大部分網(wǎng)站響應(yīng)時間都花費在了下載網(wǎng)頁資源上，這里的資源指的是：圖片、CSS、JS、和Flash等。我們這里講的減少請求次數(shù)是縮短響應(yīng)時間的關(guān)鍵點。
一般情況下，可以分為兩種：
一是通過簡化頁面設(shè)計來減少請求次數(shù)。
二是網(wǎng)頁比較復(fù)雜的腳本或CSS文件可以采用多個腳本或打包放在一個文件里面，圖片采用CSS Sprites(圖象拼合技術(shù))，把多個圖拼成一副圖片，然后通過CSS來控制在什么地方顯示這張圖的什么位置，從而來減少請求次數(shù)，這一塊的內(nèi)容，大家可以參照京東下面這一塊的CSS定位來實現(xiàn)。

避免頁面跳轉(zhuǎn)
避免頁面跳轉(zhuǎn)是什么呢？就是當(dāng)客戶端收到服務(wù)器的跳轉(zhuǎn)回復(fù)時，客戶端再次根據(jù)服務(wù)器回復(fù)中的location指定的地址再次發(fā)送請求，也是就說，SEO上常用的301重定向
比如說：
我現(xiàn)在要讓訪問源碼時代的同學(xué)，進到源碼論壇，這就就是服務(wù)器端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.無條件提前加載
該方法就是當(dāng)網(wǎng)頁加載完成后，馬上去加載一些其他內(nèi)容，如淘寶會在加載完成功后會去加載一些圖片拼合后的圖片
2.有條件加載
根據(jù)用戶輸入的信息來推斷需要加載的內(nèi)容，比如說百度搜索。

有預(yù)期的加載
這個就比較高大上一些了，這個情況一般是在網(wǎng)頁重新設(shè)計的時候，由于用戶的訪問行為，本地有舊網(wǎng)頁的緩存，而新設(shè)計的網(wǎng)站沒有，設(shè)計者可以通過在舊網(wǎng)頁中預(yù)先加入一些新網(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ù)器資源，一是：影響用戶體驗，打開一個返回?zé)o用信息的頁面。二是網(wǎng)頁中需要加載一個外部腳本，結(jié)果返回一個404，不僅阻塞了其他腳本下載，下載回來的內(nèi)容(404)客戶端還會將其當(dāng)成Javascript去解析。
CSS
將樣式表置頂
由于網(wǎng)頁內(nèi)容從上往下的加載方式，我們盡可能的將CSS樣式放在網(wǎng)頁的head中會讓網(wǎng)頁顯得加載速度更快，對于內(nèi)容比較多的網(wǎng)頁非常重要，至少不會讓用戶一直等待一個白屏上，這樣的用戶體驗也是相當(dāng)好的。
假如我們把樣式表放在底部的話，就是出現(xiàn)一種情況，瀏覽器會拒絕渲染已經(jīng)下載的網(wǎng)頁，因為多數(shù)瀏覽器在實現(xiàn)時都努力避免重新繪制。所以這一樣也是一個重點。
避免CSS表達式
有一些基礎(chǔ)CSS3的小伙伴們一直很仰慕它強大的二開能力，喜歡用一些CSS表達式來動態(tài)的設(shè)置CSS屬性，在IE5~IE8中支持，其他瀏覽器中表達式會被忽略。
其它CSS表達式的問題在于它被重新計算的次數(shù)遠(yuǎn)比我們想象的要多，所以我們還是盡量避免使用它來防止使用不當(dāng)造成的性能開消過多。
用link標(biāo)簽代替@import
在網(wǎng)頁的設(shè)計中，請盡量使用link標(biāo)簽來引用CSS，避免使用@import來引用，原因很簡單，您可以理解為就是將CSS樣式放在網(wǎng)頁中的內(nèi)容底部就可以了。
圖片
優(yōu)化圖像
在網(wǎng)頁的制作中，我們會發(fā)現(xiàn)，banner這一類的圖片加載起來非常的慢，同時也影響網(wǎng)站的速度，少者幾百K，大者幾M。那么究竟這樣的圖片還有沒有優(yōu)化的空間呢！？

避免空的圖片src
我們在使用img標(biāo)簽的時候，盡量避免使用空的圖片src，因為空的圖片src仍然會使瀏覽器發(fā)送請求到服務(wù)器，這樣完全是浪費時間，而且浪費服務(wù)器的資源。尤其是你的網(wǎng)站每天被很多人訪問的時候，這種空請求造成的傷害不容忽略
優(yōu)化CSS Sprite
Spirite中水平排列圖片，垂直排列會增加文件大??；
Spirite中把顏色較近的組合在一起可以降低顏色數(shù)，理想狀況是低于256色以便適用PNG8格式；
不要在Spirite的圖像中間留有較大空隙。這雖然不大會增加文件大小,但對于用戶代理來說它需要更少的內(nèi)存來把圖片解壓為像素地圖。
不要在HTML中縮放圖片
避免使用大圖實現(xiàn)圖片大小縮放來適應(yīng)頁面，如果你需要小圖片，就直接使用小圖片吧。原因很簡單，針對不同的設(shè)備可以做到最好的效果，而不是加載就大的圖，來整體實現(xiàn)效果，如果是手機端用戶，這個開消還是挺大的，畢竟這是一個講流量的時代。
使用小且可緩存的favicon.ico
一般企業(yè)網(wǎng)站或站長都喜歡加一個圖標(biāo)文件favicon.ico，不管你服務(wù)器有還是沒有，瀏覽器都會去嘗試請求這個圖標(biāo)。所以我們要確保這個圖標(biāo)存在并且文件盡量小，最好小于1k 設(shè)置一個長的過期時間
總結(jié)：
最后，本文主要針對初級入門網(wǎng)頁設(shè)計人員，該文內(nèi)容僅涉及到HTML、CSS、Javascript、images等內(nèi)容，當(dāng)然還有一些其它的方法，我們在下一期的文章中指出。
當(dāng)然，上面提及的一些常歸的前端優(yōu)化小技巧你GET到了嗎？請不要在你的網(wǎng)頁中出現(xiàn)與此類似的錯誤，要不然真的很影響用戶體驗，畢竟，現(xiàn)在是WEB2.0的時代，如果用戶對你的網(wǎng)頁不滿意，那就是對開發(fā)者的否定，所以為了做出更好更優(yōu)秀的網(wǎng)頁，我們盡可能多的去關(guān)注這些小細(xì)節(jié)。

寫本文的目的，就是為了更好的讓初級的小伙伴們快速成長起來。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章名稱：HTML+CSS前端優(yōu)化技巧
標(biāo)題URL：http://muchs.cn/news0/310600.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、搜索引擎優(yōu)化、網(wǎng)站收錄、軟件開發(fā)、做網(wǎng)站、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)