影響用戶訪問的最大部分是前端的頁面。網站的劃分一般爲二：前端和後臺。我們可以理解成後臺是用來實現網站的功能的，比如：實現用戶註冊，用戶能夠爲文章發表評論等等。而前端呢？其實應該是屬於功能的表現。
而我們建設網站的目的是什麼呢？不就是爲了讓目標人羣來訪問嗎？所以我們可以理解成前端纔是真正和用戶接觸的。
除了後臺需要在性能上做優化外，其實前端的頁面更需要在性能優化上下功夫，只有這樣才能給我們的用戶帶來更好的用戶體驗。不僅僅如此，如果前端優化得好，他不僅可以爲企業節約成本，他還能給用戶帶來更多的用戶，因爲增強的用戶體驗。說了這麼多，那麼我們應該如何對我們前端的頁面進行性能優化呢？
前端的頁面主要包括xhtml,css,js。其實xhtml就是現實中所談到的內容，頁面的內容：文字，圖片，flash,視頻等。
而前端開發工作者可以控制的是什麼呢？那就是xhtml，css，js的代碼及相應的修飾（背景）圖片。下面我就根據我自己的經驗來說說：
一、提倡前端開發工程師在書寫xhtml的時候做到結構語義化。
結構中主要包括了head和body兩個部分，但是我們經常說的是結構語義化主要是body中的標籤，但是我在這裏還是簡單的說一下head，head中其實包括了一些對於我們seo很有用的一些東西，比如title,Description,Keywords,這些東西在蜘蛛抓取的時候都是有幫助的，當然，還有其他的一些，我在此就不一一說明了，比如設置緩存等一些其他的信息。
那麼body中的話，包括的標籤就很多了，我覺得作爲一個合格的前端開發人員你應該去熟悉他們，比如div,span,h,ul,ol,dl,p等等這類的標籤的使用。應該非常合理，還有就是注意h標籤的斷層，及h1標籤的使用，這些都是非常重要的。
同時在我們的結構中不要出現style和onclick這樣的內聯的樣式和事件。希望大家能夠注意結構與表現、行爲的分離。
（PS：標籤語義化的好處：1.有利於搜索引擎；2.結構清晰的HTML在團隊合作中的作用，就不必說了吧；3.有利於盲人屏幕閱讀器。至於如何做到標籤語義化，就看個人的理解了，這方面我也覺得模糊，跟個人的習慣估計也有一定的關係，總之鄒惠斌老師是認爲我的標籤不語義的。）
二、css，js文件數量及大小的優化
那麼關於css、js的優化的話，一般情況下建議css和js採用外聯式。但是如果你的頁面內容比較多，設計師把整個效果做得比較花的話，恐怕css就非常多了，那麼這種情況下，你一定要把你的css規劃好，儘量的採用縮寫，這樣可以減少css文件的大小，那麼對css做相應的規劃也可以減少css的個數，減少http請求數，js同理。
（PS：減少重複性代碼，代碼重複利用，在這裏顯得特別重要）
三、背景圖片數量及大小的優化
當我們將設計師的設計稿還原成靜態頁面後，除非頁面所有的修飾全是色塊，內容全是文字，沒有圖片，如果不是這樣的話，那麼我們需要對圖片做優化處理。當然內容圖片我們是沒有辦法了，因爲他是屬於內容部分的，一般情況是由於編輯處理，當然，我在還是有一個小小的建議，如果我們的網站中需要有內容圖片，希望編輯能夠將他們最優化以後，在進行上傳，一會兒告訴我的方法，下面我在說說，作爲前端開發應該如何處理我們的修飾（背景）圖片。
由於我們的背景圖片數量比較多，這樣的話，會給服務器帶來影響，增加了http請求數，我們是否有一種好的解決辦法呢？這個答案是肯定的，如果你是一個合格的前端開發，你應該清楚，在我們的css定義背景的時候，可以通過座標來實現對背景進行定位的，既然如此，那麼我們可以將這些背景合併起來，這樣即可減少http請求數，同時，我們在背景整合的時候，也需要考慮圖片質量，同時也需要考慮圖片的大小，我在以前有寫過相應的博文。
（PS：這裏建議使用PNG8格式的圖片結合css sprite，同樣的圖片，PNG8格式會相對來比GIF小）
四、內容圖片的大小的優化
其實剛纔已經說了內容圖片的問題，那麼我在這裏呢，告訴大家一個比較簡單的方法，就是使用雅虎提供的一個工具。他就是smushit：http://www.smushit.com/
不過他這個工具我覺得對於我們需要發佈的內容圖片還是比較麻煩，但是他可以進行優化，優化圖片的目的，最開始已經說了，圖片越小，我們的用戶下載速度越快，當然對企業的服務器的帶寬也可以起到節省的作用。
上面是我關於前端頁面性能的一些簡單的看法，當然web標準中提到的結構，表現，行爲，我們工作說的xhtml,css,js其實他們還有很多東西，需要我們去學習，比如結構語義化他就是一個深入研究的課題，性能優化也是如此，不過只有我們不斷的去挖崛，我們纔可能進步。下面對我前端開發的出品有一個簡單的建議：
1、我們做還原的頁面能夠通過http://validator.w3.org的驗證，當然css希望也能通過http://jigsaw.w3.org/css-validator/validator難證，不過有時候由於需要兼容多瀏覽器，會受到hack的影響，css不做強制要求。
2、作前端的我覺得應該知道yslow。如果不知道可以看看我以前寫的文章，你覺得你的靜態頁面應該能夠通過yslow2.0的classic（V1）級別的檢測，檢測的結果我覺得應該得到A。
3、你的背景圖片保證不超過3個以上，你的css文件不超過2個，js文件不超過3個。而且良好的遵守web標準的一些規定，css放到head中，js文件放到</body>之前或者之後。
4、當然就是希望你能夠對你的頁面進行裸體檢查。其實就是來檢驗你的結構語義化是否有效果。
裸體檢查：就是將你的css和js都去掉，查看你的html，看這些內容你是否能夠看懂。
5、檢測你的h標籤是否斷層。
（PS：就是按照h1,h2,h3,h4....，不要中間漏掉h2）
6、建議body中增加text-align:center。
7、當然還有很多，比如什麼id，class的命名呀，這些東西，我覺得應該是你的團隊中應該做的事情。
（PS：這裏得去好好看看clsaa選擇器的權重和優先級）
8、作爲大型網站來說，首頁使用內聯式樣式表，這樣可以減少http請求數的同時，也可以防止裸奔。當然其他頁面需要使用外聯樣式表，這樣纔可以方便維護。因爲作爲大型網站來說，他的首頁訪問量是非常的大的，所以。。
把樣式表置於頂部
把腳本置於頁面底部
避免使用 CSS 表達式（Expression）
使用外部 JavaScript 和 CSS
削減 JavaScript 和 CSS
用 <link> 代替 @import
避免使用濾鏡
剔除重複腳本
減少DOM訪問
開發智能事件處理程序
最好的方案就是按照 HTML 規範在文檔 <head /> 內加載你的樣式表。
對於擁有較大瀏覽量的首頁來說，有一種技術可以平衡內置代碼帶來的 HTTP 請求減少與通過使用外部文件進行緩存帶來的好處。其中一個就是在首頁中內置 JavaScript 和 CSS ，但是在頁面下載完成後動態下載外部文件，在子頁面中使用到這些文件時，它們已經緩存到瀏覽器了。
Coockie:
減小Cookie體積
對於頁面內容使用無coockie域名
圖片：
優化圖像
優化CSS Spirite
不要在HTML中縮放圖像
favicon.ico要小而且可緩存
移動應用：
保持單個內容小於25K
打包組件成複合文本
