一、CSS編碼規(guī)范
1、單行形式書(shū)寫(xiě)風(fēng)格的排版約束
1.1）每一條規(guī)則的大括號(hào) { 前后加空格
1.2）多個(gè)selector共用一個(gè)樣式集，則多個(gè)selector必須寫(xiě)成多行形式
1.3）每一條規(guī)則結(jié)束的大括號(hào) } 前加空格
1.4）屬性名冒號(hào)之前不加空格，冒號(hào)之后加空格
1.5）每一個(gè)屬性值后必須添加分號(hào); 并且分號(hào)后空格
例如：
div.test { width: 100px; height: 200px; }
a:focus,
a:hover { position: relative; right: 1px; }
2、多行形式書(shū)寫(xiě)風(fēng)格的排版約束
2.1）每一條規(guī)則的大括號(hào) { 前添加空格
2.2）多個(gè)selector共用一個(gè)樣式集，則多個(gè)selector必須寫(xiě)成多行形式
2.3）每一條規(guī)則結(jié)束的大括號(hào) } 必須與規(guī)則選擇器的第一個(gè)字符對(duì)齊
2.4）屬性名冒號(hào)之前不加空格，冒號(hào)之后加空格
2.5）屬性值之后添加分號(hào);
3、其他規(guī)范
3.1）使用單引號(hào)，不允許使用雙引號(hào)
3.2）如果使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照webkit- / -moz- / -ms- / -o- / std的順序進(jìn)行添加，標(biāo)準(zhǔn)屬性寫(xiě)在最后，并且屬性名稱要對(duì)齊，例如：
div.animation-demo {
-webkit-animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite;
-o-animation: mymove 5s infinite;
animation: mymove 5s infinite;
}
4、命名規(guī)則書(shū)寫(xiě)規(guī)范
4.1）規(guī)則命名中，一律采用小寫(xiě)加中劃線的方式，不允許使用大寫(xiě)字母或 _
4.2）命名避免使用中文拼音，應(yīng)該采用更簡(jiǎn)明有語(yǔ)義的英文單詞進(jìn)行組合
4.3）命名注意縮寫(xiě)，但是不能盲目縮寫(xiě)，具體請(qǐng)參見(jiàn)常用的CSS命名規(guī)則
4.4）不允許通過(guò)1、2、3等序號(hào)進(jìn)行命名
4.5）避免class與id重名
4.6）id用于標(biāo)識(shí)模塊或頁(yè)面的某一個(gè)父容器區(qū)域，名稱必須唯一，不要隨意新建id
4.7）class用于標(biāo)識(shí)某一個(gè)類型的對(duì)象，命名必須言簡(jiǎn)意賅。
4.8）盡可能提高代碼模塊的復(fù)用，樣式盡量用組合的方式
4.9）規(guī)則名稱中不應(yīng)該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關(guān)的信息。應(yīng)該用意義命名，而不是樣式顯示結(jié)果命名。
4.10）除了重置瀏覽器默認(rèn)樣式外，禁止直接為html tag添加css樣式設(shè)置，例如：
div {
width: 200px;
font-size: 16px;
}
4.11）每一條規(guī)則應(yīng)該確保選擇器唯一，禁止直接為全局.nav/.header/.body等類設(shè)置屬性。
5、屬性編寫(xiě)順序
5.1）顯示屬性display/list-style/position/float/clear
5.2）自身屬性（盒模型）width/height/margin/padding/border
5.3）背景background
5.4）行高line-height
5.5）文本屬性color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content
5.6）其他cursor/z-index/zoom
5.7）CSS3屬性transform/transition/animation/box-shadow/border-radius
5.8）鏈接的樣式請(qǐng)嚴(yán)格按照如下順序添加：a:link -> a:visited -> a:hover -> a:active（LoVeHAte）
6、性能優(yōu)化
6.1）選擇器應(yīng)該在滿足功能的基礎(chǔ)上盡量簡(jiǎn)短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設(shè)置。
6.2）注意選擇器的性能，不要使用低性能的選擇器，例如：
div > * {}
ul > li > a {}
body.profile ul.tabs.nav li a {}
6.3）禁止在css中使用*選擇符。
6.4）除非必須，否則，一般有class或id的，不需要再寫(xiě)上元素對(duì)應(yīng)的tag，例如：
div#test { width: 100px; }
6.5）0后面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px
6.6）如果是16進(jìn)制表示顏色，則顏色取值應(yīng)該大寫(xiě)。
6.7）如果可以，顏色盡量用三位字符表示，例如#AABBCC寫(xiě)成#ABC
6.8）如果沒(méi)有邊框時(shí)，不要寫(xiě)成border:0，應(yīng)該寫(xiě)成border:none
6.9）盡量避免使用AlphaImageLoader
6.10）在保持代碼解耦的前提下，盡量合并重復(fù)的樣式。
6.11）background、font等可以縮寫(xiě)的屬性，盡量使用縮寫(xiě)形式。
7、hack
IE6 * html selector { … }
IE7 *+html selector { … }
非IE6 html>body selector { … }
firefox @-moz-document url-prefix() { … }
safari3+/chrome @media screen and (-webkit-min-device-pixel-ratio:0) { … }
opera @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { … }
iPhone/mobile webkit @media screen and (max-device-width: 480px) { … }
8、z-index取值規(guī)范
9、其他
9.1）字體名稱請(qǐng)映射成對(duì)應(yīng)的英文名，例如：黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei)，如果字體名稱中有空格，則必須加單引號(hào)。
9.2）背景圖片請(qǐng)合理使用css sprites，按照模塊、業(yè)務(wù)、頁(yè)面來(lái)劃分均可。制作css sprites時(shí)，盡量把顏色相近的圖標(biāo)放在一起，存儲(chǔ)為png8格式，存儲(chǔ)完以后還能用一些壓縮工具進(jìn)行無(wú)損壓縮。
9.3）css背景圖片的文件類型，請(qǐng)按照以下原則來(lái)保存：
9.3.1）如果背景圖片有動(dòng)畫(huà)，則保存成gif
9.3.2）如果沒(méi)有動(dòng)畫(huà)，也沒(méi)有半透明效果，則保存成png-8
9.3.3）如果有半透明效果，則保存成png-24
9.4）不要在html中加入標(biāo)簽來(lái)清理浮動(dòng)，通過(guò)在浮動(dòng)元素的父元素上添加.clearfix來(lái)清除浮動(dòng)。
9.5）為了SEO和頁(yè)面可用性，請(qǐng)使用text-indent來(lái)隱藏文本內(nèi)容。
9.6）避免過(guò)小的背景圖片平鋪。
9.7）盡量少用!important。
9.8）避免使用非一次性expression。
9.9）圖片上的圓角、邊框等可以用css樣式完成的，不要用png圖片上完成，圖片盡量保存為jpg，且保證客戶只上傳方形圖片即可達(dá)到顯示效果。
二、前端開(kāi)發(fā)時(shí)的注意事項(xiàng)
1、需求分析時(shí)需要考慮的方面
1.1）美工圖大小和具體內(nèi)容區(qū)域大小的區(qū)別
1.2）會(huì)不會(huì)有fixed定位
1.3）有沒(méi)有返回頂部的功能需求
1.4）哪些地方需要注意超出隱藏
1.5）哪些地方需要內(nèi)容撐開(kāi)高度
1.6）哪些地方需要有鏈接跳轉(zhuǎn)
1.7）hover（HTML5學(xué)堂提示：有些美工圖會(huì)提供三態(tài)，初始、移入和按下）效果是什么樣子
1.8）哪些地方需要加鼠標(biāo)的小手狀態(tài)
1.9）哪些有JS特效，需要考慮效果~
1.10）基本字體字號(hào)、顏色和背景顏色的選用
1.11）分清楚背景圖和數(shù)據(jù)圖
1.12）公共模塊拆分出來(lái)
1.13）哪些地方是需要提交數(shù)據(jù)的 form
2、基本的前期準(zhǔn)備
2.1）文件夾結(jié)構(gòu)搭建
2.2）準(zhǔn)備reset重置文件以及基本的幾個(gè)JS文件，根據(jù)情況引入
2.3）合理修改reset文件[基于網(wǎng)站分析結(jié)果] 需要修改的內(nèi)容如下：
2.3.1）基本的背景顏色和文字顏色
2.3.2）a標(biāo)簽的兩種狀態(tài)
2.3.3）基本的字體大小和樣式設(shè)置
2.3.4）刪除掉沒(méi)有使用到的樣式設(shè)置
2.3.5）保證after偽元素清浮動(dòng)的方法在reset當(dāng)中
3、移動(dòng)端與PC端的特殊性
3.1）移動(dòng)端
3.1.1）全新的選擇器以及大部分的CSS3屬性都得到了很好的支持
3.1.2）視口的設(shè)置
3.1.3）基本rem的處理
3.1.4）user-select；tap-highlight-color；-webkit-transform-style等樣式的處理
3.1.5）需要額外注意“指觸區(qū)”
3.1.6）模擬測(cè)試之外，需要進(jìn)行真機(jī)調(diào)試
3.1.7）320屏幕像素下，字體大小最小為12px
3.1.8）a標(biāo)簽的title和img標(biāo)簽的title可以刪除 嵌套原則可以適當(dāng)?shù)恼{(diào)整
3.1.9 最大最小寬的考慮
3.1.10）針對(duì)背景圖進(jìn)行background-size的處理
3.2）PC端
3.2.1）使用新標(biāo)簽后，對(duì)新標(biāo)簽的兼容處理
3.2.2）需要測(cè)試各個(gè)瀏覽器（HTML5學(xué)堂提示：保證在IE6~7的低端瀏覽器中，布局與功能正常）
3.2.3）對(duì)于子代選擇器、CSS3新增選擇器等能否使用取決于具體開(kāi)發(fā)兼容要求
3.2.4）IE下的測(cè)試，需要啟動(dòng)服務(wù)器，即在wamp下運(yùn)行
4、整體開(kāi)發(fā)的基本順序提醒
4.1）注意模塊的最小寬度或者最大寬度
4.2）先完成一級(jí)布局與二級(jí)布局
4.3）針對(duì)公共模塊進(jìn)行開(kāi)發(fā)
4.4）制作具體的模塊
5、具體開(kāi)發(fā)規(guī)范
5.1）文件名禁止使用中文命名
5.2）編寫(xiě)代碼的時(shí)候，需要合理的縮進(jìn)（不要出現(xiàn)空格與Tab格混用）與注釋
5.3）遵循基本的嵌套規(guī)則
5.4）不要忘記a標(biāo)簽的href和title、img標(biāo)簽的alt、title、src，a標(biāo)簽的target（從何處打開(kāi)鏈接）
5.5）CSS后代選擇器，盡量不要超過(guò)3層，不要超過(guò)4層
5.6）類名采用單詞（語(yǔ)義）命名，多個(gè)單詞采用中劃線連接
5.7）不設(shè)置不必要的屬性和屬性值，如針對(duì)占滿父級(jí)整行的塊元素設(shè)置width:100%
5.8）CSS樣式按照順序書(shū)寫(xiě)：顯示屬性——>自身屬性——>文本——>其他——>CSS3屬性
5.9）HTML與CSS中的引號(hào)需要保持一致，禁止出現(xiàn)單引號(hào)與雙引號(hào)混用
5.10）類名和id名通常不重復(fù)的
5.11）每段語(yǔ)句結(jié)束后的分號(hào)（英文）必不可少
6、開(kāi)發(fā)細(xì)節(jié)
6.1）注意保持盒模型大小的一致性（如：增加左右padding，原有width需要變小）
6.2）及時(shí)清除浮動(dòng)，并采用合理的清除方式
6.3）針對(duì)定位元素，處理z-index值
6.4）數(shù)據(jù)圖需要限制寬高
6.5）背景圖需要進(jìn)行合并
6.6）對(duì)于需要超出隱藏的需求，單行文本隱藏或顯示為省略號(hào)（……），比如在模塊標(biāo)題需要進(jìn)行設(shè)置，多行文本如果顯示區(qū)域高度固定，需要設(shè)置超出隱藏。
6.7）img標(biāo)簽需要浮動(dòng)或設(shè)置display:block，以防止img元素下的3像素空隙
6.8）a標(biāo)簽的指觸區(qū)需要注意
6.9）合理使用群組和后代選擇器
7、最后不可缺少的相關(guān)工作
7.1）CSS壓縮
7.2）JS壓縮
7.3）圖片壓縮
7.4）ico文件的制作
7.5）404頁(yè)面
三、其它細(xì)節(jié)
1）為了解決標(biāo)簽的默認(rèn)樣式，需要引入css重置文件，如“reset.css”。
reset.css
@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
/*background: transparent;*/
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img { border:0;}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 {
font-size:200%;
font-weight:normal;
}
:focus { outline: 0;}
a{ text-decoration:none;}
a:hover img{ border:none;}
a:active{noOutline:expression(this.onFocus=this.blur());}
/*清除浮動(dòng)*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/*png css hack for ie6*/
*html img.png{
_background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "http://i0.itc.cn/20101019/848_0a785a7b_1118_4825_85dc_e8696988c94b_0.gif");
}
2）HTML與CSS文件采用單詞（語(yǔ)義）命名，禁止使用中文命名。
3）HTML標(biāo)簽嵌套合理。
4）單行文本顯示為省略號(hào)（……），比如在模塊標(biāo)題需要進(jìn)行設(shè)置，多行文本如果顯示區(qū)域高度固定，需要設(shè)置超出隱藏。
5）保持盒模型大小的一致性（如：增加左右padding，原有width需要變?。?/span>
6）使用position的時(shí)候，按照CSS編碼規(guī)范設(shè)置z-index的范圍。
7）字體大小最小為12px，不能小于12px（部分瀏覽器不支持，以及不好的用戶體驗(yàn)）
8）語(yǔ)義化標(biāo)簽：
不是說(shuō)瀏覽器顯示正常就可以，還得讓搜索引擎等機(jī)器爬蟲(chóng)（機(jī)器人）能明白你代碼中每個(gè)標(biāo)簽的用途，這就需要語(yǔ)義化你的代碼。語(yǔ)義化的代碼更容易被搜索引擎收錄，更容易讓屏幕閱讀器讀出網(wǎng)頁(yè)內(nèi)容。
HTML5 添加的語(yǔ)義元素如下：
標(biāo)簽 | 描述 |
<article> | 定義頁(yè)面獨(dú)立的內(nèi)容區(qū)域。 |
<aside> | 定義頁(yè)面的側(cè)邊欄內(nèi)容。 |
<bdi> | 允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。 |
<command> | 定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕 |
<details> | 用于描述文檔或文檔某個(gè)部分的細(xì)節(jié) |
<dialog> | 定義對(duì)話框，比如提示框 |
<summary> | 標(biāo)簽包含 details 元素的標(biāo)題 |
<figure> | 規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。 |
<figcaption> | 定義 <figure> 元素的標(biāo)題 |
<footer> | 定義 section 或 document 的頁(yè)腳。 |
<header> | 定義了文檔的頭部區(qū)域 |
<mark> | 定義帶有記號(hào)的文本。 |
<meter> | 定義度量衡。僅用于已知最大和最小值的度量。 |
<nav> | 定義導(dǎo)航鏈接的部分。 |
<progress> | 定義任何類型的任務(wù)的進(jìn)度。 |
<ruby> | 定義 ruby 注釋（中文注音或字符）。 |
<rt> | 定義字符（中文注音或字符）的解釋或發(fā)音。 |
<rp> | 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。 |
<section> | 定義文檔中的節(jié)（section、區(qū)段）。 |
<time> | 定義日期或時(shí)間。 |
<wbr> | 規(guī)定在文本中的何處適合添加換行符。 |
四、如何優(yōu)化前端頁(yè)面/如何優(yōu)化網(wǎng)頁(yè)
1、前期準(zhǔn)備
1.1）首頁(yè)命名為index.html / index.htm / index.php等。
1.2）需要制作404頁(yè)面。
1.3）文件夾結(jié)構(gòu)合理。
1.4）命名使用英文且有語(yǔ)義性的單詞，并提供參考文檔。
2、結(jié)構(gòu)
2.1）文件頭部分。
2.1.1）需要提供文檔聲明。
2.1.2）設(shè)置utf-8的編碼格式，并放置于title之上。
2.1.3）合理的填寫(xiě)html文件中的title、meta等內(nèi)容。
2.1.4）使用外部引入樣式表和JS行為代碼，實(shí)現(xiàn)結(jié)構(gòu)、樣式和行為的相分離，降低模塊間的耦合度。
2.1.5）合理控制JS文件的引入位置，提升網(wǎng)站的加載速度。
2.1.6）根據(jù)具體情況合并CSS、JS文件，降低服務(wù)器請(qǐng)求次數(shù)。
2.2）標(biāo)簽選用與書(shū)寫(xiě)規(guī)范
2.2.1）書(shū)寫(xiě)HTML代碼的時(shí)候，遵循標(biāo)簽語(yǔ)義化的要求，根據(jù)標(biāo)簽的語(yǔ)義性進(jìn)行選擇，如布局使用div、標(biāo)題使用h系列標(biāo)簽、段落使用p標(biāo)簽等。
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）合理書(shū)寫(xiě)注釋，代碼縮進(jìn)合理，不出現(xiàn)多余空行或者空標(biāo)簽，提升代碼可讀性。
2.2.4）權(quán)衡嵌套層級(jí)以及擴(kuò)展性等多個(gè)方面后，在適當(dāng)位置使用三層嵌套技術(shù)。
2.2.5）合理書(shū)寫(xiě)a標(biāo)簽的title、img標(biāo)簽的title和alt，提升網(wǎng)站的SEO。
3、樣式
3.1）基本代碼規(guī)范
3.1.1）CSS規(guī)則命名中，一律采用小寫(xiě)加中劃線的方式，不使用下劃線或大寫(xiě)字母，命名采用更簡(jiǎn)明有語(yǔ)義的英文單詞進(jìn)行組合，進(jìn)行合理的縮寫(xiě)。
3.1.2）CSS代碼的書(shū)寫(xiě)順序遵循CSS樣式的渲染順序：顯示屬性-自身屬性-文本屬性-其他。
3.1.3）避免class與id重名，對(duì)于class名使用中劃線，而id名遵循小駝峰命名法。
3.1.4）在書(shū)寫(xiě)網(wǎng)頁(yè)樣式之前，先進(jìn)行瀏覽器默認(rèn)樣式重置。
3.2）兼容問(wèn)題處理
3.2.1）在CSS代碼當(dāng)中，盡量的規(guī)避掉不同瀏覽器的兼容問(wèn)題，如果實(shí)在避免不了，也需要進(jìn)行合理解決。
3.2.2）盡可能的少使用hack。
3.2.3）對(duì)于CSS3部分屬性，如果需要兼容各個(gè)瀏覽器，需要書(shū)寫(xiě)各個(gè)瀏覽器前綴。
3.3）其他樣式處理
3.3.1）合理使用樣式的“繼承”（CSS后代選擇器），或者使用樣式的“組合”，減少頁(yè)面中的類名，提升通用性。
3.3.2）合理使用群組選擇器，進(jìn)行代碼的優(yōu)化。
3.3.3）圖片需要設(shè)置大小，防止后臺(tái)傳送不正常尺寸圖像造成的失真。
3.3.4）對(duì)于數(shù)據(jù)類部分，在適當(dāng)?shù)牡胤皆黾映鲭[藏或者超出顯示為省略號(hào)。
3.3.5）需要考慮a標(biāo)簽的點(diǎn)擊區(qū)，通常會(huì)對(duì)a進(jìn)行處理：轉(zhuǎn)化為塊元素并設(shè)置高度，或者浮動(dòng)設(shè)置寬高。
3.3.6）合理利用元素的默認(rèn)樣式，而不再進(jìn)行冗余設(shè)置（如div等元素的寬度默認(rèn)為占滿父級(jí)，就不需要再設(shè)置width:100%，對(duì)于高度，默認(rèn)由內(nèi)容撐開(kāi)，也不需要設(shè)置高度）。
3.3.7）考慮文檔流的變化，對(duì)元素進(jìn)行浮動(dòng)之后，需要進(jìn)行及時(shí)的清除，采用after偽元素清浮動(dòng)的方法進(jìn)行清除。
3.3.8）對(duì)盒模型設(shè)置時(shí)，子級(jí)的margin（頂部）通常會(huì)影響父級(jí)樣式，因此，在父子之間的間距使用父級(jí)的內(nèi)邊距撐開(kāi)，兄弟級(jí)別標(biāo)簽之間的距離可采用外邊距。
4、JS方面
4.1）變量
4.1.1）合理命名，遵循基本的命名規(guī)范，并遵循命名推薦：屬性/變量以名詞開(kāi)頭，方法/函數(shù)以動(dòng)詞開(kāi)頭，遵循小駝峰，構(gòu)造函數(shù)使用大駝峰，常量所有字母均大寫(xiě)。
4.1.2）所有變量聲明都放在函數(shù)的頭部。
4.1.3）所有函數(shù)都在使用之前定義。
4.1.4）盡量避免使用全局變量，防止全局作用域被污染。
4.1.5）合理書(shū)寫(xiě)大括號(hào)位置、空行位置、注釋等內(nèi)容，對(duì)于聲明變量，可以如下聲明：
var box = document.getElementById('box'),
con = document.getElementById('con');
4.1.6）利用對(duì)象命名空間、匿名函數(shù)、協(xié)同命名等方法，盡量避免團(tuán)隊(duì)合作時(shí)產(chǎn)生的命名沖突。
4.1.7）文件加載完畢之后再進(jìn)行代碼的執(zhí)行，合理利用window.onload與jQuery中的$(document).ready。
4.1.8）對(duì)于DOM操作，盡可能減少在頁(yè)面中查找元素的次數(shù)，即用變量存儲(chǔ)查找的元素，之后再需使用，只需要使用變量即可（for循環(huán)中常見(jiàn)的長(zhǎng)度控制，同理）。
4.2）數(shù)據(jù)類型
4.2.1）比較數(shù)據(jù)時(shí)，不要使用"相等"（==）運(yùn)算符，只使用"嚴(yán)格相等"（===）運(yùn)算符。
4.2.2）不要使用隱式的數(shù)據(jù)類型轉(zhuǎn)換。
4.2.3）追加字符串時(shí)，采用 str += "獨(dú)行冰海"; 而不是str = str + "獨(dú)行冰海";
4.3）頁(yè)面基本數(shù)據(jù)交互
4.3.1）獲取標(biāo)簽使用最為快捷的方法，在PC端原生方法當(dāng)中，速度比較如下：通過(guò)id > 通過(guò)類名 > 通過(guò)標(biāo)簽名。如果能夠在小范圍中進(jìn)行查找時(shí)則縮小范圍。
4.3.2）對(duì)于樣式的修改與調(diào)整，根據(jù)具體情況采用style或者類名操作（className），防止style的濫用造成的css文件hover失效。
4.3.3）原生當(dāng)中，一個(gè)元素一種事件只能綁定一次。
4.3.4）可以通過(guò)事件委托，減少頁(yè)面中類似事件的數(shù)量。
4.3.5）在刪除dom節(jié)點(diǎn)之前，需要先移除掉該節(jié)點(diǎn)上的事件。
4.4）性能
4.4.1）對(duì)于功能類似的代碼，進(jìn)行函數(shù)的封裝，可以使用面向?qū)ο蟮臅?shū)寫(xiě)方法，提升代碼的復(fù)用性和擴(kuò)展性。
4.4.2）盡可能少使用with語(yǔ)句、閉包、eval語(yǔ)句。
4.4.3）在DOM節(jié)點(diǎn)相關(guān)操作上進(jìn)行優(yōu)化，如利用變量存儲(chǔ)查找到的元素，從而防止每次查找時(shí)進(jìn)行頁(yè)面重繪、利用文檔碎片等。
4.4.4）盡可能減少頁(yè)面中dom元素樣式的修改，防止頁(yè)面回流與重繪。
4.4.5）合理使用計(jì)時(shí)器，防止setInterval造成的內(nèi)存泄露。
4.4.6）在設(shè)置計(jì)時(shí)器之后需要考慮計(jì)時(shí)器的清除，以防止計(jì)時(shí)器的疊加造成的影響。
4.5）AJAX
4.5.1）對(duì)于AJAX的異步加載，提供加載的相關(guān)提醒。
4.5.2）防止AJAX造成的重復(fù)請(qǐng)求。
4.5.3）利用時(shí)間戳進(jìn)行緩存的處理。
4.5.4）對(duì)AJAX進(jìn)行緩存處理。
4.5.5）合理使用AJAX中發(fā)送數(shù)據(jù)的方法，當(dāng)文檔中允許使用post或get發(fā)送時(shí)，優(yōu)選選用get方法。
4.6）框架
4.6.1）jQuery等插件的合理引用，處理常見(jiàn)的瀏覽器兼容問(wèn)題。
4.6.2）根進(jìn)jQuery的發(fā)展，及時(shí)更新文件庫(kù)，舍棄已經(jīng)淘汰的方法（如：.toggle()，.live()等）。
5）圖像方面
5.1）使用背景圖合并技術(shù)，將多張背景圖合并到一張圖片上，從而降低頁(yè)面與服務(wù)器之間的請(qǐng)求次數(shù)。
5.2）存儲(chǔ)圖像時(shí)根據(jù)需求采取不同的格式，對(duì)于不需要透明的圖像可以存儲(chǔ)為jpg，需要半透明圖像存儲(chǔ)為png，對(duì)于全透明且像素要求不高的圖像可以存儲(chǔ)為gif或png-8。對(duì)圖像質(zhì)量進(jìn)行控制，保證在顯示效果正常的前提下，存儲(chǔ)為盡可能小的圖像，對(duì)于含透明的圖像，需要根據(jù)具體顯示質(zhì)量而選擇。
5.3）對(duì)于網(wǎng)頁(yè)中特殊的字體，可以使用@font-face進(jìn)行設(shè)置，并根據(jù)實(shí)際情況修改字體包，防止字體包文件過(guò)大。具體設(shè)置方法此處不講解了，可以參見(jiàn)文章《網(wǎng)絡(luò)字體@font-face 如何處理網(wǎng)頁(yè)中的特殊字體》。
5.4）合理使用圖片預(yù)加載和圖片懶加載。
6）上線準(zhǔn)備
6.1）在上線之前對(duì)html、css、js文件進(jìn)行壓縮。
6.2）增加網(wǎng)頁(yè)圖標(biāo) ico文件，具體增加方法此處也不講解了，可詳見(jiàn)《設(shè)置網(wǎng)頁(yè)地址欄前面的標(biāo)志圖標(biāo)》。
五、相關(guān)概念
1、什么是 HTML？
HTML（超文本標(biāo)記語(yǔ)言HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。HTML 運(yùn)行在瀏覽器上，由瀏覽器來(lái)解析。
什么是HTML5？
狹義上的HTML5：HTML4.0的升級(jí)版本；HTML5+CSS3+新增JS API；W3C制定的關(guān)于HTML技術(shù)約定的新規(guī)范。
廣義上的HTML5：HTML5行業(yè)的代名詞；行業(yè)的技術(shù)標(biāo)準(zhǔn)；當(dāng)前新技術(shù)的代名詞。
HTML5技術(shù)概括：新增標(biāo)簽以及屬性；CSS3的新特性；Canvas繪圖；JavaScript的新增API（如重力感應(yīng)、HTML5視音頻等）；移動(dòng)端。
2、什么是 CSS？
CSS 指層疊樣式表 (Cascading Style Sheets)。
含義：樣式定義如何顯示 HTML 元素；樣式通常存儲(chǔ)在樣式表中；多個(gè)樣式定義可層疊為一個(gè)。
優(yōu)點(diǎn)：把樣式添加到 HTML中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題；外部樣式表通常存儲(chǔ)在 CSS 文件中，可以極大提高工作效率。
3、什么是JS？
Javascript（JS）是一種腳本語(yǔ)言，主要用于Web。它用于增強(qiáng)HTML頁(yè)面，通?？梢郧度際TML代碼中。JavaScript是一種解釋型語(yǔ)言。因此，它不需要編譯。
聯(lián)系客服
