高性能HTML

一、避免使用iframe
　　iframe也叫內聯frame，可將一個HTML文檔嵌入另一個HTML文檔中。
　　iframe的好處是，嵌入的文檔獨立于父文檔，通常也借此使瀏覽器模擬多線程。缺點是：

　　①雖然iframe能模擬多線程，但主流瀏覽器的同域名并行下載數是不變的，瀏覽器對同域名的鏈接總是共享瀏覽器級別的連接池，
　　?? 即使是不同窗口或標簽頁的同域名網頁。
　　②在頁面加載時，iframe會阻塞父文檔onload事件的觸發。并且有些瀏覽器需在觸發onload事件后才能被觸發onunload事件。
　　?? 故用戶用onload事件長久未觸發而離開頁面時，不會觸發onunload事件。
　　　　※不兼容IE6~8的解決方案：使用JavaScript動態加載iframe元素或動態設置其src屬性。

<iframe id=ifr ></iframe> document.getElementById( ‘ifr’ ).setAttribute( ‘src’ , ‘url ’ );

?　　③iframe是文檔內最消耗支援的元素之一，即使是空iframe的開銷也是昂貴的。【通過Steve?Souders測試】

二、避免空連接屬性
　　空連接指：img、link、script?和?iframe元素的src或href屬性的值為空。（如src?=?””）
　　設置了空連接后瀏覽器依然會以默認規則發送請求：
　　①IE6~8中只有img元素會出問題：IE會將img的空地址解析為當前頁面地址的目錄地址并請求。
　　　如當前網頁地址為http://aaa.com/bb/c.html，img的地址會被解析為http://aaa.com/bb
　　②早些版本的Webkit和Firefox會將空連接解析為當前頁面的地址。在ios與android中此問題較嚴重。
　　　如果頁面有多個空連接屬性元素，會增加服務器的請求次數。
　　③幸運的是，主流瀏覽器對iframe的src屬性值為空時，會解析為about:blank地址，而不發送額外請求。

三、避免節點深層級嵌套
　　層級越深的節點在初始化構建時，所占內存越多。
　　通過瀏覽器HTML解析器會將整個HTML文檔的結構存儲為DOM樹結構。當節點嵌套層次越深，構建的DOM書層次也越深。

四、縮減HTML文檔大小
　　①刪除對執行結果無影響的空格空行和注釋；
　　②避免table布局；
　　③使用HTML5；

五。顯式指定文檔字符集
　　在HTML頁面開時指定字符集有助于瀏覽器立即開始解析HTML代碼。
　　HTML文檔通常被解析為一序列的帶字符集編碼信息的字符串，通過Internet傳送。
　　字符集編碼在HTTP響應頭中，或HTML標記中指定。瀏覽器通過指定的字符集，吧編碼解析為可現實在屏幕上的字符。
　　若瀏覽器無法獲知頁面的編碼字符集，一般會在執行腳本和渲染頁面之前，先將字節流緩存，再搜索可進行解析的字符集 或 以默認字符集來解析。

六、顯示設置圖片的寬高
　　有時需要在頁面加載完之前，就對頁面布局進行定位。
　　若頁面中的圖片沒指定尺寸，或尺寸與實際圖片大小不符，瀏覽器會在圖片下載完成后再"回溯"該圖片并重新顯示，從而浪費時間。
　　故最好為頁面的圖片設置指定尺寸（行內樣式或CSS樣式）。

<img src="hello.png" width="400" height="300">

七、避免 腳本阻塞加載
　　瀏覽器在解析常規script標簽時，會等待script下載完畢后，才解析執行，之后的HTML代碼就只能等待。
　　故應該將腳本放在文檔的末尾：

<script src="example.js" ></script></body>

?

?

高性能CSS

一、避免使用@import
　　CSS2.1加入的@import，會使頁面在加載時添加額外延遲。
　　由于瀏覽器不能并行下載樣式，會導致頁面增添額外的往返耗時。而使用<link>能并行下載樣式，但任然是多次請求。

二、避免AlphaImageLoader濾鏡
　　此濾鏡能解決IE6即一下版本顯示PNG圖片的半透明效果，但會在加載圖片時終止內容的呈現，并凍結瀏覽器。
　　在每個元素(不僅僅是圖片)都會運算一次，添加內存開支。
　　應使用PNG8格式來代替，或用下劃線(_filter)只針對IE6。

三、避免CSS表達式
　　CSS表達式是設置動態CSS屬性的即強調又危險的方法。IE5開始支持，IE獨有。

//實現每隔一小時切換一次背景顏色 background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

　　CSS表達式的缺點是技術頻率極大，在頁面顯示、縮放、滾動 或 移動鼠標，都會重新計算一次。移動隨便會達到1w次以上的計算量。
　　①使用一次性的表達式能減少計算次數，在第一次運行時將結果賦給指定樣式屬性，并用該屬性代替CSS表達式。
　　②如果樣式屬性必須在頁面周期內動態地改變，使用時間句柄代替CSS表達式是一個可行的辦法。

四、避免通配選擇器
　　優化選擇器的原則是減少匹配時間。CSS選擇器的匹配機制是：從右向左進行規制匹配的！
　　　　#header > a { font-weight:blod; }
　　　　　　上面這條規制實際是瀏覽器遍歷頁面所有a元素，并確定其父元素的id是否為header。
　　　　#header? a {...}
　　　　　　后代選擇器開銷更大，在遍歷頁面的所有a元素后，會需向上遍歷直到根節點。

　　由此可知，選擇器最右邊的規制 往往決定了向左移匹配的工作量。故最右邊的選擇規則 稱之為關鍵選擇器。
　　　　.selected * {...}
　　　　　　在匹配所有元素后，再分別向上匹配直至根節點。通常比開銷最小的ID選擇器高出·~3個數量級。

五、避免單規則的屬性選擇器
　　.selected [href='#index'] {...}
　　　　瀏覽器先匹配所有的元素，檢查其是否有href屬性并且值為“#index”，再分別向上匹配class為selected的元素。
　　故應該避免關鍵選擇器 使用單規則屬性選擇器。

六、避免正則的屬性選擇器
　　CSS3添加了復雜的屬性選擇器，通過類正則表達式進行匹配。但這些類型的選擇器會比基于類別的匹配慢很多。

七、移除無匹配的樣式
　　①刪除無用的樣式，可縮減樣式文件大小，加快加載速度。
　　②對于瀏覽器，所有樣式規則都會被解析后索引起來，即使是當前頁面無匹配的規則！故移除無匹配的規則，減少索引項，加快瀏覽器查找速度。

?

高性能JavaScript

一、使用事件代理
　　當過多的時間句柄被頻繁觸發時，頁面反應會遲鈍。
　　如一個div有10個按鈕，只需給div附加一次事件句柄，而不必給每個按鈕添加一個句柄。
　　　　事件冒泡時刻捕捉到事件 并判斷時那個事件發出的。【觸發事件的元素 = ev.srcElement ? ev.srcElement : ev.target;】

二、緩存選擇器查詢結果
　　減少選擇器查詢的次數，并盡可能緩存選中的結果，便于以后的重用。

jQuery('#top').find('p.classA'); ... jQuery('#top').find('p.classB');//使用下面的方法 減少開銷 var cached = jQuery('#top'); cached.find('p.classA'); ... cached.find('p.classB');

三、避免頻繁的IO操作
　　應減少對cookie或localstorage的操作，因為對它們進行操作的API是同步的，而它們是多個tab頁面間共享的。
　　多頁面同時操作cookie和localstorage時，會存在同步加鎖機制。

四、避免頻繁的DOM操作
　　JavaScript訪問DOM元素緩慢，應做到：
　　①緩存已經查詢過的元素；
　　②線下更新完節點之后，在將它們添加到文檔樹中；
　　③避免使用JavaScript來修改頁面布局。

五、使用微類庫
　　盡量避免使用大而全的類庫，而是按需使用微類庫來輔助開發

轉載于:https://www.cnblogs.com/liufei88866/archive/2013/06/13/3133970.html

總結

以上是生活随笔為你收集整理的Web前端，高性能优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。