第七章網(wǎng)頁(yè)代碼優(yōu)化

1、7.1 代碼優(yōu)化簡(jiǎn)介代碼優(yōu)化是頁(yè)面優(yōu)化的重要環(huán)節(jié)，是頁(yè)面優(yōu)化的基礎(chǔ)。代碼優(yōu)化就是對(duì)網(wǎng)頁(yè)中的HTML源代碼進(jìn)行必要的調(diào)整，以提高頁(yè)面的友好性。頁(yè)面經(jīng)過(guò)代碼優(yōu)化后： 一方面可以有效地精簡(jiǎn)頁(yè)面中的冗余代碼，加快網(wǎng)頁(yè)顯示速度，減少網(wǎng)頁(yè)占用搜索引擎服務(wù)器的存儲(chǔ)空間，提高用戶體驗(yàn)和搜索引擎友好性； 另一方面，可以有效地突出頁(yè)面的主題，提高頁(yè)面的相關(guān)性。主要包括：精簡(jiǎn)代碼、頭部?jī)?yōu)化、權(quán)重標(biāo)簽使用、圖片優(yōu)化。7.2 精簡(jiǎn)代碼精簡(jiǎn)代碼是指清除或者簡(jiǎn)化頁(yè)面中的代碼，從而達(dá)到降低頁(yè)面體積、提高頁(yè)面的用戶體驗(yàn)及搜索引擎友好性的目的。頁(yè)面代碼的精簡(jiǎn)包括五大環(huán)節(jié)：清理垃圾代碼、HTML標(biāo)簽轉(zhuǎn)換、CSS優(yōu)化、JS優(yōu)化及表格

2、優(yōu)化。其中，清理垃圾代碼是最重要、最基礎(chǔ)的7.2.1 清理垃圾代碼清理垃圾代碼就是指刪除頁(yè)面中的冗余代碼。一個(gè)頁(yè)面經(jīng)過(guò)處理后，可以刪除降級(jí)80%的冗余代碼。垃圾代碼是指那些在刪除的情況下也不會(huì)影響頁(yè)面正常顯示的非必要代碼。這些代碼占據(jù)著龐大的空間，不但耗費(fèi)用戶下載頁(yè)面的時(shí)間，還占用著搜索引擎巨大的存儲(chǔ)空間及數(shù)據(jù)分析時(shí)間。垃圾代碼的產(chǎn)生一般情況下，我們會(huì)使用網(wǎng)頁(yè)制作軟件制作網(wǎng)頁(yè)，例如：Frontpage、word和Dreamweaver。除了站大部分的必須代碼以外，還有一小部分可有可無(wú)的垃圾代碼。用不同的工具制作的網(wǎng)頁(yè)，生成的垃圾代碼也不一樣，其中word生成的最多，而Dreamweaver代碼

3、最為精簡(jiǎn)。完全避免生成垃圾代碼的方法，就是通過(guò)手工編寫代碼。在掌握這種方法之前，最好的方式是用Dreamweaver編寫，然后手工清理。垃圾代碼的清理網(wǎng)頁(yè)制作軟件產(chǎn)生的常見(jiàn)垃圾代碼包括：空格、默認(rèn)屬性、注釋語(yǔ)句、以及空語(yǔ)句?？崭瘢?空格字符是網(wǎng)頁(yè)中最常見(jiàn)的垃圾代碼。這里的空格指的是在代碼環(huán)境下敲擊鍵盤空格鍵產(chǎn)生的符號(hào)，并非HTML語(yǔ)言中的“&nbsp ;”，網(wǎng)頁(yè)中的每個(gè)空格都是一個(gè)字符； 初步統(tǒng)計(jì)，空格字符約占頁(yè)面總體積的1.5%； 空格字符通常會(huì)出現(xiàn)在每行代碼的開始和結(jié)束處，還有就是空行中1.網(wǎng)頁(yè)制作時(shí)，網(wǎng)頁(yè)制作軟件生成代碼時(shí)，默認(rèn)產(chǎn)生的縮進(jìn)字符；2.空白行：編寫代碼時(shí)，常利用空行或

4、者注釋對(duì)不同功能模塊進(jìn)行分割產(chǎn)生的；3.每行代碼結(jié)束處的空格字符：是在編輯HTML代碼時(shí)不小心加上去的;Dreamweaver中空格字符的刪除對(duì)于每行代碼開始前的空格字符 轉(zhuǎn)至HTML代碼編輯模式； 按Ctrl+A選擇全部代碼； 使用組合鍵Shift+Tab，直至刪除所有空格為止。對(duì)于空行中的空格字符，只能手動(dòng)清理。對(duì)于每行代碼結(jié)尾處的空格字符 用鼠標(biāo)選擇“”+“一個(gè)空格字符”， 再按Ctrl+F，彈出查找和替換窗口； 在替換處填上“”，再點(diǎn)擊“替換全部”即可默認(rèn)屬性在利用網(wǎng)頁(yè)軟件制作網(wǎng)頁(yè)時(shí)，通常會(huì)產(chǎn)生一些默認(rèn)屬性的代碼。這些屬性是可以刪除的，而且并不會(huì)影響頁(yè)面效果。例如： align=“l(fā)e

5、ft”，橫向左對(duì)齊屬性，默認(rèn)情況下就是左對(duì)齊 valign=“middle” size=“3”：文字大小屬性，默認(rèn)情況下就是3號(hào)字體； target=“_self”：新頁(yè)面打開屬性值，默認(rèn)情況下就是在當(dāng)前窗口中打開注釋語(yǔ)句注釋語(yǔ)句是用于對(duì)代碼功能或作用進(jìn)行說(shuō)明的語(yǔ)句，其中的內(nèi)容對(duì)于普通用戶來(lái)說(shuō)是不可見(jiàn)的，即在頁(yè)面中不顯示注釋標(biāo)簽里的內(nèi)容。制作網(wǎng)頁(yè)時(shí)，我們或多或少會(huì)添加注釋語(yǔ)句以增強(qiáng)代碼的可讀性，但是，過(guò)多的注釋會(huì)占用大量的空間。如果在里面添加大量的關(guān)鍵詞，還會(huì)被搜索引擎認(rèn)為是堆砌關(guān)鍵字，從而受到懲罰。在添加注釋語(yǔ)句是，要堅(jiān)守一個(gè)原則：絕不添加哪些即使刪除后也不會(huì)影響網(wǎng)頁(yè)源代碼可讀性的注釋語(yǔ)句。空語(yǔ)句簡(jiǎn)單的說(shuō)，空語(yǔ)句就是指標(biāo)簽間不存在任何內(nèi)容的語(yǔ)句。例如：就是一個(gè)典型的空語(yǔ)句。空語(yǔ)句的清理主要是針對(duì)即使刪除后也不會(huì)影響頁(yè)面正?，F(xiàn)實(shí)的標(biāo)簽。在Dreamw