高性能HTML

一、避免使用iframe
　　iframe也叫內(nèi)聯(lián)frame，可將一個(gè)HTML文檔嵌入另一個(gè)HTML文檔中。
　　iframe的好處是，嵌入的文檔獨(dú)立于父文檔，通常也借此使瀏覽器模擬多線程。缺點(diǎn)是：

　　①雖然iframe能模擬多線程，但主流瀏覽器的同域名并行下載數(shù)是不變的，瀏覽器對(duì)同域名的鏈接總是共享瀏覽器級(jí)別的連接池，
　　?? 即使是不同窗口或標(biāo)簽頁(yè)的同域名網(wǎng)頁(yè)。
　?、谠陧?yè)面加載時(shí)，iframe會(huì)阻塞父文檔onload事件的觸發(fā)。并且有些瀏覽器需在觸發(fā)onload事件后才能被觸發(fā)onunload事件。
　　?? 故用戶用onload事件長(zhǎng)久未觸發(fā)而離開(kāi)頁(yè)面時(shí)，不會(huì)觸發(fā)onunload事件。
　　　　※不兼容IE6~8的解決方案：使用JavaScript動(dòng)態(tài)加載iframe元素或動(dòng)態(tài)設(shè)置其src屬性。

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

?　?、踚frame是文檔內(nèi)最消耗支援的元素之一，即使是空iframe的開(kāi)銷也是昂貴的。【通過(guò)Steve?Souders測(cè)試】

二、避免空連接屬性
　　空連接指：img、link、script?和?iframe元素的src或href屬性的值為空。（如src?=?””）
　　設(shè)置了空連接后瀏覽器依然會(huì)以默認(rèn)規(guī)則發(fā)送請(qǐng)求：
　?、買E6~8中只有img元素會(huì)出問(wèn)題：IE會(huì)將img的空地址解析為當(dāng)前頁(yè)面地址的目錄地址并請(qǐng)求。
　　　如當(dāng)前網(wǎng)頁(yè)地址為http://aaa.com/bb/c.html，img的地址會(huì)被解析為http://aaa.com/bb
　　②早些版本的Webkit和Firefox會(huì)將空連接解析為當(dāng)前頁(yè)面的地址。在ios與android中此問(wèn)題較嚴(yán)重。
　　　如果頁(yè)面有多個(gè)空連接屬性元素，會(huì)增加服務(wù)器的請(qǐng)求次數(shù)。
　?、坌疫\(yùn)的是，主流瀏覽器對(duì)iframe的src屬性值為空時(shí)，會(huì)解析為about:blank地址，而不發(fā)送額外請(qǐng)求。

三、避免節(jié)點(diǎn)深層級(jí)嵌套
　　層級(jí)越深的節(jié)點(diǎn)在初始化構(gòu)建時(shí)，所占內(nèi)存越多。
　　通過(guò)瀏覽器HTML解析器會(huì)將整個(gè)HTML文檔的結(jié)構(gòu)存儲(chǔ)為DOM樹(shù)結(jié)構(gòu)。當(dāng)節(jié)點(diǎn)嵌套層次越深，構(gòu)建的DOM書(shū)層次也越深。

四、縮減HTML文檔大小
　?、賱h除對(duì)執(zhí)行結(jié)果無(wú)影響的空格空行和注釋；
　?、诒苊鈚able布局；
　?、凼褂肏TML5；

五。顯式指定文檔字符集
　　在HTML頁(yè)面開(kāi)時(shí)指定字符集有助于瀏覽器立即開(kāi)始解析HTML代碼。
　　HTML文檔通常被解析為一序列的帶字符集編碼信息的字符串，通過(guò)Internet傳送。
　　字符集編碼在HTTP響應(yīng)頭中，或HTML標(biāo)記中指定。瀏覽器通過(guò)指定的字符集，吧編碼解析為可現(xiàn)實(shí)在屏幕上的字符。
　　若瀏覽器無(wú)法獲知頁(yè)面的編碼字符集，一般會(huì)在執(zhí)行腳本和渲染頁(yè)面之前，先將字節(jié)流緩存，再搜索可進(jìn)行解析的字符集 或 以默認(rèn)字符集來(lái)解析。

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

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

七、避免 腳本阻塞加載
　　瀏覽器在解析常規(guī)script標(biāo)簽時(shí)，會(huì)等待script下載完畢后，才解析執(zhí)行，之后的HTML代碼就只能等待。
　　故應(yīng)該將腳本放在文檔的末尾：

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

?

?

高性能CSS

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

二、避免AlphaImageLoader濾鏡
　　此濾鏡能解決IE6即一下版本顯示PNG圖片的半透明效果，但會(huì)在加載圖片時(shí)終止內(nèi)容的呈現(xiàn)，并凍結(jié)瀏覽器。
　　在每個(gè)元素(不僅僅是圖片)都會(huì)運(yùn)算一次，添加內(nèi)存開(kāi)支。
　　應(yīng)使用PNG8格式來(lái)代替，或用下劃線(_filter)只針對(duì)IE6。

三、避免CSS表達(dá)式
　　CSS表達(dá)式是設(shè)置動(dòng)態(tài)CSS屬性的即強(qiáng)調(diào)又危險(xiǎn)的方法。IE5開(kāi)始支持，IE獨(dú)有。

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

　　CSS表達(dá)式的缺點(diǎn)是技術(shù)頻率極大，在頁(yè)面顯示、縮放、滾動(dòng) 或 移動(dòng)鼠標(biāo)，都會(huì)重新計(jì)算一次。移動(dòng)隨便會(huì)達(dá)到1w次以上的計(jì)算量。
　?、偈褂靡淮涡缘谋磉_(dá)式能減少計(jì)算次數(shù)，在第一次運(yùn)行時(shí)將結(jié)果賦給指定樣式屬性，并用該屬性代替CSS表達(dá)式。
　?、谌绻麡邮綄傩员仨氃陧?yè)面周期內(nèi)動(dòng)態(tài)地改變，使用時(shí)間句柄代替CSS表達(dá)式是一個(gè)可行的辦法。

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

　　由此可知，選擇器最右邊的規(guī)制 往往決定了向左移匹配的工作量。故最右邊的選擇規(guī)則 稱之為關(guān)鍵選擇器。
　　　　.selected * {...}
　　　　　　在匹配所有元素后，再分別向上匹配直至根節(jié)點(diǎn)。通常比開(kāi)銷最小的ID選擇器高出·~3個(gè)數(shù)量級(jí)。

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

六、避免正則的屬性選擇器
　　CSS3添加了復(fù)雜的屬性選擇器，通過(guò)類正則表達(dá)式進(jìn)行匹配。但這些類型的選擇器會(huì)比基于類別的匹配慢很多。

七、移除無(wú)匹配的樣式
　?、賱h除無(wú)用的樣式，可縮減樣式文件大小，加快加載速度。
　?、趯?duì)于瀏覽器，所有樣式規(guī)則都會(huì)被解析后索引起來(lái)，即使是當(dāng)前頁(yè)面無(wú)匹配的規(guī)則！故移除無(wú)匹配的規(guī)則，減少索引項(xiàng)，加快瀏覽器查找速度。

?

高性能JavaScript

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

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

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

三、避免頻繁的IO操作
　　應(yīng)減少對(duì)cookie或localstorage的操作，因?yàn)閷?duì)它們進(jìn)行操作的API是同步的，而它們是多個(gè)tab頁(yè)面間共享的。
　　多頁(yè)面同時(shí)操作cookie和localstorage時(shí)，會(huì)存在同步加鎖機(jī)制。

四、避免頻繁的DOM操作
　　JavaScript訪問(wèn)DOM元素緩慢，應(yīng)做到：
　?、倬彺嬉呀?jīng)查詢過(guò)的元素；
　?、诰€下更新完節(jié)點(diǎn)之后，在將它們添加到文檔樹(shù)中；
　　③避免使用JavaScript來(lái)修改頁(yè)面布局。

五、使用微類庫(kù)
　　盡量避免使用大而全的類庫(kù)，而是按需使用微類庫(kù)來(lái)輔助開(kāi)發(fā)

轉(zhuǎn)載于:https://www.cnblogs.com/liufei88866/archive/2013/06/13/3133970.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。