### 一.代碼優化概述
關于代碼優化的知識是純理論的知識，學習的很枯燥。在學到CSS時，不免遇到CSS+div進行代碼優化的知識，因此在網上看了一些關于這方面的知識，簡單的整合一下，梳理自己所了解的代碼優化問題。所謂代碼優化是指對程序代碼進行等價（指不改變程序的運行結果）變換。程序代碼可以是中間代碼，也可以是目標代碼。等價的含義是使得變換后的代碼運行結果與變換前代碼運行結果相同。優化的含義是最終生成的目標代碼短（運行時間更短、占用空間更小），時空效率優化。原則上，優化可以在編譯的各個階段進行，但最主要的一類是對中間代碼進行優化，這類優化不依賴于具體的計算機。簡單地說，就是在不改變程序運行效果的前提下，對被編譯的程序進行等價變換，使之能生成更加高效的目標代碼。
### 二.那么對于我們學習Web前端開發的網頁制作來說有哪些要求呢？
(1)盡量采用div+css布局您的頁面，div+css布局的好處是讓搜索引擎爬蟲能夠更順利的、更快的、更友好的爬完您的頁面；div+css布局還可以大量縮減網頁大小，提高瀏覽的速度，使得代碼更簡潔、流暢、更容易放置更多內容。
(2)盡量縮減您的頁面大小，因為搜索引擎爬蟲每次爬行您的站點時，存儲數據的容量有限，一般建議100KB以下，越小越好，但不能小于5KB。網頁大小減少還有一個好處，能夠促使您的站點形成巨大的內部鏈接網。
(3)盡量少用無用的圖片和flash。內容索引所派出的搜索引擎爬蟲，不認識圖片，只能根據圖片“ALT,TITLE”等屬性的內容判斷圖片的內容。對于flash搜索引擎爬蟲更是視而不見。
(4)盡量滿足w3c標準，網頁代碼的編寫滿足W3C標準，能夠提升網站和搜索引擎的友好度，因為搜索引擎收錄標準，排名算法，都是在W3C標準的基礎上開發的。
(5)盡量更深層次套用標簽h1、h2、h3、h4、h5…..，讓搜索引擎能夠分辨清晰網頁那一塊很重要，那一塊次之。
(6)盡量少用JS，JS代碼全部用外部調用文件封裝。搜索引擎不喜歡JS，影響網站的友好度指數。
(7)盡量不使用表格布局，因為搜索引擎對表格布局嵌套3層以內的內容懶的去抓取。搜索引擎爬蟲有時候也是比較懶的，望各位一定要保持代碼和內容在3層以內。
(8)盡量不讓CSS分散在HTML標記里，盡量封裝到外部調用文件。如果CSS出現在HTML標記里，搜索引擎爬蟲就要分散注意力去關注這些對優化沒有任何意義的東西，所以建議封裝到專用CSS文件中。
(9)清理垃圾代碼，要把代碼編輯環境下敲擊鍵盤上的空格鍵所產生的符號；把一些默認屬性代碼，不會影響顯示的代碼；注釋語句如果對代碼可讀性沒有太大影響，清理這些垃圾代碼，會減少不少的空間。
一個網頁是由多種語言組成的，最基礎的是HTML，CSS和JS。那么代碼優化對于這些的要求又是什么？
### 三.html優化
html代碼是最為基礎的網站制作語言，對于網站優化來說，html代碼也有一定的影響，是特別需要注意的優化細節之一。
(1)title標簽
title標簽就是網頁的標題，是一個對于網站優化有很大影響的html標簽，每個頁面都必須有且內容不同！基本格式為<title>網頁標題</title>。
(2)META元素
?meta元素在瀏覽器界面是無法看到的html標簽，對于優化有影響的主要有兩個，一個是關鍵字（keywords）、一個是描述（description）。其實，這兩個標簽隨著seoer的胡亂使用，對于網站優化已經沒有多少用處了，你完全可以不用設定，但我們還是習慣性的設置一下較為妥當。關鍵字，設定與本頁內容相關的主關鍵詞一到三個，之間用英文狀態下的逗號分割。需要注意的是，不要再濫用關鍵字，除了給搜索引擎不好的印象外別無他用。描述還是很有用的一個東東了，雖然對于網站的優化排名么有多大的影響，但會作為搜索引擎展示網站索引的一個依據，可以把你的主關鍵字鏈接起來組合成一段通順的話，一般60到80字即可。格式為:
<meta name="keywords"content="">
<meta name="description"content="">
(3)h標簽
h標簽在html代碼中是“標題”的意思，就如一篇文章，標題是文章最為重要的一個對象，也是搜索引擎在排名時重點考慮的一個對象。html中的h標簽一共有六個，分別是h1/h2/h3/h4/h5/h6，分別代表不同的級別，我們稱之為一級標題、二級標題……當然，一級標題具備更多的權重。需要注意的是h標簽是塊級元素，默認是粗體顯示，獨占一行，前后會有空行。當然，你可以利用css來改變這些效果。
關于h標簽的使用，需要根據實際情況來使用，不可任意濫用。如一篇文章，不可能出現多個一級標題，所以h1，在同一個頁面中只能出現一次，而h2等則可以出現多次，根據你需要表現的內容的重要程度，分別使用不同的h標簽即可。特別注意，h標簽中最好出現關鍵字！還有就是，隨其自然，萬不可刻意地用h標簽來處理某些關鍵字！
基本格式為：<h1>這里是標題文字</h1>
(4)加強和強調
strong被認為是“加強”，em被認為是“強調”，也就是這兩個標簽是有特殊含義的，這對于網站優化至關重要。多數時候，我們在優化網站時會對關鍵字進行突出，這時使用strong或em就比使用B或者I好很多，特別謹記！
(5)alt和title
alt是圖像中的注釋，title是圖像或鏈接的標題，這兩者對于優化，尤其是圖像的優化至關重要，但也不要濫用！
一般在插入圖像時，我們在alt中設置圖像的描述內容，其中可以包含關鍵字但不要故意堆砌，title則當作圖像標題來處理。特別需要注意的是，這些內容是不可以重復的！也就是說，當你的頁面中有多張圖像，你不能每張圖像的描述和標題都設置成一樣的，這樣很容易被搜索引擎懲罰！
<img src="test.jpg"alt="一個美女站在黃昏的街頭默默等待愛人的回歸，眼神中充滿了憂傷"title="靜待">除此之外，title屬性在a標簽中也有所使用，只是有些泛濫了，視覺效果也不好，影響用戶體驗，所以筆者并不推薦，除非你的a標簽中的內容是一張圖片。
<a href="product.html"title="產品展示">產品展示</a>
(6)縮寫abbr(目前我沒有遇到過)
這個標簽是自定義的一種縮寫方式，可以利用它合理的添加一些關鍵字，同樣不要濫用。如下所示：
公司的產品涉及<abbr title="以石材為原料的雕刻作品">石雕</abbr>、<abbr title="以銅料為胚，運用雕刻、鑄塑等手法制作的一種造型藝術">銅雕</abbr>、<abbr title="附屬在某一平面上的雕刻藝術">浮雕</abbr>、鏤雕等各種雕刻形式。
(7)canonical標簽
Canonical(權威鏈接標記)是09年，Google，Yahoo及Microsoft三大搜索引擎聯合推出了一個旨在減少重復內容的一個建議，并不是命令，也就是說這個標簽搜索引擎可能不遵守。國內最大的中文搜索引擎百度也已經支持
Canonical標簽。
部分搜索引擎引入了Link的一個新屬性Canonical。A頁面聲明B為權威鏈接，B聲明C為權威網頁，則搜索引擎會認為C是A和B共同的首選權威版本。此時Canonical標簽起到了301重定向的作用。只能作用于同一個域名所在的網址，不能作用于不同域名上的重復內容。也就是說如果文章被其它網站抄襲，也不會因為這個標簽而給你的原文章帶來權重。如果是跨站，可以使用301重定向。該鏈接標簽可用于定義相對地址，也可用于定義絕對地址。但為了保險起見，建議使用絕對地址。
使用方法：為網頁指定權威鏈接（authoritative|canonical URL），以解決副本內容（duplicate content）問題。
使用樣式：<link rel=”canonical” href=”網頁權威鏈接”/>
### 四.CSS優化
于網站排名優化來說，css的幾乎沒有任何影響，但往大的方向如網站優化來說，樣式表css的優化就至關重要了，其主要作用即是提高網頁的響應速度。
(1)外鏈css
css的使用有多種方式，一是嵌入式，即在html標簽中直接定義樣式表，如下所示:<p style="font-family:arial;font-size:16px;font-weight:bold;">Outside now its raining,and tears are falling from my yes…</p>
還有一種是直接定義在頁面頭部的如下：<styletype="text/css">p{ background:#f1f1f1;color:#333;line-height:20px;}?</style>這兩種方式都是把css寫在當前html中，這樣會造成hml文檔變大，降低網頁的響應速度，所以我們需要外鏈css，將所有與本頁面相關的樣式寫入到該樣式表中：<link href="style/common.css"rel="stylesheet"type="text/css"/>
(2)精簡css
對于這一點需要一定的css能力才可以做到了。所謂精簡，指的是用盡可能少的樣式代碼實現整個網頁的樣式效果，需要充分利用css的繼承和綜合使用，舉一個簡單的例子來說明。如頁面中的鏈接，全部不需要下劃線、大部分為12像素，但鏈接的顏色并不相同，個別的字體效果也不相同，我們就可以這樣來寫：
a{ text-decoration:none; font-size:12px;}/*定義通用a樣式*/
? ? a.a_red{ color:#e00;}
? ? a.a_blue{ color:#009;}
? ? a.a_menu{color:#fff;font-size:14px;font-weight:bold;}/*針對特殊a標簽只指定特殊樣式*/
因為css的繼承作用，a_red和a_blue都具備沒有下劃線、12像素這一樣式，而a_menu同樣具備沒有下劃線，但因指定了大小，就不再繼承12像素的指定而使用14像素。
(3)整合css
一般情況下，前端制作人員喜歡把通用樣式寫成一個文件，把專用樣式寫成另一個文件以便各個頁面調用。如筆者，就喜歡把頁面通用樣式（包括通用的布局樣式、文字樣式等）寫在common.css中，而把專用的寫在另一個樣式表中。如首頁，我們就需要調用common.css和index.css兩個樣式表文件。這樣做，對于前端來說是正確的。但對于優化，卻不太好。多一個文件調用就需要多一次請求，當然也會多耗費一點時間。所以，在網站制作完成后，我們需要把頁面的所有樣式合并大一起以提高網頁的響應速度！但需注意，合并css不利于網站后期整改，權衡利弊各取所需吧，具體是否合并還需根據你的實際情況而定。
(4)壓縮css
壓縮css其實很簡單，就是去掉多余的空格和換行。實現起來也非常的簡單，網上有很多工具，請自行搜索“css壓縮”即可找到很多在線壓縮工具。同上面一點，壓縮后的css不便于后期整改，需要自己權衡取舍。
### 五.JavaScript優化編輯
javascript代碼對于網站排名優化同樣沒有多大影響，但從網站優化的角度來看卻是至關重要的一步優化操作，優良的javascript代碼可以大幅度提升網頁的響應速度！
(1)外鏈js代碼
js代碼跟css的使用差不多，都有三種方式：
內部定義：<A onclick="if(confirm('確認？'){...}else{...})"href="#">confirm</A>
頭部插入：<script>...</script>
外鏈調用：<SCRIPT language=javascript type=text/javascript src="jquery-1.7.2.min.js"></SCRIPT>
(2)精簡js代碼
這一點需要更為專業的js技術才能做到，盡可能根據需要實現的效果編寫js，而不用從網上找一段代碼直接拿來用，網上的代碼很多功能很全，從而質量很大，而其中的很多功能對于我們要實現的效果是沒有任何用處的，所以廣拓企業網站建議你針對需要實現的效果定制js以便得到更為精簡的代碼，從而提高網頁的響應速度。
(3)壓縮js代碼
對于這點，網上也有很多的工具，請百度查詢“js壓縮工具”即可。
(4)置底js代碼
一般情況下，我們都是把js放到head之間的，這種方式在頁面加載時即會加載，當然也就導致響應速度的降低，百度站長平臺建議把js放到頁面最底部，也就是</html>之外。等html加載完畢之后才加載js代碼，當然，有部分特殊功能的js代碼是沒有辦法放到頁面底部的，具體請根據實際情況操作。
補充說明：針對js圖像特效等，可能會影響網站關鍵字排名的！有的特效圖像的路徑、說明等都是寫入到js中的，這種特效盡量不要使用。
上面說到了三種技術對網頁優化起到的作用，我們都知道CSS+div是一個重要的優化過程。我們要著重說一下CSS+DIV的優化問題。
### 六.DIV+CSS優化
對于蜘蛛在爬行一個網站的頁面時，若是有太多的垃圾代碼，會使搜索蜘蛛對其產生不友好、不信任感，同時蜘蛛的爬行速度也會因此而減緩，對于網站SEO而言，可謂一大忌。就如傳統的用table頁面，對此我們就需要對網站進行代碼優化，而這便需要動用CSS+div了，下面便來談談使用CSS+div進行代碼優化的一些益處。
(1)精簡代碼，降低重構難度。
網站使用DIV+CSS布局使代碼很是精簡，相信大多朋友也都略有所聞，css文件可以在網站的任意一個頁面進行調用，而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個門戶網站的話，需手動改很多頁面，而且看著那些表格也會感覺很亂也很浪費時間，但是使用css+div布局只需修改css文件中的一個代碼即可。
(2)網頁訪問速度
使用了DIV+CSS布局的網頁與Table布局比較，精簡了許多頁面代碼，那么其瀏覽訪問速度自然得以提升，也從而提升了網站的用戶體驗度。
(3)SEO優化
采用div-css布局的網站對于搜索引擎很是友好，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡潔、結構化的代碼更加有利于突出重點和適合搜索引擎抓取。
(4)瀏覽器兼容性
DIV+CSS相比TABLE布局，更容易出現多種瀏覽器不兼容的問題，主要原因是不同的瀏覽器對web標準默認值不同。國內主流是ie，firefox及chrome用的較少，在兼容性測試方面，首先需要保證在ie多版本不出現問題，這里涉及到一些方法和技巧，可以針對具體問題在網站查找解決辦法。
(5)CSS+DIV網頁布局的時候常犯的小錯誤
1.檢查HTML元素是否有拼寫錯誤、是否忘記結束標記即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。
2.檢查CSS是否書寫正確
檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。
3.用刪除法確定錯誤發生的位置
如果錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊后顯示恢復正常，即可確定錯誤發生的位置。
4.利用border屬性確定出錯元素的布局特性
使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。
5.float元素的父元素不能指定clear屬性
MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。
6.float元素務必指定width屬性
很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。
另外指定元素時盡量使用em而不是px做單位。
7.float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定特別的值。
8.float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。
9.是否重設了默認的樣式?
某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置為0、列表樣式設置為none等。
10.是否忘記了寫DTD?
如果無論怎樣調整不同瀏覽器顯示結果還是不一樣，那么可以檢查一下頁面開頭是不是忘了寫下DTD聲明。最后，需要注意的是，蜘蛛不喜歡一個頁面有太多的css代碼，否則同樣會影響蜘蛛的爬行，影響搜索引擎的收錄，所以采用外部調用的方式調用CSS是非常不錯的方法。而同時，若非必須太多花哨的網站，采用CSS布局，同樣可以到達所想要的效果。如網站導航中的文字顏色變化、下拉菜單等。
