• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見(jiàn)問(wèn)題 >> 網(wǎng)站建設(shè) >> 網(wǎng)站策劃 >> web前端頁(yè)面性能優(yōu)化總結(jié)

web前端頁(yè)面性能優(yōu)化總結(jié)

• 作者：創(chuàng)新互聯(lián) 文章來(lái)源：網(wǎng)站建設(shè)部 點(diǎn)擊數(shù)： 更新時(shí)間：2009-07-03
• 　　影響用戶(hù)訪問(wèn)的最大部分是前端的頁(yè)面。網(wǎng)站的劃分一般為二：前端和后臺(tái)。我們可以理解成后臺(tái)是用來(lái)實(shí)現(xiàn)網(wǎng)站的功能的，比如：實(shí)現(xiàn)用戶(hù)注冊(cè)，用戶(hù)能夠?yàn)槲恼掳l(fā)表評(píng)論等等。而前端呢？其實(shí)應(yīng)該是屬于功能的表現(xiàn)。
  　　而我們建設(shè)網(wǎng)站的目的是什么呢？不就是為了讓目標(biāo)人群來(lái)訪問(wèn)嗎？所以我們可以理解成前端才是真正和用戶(hù)接觸的。
  　　除了后臺(tái)需要在性能上做優(yōu)化外，其實(shí)前端的頁(yè)面更需要在性能優(yōu)化上下功夫，只有這樣才能給我們的用戶(hù)帶來(lái)更好的用戶(hù)體驗(yàn)。不僅僅如此，如果前端優(yōu)化得好，他不僅可以為企業(yè)節(jié)約成本，他還能給用戶(hù)帶來(lái)更多的用戶(hù)，因?yàn)樵鰪?qiáng)的用戶(hù)體驗(yàn)。說(shuō)了這么多，那么我們應(yīng)該如何對(duì)我們前端的頁(yè)面進(jìn)行性能優(yōu)化呢？
  　　前端的頁(yè)面主要包括xhtml,css,js。其實(shí)xhtml就是現(xiàn)實(shí)中所談到的內(nèi)容，頁(yè)面的內(nèi)容：文字，圖片，flash,視頻等。
  　　而前端開(kāi)發(fā)工作者可以控制的是什么呢？那就是xhtml，css，js的代碼及相應(yīng)的修飾（背景）圖片。下面我就根據(jù)我自己的經(jīng)驗(yàn)來(lái)說(shuō)說(shuō)：
  
  一、提倡前端開(kāi)發(fā)工程師在書(shū)寫(xiě)xhtml的時(shí)候做到結(jié)構(gòu)語(yǔ)義化。
  　　結(jié)構(gòu)中主要包括了head和body兩個(gè)部分，但是我們經(jīng)常說(shuō)的是結(jié)構(gòu)語(yǔ)義化主要是body中的標(biāo)簽，但是我在這里還是簡(jiǎn)單的說(shuō)一下head，head中其實(shí)包括了一些對(duì)于我們seo很有用的一些東西，比如title,Description,Keywords,這些東西在蜘蛛抓取的時(shí)候都是有幫助的，當(dāng)然，還有其他的一些，我在此就不一一說(shuō)明了，比如設(shè)置緩存等一些其他的信息。
  
  　　那么body中的話(huà)，包括的標(biāo)簽就很多了，我覺(jué)得作為一個(gè)合格的前端開(kāi)發(fā)人員你應(yīng)該去熟悉他們，比如div,span,h,ul,ol,dl,p等等這類(lèi)的標(biāo)簽的使用。應(yīng)該非常合理，還有就是注意h標(biāo)簽的斷層，及h1標(biāo)簽的使用，這些都是非常重要的。
  　　同時(shí)在我們的結(jié)構(gòu)中不要出現(xiàn)style和onclick這樣的內(nèi)聯(lián)的樣式和事件。希望大家能夠注意結(jié)構(gòu)與表現(xiàn)、行為的分離。
  
  二、css，js文件數(shù)量及大小的優(yōu)化
  　　那么關(guān)于css、js的優(yōu)化的話(huà)，一般情況下建議css和js采用外聯(lián)式。但是如果你的頁(yè)面內(nèi)容比較多，設(shè)計(jì)師把整個(gè)效果做得比較花的話(huà)，恐怕css就非常多了，那么這種情況下，你一定要把你的css規(guī)劃好，盡量的采用縮寫(xiě)，這樣可以減少css文件的大小，那么對(duì)css做相應(yīng)的規(guī)劃也可以減少css的個(gè)數(shù)，減少http請(qǐng)求數(shù)，js同理。
  
  三、背景圖片數(shù)量及大小的優(yōu)化
  　　當(dāng)我們將設(shè)計(jì)師的設(shè)計(jì)稿還原成靜態(tài)頁(yè)面后，除非頁(yè)面所有的修飾全是色塊，內(nèi)容全是文字，沒(méi)有圖片，如果不是這樣的話(huà)，那么我們需要對(duì)圖片做優(yōu)化處理。當(dāng)然內(nèi)容圖片我們是沒(méi)有辦法了，因?yàn)樗�是屬于�?nèi)容部分的，一般情況是由于編輯處理，當(dāng)然，我在還是有一個(gè)小小的建議，如果我們的網(wǎng)站中需要有內(nèi)容圖片，希望編輯能夠?qū)⑺麄冏顑?yōu)化以后，在進(jìn)行上傳，一會(huì)兒告訴我的方法，下面我在說(shuō)說(shuō)，作為前端開(kāi)發(fā)應(yīng)該如何處理我們的修飾（背景）圖片。
  　　由于我們的背景圖片數(shù)量比較多，這樣的話(huà)，會(huì)給服務(wù)器帶來(lái)影響，增加了http請(qǐng)求數(shù)，我們是否有一種好的解決辦法呢？這個(gè)答案是肯定的，如果你是一個(gè)合格的前端開(kāi)發(fā)，你應(yīng)該清楚，在我們的css定義背景的時(shí)候，可以通過(guò)坐標(biāo)來(lái)實(shí)現(xiàn)對(duì)背景進(jìn)行定位的，既然如此，那么我們可以將這些背景合并起來(lái)，這樣即可減少http請(qǐng)求數(shù)，同時(shí)，我們?cè)诒尘罢�合的時(shí)候，也需要考慮圖片質(zhì)量，同時(shí)也需要考慮圖片的大小，我在以前有寫(xiě)過(guò)相應(yīng)的博文。
  
  四、內(nèi)容圖片的大小的優(yōu)化
  　　其實(shí)剛才已經(jīng)說(shuō)了內(nèi)容圖片的問(wèn)題，那么我在這里呢，告訴大家一個(gè)比較簡(jiǎn)單的方法，就是使用雅虎提供的一個(gè)工具。他就是smushit：http://www.smushit.com/
  　　不過(guò)他這個(gè)工具我覺(jué)得對(duì)于我們需要發(fā)布的內(nèi)容圖片還是比較麻煩，但是他可以進(jìn)行優(yōu)化，優(yōu)化圖片的目的，最開(kāi)始已經(jīng)說(shuō)了，圖片越小，我們的用戶(hù)下載速度越快，當(dāng)然對(duì)企業(yè)的服務(wù)器的帶寬也可以起到節(jié)省的作用。
  　　上面是我關(guān)于前端頁(yè)面性能的一些簡(jiǎn)單的看法，當(dāng)然web標(biāo)準(zhǔn)中提到的結(jié)構(gòu)，表現(xiàn)，行為，我們工作說(shuō)的xhtml,css,js其實(shí)他們還有很多東西，需要我們?nèi)�學(xué)習(xí)，比如結(jié)構(gòu)語(yǔ)義化他就是一個(gè)深入研究的課題，性能優(yōu)化也是如此，不過(guò)只有我們不斷的去挖崛，我們才可能進(jìn)步。下面對(duì)我前端開(kāi)發(fā)的出品有一個(gè)簡(jiǎn)單的建議：
  　　1、我們做還原的頁(yè)面能夠通過(guò)http://validator.w3.org的驗(yàn)證，當(dāng)然css希望也能通過(guò)http://jigsaw.w3.org/css-validator/validator驗(yàn)證，不過(guò)有時(shí)候由于需要兼容多瀏覽器，會(huì)受到hack的影響，css不做強(qiáng)制要求。
  　　2、作前端的我覺(jué)得應(yīng)該知道yslow。如果不知道可以看看我以前寫(xiě)的文章，你覺(jué)得你的靜態(tài)頁(yè)面應(yīng)該能夠通過(guò)yslow2.0的classic（V1）級(jí)別的檢測(cè)，檢測(cè)的結(jié)果我覺(jué)得應(yīng)該得到A。
  　　3、你的背景圖片保證不超過(guò)3個(gè)以上，你的css文件不超過(guò)2個(gè)，js文件不超過(guò)3個(gè)。而且良好的遵守web標(biāo)準(zhǔn)的一些規(guī)定，css放到head中，js文件放到《/body》之前或者之后。
  　　4、當(dāng)然就是希望你能夠?qū)δ愕捻?yè)面進(jìn)行裸體檢查。其實(shí)就是來(lái)檢驗(yàn)?zāi)愕慕Y(jié)構(gòu)語(yǔ)義化是否有效果。
  　　裸體檢查：就是將你的css和js都去掉，查看你的html，看這些內(nèi)容你是否能夠看懂。
  　　5、檢測(cè)你的h標(biāo)簽是否斷層。
  　　6、建議body中增加text-align:center。
  　　7、當(dāng)然還有很多，比如什么id，class的命名呀，這些東西，我覺(jué)得應(yīng)該是你的團(tuán)隊(duì)中應(yīng)該做的事情。
  　　8、作為大型網(wǎng)站來(lái)說(shuō)，首頁(yè)使用內(nèi)聯(lián)式樣式表，這樣可以減少http請(qǐng)求數(shù)的同時(shí)，也可以防止裸奔。當(dāng)然其他頁(yè)面需要使用外聯(lián)樣式表，這樣才可以方便維護(hù)。因?yàn)樽鳛榇笮途W(wǎng)站來(lái)說(shuō)，他的首頁(yè)訪問(wèn)量是非常的大的，所以。。
  　　把樣式表置于頂部
  　　把腳本置于頁(yè)面底部
  　　避免使用 CSS 表達(dá)式（Expression）
  　　使用外部 JavaScript 和 CSS
  　　削減 JavaScript 和 CSS
  　　用 《link》 代替 @import
  　　避免使用濾鏡
  　　剔除重復(fù)腳本
  　　減少DOM訪問(wèn)
  　　開(kāi)發(fā)智能事件處理程序
  　　最好的方案就是按照 HTML 規(guī)范在文檔內(nèi)加載你的樣式表。
  　　對(duì)于擁有較大瀏覽量的首頁(yè)來(lái)說(shuō)，有一種技術(shù)可以平衡內(nèi)置代碼帶來(lái)的 HTTP 請(qǐng)求減少與通過(guò)使用外部文件進(jìn)行緩存帶來(lái)的好處。其中一個(gè)就是在首頁(yè)中內(nèi)置 JavaScript 和 CSS ，但是在頁(yè)面下載完成后動(dòng)態(tài)下載外部文件，在子頁(yè)面中使用到這些文件時(shí)，它們已經(jīng)緩存到瀏覽器了。
  Coockie:
  減小Cookie體積
  對(duì)于頁(yè)面內(nèi)容使用無(wú)coockie域名
  
  圖片：
  　　優(yōu)化圖像
  　　優(yōu)化CSS Spirite
  　　不要在HTML中縮放圖像
  　　favicon.ico要小而且可緩存
  
  移動(dòng)應(yīng)用：
  　　保持單個(gè)內(nèi)容小于25K
  　　打包組件成復(fù)合文本
  　　此文中談到了編輯，其實(shí)通過(guò)我走過(guò)的公司來(lái)看，很多公司其實(shí)不止是編輯，甚至連開(kāi)發(fā)，他們對(duì)xhtml的規(guī)劃都還不夠非常了解，所以經(jīng)常會(huì)出現(xiàn)已經(jīng)上線的頁(yè)面出現(xiàn)一些這樣那樣的問(wèn)題，比如注釋?zhuān)�或者�?biāo)簽不閉合等等，所以我建議各個(gè)公司可以開(kāi)一些關(guān)于交流的會(huì)，這樣的話(huà)，各個(gè)職位間可以交互交流，其實(shí)也可以說(shuō)是培訓(xùn)吧，只有這樣，才能夠打造出一個(gè)好的產(chǎn)品。
  　　好了，我就談這些，這些東西也是我的一些簡(jiǎn)單的看法，當(dāng)然，你可能不贊成我說(shuō)的，或者你有更好的建議，你可以單獨(dú)聯(lián)系我們，在些感謝大家對(duì)創(chuàng)新互聯(lián)的支持！
• 網(wǎng)站策劃的流程 -創(chuàng)新互聯(lián) :上一篇
  網(wǎng)站設(shè)計(jì)策劃性能優(yōu)化提速 :下一篇