PS：結(jié)合了精英的思想和自己的一些小小的總結(jié)~

影響用戶訪問的最大部分是前端的頁面。網(wǎng)站的劃分一般為二：前端和后臺。我們可以理解成后臺是用來實現(xiàn)網(wǎng)站的功能的，比如：實現(xiàn)用戶注冊，用戶能夠為文章發(fā)表評論等等。而前端呢？其實應(yīng)該是屬于功能的表現(xiàn)。

而我們建設(shè)網(wǎng)站的目的是什么呢？不就是為了讓目標人群來訪問嗎？所以我們可以理解成前端才是真正和用戶接觸的。

除了后臺需要在性能上做優(yōu)化外，其實前端的頁面更需要在性能優(yōu)化上下功夫，只有這樣才能給我們的用戶帶來更好的用戶體驗。不僅僅如此，如果前端優(yōu)化得好，他不僅可以為企業(yè)節(jié)約成本，他還能給用戶帶來更多的用戶，因為增強的用戶體驗。說了這么多，那么我們應(yīng)該如何對我們前端的頁面進行性能優(yōu)化呢？

前端的頁面主要包括xhtml,css,js。其實xhtml就是現(xiàn)實中所談到的內(nèi)容，頁面的內(nèi)容：文字，圖片，flash,視頻等。

而前端開發(fā)工作者可以控制的是什么呢？那就是xhtml，css，js的代碼及相應(yīng)的修飾（背景）圖片。下面我就根據(jù)我自己的經(jīng)驗來說說：

一、提倡前端開發(fā)工程師在書寫xhtml的時候做到結(jié)構(gòu)語義化。

結(jié)構(gòu)中主要包括了head和body兩個部分，但是我們經(jīng)常說的是結(jié)構(gòu)語義化主要是body中的標簽，但是我在這里還是簡單的說一下head，head中其實包括了一些對于我們seo很有用的一些東西，比如title,Description,Keywords,這些東西在蜘蛛抓取的時候都是有幫助的，當然，還有其他的一些，我在此就不一一說明了，比如設(shè)置緩存等一些其他的信息。

那么body中的話，包括的標簽就很多了，我覺得作為一個合格的前端開發(fā)人員你應(yīng)該去熟悉他們，比如div,span,h,ul,ol,dl,p等等這類的標簽的使用。應(yīng)該非常合理，還有就是注意h標簽的斷層，及h1標簽的使用，這些都是非常重要的。

同時在我們的結(jié)構(gòu)中不要出現(xiàn)style和onclick這樣的內(nèi)聯(lián)的樣式和事件。希望大家能夠注意結(jié)構(gòu)與表現(xiàn)、行為的分離。

（PS：標簽語義化的好處：1.有利于搜索引擎；2.結(jié)構(gòu)清晰的HTML在團隊合作中的作用，就不必說了吧；3.有利于盲人屏幕閱讀器。至于如何做到標簽語義化，就看個人的理解了，這方面我也覺得模糊，跟個人的習(xí)慣估計也有一定的關(guān)系，總之鄒惠斌老師是認為我的標簽不語義的。）

二、css，js文件數(shù)量及大小的優(yōu)化

那么關(guān)于css、js的優(yōu)化的話，一般情況下建議css和js采用外聯(lián)式。但是如果你的頁面內(nèi)容比較多，設(shè)計師把整個效果做得比較花的話，恐怕css就非常多了，那么這種情況下，你一定要把你的css規(guī)劃好，盡量的采用縮寫，這樣可以減少css文件的大小，那么對css做相應(yīng)的規(guī)劃也可以減少css的個數(shù)，減少http請求數(shù)，js同理。

（PS：減少重復(fù)性代碼，代碼重復(fù)利用，在這里顯得特別重要）

三、背景圖片數(shù)量及大小的優(yōu)化

當我們將設(shè)計師的設(shè)計稿還原成靜態(tài)頁面后，除非頁面所有的修飾全是色塊，內(nèi)容全是文字，沒有圖片，如果不是這樣的話，那么我們需要對圖片做優(yōu)化處理。當然內(nèi)容圖片我們是沒有辦法了，因為他是屬于內(nèi)容部分的，一般情況是由于編輯處理，當然，我在還是有一個小小的建議，如果我們的網(wǎng)站中需要有內(nèi)容圖片，希望編輯能夠?qū)⑺麄冏顑?yōu)化以后，在進行上傳，一會兒告訴我的方法，下面我在說說，作為前端開發(fā)應(yīng)該如何處理我們的修飾（背景）圖片。

由于我們的背景圖片數(shù)量比較多，這樣的話，會給服務(wù)器帶來影響，增加了http請求數(shù)，我們是否有一種好的解決辦法呢？這個答案是肯定的，如果你是一個合格的前端開發(fā)，你應(yīng)該清楚，在我們的css定義背景的時候，可以通過坐標來實現(xiàn)對背景進行定位的，既然如此，那么我們可以將這些背景合并起來，這樣即可減少http請求數(shù)，同時，我們在背景整合的時候，也需要考慮圖片質(zhì)量，同時也需要考慮圖片的大小，我在以前有寫過相應(yīng)的博文。

（PS：這里建議使用PNG8格式的圖片結(jié)合css sprite，同樣的圖片，PNG8格式會相對來比GIF小）

四、內(nèi)容圖片的大小的優(yōu)化

其實剛才已經(jīng)說了內(nèi)容圖片的問題，那么我在這里呢，告訴大家一個比較簡單的方法，就是使用雅虎提供的一個工具。他就是smushit：http://www.smushit.com/

不過他這個工具我覺得對于我們需要發(fā)布的內(nèi)容圖片還是比較麻煩，但是他可以進行優(yōu)化，優(yōu)化圖片的目的，最開始已經(jīng)說了，圖片越小，我們的用戶下載速度越快，當然對企業(yè)的服務(wù)器的帶寬也可以起到節(jié)省的作用。

上面是我關(guān)于前端頁面性能的一些簡單的看法，當然web標準中提到的結(jié)構(gòu)，表現(xiàn)，行為，我們工作說的xhtml,css,js其實他們還有很多東西，需要我們?nèi)W(xué)習(xí)，比如結(jié)構(gòu)語義化他就是一個深入研究的課題，性能優(yōu)化也是如此，不過只有我們不斷的去挖崛，我們才可能進步。下面對我前端開發(fā)的出品有一個簡單的建議：

1、我們做還原的頁面能夠通過http://validator.w3.org的驗證，當然css希望也能通過http://jigsaw.w3.org/css-validator/validator難證，不過有時候由于需要兼容多瀏覽器，會受到hack的影響，css不做強制要求。

2、作前端的我覺得應(yīng)該知道yslow。如果不知道可以看看我以前寫的文章，你覺得你的靜態(tài)頁面應(yīng)該能夠通過yslow2.0的classic（V1）級別的檢測，檢測的結(jié)果我覺得應(yīng)該得到A。

3、你的背景圖片保證不超過3個以上，你的css文件不超過2個，js文件不超過3個。而且良好的遵守web標準的一些規(guī)定，css放到head中，js文件放到之前或者之后。

4、當然就是希望你能夠?qū)δ愕捻撁孢M行裸體檢查。其實就是來檢驗?zāi)愕慕Y(jié)構(gòu)語義化是否有效果。

裸體檢查：就是將你的css和js都去掉，查看你的html，看這些內(nèi)容你是否能夠看懂。

5、檢測你的h標簽是否斷層。

（PS：就是按照h1,h2,h3,h4….，不要中間漏掉h2）

6、建議body中增加text-align:center。

7、當然還有很多，比如什么id，class的命名呀，這些東西，我覺得應(yīng)該是你的團隊中應(yīng)該做的事情。

（PS：這里得去好好看看clsaa選擇器的權(quán)重和優(yōu)先級）

8、作為大型網(wǎng)站來說，首頁使用內(nèi)聯(lián)式樣式表，這樣可以減少http請求數(shù)的同時，也可以防止裸奔。當然其他頁面需要使用外聯(lián)樣式表，這樣才可以方便維護。因為作為大型網(wǎng)站來說，他的首頁訪問量是非常的大的，所以。。

把樣式表置于頂部
把腳本置于頁面底部
避免使用 CSS 表達式（Expression）
使用外部 JavaScript 和 CSS
削減 JavaScript 和 CSS
用 代替 @import
避免使用濾鏡
剔除重復(fù)腳本
減少DOM訪問
開發(fā)智能事件處理程序

最好的方案就是按照 HTML 規(guī)范在文檔 內(nèi)加載你的樣式表。

對于擁有較大瀏覽量的首頁來說，有一種技術(shù)可以平衡內(nèi)置代碼帶來的 HTTP 請求減少與通過使用外部文件進行緩存帶來的好處。其中一個就是在首頁中內(nèi)置 JavaScript 和 CSS ，但是在頁面下載完成后動態(tài)下載外部文件，在子頁面中使用到這些文件時，它們已經(jīng)緩存到瀏覽器了。

Coockie:

減小Cookie體積
對于頁面內(nèi)容使用無coockie域名

圖片：

優(yōu)化圖像
優(yōu)化CSS Spirite
不要在HTML中縮放圖像
favicon.ico要小而且可緩存

移動應(yīng)用：

保持單個內(nèi)容小于25K
打包組件成復(fù)合文本

此文中談到了編輯，其實通過我走過的公司來看，很多公司其實不止是編輯，甚至連開發(fā)，他們對xhtml的規(guī)劃都還不夠非常了解，所以經(jīng)常會出現(xiàn)已經(jīng)上線的頁面出現(xiàn)一些這樣那樣的問題，比如注釋，或者標簽不閉合等等，所以我建議各個公司可以開一些關(guān)于交流的會，這樣的話，各個職位間可以交互交流，其實也可以說是培訓(xùn)吧，只有這樣，才能夠打造出一個好的產(chǎn)品。

好了，我就談這些，這些東西也是我的一些簡單的看法，當然，你可能不贊成我說的，或者你有更好的建議，你可以單獨聯(lián)系我，也可以在這帖子后面給我評論，或者叫留言。

總結(jié)

以上是生活随笔為你收集整理的前端行性能优化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。