高性能網(wǎng)站前端開發(fā)規(guī)范—平湖中商港科技有限公司V1.0

1、高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 1 頁/共 16 頁版本號(hào)文件名稱制作人備注V1.0高性能網(wǎng)站前端開發(fā)規(guī)范曾祥瑚平湖中商港科技有限公司高性能網(wǎng)站前端開發(fā)規(guī)范高性能網(wǎng)站前端開發(fā)規(guī)范 V1.0V1.0中國商務(wù)港華東總部中國商務(wù)港華東總部平湖中商港科技有限公司平湖中商港科技有限公司時(shí)間： 2011 年 07 月高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 2 頁/共 16 頁目目 錄錄目目 錄錄.2 2一、為什么要遵循規(guī)范.3二、目標(biāo).3三、受眾.3四、通用規(guī)范.31、文件與目錄命名規(guī)范.32、文件編碼約定.33、id 和 class

2、 命名規(guī)范.44、文件存儲(chǔ)約定.45、文件壓縮.46、使用外部 JS 和 CSS.47、兼容性規(guī)范.5五、HTML 規(guī)范.5HTML 語言規(guī)范.5HTML 元素.7六、JAVASCRIPT規(guī)范.8JavaScript 語言規(guī)范.8JavaScript 編碼風(fēng)格.9七、CSS 規(guī)范.111、樣式文件命名規(guī)范.112、選擇器運(yùn)用規(guī)范.123、CSS 樣式命名規(guī)范 .124、CSS 書寫順序 .145、CSS Sprite.146、不使用濾鏡.157、盡量不使用 hack.158、背景平鋪規(guī)范.159、簡寫.15高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 3 頁/共 16

3、 頁一、為什么要遵循規(guī)范一、為什么要遵循規(guī)范國外專家對(duì) Alexa 排名較前的一些網(wǎng)站做過測試，發(fā)現(xiàn)瀏覽一個(gè)網(wǎng)站的總耗時(shí)一般 80%-90%花在了前端，Web 的性能 80%-90% 有前端決定，并且網(wǎng)站對(duì)搜索引擎的友好程度，也主要取決與前端。因此，我們必須深入研究前端頁面的渲染規(guī)則及搜索引擎收錄規(guī)則，并以此為依據(jù)，設(shè)置相關(guān)的規(guī)范，以開發(fā)出符合 W3C 規(guī)范、搜索引擎友好、性能極高的網(wǎng)站。二、目標(biāo)二、目標(biāo)開發(fā)符合 W3C 規(guī)范、搜索引擎友好、高性能的網(wǎng)站。三、受眾三、受眾開發(fā)團(tuán)隊(duì)中的所有前端工程師。四、通用規(guī)范四、通用規(guī)范1、文件與目錄命名規(guī)范、文件與目錄命名規(guī)范1) 文件名一律小寫，必須是英

4、文單詞或產(chǎn)品名稱的拼音，考慮到 seo，多個(gè)單詞用連字符（-）連接，而不用下劃線，google 不認(rèn)同“_”為連字符。 只能出現(xiàn)英文字母、數(shù)字和連字符，嚴(yán)禁出現(xiàn)中文。2) 出現(xiàn)版本號(hào)時(shí)，需要用字母 v 作為前綴，小版本號(hào)用點(diǎn)號(hào)（.）隔開，比如 global-v1.js 或 common-v2.2.js。3) 該命名規(guī)范適用于 html, css, js, swf, php, xml, png, gif, jpg, ico 等前端維護(hù)的所有文件類型和相關(guān)目錄。4)js 和 css 壓縮文件，統(tǒng)一以.min 結(jié)尾，比如源碼文件為 style.css 和 common-v2.2.js，壓縮后則為 s

5、tyle.min.css 和 common-v2.2.min.js 。2、文件編碼約定、文件編碼約定前端開發(fā)涉及的所有文本文件視后臺(tái)程序而定，推薦使用 utf-8。高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 4 頁/共 16 頁3、id 和和 class 命名規(guī)范命名規(guī)范1) id 和 class 的命名總規(guī)則為：內(nèi)容優(yōu)先，表現(xiàn)為輔。首先根據(jù)內(nèi)容來命名，比如 main_nav. 如果根據(jù)內(nèi)容找不到合適的命名，可以再結(jié)合表現(xiàn)來定，比如 skin_blue, present_tab, col_main.2) id 和 class 名稱一律小寫，多個(gè)單詞用下劃線連接，比如

6、 recommend_presents.3) id 和 class 名稱中只能出現(xiàn)小寫的 26 個(gè)英文字母、數(shù)字和下劃線（_） ，任何其它字符都嚴(yán)禁出現(xiàn)。4) id 和 class 盡量用英文單詞命名 。確實(shí)找不到合適的單詞時(shí)，可以考慮使用產(chǎn)品的中文拼音，比如 wangwang, dating. 對(duì)于中國以及特色詞匯，也可以使用拼音，比如 xiaobao, daogou. 除了產(chǎn)品名稱和特色詞匯，其它任何情況下都嚴(yán)禁使用拼音。5) 在不影響語義的情況下，id 和 class 名稱中可以適當(dāng)采用英文單詞縮寫，比如 col, nav, hd, bd, ft 等，但切忌自造縮寫。6) id 和 cl

7、ass 名稱中的第一個(gè)詞必須是單詞全拼或語義非常清晰的單詞縮寫，比如 present, col.4、文件存儲(chǔ)約定、文件存儲(chǔ)約定1)網(wǎng)頁：根據(jù)頻道的文件夾進(jìn)行存儲(chǔ),例:商家報(bào)價(jià)頻道,項(xiàng)目內(nèi)對(duì)應(yīng)的目錄為/price/,如果創(chuàng)建的網(wǎng)頁是商家報(bào)價(jià)頻道的,該網(wǎng)頁就必須存儲(chǔ)在/price/目錄下面.2)CSS：公共文件存儲(chǔ)在/css/common/目錄下;網(wǎng)頁私有 CSS 文件需要存儲(chǔ)到網(wǎng)頁文件相對(duì)應(yīng)的/CSS/的路徑下,例:商家報(bào)價(jià)頻道首頁/css/ price/index.css3)Image：圖片文件的存儲(chǔ)與 CSS 文件的存儲(chǔ)規(guī)則一樣.4)Js：Js 文件的存儲(chǔ)跟 CSS 類似.5、文件壓縮、文件

8、壓縮Js 文件和 css 文件的發(fā)布文件均用“JsCompressor”工具進(jìn)行壓縮存儲(chǔ)。6、使用外部、使用外部 JS 和和 CSS1)全部使用外聯(lián)樣式或的方式。2)所有 CSS 外聯(lián)樣式均放在 head 中,JS 外聯(lián)樣式放在網(wǎng)頁的底部。高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 5 頁/共 16 頁3)禁止使用import mystyle.css的方式，使用這種方式的結(jié)果是先加載網(wǎng)頁再加載 css。7、兼容性規(guī)范、兼容性規(guī)范頁面應(yīng)完全兼容 IE6+和 Firefox 瀏覽器，及常用的分辨率。五、五、HTML 規(guī)范規(guī)范HTML 語言規(guī)范語言規(guī)范1、基本規(guī)范、基本規(guī)

9、范1)使用符合語義的標(biāo)簽書寫 HTML 文檔，選擇恰當(dāng)?shù)脑乇磉_(dá)所需的含義；2)元素的標(biāo)簽和屬性名必須小寫，屬性值必須加雙引號(hào)；3)元素嵌套遵循 (X)HTML Strict 嵌套規(guī)則，推薦使用 Firefox 插件 HTML Validator 進(jìn)行檢查；4)正確區(qū)分自閉合元素和非自閉合元素。非法閉合包括：.、，非法閉合會(huì)導(dǎo)致頁面嵌套錯(cuò)誤問題；5)盡量少用 frame；6)鏈接、按鈕必須加上 title 屬性；7)使用的地方不僅都得加上 title，同時(shí)加上一段圖片上的文字，如中國鋼鐵交易網(wǎng),并將 h1 的 text-intent:-5000px。8)盡量不用 table tr td。2、文

10、檔模板、文檔模板 page高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 6 頁/共 16 頁 頁頭 主體 頁尾 3、DOCTYPE頁面文檔類型統(tǒng)一使用 HTML5 DOCTYPE。代碼如下：4、編碼、編碼聲明方法遵循 HTML5 的規(guī)范。5、注釋、注釋建議對(duì)超過 10 行的頁面模塊進(jìn)行注釋，以降低開發(fā)人員的嵌套成本和后期的維護(hù)成本。例如： . 高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 7 頁/共 16 頁HTML 元素元素1、結(jié)構(gòu)性元素、結(jié)構(gòu)性元素1)p 表示段落。只能包含內(nèi)聯(lián)元素，不能包含塊級(jí)元素;2)div 本身無特殊含義，可用于布局

11、。幾乎可以包含任何元素;3)br 表示換行符;4)hr 表示水平分割線;5)h1-h6 表示標(biāo)題。其中 h1 用于表示當(dāng)前頁面最重要的內(nèi)容的標(biāo)題;6)blockquote 表示引用，可以包含多個(gè)段落。請(qǐng)勿純粹為了縮進(jìn)而使用 blockquote，大部分瀏覽器默認(rèn)將 blockquote 渲染為帶有左右縮進(jìn);7)pre 表示一段格式化好的文本;2、頭部元素、頭部元素1)title 每個(gè)頁面必須有且僅有一個(gè) title 元素;2)base 可用場景：首頁、頻道等大部分鏈接都為新窗口打開的頁面;3)link link 用于引入 css 資源時(shí)，可省去 media(默認(rèn)為 all) 和 type(默認(rèn)

12、為text/css) 屬性;4)style type 默認(rèn)為 text/css，可以省去;5)script type 屬性可以省去; 不贊成使用 lang 屬性; 不要使用古老的這種 hack 腳本, 它用于阻止第一代瀏覽器（Netscape 1 和 Mosaic）將腳本顯示成文字;6)noscript 在用戶代理不支持 JavaScript 的情況下提供說明;3、文本元素、文本元素1)a 存在 href 屬性時(shí)表示鏈接，無 href 屬性但有 name 屬性表示錨點(diǎn);2)em,strong em 表示句意強(qiáng)調(diào)，加與不加會(huì)引起語義變化，可用于表示不同的心情或語調(diào); strong 表示重要性強(qiáng)調(diào)

13、，可用于局部或全局，strong 強(qiáng)調(diào)的是重要性，不會(huì)改變句意;3)abbr 表示縮寫;4)sub,sup 主要用于數(shù)學(xué)和化學(xué)公式，sup 還可用于腳注;5)span 本身無特殊含義;高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 8 頁/共 16 頁6)ins,del 分別表示從文檔中增加(插入)和刪除4、媒體元素、媒體元素1)img 請(qǐng)勿將 img 元素作為定位布局的工具，不要用他顯示空白圖片; 必要時(shí)給 img元素增加 alt 屬性;2)object 可以用來插入 Flash;5、列表元素、列表元素1)dl 表示關(guān)聯(lián)列表，dd 是對(duì) dt 的解釋; dt 和 dd

14、 的對(duì)應(yīng)關(guān)系比較隨意：一個(gè) dt 對(duì)應(yīng)多個(gè) dd、多個(gè) dt 對(duì)應(yīng)一個(gè) dd、多個(gè) dt 對(duì)應(yīng)多個(gè) dd，都合法; 可用于名詞/單詞解釋、日程列表、站點(diǎn)目錄;2)ul 表示無序列表;3)ol 表示有序列表, 可用于排行榜等;4)li 表示列表項(xiàng)，必須是 ul/ol 的子元素;6、表單元素、表單元素1)推薦使用 button 代替 input，但必須聲明 type;2)推薦使用 fieldset，legend 組織表單3)表單元素的 name 不能設(shè)定為 action, enctype, method, novalidate, target, submit 會(huì)導(dǎo)致表單提交混亂六、六、JavaSc

15、ript 規(guī)范規(guī)范JavaScript 語言規(guī)范語言規(guī)范1)聲明變量時(shí)，必須加上 var 關(guān)鍵字。2)盡量減少全局變量的使用。3)語句總是以分號(hào)結(jié)尾。4)不要在塊內(nèi)聲明函數(shù)。5)標(biāo)準(zhǔn)特性優(yōu)于非標(biāo)準(zhǔn)特性（如果類庫有提供，優(yōu)先使用類庫中的函數(shù)） 。6)不要封裝基本類型。7)只在解析序列化串時(shí)使用 eval() 。高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 9 頁/共 16 頁8)不使用 with 。9)減少使用 continue 和 break 。10)僅在函數(shù)內(nèi)使用 this 。11)使用 Array/Object 直接量，避免使用 Array/Object 構(gòu)造器。

16、12)禁止修改內(nèi)置對(duì)象的原型。JavaScript 框架規(guī)范框架規(guī)范1)統(tǒng)一使用 jquery 框架。2)用到 web 編輯器時(shí)，統(tǒng)一使用 ckeditor、ckfinder。3)需要用到簡單 web 編輯器時(shí)，使用淘寶前端工程師寫的 kissy_editor。4)若網(wǎng)站規(guī)模較大，使用淘寶的 seajs.js 框架對(duì) js 按需加載。5)Jquery 等框架通過 Google CDN 的方式引入，以加快加載速度，并減輕服務(wù)器的壓力。各個(gè)框架的調(diào)用地址在 http:/ dojo 框架并模塊化按需加載。JavaScript 編碼風(fēng)格編碼風(fēng)格1、行與縮進(jìn)、行與縮進(jìn)1.1、語句行、語句行1)盡可能不要

17、讓每行超過 120 個(gè)字符;2)語句必須以分號(hào)作為結(jié)束符, 不要忽略分號(hào);1.2、空格、空格1)數(shù)值操作符(如, +/-/*/% 等)兩邊留空;2)賦值操作符/等價(jià)判斷符兩邊留一空格;3)for 循環(huán)條件中, 分號(hào)后留一空格;4)變量聲明語句, 數(shù)組值, 對(duì)象值及函數(shù)參數(shù)值中的逗號(hào)后留一空格;5)空行不要有空格;6)行尾不要有空格;7)逗號(hào)和冒號(hào)后一定要跟空格;高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 10 頁/共 16 頁8)點(diǎn)號(hào)前后不要出現(xiàn)空格;9)空對(duì)象和數(shù)組不需要填入空格;10)函數(shù)名末尾和左括號(hào)之間不要出現(xiàn)空格;1.3、空行、空行1)邏輯上獨(dú)立的代碼塊使

18、用空行分隔;2)文件末尾留 12 個(gè)空行;3)不要吝嗇空行。盡量使用空行將邏輯相關(guān)的代碼塊分割開，以提高程序的可讀性。1.4、縮進(jìn)、縮進(jìn)1) 以 4 個(gè)空格為一縮進(jìn)層次;2) 變量聲明:多個(gè)變量聲明時(shí), 適當(dāng)換行表示;參照 var 關(guān)鍵字, 縮進(jìn)一層次;3) 函數(shù)參數(shù):函數(shù)參數(shù)寫在同一行上;傳遞匿名函數(shù)時(shí), 函數(shù)體應(yīng)從調(diào)用該函數(shù)的左邊開始縮進(jìn);4) 數(shù)組和對(duì)象初始化時(shí):如果初始值不是很長, 盡量保持寫在單行上;初始值占用多行時(shí), 縮進(jìn)一層次;對(duì)象中, 比較長的變量/數(shù)值, 不要以冒號(hào)對(duì)齊;5) 二元/三元操作符:操作符始終跟隨前行;實(shí)在需要縮進(jìn)時(shí), 按照上述縮進(jìn)風(fēng)格;6) 表達(dá)式中的縮進(jìn)同變量

19、聲明時(shí);2、括號(hào)、括號(hào)原則: 不要濫用括號(hào), 必要時(shí)一定要使用.1)if/else/while/for 條件表達(dá)式必須有小括號(hào);2)語句塊必須有大括號(hào);3)一元操作符(如 delete, typeof, void)或在某些關(guān)鍵詞(如 return, throw, case, new) 之后, 不要使用括號(hào);高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 11 頁/共 16 頁3、變量、變量1)變量如有較廣的作用域, 使用全局變量; 如果是在類中, 可以設(shè)計(jì)成為一個(gè)類的成員;2)函數(shù)體中, 多個(gè)局部變量集中在一起聲明, 避免分散;3)適當(dāng)延遲變量的初始化;4、字符串、字符

20、串1)JS 代碼中, 單行字符串使用單引號(hào);2)JS 代碼中, 多行字符串使用 + 拼接形式, 不要使用 拼接;3)HTML 中 Element 屬性, 使用雙引號(hào);5、命名規(guī)范、命名規(guī)范原則： * 盡量避免潛在沖突; * 精簡短小, 見名知意;1) 普通變量統(tǒng)一使用駝峰形式;2) 常量使用全部大寫, 多個(gè)單詞以下劃線分隔;3) 枚舉量, 同常量;4) 私有變量, 屬性和方法, 名字以下劃線開頭;5) 保護(hù)變量, 屬性和方法, 名字同普通變量名;6) 方法和函數(shù)的可選參數(shù), 名字以 opt_ 開頭, 使用 param 標(biāo)記說明;7) 方法和函數(shù)的參數(shù)個(gè)數(shù)不固定時(shí):可添加參數(shù) var_args

21、為參數(shù)個(gè)數(shù);取代使用 arguments;使用 param 標(biāo)記說明;8) Getter/Setter 命名:以 getFoo/setFoo(value) 形式;布爾類型使用 isFoo()/hasFoo()/canDo()/shouldDO() 也可;9) 命名空間:為全局代碼使用命名空間, 如 sloth.*;外部代碼和內(nèi)部代碼使用不同的命名空間;10) 重命名那些名字很長的變量, 不要在全局范圍內(nèi)創(chuàng)建別名, 而僅在函數(shù)塊作用域中使用;11) 文件名應(yīng)全部使用小寫字符, 且不包含除 - 和 _ 外的標(biāo)點(diǎn)符號(hào);12) 臨時(shí)的重復(fù)變量建議以 i, j, k, ., 命名;高性能網(wǎng)站前端開發(fā)規(guī)范

22、 V 1.00 更新時(shí)間 2011-07-28第 12 頁/共 16 頁七、七、CSS 規(guī)范規(guī)范1、樣式文件命名規(guī)范、樣式文件命名規(guī)范主要的 style.css通用的 commom.css列表的 list.css內(nèi)容頁的 content.css布局，版面 layout.css專欄 columns.css主題 themes.css2、選擇器運(yùn)用規(guī)范、選擇器運(yùn)用規(guī)范CSS Selectors 共有以下 9 種，按性能從高到低如下：1)ID 選擇符 #box 2)類選擇符 .box 3)類型選擇符 div 4)相鄰兄弟選擇符 h4 + #pics 5)子選擇符 #pics li 6)后代選擇符 .b

23、ox a 7)通配選擇符 * 8)屬性選擇符 href=”#pic” 9)偽類和偽元素 a:hover為編寫高效的 CSS 選擇符，我們?cè)谶\(yùn)用選擇器的時(shí)候應(yīng)注意：1)避免使用通配規(guī)則；2)不要限定 ID 選擇符，沒有必要；3)讓規(guī)則越具體越好，不寫像 ul li a 這樣的長選擇符，最好是直接為 a 創(chuàng)建一個(gè)類并加在適當(dāng)?shù)脑厣希?)避免使用后代選擇符；5)使用子選擇符，讓 css 可讀性更強(qiáng)；6)依靠繼承，了解哪些屬性是可以繼承而來的，然后避免對(duì)這些屬性重復(fù)指定規(guī)則；3、CSS 樣式命名規(guī)范樣式命名規(guī)范1)常用類的命名應(yīng)盡量以常見英文單詞為準(zhǔn)，做到通俗易懂，并在適當(dāng)?shù)牡胤郊右宰⑨尅８咝阅芫W(wǎng)站

24、前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 13 頁/共 16 頁頭部：header內(nèi)容：content/container尾：footer導(dǎo)航：nav側(cè)欄：sidebar欄目：column頁面外圍控制整體布局寬度：wrapper左右中：left right center登錄：login標(biāo)志：logo廣告：banner頁面主體：main熱點(diǎn)：hot新聞：news下載：download主導(dǎo)航：mainnav子導(dǎo)航：subnav頂導(dǎo)航：topnav邊導(dǎo)航：sidebar左導(dǎo)航：leftsidebar右導(dǎo)航：rightsidebar菜單：menu子菜單：submenu搜索：sear

25、ch友情鏈接：friendlink頁腳：footer版權(quán)：copyright滾動(dòng)：scroll內(nèi)容：content標(biāo)簽頁：tab文章列表：list提示信息：msg小技巧：tips欄目標(biāo)題：title加入：joinus指南：guild服務(wù)：service注冊(cè)：regsiter狀態(tài)：status投票：vote合作伙伴：partner高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 14 頁/共 16 頁2） 對(duì)網(wǎng)站中的按鈕，若按鈕背景統(tǒng)一，只是字?jǐn)?shù)有不一樣，那么根據(jù)按鈕上的字?jǐn)?shù)來定義按鈕的樣式，如 button2、button3 分別表示兩個(gè)字，三個(gè)字的按鈕。Pading、m

26、argin類似，如離頂部 10px 寫成.pt10、.mt10。4、CSS 書寫順序書寫順序這里推薦先寫顯示屬性，再寫自身屬性，再寫文字屬性；并不代表非得按這個(gè)順序?qū)?，但這種寫法可以使 css 結(jié)構(gòu)更清晰易讀，修改起來比較方便。而且在團(tuán)隊(duì)項(xiàng)目中能更好地提高效率。/顯示屬性displaylist-stylepositionfloatclear/自身屬性widthheightmarginpaddingborderbackground/文本屬性colorfonttext-decoration高性能網(wǎng)站前端開發(fā)規(guī)范 V 1.00 更新時(shí)間 2011-07-28第 15 頁/共 16 頁text-ali

27、gnvertical-alignwhite-spaceother textcontent5、CSS Sprite將相關(guān)的背景圖片合并到單個(gè) PNG8 圖片里面，并通過 background-position 屬性來使用這個(gè)圖片，這里可以借助“CssBgImageMergeTool”來快速合并和定位。CSS Sprites 可以大大減少 HTTP 請(qǐng)求的數(shù)量，節(jié)省帶寬并加快頁面加載。同時(shí)，可以避免圖片閃爍，例如，如果系統(tǒng)或網(wǎng)速比較慢的時(shí)候，當(dāng)鼠標(biāo)放到一個(gè)按鈕時(shí)加載另外一個(gè)圖片就可能引起閃爍。但是也應(yīng)注意一下幾點(diǎn)：1) 讓小圖片在 PNG8 圖片上水平排版，這樣會(huì)比豎直排版稍小。2) Spirite 中把顏色較近的組合在一起可以降低顏色數(shù)，理想狀況是低于 256