高性能之html
下面是alloyteam的總結，還是那句老話站在巨人的肩膀上看的遠。
避免使用Iframe
Iframe也叫內聯frame，可以把一個HTML文檔嵌入到另一個文檔中。使用iframe的好處是被嵌入的文檔可以完全獨立於其父文檔，憑借此特點我們通常可以使瀏覽器模擬多線程，需要註意的是使用iframe並不會增加同域名下的並行下載數，瀏覽器對同域名的連接總是共享瀏覽器級別的連接池，即使是跨窗口或跨標簽頁，這在所有主流瀏覽器都是如此。也因為這樣這讓iframe帶來的好處大打折扣。
在頁面加載過程中iframe元素會阻塞父文檔onload事件的觸發，而開發者程序通常會在onload事件觸發時初始化UI操作。例如，設置登錄區域的焦點。因為用戶習慣等待這一操作，所以盡可能的讓onload事件觸發從而使用戶的等待時間變短是非常重要的。另外開發者會把一些重要的行為綁定在unload事件上，而不幸的是在一些瀏覽器中，只有當onload事件觸發後unload事件才能觸發，如果onload事件長時間未觸發，而用戶已經離開當前頁面，那麽unload事件也將永遠得不到觸發。
那是否有方案可以讓onload事件不被iframe阻塞嗎？有個簡單的解決方案來避免onload事件被阻塞，使用JavaScript動態的加載iframe元素或動態設置iframe的src屬性：
<iframe id=iframe1 ></iframe> document.getElementById(‘iframe1’).setAttribute(‘src’， ‘url’);View Code
但其僅在高級瀏覽器 中有效，對於Internet Explorer 8及以下的瀏覽器無效。除此之外我們必須知道iframe是文檔內最消耗資源的元素之一，在Steve Souders 的測試中 ，在測試頁面中分別加載100個A、DIV、SCRIPT、STYLE和 IFRAME元素，並且分別在Chrome、Firefox、Internet Explorer、Opera、Safari中運行了10次。結果顯示創建iframe元素的開銷比創建其他類型的DOM元素要高1~2個數量級。在測試中所有的DOM元素都是空的，如加載大的腳本或樣式塊可能比加載某些iframe元素耗時更長，但從基準測試結果來看，即使是空的iframe，其開銷也是非常昂貴的，鑒於iframe的高開銷，我們應盡量避免使用。尤其是對於移動設備，對於目前大部分還是只有有限的CPU與內存的情況下，更應避免使用iframe。
避免空鏈接屬性
空的鏈接屬性是指img、link、script、ifrrame元素的src或href屬性被設置了，但是屬性卻為空。如<img src=””>，我們創建了一個圖片，並且暫時設置圖片的地址為空，希望在未來動態的去修改它。但是即使圖片的地址為空，瀏覽器依舊會以默認的規則去請求空地址：
- Internet Explorer 8及以下版本瀏覽器只在img類型元素上出現問題，IE會把img的空地址解析為當前頁面地址的目錄地址。例如：如果當前頁面地址為http://example.com/dir/page.html，IE會把空地址解析為http://example.com/dir/地址並請求。
- 早些版本的Webkit內核瀏覽器 與Firefox 會把空地址解析為當前頁面的地址。如果頁面內有多個空鏈接屬性元素，當前頁面的服務器則會被請求多次，增加服務器的負載。相較桌面瀏覽器對內核的更新升級較積極，這個問題在ios與android系統的移動瀏覽器上問題可能較嚴重。
- 幸運的是所有主流瀏覽器面對iframe的src屬性為空時，會把空地址解析為about:blank地址，而不會向服務器發出額外的請求。
避免節點深層級嵌套
深層級嵌套的節點在初始化構建時往往需要更多的內存占用，並且在遍歷節點時也會更慢些，這與瀏覽器構建DOM文檔的機制有關。例如下面HTML代碼：
<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>
View Code
通過瀏覽器HTML解析器的解析，瀏覽器會把整個HTML文檔的結構存儲為DOM樹結構。當文檔節點的嵌套層次越深，構建的DOM樹層次也會越深。
縮減HTML文檔大小
提高下載速度最顯而易見的方式就是減少文件的大小，特別是壓縮內嵌在HTML文檔中的JavaScript和CSS代碼，這能使得頁面體積大幅精簡。除此之外減少HTML文檔大小還可以采取下面幾種方法：
- 刪掉HTM文檔對執行結果無影響的空格空行和註釋
- 避免Table布局
- 使用HTML5
顯式指定文檔字符集
HTML頁面開始時指定字符集，有助於瀏覽器可以立即開始解析HTML代碼。HTML文檔通常被解析為一序列的帶字符集編碼信息的字符串通過internet傳送。字符集編碼在HTTP響應頭中，或者HTML標記中指定。瀏覽器根據獲得的字符集，把編碼解析為可以顯示在屏幕上的字符。如果瀏覽器不能獲知頁面的編碼字符集，一般都會在執行腳本和渲染頁面前，把字節流緩存，然後再搜索可進行解析的字符集，或以默認的字符集來解析頁面代碼，這會導致消耗不必要的時間。為了避免瀏覽器把時間花費在搜尋合適的字符集來進行解碼，所以最好在文檔中總是顯式的指定頁面字符集。
顯式設置圖片的寬高
當瀏覽器加載頁面的HTML代碼時，有時候需要在圖片下載完成前就對頁面布局進行定位。如果HTML裏的圖片沒有指定尺寸（寬和高），或者代碼描述的尺寸與實際圖片的尺寸不符時，瀏覽器則要在圖片下載完成後再“回溯”該圖片並重新顯示，這會消耗額外時間。所以，最好為頁面裏的每一張圖片都指定尺寸，不管是在頁面HTML裏的<img>標簽，還是在CSS裏。
<img src="hello.png" width="400" height="300">
避免腳本阻塞加載
當瀏覽器在解析常規的script標簽時，它需要等待script下載完畢，再解析執行，而後續的HTML代碼只能等待。為了避免阻塞加載，應把腳步放到文檔的末尾，如把script標簽插入在body結束標簽之前：
<script src="example.js" ></script> </body>View Code
原創文章轉載請註明：
轉載自AlloyTeam：http://www.alloyteam.com/2012/10/high-performance-html/
高性能之html