在網站搭建和不斷維護的過程中需要與程序猿同學互相配合開發，那么到底怎么樣的前段代碼才算規范，這里給大家一些例子。

1、盡量減少HTTP請求個數——須權衡

合并圖片（如csssprites，內置圖片使用數據）、合并CSS、JS，這一點很重要，但是要考慮合并后的文件體積。

2、根據域名劃分頁面內容減少DNS查找次數

我們需要權衡減少DNS查找次數和保持較高程度并行下載兩者之間的關系。

理想的方法就是將所有的內容資源都放在同一個域(domain)下面，這樣訪問整個網站就只需要進行一次dns查找，這樣可以提其他高性能。但理想總歸是理想，上面的理想做法會帶來另外一個問題，就是由于這些資源都在同一個域，而http/1.1中推薦客戶端針對每個域只有一定數量的并行度（它的建議是2），那么就會出現下載資源時的排隊現象，這樣就會降低性能。很顯然，是大限度地實現平行下載。

所以，折衷的做法是：建議在一個網站里面使用至少2個域，但不多于4個域來提供資源。我認為這條建議是很合理的，也值得我們在項目實踐中去應用。

3、減少DOM元素個數

結構合理、語義化、減少代碼，使用更適合或者在語意是更貼切的標簽，要考慮大量DOM元素中循環的性能開銷

4、使用CDN（內容分發網絡）

這里可以關注CDN的三類實現：鏡像、高速緩存、專線，以及智能路由器和負載均衡；

5、避免空的src和href和其他無意義的鏈接

留意具有這兩個屬性的標簽如alink，script，img，iframe等；代碼盡量不要出現空鏈接和無意義的鏈接

6、為文件頭指定Expires或Cache-Control，合理使用緩存。

區分靜態內容和動態內容，避免以后頁面訪問中不必要的HTTP請求。

7、配置ETags

Entitytags（ETags）（實體標簽）是web服務器和瀏覽器用于判斷瀏覽器緩存中的內容和服務器中的原始內容是否匹配的一種機制（“實體”就是所說的“內容”，包括圖片、腳本、樣式表等），是比last-modifieddate更更加靈活的機制，單位時間內文件被修過多次，Etag可以綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能到秒的問題。服務器集群使用，可取后兩個參數。使用ETags減少Web應用帶寬和負載。zhanzhang.baidu.com/college/articleinfo?id=487

8、使用gzip壓縮內容

Gzip壓縮所有可能的文件類型以來減少文件體積

9、把CSS放到頂部

實現頁面有秩序地加載，這對于擁有較多內容的頁面和網速較慢的用戶來說更為重要，同時，HTML規范清楚指出樣式表要放包含在頁面的區域內；

10、把JS放到底部

HTTP/1.1規范建議，瀏覽器每個主機名的并行下載內容不超過兩個，而問題在于腳本阻止了頁面的平行下載，即便是主機名不相同

11、避免使用CSS表達式

CSS表達式是動態設置CSS屬性的一種方法。這個過程非常耗時，因為每次網頁展示，滾動或者調整大小，抑或者用戶移動鼠標時，表達式都會被解析。即使網頁已經加載完畢，代碼被重新解析的需求也會大大降低頁面的速度，這樣就會直接影響網站的用戶體驗。移除所有的表達式會整體上提高網頁的性能。

12、避免錯誤跳轉

為了確保“后退”按鈕可以正確地使用，使用標準的3.XXHTTP狀態代碼；同域中注意避免反斜杠“/”的跳轉；跨域使用Alias或者mod_rewirte建立CNAME（保存一個域名和另外一個域名之間關系的DNS記錄）

13、使AJAX可緩存使用GET來完成AJAX請求

利用時間戳，更精巧的實現響應可緩存與服務器數據同步更新。當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發送文件頭，然后才發送數據。在url小于2K時使用GET獲取數據時更加有意義。

14、盡早刷新輸出緩沖

尤其對于css，js文件的并行下載更有意義

SEO前段規范

15、延遲加載和預加載

確定頁面運行正常后，再加載腳本來實現如拖放和動畫，或者是隱藏部分的內容以及折疊內容等。延時加載時核心內容需要代碼可見，尤其是資源url。關注下無條件加載，有條件加載和有預期的加載。

16、精簡代碼

對于一個網站文件大小應該有限制。百度建議HTML文件不要超過128KB。Goolgle及時建議文件限制在100KB以下，頁面上連接數在100個以下。常見的精簡代碼如下：

1)使用css定義字體、顏色、尺寸及頁面排版。有很多網站使用css，又在課件文字部分使用style或font再定義一遍字體、尺寸等，這完全是冗余的。

2)使用外部文件Css和js采取外部調取方式。

3)減少或刪除代碼中的注釋。

4)減少使用嵌套表格。

5)導航中使用文字連接，不適使用JS或是flash。

6)使用文字而不是flash、圖片、Javascript等來顯示重要的內容或鏈接。

7)如果必須使用Flash制作網頁，建議同時制作一個供搜索引擎收錄的文字版，并在首頁使用文本鏈接指向文字版。

8)Ajax等搜索引擎不能識別的技術，只用在需要用戶交互的地方，不把希望搜索引擎“看”到的導航及正文內容放到Ajax中。

不使用frame和iframe框架結構，通過iframe顯示的內容可能會被百度丟棄。

17、符合w3c標準

1)停止使用Xhtml廢棄的元素，Xhtml代碼需要全部小寫

2)所有圖片必須包含alt屬性

3)所有標簽必須關閉

4)所有的標簽屬性必須在引號內

5)所有的特殊字符必須要編碼

18、語義標記

1)合理使用H1-H6標簽，h1標簽一個網頁多只出現一次，表示當前網頁核心內容，盡量不要跟其他網頁重復。h2標簽可以出現多個，可是是網頁的小標題，代表不同模塊的內容。

2)加粗使用strong和em

3)css標記盡量包含語義，比如headerfootnavsidebar等

4)盡量不使用圖片熱點鏈接，一定要使用也要增加對應的文字鏈接

19、搜索引擎作弊規避

1)禁止css中使用display:none隱藏文本和鏈接

2)交互設計中隱藏文本和鏈接要確保使用動態技術（例如js）后內容仍然代碼可見。

3)不要使用和背景色相同的文本和鏈接

4)不使用js制作網站導航和目錄

5)頁面不存在大量重復的titilekeywordsdescription

20、避免蜘蛛陷阱

1)Flash

網頁中的某一小部分使用flash增強視覺效果沒問題，但是盡量避免首頁只有一個大的flash文件，如果flash效果是必須的話需要在首頁加上一個通往html版本的鏈接（此鏈接在flash文件之外的html代碼中）。

2)SessionID

通常建議跟蹤用戶訪問應該使用cookies而不要生成SessionID。或者程序判斷是搜索引擎蜘蛛還是普通用戶，如果是搜索引擎蜘蛛，則不生成SessioID。

3)各種各樣跳轉

301轉向：搜索引擎推薦的，用于網址URL更改的轉向，可以將權重從舊網址轉移到新網址。

盡量避免使用除301之外的其他跳轉或轉向（meta刷新、js跳轉、flash跳轉等），非要使用其他轉向的時候，跳轉時間應該設置得長一點，而不能設置為零?？蚣芙Y構慎重使用，和flash一樣盡量不用。

4)動態URL

盡量避免動態URL，生成靜態URL，至少是偽靜態。

5)JS鏈接

網站上必須使用用簡單標準的HTML鏈接，尤其是導航系統。可以使用CSS替換。

6)要求登錄

用戶后臺部分，可以使用要求登錄功能避免蜘蛛的抓取。

7)強制使用Cookies

搜索引擎蜘蛛相當于一個禁用了Cookies的瀏覽器，盡量避免強制使用Cookies造成蜘蛛的無法訪問。