作為前端開發(fā)人員來(lái)說(shuō)，不但要開發(fā)出能兼容各大主流瀏覽器的頁(yè)面，而且還需要懂得去優(yōu)化前端頁(yè)面。下面由學(xué)習(xí)啦小編為大家整理的優(yōu)化前端頁(yè)面，希望大家喜歡!

　　優(yōu)化前端頁(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 合理的填寫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)簽選用與書寫規(guī)范

　　2.2.1 書寫HTML代碼的時(shí)候，遵循標(biāo)簽語(yǔ)義化的要求，根據(jù)標(biāo)簽的語(yǔ)義性進(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)衡嵌套層級(jí)以及擴(kuò)展性等多個(gè)方面后，在適當(dāng)位置使用三層嵌套技術(shù)。

　　2.2.5 合理書寫a標(biāo)簽的title、img標(biāo)簽的title和alt，提升網(wǎng)站的SEO。

　　3 .樣式

　　3.1 基本代碼規(guī)范

　　3.1.1 CSS規(guī)則命名中，一律采用小寫加中劃線的方式，不使用下劃線或大寫字母，命名采用更簡(jiǎn)明有語(yǔ)義的英文單詞進(jìn)行組合，進(jìn)行合理的縮寫

　　3.1.2 CSS代碼的書寫順序遵循CSS樣式的渲染順序：顯示屬性-自身屬性-文本屬性-其他。

　　3.1.3 避免class與id重名，對(duì)于class名使用中劃線，而id名遵循小駝峰命名法。

　　3.1.4 在書寫網(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è)瀏覽器，需要書寫各個(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)容撐開，也不需要設(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)邊距撐開，兄弟級(jí)別標(biāo)簽之間的距離可采用外邊距。

　　4 .JS方面

　　4.1 變量

　　4.1.1 合理命名，遵循基本的命名規(guī)范，并遵循命名推薦：屬性/變量以名詞開頭，方法/函數(shù)以動(dòng)詞開頭，遵循小駝峰，構(gòu)造函數(shù)使用大駝峰，常量所有字母均大寫。

　　4.1.2 所有變量聲明都放在函數(shù)的頭部。

　　4.1.3 所有函數(shù)都在使用之前定義。

　　4.1.4 盡量避免使用全局變量，防止全局作用域被污染。

　　4.1.5 合理書寫大括號(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)中常見的長(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ū)ο蟮臅鴮懛椒ǎ嵘a的復(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做緩存處理。

　　4.5.5 合理使用AJAX中發(fā)送數(shù)據(jù)的方法，當(dāng)文檔中允許使用post或get發(fā)送時(shí)，優(yōu)選選用get方法。

　　4.6 框架

　　4.6.1 jQuery等插件的合理引用，處理常見的瀏覽器兼容問(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è)置方法此處不講解了，可以參見文章《網(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文件，具體增加方法此處也不講解了，可詳見《設(shè)置網(wǎng)頁(yè)地址欄前面的標(biāo)志圖標(biāo)》。

　　優(yōu)化前端網(wǎng)站

　　一、提倡前端開發(fā)工程師在書寫xhtml的時(shí)候做到結(jié)構(gòu)語(yǔ)義化。

　　結(jié)構(gòu)中主要包括了head和body兩個(gè)部分，但是我們經(jīng)常說(shuō)的是結(jié)構(gòu)語(yǔ)義化主要是body中的標(biāo)簽，但是我在這里還是簡(jiǎn)單的說(shuō)一下head，head中其實(shí)包括了一些對(duì)于我們seo很有用的一些東西，比如title,Description,Keywords,這些東西在蜘蛛抓取的時(shí)候都是有幫助的，當(dāng)然，還有其他的一些，我在此就不一一說(shuō)明了，比如設(shè)置緩存等一些其他的信息。

　　那么body中的話，包括的標(biāo)簽就很多了，我覺得作為一個(gè)合格的前端開發(fā)人員你應(yīng)該去熟悉他們，比如div,span,h,ul,ol,dl,p等等這類的標(biāo)簽的使用。應(yīng)該非常合理，還有就是注意h標(biāo)簽的斷層，及h1標(biāo)簽的使用，這些都是非常重要的。

　　同時(shí)在我們的結(jié)構(gòu)中不要出現(xiàn)style和onclick這樣的內(nèi)聯(lián)的樣式和事件。希望大家能夠注意結(jié)構(gòu)與表現(xiàn)、行為的分離。

　　二、css，js文件數(shù)量及大小的優(yōu)化

　　那么關(guān)于css、js的優(yōu)化的話，一般情況下建議css和js采用外聯(lián)式。但是如果你的頁(yè)面內(nèi)容比較多，設(shè)計(jì)師把整個(gè)效果做得比較花的話，恐怕css就非常多了，那么這種情況下，你一定要把你的css規(guī)劃好，盡量的采用縮寫，這樣可以減少css文件的大小，那么對(duì)css做相應(yīng)的規(guī)劃也可以減少css的個(gè)數(shù)，減少http請(qǐng)求數(shù)，js同理。

　　三、背景圖片數(shù)量及大小的優(yōu)化

　　當(dāng)我們將設(shè)計(jì)師的設(shè)計(jì)稿還原成靜態(tài)頁(yè)面后，除非頁(yè)面所有的修飾全是色塊，內(nèi)容全是文字，沒(méi)有圖片，如果不是這樣的話，那么我們需要對(duì)圖片做優(yōu)化處理。當(dāng)然內(nèi)容圖片我們是沒(méi)有辦法了，因?yàn)樗菍儆趦?nèi)容部分的，一般情況是由于編輯處理，當(dāng)然，我在還是有一個(gè)小小的建議，如果我們的網(wǎng)站中需要有內(nèi)容圖片，希望編輯能夠?qū)⑺麄冏顑?yōu)化以后，在進(jìn)行上傳，一會(huì)兒告訴我的方法，下面我在說(shuō)說(shuō)，作為前端開發(fā)應(yīng)該如何處理我們的修飾(背景)圖片。

　　由于我們的背景圖片數(shù)量比較多，這樣的話，會(huì)給服務(wù)器帶來(lái)影響，增加了http請(qǐng)求數(shù)，我們是否有一種好的解決辦法呢?這個(gè)答案是肯定的，如果你是一個(gè)合格的前端開發(fā)，你應(yīng)該清楚，在我們的css定義背景的時(shí)候，可以通過(guò)坐標(biāo)來(lái)實(shí)現(xiàn)對(duì)背景進(jìn)行定位的，既然如此，那么我們可以將這些背景合并起來(lái)，這樣即可減少http請(qǐng)求數(shù)，同時(shí)，我們?cè)诒尘罢系臅r(shí)候，也需要考慮圖片質(zhì)量，同時(shí)也需要考慮圖片的大小，我在以前有寫過(guò)相應(yīng)的博文。

　　四、內(nèi)容圖片的大小的優(yōu)化

　　其實(shí)剛才已經(jīng)說(shuō)了內(nèi)容圖片的問(wèn)題，那么我在這里呢，告訴大家一個(gè)比較簡(jiǎn)單的方法，就是使用雅虎提供的一個(gè)工具?！　〔贿^(guò)他這個(gè)工具我覺得對(duì)于我們需要發(fā)布的內(nèi)容圖片還是比較麻煩，但是他可以進(jìn)行優(yōu)化，優(yōu)化圖片的目的，最開始已經(jīng)說(shuō)了，圖片越小，我們的用戶下載速度越快，當(dāng)然對(duì)企業(yè)的服務(wù)器的帶寬也可以起到節(jié)省的作用。

　　前端開發(fā)的簡(jiǎn)單的建議

　　1、我們做還原的頁(yè)面能夠通過(guò)http://validator.w3.org的驗(yàn)證，當(dāng)然css希望也能通過(guò)http://jigsaw.w3.org/css-validator/validator難證，不過(guò)有時(shí)候由于需要兼容多瀏覽器，會(huì)受到hack的影響，css不做強(qiáng)制要求。

　　2、作前端的我覺得應(yīng)該知道yslow。如果不知道可以看看我以前寫的文章，你覺得你的靜態(tài)頁(yè)面應(yīng)該能夠通過(guò)yslow2.0的classic(V1)級(jí)別的檢測(cè)，檢測(cè)的結(jié)果我覺得應(yīng)該得到A。

　　3、你的背景圖片保證不超過(guò)3個(gè)以上，你的css文件不超過(guò)2個(gè)，js文件不超過(guò)3個(gè)。而且良好的遵守web標(biāo)準(zhǔn)的一些規(guī)定，css放到head中，js文件放到之前或者之后。

　　4、當(dāng)然就是希望你能夠?qū)δ愕捻?yè)面進(jìn)行裸體檢查。其實(shí)就是來(lái)檢驗(yàn)?zāi)愕慕Y(jié)構(gòu)語(yǔ)義化是否有效果。

　　裸體檢查：就是將你的css和js都去掉，查看你的html，看這些內(nèi)容你是否能夠看懂。

　　5、檢測(cè)你的h標(biāo)簽是否斷層。

　　6、建議body中增加text-align:center。

　　7、當(dāng)然還有很多，比如什么id，class的命名呀，這些東西，我覺得應(yīng)該是你的團(tuán)隊(duì)中應(yīng)該做的事情。