After-Yahoo-34-Rules---網(wǎng)站性能優(yōu)化新進展

網(wǎng)站性能優(yōu)化

WPO(WebPerformanceOptimization)

--在YAHOO34Rules之外廣告技術(shù)部:李牧2010-7-1211

前端基礎(chǔ)知識VS速度視點21.1網(wǎng)頁上一切來自HTTP一般情況下,頁面上所有的內(nèi)容都是通過HTTP請求獲得第一個請求通常是一份(X)HTML文檔,也就是瀏覽器中地址欄的指向.31.1網(wǎng)頁上一切來自HTTP一般情況下,頁面上所有的內(nèi)容都是通過HTTP請求獲得第一個請求通常是一份(X)HTML文檔,也就是瀏覽器中地址欄的指向.4主要的時間花費在http的請求過程中1.2HTML被解析成Dom樹(X)HTML文檔是一份不那么嚴謹?shù)腦ML(文本)文檔,沒有Schema,有DTD(通常在HTML文本第一行Doctype中定義)瀏覽器按照文檔內(nèi)容自上而下解釋運行展現(xiàn).最終被完整的解析成一顆樹(DOM樹):其余的HTTP請求,除了CSS可以引入背景圖和XHR(以后會介紹)之外幾乎都是在解析HTML時,由樹上的幾種特定節(jié)點發(fā)起的:<img>:用來嵌入圖片(jpg,png,gif.)<iframe>:用來嵌入其他HTML<link>:可以用來引入CSS文件,同時CSS內(nèi)容引入背景圖請求<script>:可以用來引入JavaScript文件<object>和<embed>:通常用來引入Flash文件51.2HTML被解析成Dom樹(X)HTML文檔是一份不那么嚴謹?shù)腦ML(文本)文檔,沒有Schema,有DTD(通常在HTML文本第一行Doctype中定義)瀏覽器按照文檔內(nèi)容自上而下解釋運行展現(xiàn).最終被完整的解析成一顆樹(DOM樹):其余的HTTP請求,除了CSS可以引入背景圖和XHR(以后會介紹)之外幾乎都是在解析HTML時,由樹上的幾種特定節(jié)點發(fā)起的:<img>:用來嵌入圖片(jpg,png,gif.)<iframe>:用來嵌入其他HTML<link>:可以用來引入CSS文件,同時CSS內(nèi)容引入背景圖請求<script>:可以用來引入JavaScript文件<object>和<embed>:通常用來引入Flash文件6Dom節(jié)點的多少也決定了,HTML解析的速度需要發(fā)送請求的Dom節(jié)點數(shù),決定了HTTP請求個數(shù)Dom節(jié)點的順序也有講究.a.css文件的內(nèi)容:

.myTxt{color:red;font-size:50px}各種CSS定義駐留在Dom樹的屬性中或元素節(jié)點內(nèi).仍然是Dom樹的一部分1.3使用CSS定義顯示樣式如何定義字體顏色大小,區(qū)塊的邊框內(nèi)外變距?<span><fontsize="50"color="red">CSS出現(xiàn)之前</font></span><spanstyle="color:red,font-size:50px">CSS使用Style屬性直接定義</span><spanclass="myTxt">使用Class等多種方式外部定義</span>在HTML內(nèi)定義<style>

.myTxt{color:red;font-size:50px}</style>通過<link>引入CSS文件,在文件中定義<linkrel="stylesheet"type="text/css"href="http:///a.css"/>7a.css文件的內(nèi)容:

.myTxt{color:red;font-size:50px}各種CSS定義駐留在Dom樹的屬性中或元素節(jié)點內(nèi).仍然是Dom樹的一部分1.3使用CSS定義顯示樣式如何定義字體顏色大小,區(qū)塊的邊框內(nèi)外變距?<span><fontsize="50"color="red">CSS出現(xiàn)之前</font></span><spanstyle="color:red,font-size:50px">CSS使用Style屬性直接定義</span><spanclass="myTxt">使用Class等多種方式外部定義</span>在HTML內(nèi)定義<style>

.myTxt{color:red;font-size:50px}</style>通過<link>引入CSS文件,在文件中定義<linkrel="stylesheet"type="text/css"href="http:///a.css"/>8CSS的類意味著:每個類定義的影響范圍覆蓋所有Dom節(jié)點.最佳的方式是有展現(xiàn)的在Dom節(jié)點出現(xiàn)前定義好CSS.另外CSS的背景圖等屬性也會引入圖片HTTP請求.1.4使用JavaScript語言處理交互網(wǎng)頁應(yīng)用是典型的事件驅(qū)動系統(tǒng).JavaScript為交互事件,時間線上的事件定義響應(yīng)體.來看一個最簡單的交互:點擊一個按鈕,彈出一個警告框.<buttononclick="alert(1)"></button><buttononclick="clk()"></button><script> functionclk(){ alert(1); }</script><scriptsrc="/a.js"></script>a.js文件的內(nèi)容: functionclk(){

alert(1);

}更多原生的鼠標鍵盤事件類型及事件注冊方法詳見:關(guān)于跨瀏覽器事件JS同樣駐留在Dom樹的屬性中或元素節(jié)點內(nèi).仍然是Dom樹的一部分91.4使用JavaScript語言處理交互網(wǎng)頁應(yīng)用是典型的事件驅(qū)動系統(tǒng).JavaScript為交互事件,時間線上的事件定義響應(yīng)體.來看一個最簡單的交互:點擊一個按鈕,彈出一個警告框.<buttononclick="alert(1)"></button><buttononclick="clk()"></button><script> functionclk(){ alert(1); }</script><scriptsrc="/a.js"></script>a.js文件的內(nèi)容: functionclk(){

alert(1);

}更多原生的鼠標鍵盤事件類型及事件注冊方法詳見:關(guān)于跨瀏覽器事件JS同樣駐留在Dom樹的屬性中或元素節(jié)點內(nèi).仍然是Dom樹的一部分10選擇合適的時機,合理的方式注冊事件DomReady而非window.onload,使用事件代理保證最快的首次有效交互的時間1.5DHTML--JavaScript改變DOM樹JavaScript不滿足于簡單的計算,校驗和事件響應(yīng).瀏覽器將其內(nèi)的Dom樹為轉(zhuǎn)化JS可以訪問和操作的對象.由事件或時間線驅(qū)動JS響應(yīng)的方法對Dom樹進行修改.稱D(Dynamic)HTMLW3C(萬維網(wǎng)聯(lián)盟)的DomLevel1,2&3中定義了3個層次一系列Dom上的操作接口.http:///DOM/DOMTR

在各種瀏覽器下Level1基本都能被正確實現(xiàn).IE有獨特的事件模型.其余瀏覽器的事件模型符合W3C定義111.5DHTML--JavaScript改變DOM樹JavaScript不滿足于簡單的計算,校驗和事件響應(yīng).瀏覽器將其內(nèi)的Dom樹為轉(zhuǎn)化JS可以訪問和操作的對象.由事件或時間線驅(qū)動JS響應(yīng)的方法對Dom樹進行修改.稱D(Dynamic)HTMLW3C(萬維網(wǎng)聯(lián)盟)的DomLevel1,2&3中定義了3個層次一系列Dom上的操作接口.http:///DOM/DOMTR

在各種瀏覽器下Level1基本都能被正確實現(xiàn).IE有獨特的事件模型.其余瀏覽器的事件模型符合W3C定義12因為JavaScript可以改變DomTree所以HTML在解析Dom時遇到<script>節(jié)點時會等待其加載和執(zhí)行被阻滯1.6AJAX--JavaScript與服務(wù)器端交互JavaScript已經(jīng)具有能力完全的改變所在網(wǎng)頁的每個細節(jié).JavaScript的野心不止于此,如果JS能由事件驅(qū)動,從服務(wù)器端源源不斷的獲取新鮮數(shù)據(jù),那理論上不再需要第二個頁面了.網(wǎng)頁上一切來自HTTP,獲取數(shù)據(jù)自然需要JavaScript發(fā)起HTTP,接收并理解響應(yīng).于是有了XHR(XmlHttpRequest),首先作為一個ActiveX控件被IE引入.為避免潛在的混亂JavaScript僅以單線程運行,但XHR的異步特性使得它獨立于JS引擎的線程外工作.數(shù)據(jù)返回前,其他JS,頁面上的交互如常運行,而當數(shù)據(jù)返回時觸發(fā)事件.如今AJAX不單指XHR.所有在不離開當前頁面的前提下,由JS主動發(fā)起的從服務(wù)器端獲取JS可解析數(shù)據(jù)的方案,皆可稱AJAX131.6AJAX--JavaScript與服務(wù)器端交互JavaScript已經(jīng)具有能力完全的改變所在網(wǎng)頁的每個細節(jié).JavaScript的野心不止于此,如果JS能由事件驅(qū)動,從服務(wù)器端源源不斷的獲取新鮮數(shù)據(jù),那理論上不再需要第二個頁面了.網(wǎng)頁上一切來自HTTP,獲取數(shù)據(jù)自然需要JavaScript發(fā)起HTTP,接收并理解響應(yīng).于是有了XHR(XmlHttpRequest),首先作為一個ActiveX控件被IE引入.為避免潛在的混亂JavaScript僅以單線程運行,但XHR的異步特性使得它獨立于JS引擎的線程外工作.數(shù)據(jù)返回前,其他JS,頁面上的交互如常運行,而當數(shù)據(jù)返回時觸發(fā)事件.如今AJAX不單指XHR.所有在不離開當前頁面的前提下,由JS主動發(fā)起的從服務(wù)器端獲取JS可解析數(shù)據(jù)的方案,皆可稱AJAX14不要使用同步XHR請求,處理好等待狀態(tài)使用JSON數(shù)據(jù)交換適用一切應(yīng)用于HTTP請求的優(yōu)化措施1.7Cookie--身份識別與會話保持再次回到HTTP本身HTTP是一種沒有狀態(tài)協(xié)議靠存儲在客戶端的Cookie來標識身份,保持會話HTTP分Header和Body兩部分HTTP的Header分Request和Response兩部分Request中會帶著請求域下的Cookie服務(wù)端可以通過Response種植CookieCookie可以種在根域名和所在的子域名下,也可以種植在指定路徑下,指定有效時間JavaScript可以讀寫所屬HTML頁面所在域下的Cookie頁面/item.html中的JS可以讀寫子域名下和根域名下cookie151.7Cookie--身份識別與會話保持再次回到HTTP本身HTTP是一種沒有狀態(tài)協(xié)議靠存儲在客戶端的Cookie來標識身份,保持會話HTTP分Header和Body兩部分HTTP的Header分Request和Response兩部分Request中會帶著請求域下的Cookie服務(wù)端可以通過Response種植CookieCookie可以種在根域名和所在的子域名下,也可以種植在指定路徑下,指定有效時間JavaScript可以讀寫所屬HTML頁面所在域下的Cookie頁面/item.html中的JS可以讀寫子域名下和根域名下cookie16靜態(tài)資源(圖片,腳本等)放在不含有cookie的域最小化cookie大小.HTTP中一個數(shù)據(jù)包1k,cookie存在于header中,如果過大效率下降很多.1.8小結(jié)--七種武器HTTP:一切內(nèi)容通過HTTP請求獲得HTML:瀏覽器把HTML解析成Dom樹CSS:定義HTML的顯示樣式JavaScript:提供計算能力,處理交互事件Cookie:網(wǎng)頁間,請求間身份識別與會話保持DHTML:JavaScript操作Dom樹(包括CSS)AJAX:JavaScript操縱HTTP(包括Cookie)所有前端應(yīng)用托生于這些基礎(chǔ)特性的整合Web2.0主要托生于DHTML和AJAX這類JavaScript的能力擴展171.8小結(jié)--七種武器HTTP:一切內(nèi)容通過HTTP請求獲得HTML:瀏覽器把HTML解析成Dom樹CSS:定義HTML的顯示樣式JavaScript:提供計算能力,處理交互事件Cookie:網(wǎng)頁間,請求間身份識別與會話保持DHTML:JavaScript操作Dom樹(包括CSS)AJAX:JavaScript操縱HTTP(包括Cookie)所有前端應(yīng)用托生于這些基礎(chǔ)特性的整合Web2.0主要托生于DHTML和AJAX這類JavaScript的能力擴展18來提升武器性能吧!FastByDefault!Planforperformancefromday1!1.9網(wǎng)站性能優(yōu)化思路網(wǎng)頁通過HTTP獲得,在瀏覽器解析,那么網(wǎng)頁性能優(yōu)化思路:191.9網(wǎng)站性能優(yōu)化思路網(wǎng)頁通過HTTP獲得,在瀏覽器解析,那么網(wǎng)頁性能優(yōu)化思路:20說法:80%oftheend-userresponsetimeisspentonthefront-end.八成時間耗在了前端先看看淘寶技術(shù)大學的通用教程,稍后回來看應(yīng)用端開發(fā)需要重點關(guān)注什么!2.

淘寶技術(shù)大學:<<構(gòu)建高性能的網(wǎng)站>>

--小馬,玉伯,小凡21主要介紹14優(yōu)化軍規(guī)和20條最佳實踐:/performance/rules.html3如何發(fā)現(xiàn)性能相關(guān)問題?223.1HTTP數(shù)據(jù)包嗅探記錄HTTP請求的形成瀑布圖-分析HTTP請求間的順序-分析單個請求的內(nèi)容和各階段時間(域名解析,建立連接,發(fā)送請求,等待響應(yīng),接收數(shù)據(jù))單機版HTTPWatchFiddlerFirebug網(wǎng)絡(luò)版基調(diào)網(wǎng)絡(luò)AliBench233.2運行時分析(profiling)記錄網(wǎng)頁運行時,JSfunction的運行耗時或CPU內(nèi)存使用情況:YUIprofilerFirebugProfilerPageSpeedActivityMSFastPageTestDynatraceAjax24相關(guān)工具詳細介紹http:///performance-tools/

3.3瀏覽器內(nèi)存結(jié)構(gòu)分析(起步階段)檢測IE內(nèi)存泄露工具 IELeakDetectora.k.aDrip [/ieleak/]分析瀏覽器中內(nèi)存結(jié)構(gòu)和GC情況,這方面的研究剛剛起步,當前技術(shù)停留在觀察瀏覽器中內(nèi)存使用痕跡的水平

IE不開源沒有公布相關(guān)工具

Mozilla的相關(guān)研究項目http:///blog/2009/07/browser-memory-tools-directory/

253.4瀏覽器各種任務(wù)性能開銷分析(起步階段)分析瀏覽器運行過程中執(zhí)行布局,渲染,HTML,調(diào)度,DOM,格式化,JS等任務(wù)的分別的開銷,找到優(yōu)化關(guān)鍵點IE給出的相關(guān)統(tǒng)計分享:http:///techdude/ie8-whats-coming

263.5再次強調(diào)優(yōu)化思路27更好的借助工具發(fā)現(xiàn)問題:4發(fā)展中的WPO284.1減少http請求數(shù)294.1.1YSlow35：避免空的ImagesrcImage帶有空字符串作為

src

的屬性值將帶來額外的請求,有兩種形式:HTML:

<imgsrc="">JavaScript:

varimg=newImage();

img.src="";這兩種形式都有一個同樣的效果:瀏覽器發(fā)起另外一個請求到節(jié)點所屬頁面的地址http:///performance/rules.html#emptysrc

304.1.2combo-自動合并腳本和css文件combo代表一種服務(wù)器端技術(shù),根據(jù)客戶端HTTP請求的URL,將多個文件合并成一個文件輸出.多用于JavaScript文件和CSS文件的合并.大量減少HTTP請求數(shù)量http:///min/?b=libs/yui&f=3.1.0/build/event-custom/event-custom-min.js,3.1.0/build/attribute/attribute-min.js,3.1.0/build/base/base-min.js

相當于獲取了event-custom-min.js,attribute-min.js和base-min.js在YUI3由YUILoader構(gòu)建的URL確保了多個腳本的正確順序314.1.3BigPipe—combo動態(tài)數(shù)據(jù)Combo的應(yīng)用面向多個靜態(tài)資源的請求合并.而當一個頁面上的動態(tài)數(shù)據(jù)來自多個數(shù)據(jù)中心時,使用BigPipe技術(shù)將動態(tài)數(shù)據(jù)整合在一個HTTP請求中分段輸出,達到服務(wù)端多數(shù)據(jù)中心并發(fā),服務(wù)端與瀏覽器端并發(fā)的目的.現(xiàn)有PHP端的并發(fā)技術(shù)成熟,比如YAHOO的yfed,只要配合提早flush(),發(fā)送chunk的HTTPResponse給前端即可.BigPipe技術(shù)由Facebook引入,適合SNS類應(yīng)用./note.php?note_id=389414033919324.1.4comet-基于HTTP的服務(wù)端push技術(shù)33基于AJAX的長輪詢（long-polling）方式基于Iframe及htmlfile的流（streaming）方式服務(wù)器端推數(shù)據(jù)給客戶端,保證消息最快速度傳遞:

使用有一個Ajax異步請求連接在服務(wù)端等待

使用一個不關(guān)閉連接,不斷的flush數(shù)據(jù)(類似bigpipe).應(yīng)用場景:各種WEBIM和SNS站點消息通道當前問題:

瀏覽器到同一域名連接數(shù)有限,影響其他同域請求性能

Web服務(wù)器維持長連接消耗過大,存在較嚴重性能問題/developerworks/cn/web/wa-lo-comet/

4.1.5DataURI減少圖片請求網(wǎng)頁常用的小圖片可以將圖片數(shù)據(jù)使用Base64編碼,直接寫在文件中.這樣可以減少HTTP請求數(shù).詳見口碑網(wǎng)秦歌的說明:/2009/08/15/data-uri-mhtml/

應(yīng)用:淘寶旺旺點燈圖片344.2有效利用緩存354.2.1使用良好的JS,CSS版本管理方案JS屬于靜態(tài)文件,在我們不需要更新它的時候我們希望它在用戶的瀏覽器端緩存的時間越長時間越好.而我們需要它更新時,往往需要配合JSP,PHP的修改立即生效.一般做法,在服務(wù)端動態(tài)腳本配置資源版本號,通過URL參數(shù)區(qū)分版本,引入資源,如:/a.js?v=1.js

/a.css?v=1.css紅色部分在版本號后面又加了文件后綴是因為IE6早期版本的一個bug.通過URL參數(shù)區(qū)分版本可能受到代理服務(wù)器影響,建議:/v1/a.js/v1/a.css364.2.2嘗試僅做必要的JS更新Google的Diffable項目,采用增量更新機制使得JavaScript只下載更新的部分.在GoogleMap的項目中,20%-25%的用戶可以獲得1.2S(25%)的性能提升37/blog/2010/07/09/diffable-only-download-the-deltas/4.2.3利用本地存儲,只做必要的更新Flash默認為每個域名提供100K的本地存儲空間,Flash的ActionScript3可以將二進制內(nèi)容存入ShareObject.在新一輪的BannerMaker性能優(yōu)化中,我們正嘗試更好的模塊化設(shè)計,將編譯后的模塊存在本地備用.另外瀏覽器也提供其他本地存儲技術(shù),也有網(wǎng)站應(yīng)用這些技術(shù)做JS的緩存.384.3減少實際收發(fā)數(shù)據(jù)量394.3.1最小化html前面的規(guī)則要求我們最小化JS和CSS而html也應(yīng)該最小化,去掉回車和首尾空格.但是HTML的壓縮存在風險,YAHOO也沒有壓縮HTML,詳見玉伯的說明:/blog/2010/05/why-dont-compress-html/

特定系統(tǒng)中,風險可以規(guī)避或者通過測試排除404.3.2進一步討論Gzip

雖然包括IE6在內(nèi)所有主流瀏覽器都支持Gzip但仍有15%-25%的用戶獲取到?jīng)]有壓縮的數(shù)據(jù).

原因是在網(wǎng)路上存在代理服務(wù)器和一些病毒防火墻.過濾掉了RequestHeader中的接受Gzip信息.Gzip檢測:發(fā)送一段Gzip后的JS代碼,如果正確執(zhí)行種cookie,表明之后可以發(fā)回Gzip數(shù)據(jù)建議安全廠商去掉Gzip標識過濾

另一方面,面向Gzip加密算法,提高壓縮比例.比如我們的廣告點擊加密串,一次取多條廣告在加密時,pv級別信息放在一起可以讓Gzip后的數(shù)據(jù)減少3成左右.414.4縮短HTTP請求時間

424.4.1進一步討論域劃分根源:IE6+HTTP1.1，對于同一個域名只能同時進行2個連接.新瀏覽器擴展了連接限制.但IE6始終大量存在而過多的域會導(dǎo)致DNS尋址時間加長.使用HTTP1.0可以將連接數(shù)擴大到4,但帶來了緩存方面的困擾,需要處理好.如何確定域劃分和具體業(yè)務(wù)關(guān)系很大,比如淘寶將圖片分別存放在8個域名中,隨著新式瀏覽器的增多,以及微軟在windowsupdate中對IE6的更新,域名會逐步縮減.434.4.2打開keep-alive重用HTTP連接服務(wù)打開keep-alive后,連接會保持指定的一段時間才關(guān)閉,后續(xù)的請求可以重用此連接,節(jié)省了HTTP請求中域名解析和建立連接的耗時.打開keep-alive會給服務(wù)端造成額外的壓力,而且連接時串行的,同一連接同一時間只服務(wù)一個HTTP請求.所以要根據(jù)實際情況(頁面停留時間)調(diào)節(jié)keep-alive時間.444.5JavaScript優(yōu)化454.5.1使用JSON進行數(shù)據(jù)交換JSON在瀏覽器端解析的效率至少高于XML解析效率1個數(shù)量級,如果說AJAX的X代表XML,那么當前我們使用的技術(shù)應(yīng)該稱AJAJJSON在新瀏覽器中內(nèi)置了生成和解析的方法,在IE6等老式瀏覽器中,要使用額外的JS方法來解析(),不要使用eval,可能會帶來安全問題和性能問題.464.5.2保障網(wǎng)頁的可交互性JavaScript為單線程語言,在運行時頁面會處于鎖定狀態(tài),任何操作沒有響應(yīng).所以JS進行大量運算時,要使用相關(guān)技術(shù)保障頁面持續(xù)可交互在所有瀏覽器中可以實現(xiàn)的方法是,使用setTimeout將大量的循環(huán)調(diào)用分組執(zhí)行,每隔一段時間執(zhí)行一組操作,稱Timer.針對Ajax的XHR請求,絕對不要使用同步模式,否則瀏覽器會鎖住,知道XHR獲得到了服務(wù)器端返回數(shù)據(jù).因為數(shù)據(jù)返回依賴網(wǎng)絡(luò),時間較長,錯誤可能較大.HTML5規(guī)范的WebWorker為JS提供了多線程機制,線程間使用消息事件聯(lián)系.異步的XHR也相當于多線程.474.5.3縮短最快可交互時間(TTI)最快可交互時間指從瀏覽器開始訪問網(wǎng)頁,到網(wǎng)頁可以正確處理UI事件交互的時間受到挑戰(zhàn)的是規(guī)則把JS放在底部,因為JS放在底部,JS下載和運行依然需要時間.Facebook做法:head加載一個小JS文件,在底部JS加載運行之前,頁面事件會請求專門處理這個事件的小段腳本,快速響應(yīng)Yahoo首頁實踐:縮減初始化載入內(nèi)容,減少底部腳本,加快DomReady,讓重點部分可交互.其余部分延遲加載MS正在研發(fā)中的工具Doloto:JS中有大部分在初始化時沒有調(diào)用,通過自動切分出需要的部分.484.5.4異步無阻腳本下載技術(shù)/blog/2009/04/27/loading-scripts-without-blocking/steve的blog介紹了大多數(shù)方案

ScriptDomElement:主要使用Dom方法創(chuàng)建Script節(jié)點,添加到DomTree中.只要指定了腳本的async屬性,除了Opera瀏覽器,腳本的下載和執(zhí)行不會阻滯頁面的下載.IFramedJS:使用dom方法,動態(tài)構(gòu)建一個沒有src的<iframe>節(jié)點,通過iframe.contentWindow.document.write().在iframe內(nèi)加載腳本隨之而來的問題:通過這種模式下載多個具有依賴關(guān)系的腳本,順序問題需要解決.YUI3:維護腳本之間的依賴關(guān)系,通過loader組件順序的異步加載腳本,結(jié)合Combo獲取更好的性能494.5.5優(yōu)化內(nèi)存使用,防止內(nèi)存泄露delete不再需要的對象移除DomTree中不再需要的節(jié)點移除節(jié)點之前先注銷節(jié)點上綁定的事件盡量避免JSObject和DomObject的雙向引用(特別需要注意IE下隱式的雙向引用,如事件注冊)注意XHR也可能引入的內(nèi)存泄露/2006/10/msie-memory-leaks/

504.5.6高效JavaScript的一些Tips訪問局部變量的速度最快優(yōu)化循環(huán)(猜測最易退出處開始)和條件(類似二分法)大量字符串鏈接操作優(yōu)化(老式瀏覽器用arr.join(""))使用事件代理http:///blog/2009/06/30/event-delegation-in-javascript/

優(yōu)化Dom訪問/dom-access-optimization/

使用4.5.2節(jié)的Timer技術(shù),保持交互流暢514.5.7第三方代碼相關(guān)性能問題第三方代碼普遍存在性能問題和隱患.主要是腳本阻滯,HTTP過多等.Steve最近開展了Performanceof3rdPartyContent系列調(diào)查,評估美國主要的Mashup公司的埋點代碼,并給出改進意見./p3pc/

Google對Analytics做了相關(guān)優(yōu)化,Adsence優(yōu)化進行中參見Velocity2010:Don'tLetThirdPartiesSlowYouDown(/velocity2010/public/schedule/detail/15412)最近在懶懶的廣告代碼優(yōu)化相關(guān)分享:http:///taobaoued/ss-4888423

524.6CSS優(yōu)化534.6.1內(nèi)聯(lián)腳本不要與樣式表穿插使用<linkhref="1.css"/><script></script><linkhref="2.css"/><linkhref="3.css"/>建議將內(nèi)聯(lián)腳本放在CSS之上./blog/2010/02/15/browser-performance-wishlist/#stylesheet_js544.6.2使用高效的CSS選擇器從3.4節(jié)微軟給出的分析可以看出,CSS的消耗在瀏覽器全部消耗的很大比重.所以有必要優(yōu)化CSS,使用高效的CSS選擇器,達到快速渲染,格式化的目的.詳情參見Google的文檔:http:///intl/zh-CN/speed/speed/docs/rendering.html#UseEfficientCSSSelectors

554.7HTML優(yōu)化564.7.1進一步討論提早Flush57通常提早Flush</head>之前的內(nèi)容其實可以Flush更多次,但是要注意<body>中內(nèi)容的Flush,只有<body>的直接子節(jié)點之后Flush,才能達到提前渲染的目的:<body><div></div> <Flush達到預(yù)期<div></div></body><body><div>

<div></div>

<Flush失敗

<div></div>

</div></body>目標應(yīng)用:首頁搜索框,Search頁廣告FacebookBigPipe技術(shù)網(wǎng)站速度提升一倍:http:///notes/facebook-engineering/making-facebook-2x-faster/307069903919

4.21有關(guān)視覺和心理學584.21有關(guān)視覺和心理學59有沒有感覺快了些?5總結(jié)605.1--14條優(yōu)化軍規(guī)1. 盡可能的減少HTTP請求數(shù)2. 使用CDN3. 添加Expires頭(或者Cache-control)4. Gzip組件5. 把CSS樣式放在頁面的上方。6. 將腳本放在底部(包括內(nèi)聯(lián)的)7. 避免在CSS中使用Expressions8. 將javascript和css獨立成外部文件9. 減少DNS查詢10. 壓縮JavaScript和CSS文件(包括內(nèi)聯(lián)的)11. 避免跳轉(zhuǎn)12. 移除重復(fù)的腳本13. 配置ETags14. 緩存Ajax請求615.2--21條最佳實踐15. 盡早刷新緩沖區(qū)16. 用GET方法發(fā)送Ajax請求17. 組件延遲加載18. 組件預(yù)加載19. 減少DOM元素個數(shù)20. 多域并行下載21. 盡量少用iframes22. 避免404錯誤23. 減小cookie的大小24. 對某些靜態(tài)資源減少無謂的cookie傳輸25. 減少訪問DOM的次數(shù)26. 編寫聰明的事件處理器代碼27. 使用<link>而不是@import28. 避免使用CSS濾鏡29. 優(yōu)化圖片30. 優(yōu)化CSSsprites31. 不要在