在Perfection kills上看到他去年寫的一篇文章,關於HTML優化的,講的很詳細,姑且記錄之,儘管裡面有些東西並不能在目前的環境裡應用。在目前WEB應用程式逐漸前端化的潮流下,對客戶端的優化越來越受到關注,如何減少程式碼,如何讓應用程式快速的展示給用戶,如何減少用戶等待時間等等,如雅虎的34條優化黃金法則裡面提出了詳盡的優化方案。
網頁優化的最基礎的部分應該是HTML的優化,具體來說首先就是標記的清理,清理標記不僅能縮減文檔的大小,而且能夠讓文檔更易於維護提高搜索引擎的可見度(Clean markup means better accessibility , easier maintenance, and good search engine visibility),但是即便是那些號稱高度優化過的網頁,如果仔細查看程式碼,依舊可以發現很多可以刪減或者已經過時的標記用法:
1.script裡的註解符
<SCRIPT language=javascript>
<!-- Begin
alert("daimaren.cn");
// End -->
</script>
除非是像95 Netscape 1.0這類幾乎絕跡的瀏覽器需要這樣的處理,在大部分主流瀏覽器裡,往腳本區塊裡加入HTML註解是完全不需要的。
2.<![CDATA[ … ]>
<script type="text/javascript">
//<![CDATA[
…
//]]>
</script>
這是另一個經常在js程式碼區塊裡添加的錯誤預防措施,他是在處理真正的XHTML文件(“application/xhtml+xml” content-type)時為了防止程式碼將形如<號解析為標籤開始,所有在CDATA內包含的內容,都會被當作文字處理。但是實際情況是,目前幾乎所有的網頁的content-type都是text/html,也就是說它們不是嚴格意義上的xml文檔,而是只是text文本,所以這個錯誤預防處理措施是完全不必要的,即使你確定要支援xml的文檔,也要視情況合理的運用CDATA。
3.onclick=”…”, onmouseover=”“等等。
將事件屬性寫在HTML標籤內是一種很不明智的做法,降低了程式碼的可維護性,同時污染了標籤,如果將事件屬性透過JS動態添加,不僅可以靈活控制,還可以利用JS客戶端快取的優勢,讓這些事件屬性不必每次跟隨文件請求。
4.onclick=”javascript:…”
這是一個有趣的javascript混亂,偽協議和內在的事件處理程序可以組成高達10W多種多餘的組合,事實是事件屬性內部的內容在解析後成為body的一個fucution,這個function然後會作為事件處理程序,所以javascript:在此成為一個無用的多餘標籤。
5.href=”javascript:void(0)”
繼續javascript:偽協議,有一個臭名昭著的就是javascript:void(0),他是用來避免預設的錨點動作的,它在JS無法正常解析或出錯時(disabled/not available/errors)會讓錨點完全不可用,理想的解決方案是在href裡填寫正確的URL,然後用JS去動態改寫,這樣即使在JS未執行的情況下也不會出現錨點不可用的狀況。 HREF =「#」是一個精簡且更快的替代方案。
6. style=”…”
沒有什麼本質性的錯誤,只是後期維護麻煩,另外移到外聯的CSS檔案中可以快取起來提高頁面執行效率。
7. <script language=”Javascript” … >
最容易誤解的屬性之一,覺得這個是腳本的“語言”,這個屬性是如此古老,在1999年就已經不推薦被使用了。
8. <script charset=”…” … >
<script type="text/javascript" charset="UTF-8">
…
</script>
script標籤的另一個容易被誤解的屬性,charset在HTML4.01裡的描述:請注意,charset屬性是指字元的src屬性所指定的腳本編碼,它不涉及的腳本元素的內容。 (Note that the charset attribute refers to the character encoding of the script designated by the src attribute; it does not concern the content of the SCRIPT element.),也就是說他只在外聯腳本的時候指定腳本文件的編碼格式。不建議使用。