引言：

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

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

減少http請(qǐng)求次數(shù)

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

避免頁(yè)面跳轉(zhuǎn)
避免頁(yè)面跳轉(zhuǎn)是什么呢？就是當(dāng)客戶端收到服務(wù)器的跳轉(zhuǎn)回復(fù)時(shí)，客戶端再次根據(jù)服務(wù)器回復(fù)中的location指定的地址再次發(fā)送請(qǐng)求，也是就說(shuō)，SEO上常用的301重定向
比如說(shuō)：
我現(xiàn)在要讓訪問(wèn)源碼時(shí)代的同學(xué)，進(jìn)到源碼論壇，這就就是服務(wù)器端301重定向的實(shí)現(xiàn)方法
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www.itsource.cn$ [NC]//這是客戶端請(qǐng)求的地址
RewriteRule ^(.*)$ http://bbs.itsource.cn/$1 [R=301,L]//這是客戶端實(shí)際看到的網(wǎng)頁(yè)
延遲加載
我們這里講的延遲加載需要我們先知道網(wǎng)頁(yè)最初加載最小的內(nèi)容是什么，剩下的內(nèi)容就可以使用延遲加載的實(shí)現(xiàn)。
最典型的是Javascript可以延遲加載內(nèi)容，這個(gè)做法是開(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候先確保網(wǎng)頁(yè)在沒(méi)有javascript的時(shí)候也可以很好的顯示正常的頁(yè)面效果，然后通過(guò)延遲加載腳本來(lái)完成一些高級(jí)的功能效果的做法。
提前加載
這種方法，恰好與上面的方法相反，也就是說(shuō)先提前加載一些網(wǎng)頁(yè)中的資源，它又分三類：
1.無(wú)條件提前加載
該方法就是當(dāng)網(wǎng)頁(yè)加載完成后，馬上去加載一些其他內(nèi)容，如淘寶會(huì)在加載完成功后會(huì)去加載一些圖片拼合后的圖片
2.有條件加載
根據(jù)用戶輸入的信息來(lái)推斷需要加載的內(nèi)容，比如說(shuō)百度搜索。

有預(yù)期的加載
這個(gè)就比較高大上一些了，這個(gè)情況一般是在網(wǎng)頁(yè)重新設(shè)計(jì)的時(shí)候，由于用戶的訪問(wèn)行為，本地有舊網(wǎng)頁(yè)的緩存，而新設(shè)計(jì)的網(wǎng)站沒(méi)有，設(shè)計(jì)者可以通過(guò)在舊網(wǎng)頁(yè)中預(yù)先加入一些新網(wǎng)站中可能會(huì)用到內(nèi)容，這樣的話，新網(wǎng)頁(yè)就會(huì)先下載一些資源到本地。
減少DOM元素?cái)?shù)量
如果網(wǎng)頁(yè)中的元素過(guò)多也對(duì)網(wǎng)頁(yè)的性能有影響，同時(shí)也會(huì)加重網(wǎng)頁(yè)加載和腳本的執(zhí)行，大家可以想一下，平時(shí)在使用JS的時(shí)候，我們要實(shí)現(xiàn)一些效果，是不是得先找到相關(guān)DOM元素，然后再執(zhí)行相關(guān)操作。 如果我們網(wǎng)頁(yè)中的元素過(guò)多，是不是就會(huì)有一個(gè)非常明顯的時(shí)差呢！所以減少DOM元素?cái)?shù)量，仍然影響網(wǎng)頁(yè)性能。
根據(jù)域名劃分內(nèi)容
很多時(shí)候，我們?cè)诓榭雌渌笮偷木W(wǎng)站的時(shí)候，圖片的地址和網(wǎng)站的主域名還不一樣，會(huì)采用多個(gè)域名來(lái)存放相關(guān)資源的，那為什么要這樣使用呢？其實(shí)，瀏覽器一般對(duì)同一個(gè)域名的下載連接數(shù)有所限制，根據(jù)域名劃分下載內(nèi)容，可以間接的增大瀏覽器并行下載連接。大大提高了網(wǎng)站整體的下載資源能力。從而達(dá)到優(yōu)化性能的作用。
減少iframe數(shù)量
之前，我們講過(guò)怎么使用iframe，但是在實(shí)際的項(xiàng)目中，我們?cè)谑褂玫臅r(shí)候請(qǐng)先注意它的優(yōu)缺點(diǎn)。
優(yōu)點(diǎn)：
可以用來(lái)加載速度較慢的內(nèi)容，腳本可以并行下載
缺點(diǎn)：
使用iframe內(nèi)容為空時(shí)也會(huì)消耗加載時(shí)間并會(huì)阻止頁(yè)面加載
避免404
404就是常見(jiàn)的沒(méi)有找到服務(wù)器資源，一是：影響用戶體驗(yàn)，打開(kāi)一個(gè)返回?zé)o用信息的頁(yè)面。二是網(wǎng)頁(yè)中需要加載一個(gè)外部腳本，結(jié)果返回一個(gè)404，不僅阻塞了其他腳本下載，下載回來(lái)的內(nèi)容(404)客戶端還會(huì)將其當(dāng)成Javascript去解析。
CSS
將樣式表置頂
由于網(wǎng)頁(yè)內(nèi)容從上往下的加載方式，我們盡可能的將CSS樣式放在網(wǎng)頁(yè)的head中會(huì)讓網(wǎng)頁(yè)顯得加載速度更快，對(duì)于內(nèi)容比較多的網(wǎng)頁(yè)非常重要，至少不會(huì)讓用戶一直等待一個(gè)白屏上，這樣的用戶體驗(yàn)也是相當(dāng)好的。
假如我們把樣式表放在底部的話，就是出現(xiàn)一種情況，瀏覽器會(huì)拒絕渲染已經(jīng)下載的網(wǎng)頁(yè)，因?yàn)槎鄶?shù)瀏覽器在實(shí)現(xiàn)時(shí)都努力避免重新繪制。所以這一樣也是一個(gè)重點(diǎn)。
避免CSS表達(dá)式
有一些基礎(chǔ)CSS3的小伙伴們一直很仰慕它強(qiáng)大的二開(kāi)能力，喜歡用一些CSS表達(dá)式來(lái)動(dòng)態(tài)的設(shè)置CSS屬性，在IE5~IE8中支持，其他瀏覽器中表達(dá)式會(huì)被忽略。
其它CSS表達(dá)式的問(wèn)題在于它被重新計(jì)算的次數(shù)遠(yuǎn)比我們想象的要多，所以我們還是盡量避免使用它來(lái)防止使用不當(dāng)造成的性能開(kāi)消過(guò)多。
用link標(biāo)簽代替@import
在網(wǎng)頁(yè)的設(shè)計(jì)中，請(qǐng)盡量使用link標(biāo)簽來(lái)引用CSS，避免使用@import來(lái)引用，原因很簡(jiǎn)單，您可以理解為就是將CSS樣式放在網(wǎng)頁(yè)中的內(nèi)容底部就可以了。
圖片
優(yōu)化圖像
在網(wǎng)頁(yè)的制作中，我們會(huì)發(fā)現(xiàn)，banner這一類的圖片加載起來(lái)非常的慢，同時(shí)也影響網(wǎng)站的速度，少者幾百K，大者幾M。那么究竟這樣的圖片還有沒(méi)有優(yōu)化的空間呢??？

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

寫(xiě)本文的目的，就是為了更好的讓初級(jí)的小伙伴們快速成長(zhǎng)起來(lái)。

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

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

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

廣告

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