(1)?如何加載JS，JS文件應(yīng)放在什么位置?

外部JS的阻塞下載?
?????所有瀏覽器在下載JS的時(shí)候，會(huì)阻止一切其他活動(dòng)，比如其他資源的下載，內(nèi)容的呈現(xiàn)等等。至到JS下載、解析、執(zhí)行完畢后才開(kāi)始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。?

????有人會(huì)問(wèn)：為什么JS不能像CSS、image一樣并行下載了？這里需要簡(jiǎn)單介紹一下瀏覽器構(gòu)造頁(yè)面的原理，?
?當(dāng) 瀏覽器從服務(wù)器接收到了HTML文檔，并把HTML在內(nèi)存中轉(zhuǎn)換成DOM樹(shù)，在轉(zhuǎn)換的過(guò)程中如果發(fā)現(xiàn)某個(gè)節(jié)點(diǎn)(node)上引用了CSS或 者?IMAGE，就會(huì)再發(fā)1個(gè)request去請(qǐng)求CSS或image,然后繼續(xù)執(zhí)行下面的轉(zhuǎn)換，而不需要等待request的返回，當(dāng)request返 回后，只需要把返回的內(nèi)容放入到DOM樹(shù)中對(duì)應(yīng)的位置就OK。但當(dāng)引用了JS的時(shí)候，瀏覽器發(fā)送1個(gè)js?request就會(huì)一直等待該request的 返回。因?yàn)闉g覽器需要1個(gè)穩(wěn)定的DOM樹(shù)結(jié)構(gòu)，而JS中很有可能有代碼直接改變了DOM樹(shù)結(jié)構(gòu)，比如使 用?document.write?或?appendChild,甚至是直接使用的location.href進(jìn)行跳轉(zhuǎn)，瀏覽器為了防止出現(xiàn)JS修改 DOM樹(shù)，需要重新構(gòu)建DOM樹(shù)的情況，所以就會(huì)阻塞其他的下載和呈現(xiàn).?

嵌入JS是指直接寫(xiě)在HTML文檔中的JS代碼。上面說(shuō)了引用外 部的JS會(huì)阻塞其后的資源下載和其后的內(nèi)容呈現(xiàn)，哪嵌入的JS又會(huì)是怎樣阻塞的了，拿兩段代碼運(yùn)行后，對(duì)比。會(huì)發(fā)現(xiàn)代碼1中，在前5秒中頁(yè)面上是一篇空 白，5秒中后頁(yè)面全部顯示。?代碼2中，前5秒中blogjava,csdn等先顯示出來(lái)，5秒后MSN才顯示出來(lái)。?
?????可以看出嵌入JS會(huì)阻塞所有內(nèi)容的呈現(xiàn)，而外部JS只會(huì)阻塞其后內(nèi)容的顯示，2種方式都會(huì)阻塞其后資源的下載。?

????根本原因：因?yàn)闉g覽器會(huì)維持html中css和js的順序，樣式表必須在嵌入的JS執(zhí)行前先加載、解析完。而嵌入的JS會(huì)阻塞后面的資源加載，所以就會(huì)出現(xiàn)上面CSS阻塞下載的情況。?
??
嵌入JS應(yīng)該放在什么位置?

???1、放在底部，雖然放在底部照樣會(huì)阻塞所有呈現(xiàn)，但不會(huì)阻塞資源下載。?
????
???2、如果嵌入JS放在head中，請(qǐng)把嵌入JS放在CSS頭部。?
????
???3、使用defer?
????
???4、不要在嵌入的JS中調(diào)用運(yùn)行時(shí)間較長(zhǎng)的函數(shù)，如果一定要用，可以用setTimeout來(lái)調(diào)用?



(2)?為什么要減少請(qǐng)求數(shù)，如何減少請(qǐng)求數(shù)!?

http連接的開(kāi)銷?

???相比request頭部多余的數(shù)據(jù)，http連接的開(kāi)銷則更加嚴(yán)重。先看看從用戶輸入1個(gè)URL到下載內(nèi)容到客戶端需要經(jīng)過(guò)哪些階段：?
???1.?域名解析?
???2.?開(kāi)啟TCP連接??
???3.?發(fā)送請(qǐng)求??
???4.?等待(主要包括網(wǎng)絡(luò)延遲和服務(wù)器處理時(shí)間)?
???5.?下載資源?
????
????可能很多人認(rèn)為每次請(qǐng)求大部分時(shí)間都花在下載資源上，讓我們看看blogjava資源下載瀑布圖(每種顏色代表的階段與上面5個(gè)階段對(duì)應(yīng))：?

如何減少請(qǐng)求數(shù)?
???
1、合并文件?
??????合并文件就是把很多JS文件合并成1個(gè)文件，很多CSS文件合并成1個(gè)文件，這種方法應(yīng)該很多人用到過(guò)，這里不做詳細(xì)介紹，?
?????只推薦1個(gè)合并的工具：yuiCompressor?這個(gè)工具yahoo提供的。?http://developer.yahoo.com/yui/compressor/?
???
2、合并圖片?
??????這是利用css?sprite，通過(guò)控制背景圖片的位置來(lái)顯示不同的圖片。這種技術(shù)也是大家都用過(guò)的，不做詳細(xì)介紹，推薦1個(gè)在線合并圖片的網(wǎng)站:http://csssprites.com/?
??????
3、把JS、CSS合并到1個(gè)文件?
??????上面第1種方法說(shuō)的只是把幾個(gè)JS文件合并成1個(gè)JS文件，幾個(gè)CSS文件合并成1個(gè)CSS文件，哪如何把CSS和JS都合并到1個(gè)文件中.?
??????
4、使用Image?maps?
??????Image?maps?是把多個(gè)圖片合并成1個(gè)圖片，然后使用html中的<map>標(biāo)簽連接圖片，并實(shí)現(xiàn)點(diǎn)擊圖片不同的區(qū)域執(zhí)行不同的動(dòng)作，image?map在導(dǎo)航條中比較容易使用到。?
?????image?map的使用方法見(jiàn)：?http://www.w3.org/TR/html401/struct/objects.html#h-13.6?
???
??5、data嵌入圖片?


項(xiàng)目中的處理方案：?
???????
?????為了解決上面討論過(guò)的問(wèn)題，在下寫(xiě)了1個(gè)如下的組件，組件中根據(jù)我們自己的實(shí)際情況使用了文件大小來(lái)做為文件的版本號(hào)，雖然在文件修改很小(比如把字符a改成b)，可能文件大小并沒(méi)有變，導(dǎo)致版本號(hào)也不會(huì)變。?

但這種機(jī)率還是非常低的。當(dāng)然如果你覺(jué)的使用文件修改時(shí)間作為版本號(hào)適合你，只需要修改一行代碼就行，下面看下這個(gè)組件的處理流程(本來(lái)想用流程圖表達(dá)，最后還是覺(jué)的文字來(lái)的直白寫(xiě))：?

????1.?程序啟動(dòng)(contextInitialized)?
??
????2.?搜索程序目錄下的所有merge.txt文件，根據(jù)merge.txt文件的配置合并文件,?merge.txt文件實(shí)例如下：?

????#?文件合并配置文件,多個(gè)文件以|隔開(kāi)，以/開(kāi)頭的表示從根目錄開(kāi)始,??
????#?空格之后的文件名表示合并之后的文件名?

????#?把1,2,3合并到all文件中?
????1.js|2.js|3.js?all.js?

????#合并CSS?
????/css/mian.css|/css/common.css?all.css?


????3.?搜索程序目錄下所有JS，CSS文件(包括合并后的)，每個(gè)文件都?jí)嚎s后生成對(duì)應(yīng)的1個(gè)新文件。?


????4.?搜索程序目錄下所有JSP,html文件，把所有JS,css的引用代碼改成壓縮后并加了版本號(hào)的引用。?

(3)?減少請(qǐng)求，響應(yīng)的數(shù)據(jù)量?


如何減少請(qǐng)求、響應(yīng)的數(shù)據(jù)量(即在網(wǎng)絡(luò)中傳輸?shù)臄?shù)據(jù)量)，減少傳輸?shù)臄?shù)據(jù)量不僅僅可以加快頁(yè)面加載速度，更可以節(jié)約服務(wù)器帶寬，為你剩不少錢(qián)(好像很多機(jī)房托管都是按流量算錢(qián)的)。?

GZIP壓縮?
?????gzip是目前所有瀏覽器都支持的一種壓縮格式，IE6需要SP1及以上才支持(別說(shuō)你還在用IE5,~_~)。gzip可以說(shuō)是最方便而且也是最大減少響應(yīng)數(shù)據(jù)量的1種方法。?

說(shuō)它方便，是因?yàn)槟悴恍枰獮樗鼘?xiě)任何額外的代碼，只需要在http服務(wù)器上加上配置都行了，現(xiàn)在主流的http服務(wù)器都支持gzip，各種服務(wù)器的配置這里就不一一介紹(其實(shí)是我不知道怎么配)，?

別對(duì)圖片啟用gzip?
????在知道了gzip強(qiáng)大的壓縮能力后，你是否想對(duì)服務(wù)器上的所有文件啟用gzip了，先讓我們看看圖片中啟用gzip后會(huì)是什么情況。?

比較適合啟用gzip壓縮的文件有如下這些：?
????1.?javascript?
????2.?CSS?
????3.?HTML，xml?
????4、plain?text?


別亂用cookie?
??????現(xiàn) 在幾乎沒(méi)有哪個(gè)網(wǎng)站不使用cookie了，可是該怎么使用cookie比較合適了，cookie有幾個(gè)重要的屬性:path(路 徑),domain(域),expires(過(guò)期時(shí)間)。瀏覽器就是根據(jù)這3個(gè)屬性來(lái)判斷在發(fā)送請(qǐng)求的時(shí)候是否需要帶上這個(gè)cookie。
??????cookie使用最好的方式，就是當(dāng)請(qǐng)求的資源需要cookie的時(shí)候才帶上該cookie。其他任何請(qǐng)求都不帶上cookie。

妙用204狀態(tài)?
?????http 中200,404,500狀態(tài)大家都很清楚，但204狀態(tài)大家可能用的比較少，204狀態(tài)是指服務(wù)器成功處理了客戶端請(qǐng)求，但服務(wù)器無(wú)返回內(nèi)容。204是 HTTP中數(shù)據(jù)量最少的響應(yīng)狀態(tài)，204的響應(yīng)中沒(méi)有body，而且Content-Length=0。很多人在使用ajax提交一些數(shù)據(jù)給服務(wù)器，而不 需要服務(wù)器返回的時(shí)候，常常在服務(wù)端使用下面的代碼：response.getWriter().print("")，這是返回1個(gè)空白的頁(yè)面，是1個(gè) 200請(qǐng)求。它還是有body，而且Content-Length不會(huì)等于0。其實(shí)這個(gè)時(shí)候你完全可以直接返回1個(gè)204狀 態(tài)?(response.setStatus(204))。?


(4)?如何加載google-analytics(或其他第三方)的JS?

?????很 多網(wǎng)站為了獲取用戶訪問(wèn)網(wǎng)站的統(tǒng)計(jì)信息，使用了google-analytics或其他分析網(wǎng)站(下面的討論中只提google- analytics,?簡(jiǎn)稱ga)。注冊(cè)ga后，ga就會(huì)生成一段js腳本，很多人直接把這段js復(fù)制到<body>的最后面就完事(包 括?博客園、CSDN、BlogJava)。可是ga自動(dòng)生成的這段JS真的就是最合理的嗎？?
??????哪怎么樣才算是合理，怎樣才是不合理了？因ga只是1個(gè)分析工具，它的使用絕對(duì)不能影響到我們的程序，如果影響了，則是不合理的。不影響則是合理的。?

使用document.write來(lái)加載JS，注意了，這樣加載js是阻塞加載的，就是這個(gè)js沒(méi)加載完，后面的所有資源和JS都不能下載和執(zhí)行。可能你會(huì)覺(jué)的這段代碼在body的最后面，后沒(méi)已經(jīng)沒(méi)內(nèi)容，沒(méi)什么會(huì)阻塞的了。?
??????還 有一些你忽略了，相信很多人在寫(xiě)JS的時(shí)候需要在頁(yè)面加載完畢后執(zhí)行一些JS或AJAX，一般寫(xiě)在window.onload?事件，或者寫(xiě)入 jquery的$(document).ready()方法中。這些JS就會(huì)被阻塞。如果我們的頁(yè)面上很多數(shù)據(jù)在?window.onload中使用 AJAX加載，而偏偏這個(gè)時(shí)候ga因?yàn)槟承┰?和諧和諧)不能訪問(wèn)，或者訪問(wèn)很慢的時(shí)候。問(wèn)題就來(lái)，我們自己的JS一直在等待ga的JS加載完，只有等 ga的js加載超時(shí)后才會(huì)執(zhí)行我們的JS。?

(5)?瘋狂的HTML壓縮?

(6)?頁(yè)面呈現(xiàn)、重繪、回流。?

頁(yè)面呈現(xiàn)流程?

?????在討論頁(yè)面重繪、回流之前。需要對(duì)頁(yè)面的呈現(xiàn)流程有些了解，頁(yè)面是怎么把html結(jié)合css等顯示到瀏覽器上的，下面的流程圖顯示了瀏覽器對(duì)頁(yè)面的呈現(xiàn)的處理流程。可能不同的瀏覽器略微會(huì)有些不同。但基本上都是類似的。?


????1.??瀏 覽器把獲取到的html代碼解析成1個(gè)Dom樹(shù)，html中的每個(gè)tag都是Dom樹(shù)中的1個(gè)節(jié)點(diǎn)，根節(jié)點(diǎn)就是我們常用的document對(duì) 象?(<html>?tag)。dom樹(shù)就是我們用firebug或者IE?Developer?Toolbar等工具看到的html結(jié)構(gòu)， 里面包含了所有的html?tag，包括display:none隱藏，還有用JS動(dòng)態(tài)添加的元素等。?

?????2.?瀏覽器把所有樣式(主要包括css和瀏覽器的樣式設(shè)置)解析成樣式結(jié)構(gòu)體，在解析的過(guò)程中會(huì)去掉瀏覽器不能識(shí)別的樣式，比如IE會(huì)去掉-moz開(kāi)頭的樣式，而firefox會(huì)去掉_開(kāi)頭的樣式。?

?????3、 dom?tree和樣式結(jié)構(gòu)體結(jié)合后構(gòu)建呈現(xiàn)樹(shù)(render?tree),render?tree有點(diǎn)類似于dom?tree，但其實(shí)區(qū)別有很 大，render?tree能識(shí)別樣式，render?tree中每個(gè)node都有自己的style，而且render?tree不包含隱藏的節(jié)點(diǎn)(比如 display:none的節(jié)點(diǎn)，還有head節(jié)點(diǎn))，因?yàn)檫@些節(jié)點(diǎn)不會(huì)用于呈現(xiàn)，而且不會(huì)影響呈現(xiàn)的，所以就不會(huì)包含到?render?tree中。注 意?visibility:hidden隱藏的元素還是會(huì)包含到render?tree中的，因?yàn)関isibility:hidden?會(huì)影響布局 (layout)，會(huì)占有空間。根據(jù)css2的標(biāo)準(zhǔn)，render?tree中的每個(gè)節(jié)點(diǎn)都稱為box(Box?dimensions)，box所有屬 性：width,height,margin,padding,left,top,border等。?

????4.?一旦render?tree構(gòu)建完畢后，瀏覽器就可以根據(jù)render?tree來(lái)繪制頁(yè)面了。?

回流與重繪?

????1.?當(dāng)render?tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(其實(shí)我覺(jué)得叫重新布局更簡(jiǎn)單明了些)。每個(gè)頁(yè)面至少需要一次回流，就是在頁(yè)面第一次加載的時(shí)候。?

????2.?當(dāng)render?tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會(huì)影響布局的，比如background-color。則就叫稱為重繪。?

??注：從上面可以看出，回流必將引起重繪，而重繪不一定會(huì)引起回流。?


什么操作會(huì)引起重繪、回流?
????
????其實(shí)任何對(duì)render?tree中元素的操作都會(huì)引起回流或者重繪，比如：?

????1.?添加、刪除元素(回流+重繪)?

????2.?隱藏元素，display:none(回流+重繪)，visibility:hidden(只重繪，不回流)?

????3.?移動(dòng)元素，比如改變top,left(jquery的animate方法就是,改變top,left不一定會(huì)影響回流)，或者移動(dòng)元素到另外1個(gè)父元素中。(重繪+回流)?

????4.?對(duì)style的操作(對(duì)不同的屬性操作，影響不一樣)?

????5.?還有一種是用戶的操作，比如改變?yōu)g覽器大小，改變?yōu)g覽器的字體大小等(回流+重繪)?


如何減少回流、重繪?

????減少回流、重繪其實(shí)就是需要減少對(duì)render?tree的操作，并減少對(duì)一些style信息的請(qǐng)求，盡量利用好瀏覽器的優(yōu)化策略。具體方法有：?

????1.?不要1個(gè)1個(gè)改變?cè)氐臉邮綄傩?#xff0c;最好直接改變className，但className是預(yù)先定義好的樣式，不是動(dòng)態(tài)的，如果你要?jiǎng)討B(tài)改變一些樣式，則使用cssText來(lái)改變?

2.?讓要操作的元素進(jìn)行"離線處理"，處理完后一起更新，這里所謂的"離線處理"即讓元素不存在于render?tree中，比如：?
?????????a)?使用documentFragment或div等元素進(jìn)行緩存操作，這個(gè)主要用于添加元素的時(shí)候，大家應(yīng)該都用過(guò)，就是先把所有要添加到元素添加到1個(gè)div(這個(gè)div也是新加的)，?
????????????最后才把這個(gè)div?append到body中。?
?????????b)?先display:none?隱藏元素，然后對(duì)該元素進(jìn)行所有的操作，最后再顯示該元素。因?qū)isplay:none的元素進(jìn)行操作不會(huì)引起回流、重繪。所以只要操作只會(huì)有2次回流。?

???3?不要經(jīng)常訪問(wèn)會(huì)引起瀏覽器flush隊(duì)列的屬性，如果你確實(shí)要訪問(wèn)，就先讀取到變量中進(jìn)行緩存，以后用的時(shí)候直接讀取變量就可以了?

4.?考慮你的操作會(huì)影響到render?tree中的多少節(jié)點(diǎn)以及影響的方式，影響越多，花費(fèi)肯定就越多。?

(6)?了解CSS的查找匹配原理，讓CSS更簡(jiǎn)潔、高效?

匹配原理：?

?????瀏覽器CSS匹配不是從左到右進(jìn)行查找，而是從右到左進(jìn)行查找。比如之前說(shuō)的?DIV#divBox?p?span.red{color:red;}，瀏覽器的查找順序如下：?

先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。?

簡(jiǎn)潔、高效的CSS:?
???????所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時(shí)候盡量進(jìn)行少的查找，下面列出一些我們常見(jiàn)的寫(xiě)CSS犯一些低效錯(cuò)誤(也是我以前常常犯的錯(cuò)誤，還老以為這樣寫(xiě)才是高效的)：?
????
??1.不要在ID選擇器前使用標(biāo)簽名?
?一般寫(xiě)法：DIV#divBox?
?更好寫(xiě)法：#divBox?
?解釋：?因?yàn)镮D選擇器是唯一的，加上div反而增加不必要的匹配。?
???
??2.不要再class選擇器前使用標(biāo)簽名?
?一般寫(xiě)法：span.red?
?更好寫(xiě)法：.red?
??解釋：?同第一條，但如果你定義了多個(gè).red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css文件中定義如下：?
?????p.red{color:red;}?
?????span.red{color:#ff00ff}?
?????如果是這樣定義的就不要去掉，去掉后就會(huì)混淆，不過(guò)建議最好不要這樣寫(xiě)?
??3.盡量少使用層級(jí)關(guān)系?
?一般寫(xiě)法：#divBox?p?.red{color:red;}???????
?更好寫(xiě)法：.red{..}?
???
??4.使用class代替層級(jí)關(guān)系?
?一般寫(xiě)法：#divBox?ul?li?a{display:block;}???????

?更好寫(xiě)法：.block{display:block;}

?

感覺(jué)可以，值得學(xué)習(xí)一下，就轉(zhuǎn)了。轉(zhuǎn)自www.zhihaijiangku.com

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhilelele/p/8026585.html

總結(jié)

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

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