1.1 首頁命名為index.html / index.htm / index.php等。
1.2 需要制作404頁面。
1.3 文件夾結(jié)構(gòu)合理。
1.4 命名使用英文且有語義性的單詞，并提供參考文檔。
2.1.1 需要提供文檔聲明
2.1.2 設(shè)置utf-8的編碼格式，并放置于title之上
2.1.3 合理的填寫html文件中的title、meta等內(nèi)容
2.1.4 使用外部引入樣式表和JS行為代碼，實現(xiàn)結(jié)構(gòu)、樣式和行為的相分離，降低模塊間的耦合度
2.1.5 合理控制JS文件的引入位置，提升網(wǎng)站的加載速度
2.1.6 根據(jù)具體情況合并CSS、JS文件，降低服務(wù)器請求次數(shù)
2.2.1 書寫HTML代碼的時候，遵循標(biāo)簽語義化的要求，根據(jù)標(biāo)簽的語義性進(jìn)行選擇，如布局使用div、標(biāo)題使用h系列標(biāo)簽、段落使用p標(biāo)簽等
歡迎溝通交流~HTML5學(xué)堂
2.2.2 HTML代碼要合理嵌套，一般情況下，行元素當(dāng)中不能包含塊元素，除了段落、標(biāo)題類型的塊元素當(dāng)中，既能夠包含塊元素，也能夠包含行元素，而段落或標(biāo)題類的塊元素只能夠包含文字或行元素。table元素只能夠直接包含thead、tbody、tfoot、caption等元素；ul/ol元素只能直接包含li元素；dl元素當(dāng)中只能直接包含dt和dd元素；form表單當(dāng)中只能直接包含filedset和legend，不能直接包含input元素。
2.2.3 合理書寫注釋，代碼縮進(jìn)合理，不出現(xiàn)多余空行或者空標(biāo)簽，提升代碼可讀性。
2.2.4 權(quán)衡嵌套層級以及擴展性等多個方面后，在適當(dāng)位置使用三層嵌套技術(shù)。
2.2.5 合理書寫a標(biāo)簽的title、img標(biāo)簽的title和alt，提升網(wǎng)站的SEO。
3.1.1 CSS規(guī)則命名中，一律采用小寫加中劃線的方式，不使用下劃線或大寫字母，命名采用更簡明有語義的英文單詞進(jìn)行組合，進(jìn)行合理的縮寫
3.1.2 CSS代碼的書寫順序遵循CSS樣式的渲染順序：顯示屬性-自身屬性-文本屬性-其他。
3.1.3 避免class與id重名，對于class名使用中劃線，而id名遵循小駝峰命名法。
3.1.4 在書寫網(wǎng)頁樣式之前，先進(jìn)行瀏覽器默認(rèn)樣式重置。
3.2.1 在CSS代碼當(dāng)中，盡量的規(guī)避掉不同瀏覽器的兼容問題，如果實在避免不了，也需要進(jìn)行合理解決。
3.2.2 盡可能的少使用hack。
3.2.3 對于CSS3部分屬性，如果需要兼容各個瀏覽器，需要書寫各個瀏覽器前綴。
3.3.1 合理使用樣式的“繼承”（CSS后代選擇器），或者使用樣式的“組合”，減少頁面中的類名，提升通用性。
3.3.2 合理使用群組選擇器，進(jìn)行代碼的優(yōu)化。
3.3.3 圖片需要設(shè)置大小，防止后臺傳送不正常尺寸圖像造成的失真。
3.3.4 對于數(shù)據(jù)類部分，在適當(dāng)?shù)牡胤皆黾映鲭[藏或者超出顯示為省略號。
3.3.5 需要考慮a標(biāo)簽的點擊區(qū)，通常會對a進(jìn)行處理：轉(zhuǎn)化為塊元素并設(shè)置高度，或者浮動設(shè)置寬高。
3.3.6 合理利用元素的默認(rèn)樣式，而不再進(jìn)行冗余設(shè)置（如div等元素的寬度默認(rèn)為占滿父級，就不需要再設(shè)置width:100%，對于高度，默認(rèn)由內(nèi)容撐開，也不需要設(shè)置高度）。
3.3.7 考慮文檔流的變化，對元素進(jìn)行浮動之后，需要進(jìn)行及時的清除，采用after偽元素清浮動的方法進(jìn)行清除。
3.3.8 對盒模型設(shè)置時，子級的margin（頂部）通常會影響父級樣式，因此，在父子之間的間距使用父級的內(nèi)邊距撐開，兄弟級別標(biāo)簽之間的距離可采用外邊距。
4.1.1 合理命名，遵循基本的命名規(guī)范，并遵循命名推薦：屬性/變量以名詞開頭，方法/函數(shù)以動詞開頭，遵循小駝峰，構(gòu)造函數(shù)使用大駝峰，常量所有字母均大寫。
4.1.2 所有變量聲明都放在函數(shù)的頭部。
4.1.3 所有函數(shù)都在使用之前定義。
4.1.4 盡量避免使用全局變量，防止全局作用域被污染。
4.1.5 合理書寫大括號位置、空行位置、注釋等內(nèi)容，對于聲明變量，可以如下聲明：
4.1.6 利用對象命名空間、匿名函數(shù)、協(xié)同命名等方法，盡量避免團隊合作時產(chǎn)生的命名沖突。
4.1.7 文件加載完畢之后再進(jìn)行代碼的執(zhí)行，合理利用window.onload與jQuery中的$(document).ready。
4.1.8 對于DOM操作，盡可能減少在頁面中查找元素的次數(shù)，即用變量存儲查找的元素，之后再需使用，只需要使用變量即可（for循環(huán)中常見的長度控制，同理）。
4.2.1 比較數(shù)據(jù)時，不要使用"相等"（==）運算符，只使用"嚴(yán)格相等"（===）運算符。
4.2.2 不要使用隱式的數(shù)據(jù)類型轉(zhuǎn)換。
4.2.3 追加字符串時，采用 str += "獨行冰海"; 而不是str = str + "獨行冰海";
4.3.1 獲取標(biāo)簽使用最為快捷的方法，在PC端原生方法當(dāng)中，速度比較如下：通過id > 通過類名 > 通過標(biāo)簽名。如果能夠在小范圍中進(jìn)行查找時則縮小范圍。
4.3.2 對于樣式的修改與調(diào)整，根據(jù)具體情況采用style或者類名操作（className），防止style的濫用造成的css文件hover失效。
4.3.3 原生當(dāng)中，一個元素一種事件只能綁定一次。
4.3.4 可以通過事件委托，減少頁面中類似事件的數(shù)量。
4.3.5 在刪除dom節(jié)點之前，需要先移除掉該節(jié)點上的事件。
4.4.1 對于功能類似的代碼，進(jìn)行函數(shù)的封裝，可以使用面向?qū)ο蟮臅鴮懛椒�，提升代碼的復(fù)用性和擴展性。
4.4.2 盡可能少使用with語句、閉包、eval語句。
4.4.3 在DOM節(jié)點相關(guān)操作上進(jìn)行優(yōu)化，如利用變量存儲查找到的元素，從而防止每次查找時進(jìn)行頁面重繪、利用文檔碎片等。
4.4.4 盡可能減少頁面中dom元素樣式的修改，防止頁面回流與重繪。
4.4.5 合理使用計時器，防止setInterval造成的內(nèi)存泄露。
4.4.6 在設(shè)置計時器之后需要考慮計時器的清除，以防止計時器的疊加造成的影響。
4.5.1 對于AJAX的異步加載，提供加載的相關(guān)提醒。
4.5.2 防止AJAX造成的重復(fù)請求。
4.5.3 利用時間戳進(jìn)行緩存的處理。
4.5.4 對AJAX進(jìn)行緩存處理。
4.5.5 合理使用AJAX中發(fā)送數(shù)據(jù)的方法，當(dāng)文檔中允許使用post或get發(fā)送時，優(yōu)選選用get方法。
4.6.1 jQuery等插件的合理引用，處理常見的瀏覽器兼容問題。
4.6.2 根進(jìn)jQuery的發(fā)展，及時更新文件庫，舍棄已經(jīng)淘汰的方法（如：.toggle()，.live()等）。
5.1 使用背景圖合并技術(shù)，將多張背景圖合并到一張圖片上，從而降低頁面與服務(wù)器之間的請求次數(shù)。
5.2 存儲圖像時根據(jù)需求采取不同的格式，對于不需要透明的圖像可以存儲為jpg，需要半透明圖像存儲為png，對于全透明且像素要求不高的圖像可以存儲為gif或png-8。對圖像質(zhì)量進(jìn)行控制，保證在顯示效果正常的前提下，存儲為盡可能小的圖像，對于含透明的圖像，需要根據(jù)具體顯示質(zhì)量而選擇。
5.3 對于網(wǎng)頁中特殊的字體，可以使用@font-face進(jìn)行設(shè)置，并根據(jù)實際情況修改字體包，防止字體包文件過大。具體設(shè)置方法此處不講解了，可以參見文章《網(wǎng)絡(luò)字體@font-face 如何處理網(wǎng)頁中的特殊字體》。
5.4 合理使用圖片預(yù)加載和圖片懶加載。
6.1 在上線之前對html、css、js文件進(jìn)行壓縮。
6.2 增加網(wǎng)頁圖標(biāo) ico文件，具體增加方法此處也不講解了，可詳見《設(shè)置網(wǎng)頁地址欄前面的標(biāo)志圖標(biāo)》。
掃一掃 加微信咨詢
