IE 團(tuán)隊(duì)的前端性能優(yōu)化建議 2009-3-18 ~ 2009-3-20,微軟面向Web

1、IE 團(tuán)隊(duì)的前端性能優(yōu)化建議2009-3-18 Web 開發(fā)和 Web 設(shè)計(jì)人員的 MIX 09 年度大會(huì)在拉斯”The Next Web 120 多來自各國的專家參會(huì)。視頻及 PPT 在此下載，雖然其中多數(shù)是微軟的產(chǎn)品宣講，不過也有一些很有價(jià)值的分享， 比如：C23FWindows Internet Explorer 8 in the Real World: How Is Internet Explorer 8 UsedC24FMeasuring Social Media MarketingC26FDesigning the Windows 7 Desktop ExperienceT25FW

2、eb Development Using Microsoft Visual Studio: Now and in the Future今天主要介紹的是 IE 下PPT出處：Building High Performance Web Applications and Sites演講人：John Hrvatin，Internet Explorer 項(xiàng)目經(jīng)理翻譯整理：ytzong中心思想：適用于所有瀏覽器沒有魔術(shù)般的解決方案考慮可維護(hù)性Top 100 sites IE8 CPU 使用情況：84% 16% JScript & DOMTop AJAX sites IE8 CPU 使用情況：67% 33%

3、 JScript & DOM從以下 4 個(gè)方面來進(jìn)行優(yōu)化：CSS 性能：盡量減少樣式未用到的樣式增加了下載量瀏覽器必須解析并匹配所有選擇器失敗代價(jià)很高！簡化選擇器復(fù)合的元素選擇器會(huì)慢盡可能使用 class 或 ID 選擇器元素選擇器盡可能簡單使用子(descendent)選擇器不要混用 RTL 和 LTR減少樣式使這一切變得簡單DEMO：差：table tr td ul li color: green;table tr td ul li color: green;好：li#pass color: green;li#pass color: green;差：ul li color: purple;

4、ul li color: purple;好：ul li color: purple;ul li color: purple;不要使用 expressions慢 通常被這樣評價(jià)IE8 標(biāo)準(zhǔn)模式不支持盡量減少頁面重新布局移動(dòng)內(nèi)容體驗(yàn)不好瀏覽器執(zhí)行不必要的任務(wù)簡化!優(yōu)化符號(hào)解析(Symbol )Watch for expensive name lookups緩存多次查找的為本地變量當(dāng)需要時(shí)才優(yōu)化考慮可維護(hù)性JavaScript 代碼低效()Use the native JSON objectTurn large switch statements into lookupsAvoid property

5、 access methodsMinimize DOM interactionUse querySelectorAll for groups當(dāng)需要時(shí)才優(yōu)化考慮可維護(hù)性HTTP 性能：典型的訪問緩存請求JSCSS圖片HTML瀏覽器布局執(zhí)行腳本更多下載針對此的優(yōu)化：不要拉伸圖片JS/CSS(sprites)重復(fù)訪問HTTP 請求Pragma:no-cache簡單的 HTTP 請求Pragma:no-cache時(shí)間條件If-modified-since:date,timeIf-modified-since:date,time請求GET /images/banner.jpg HTTP/1.1Host:

6、 HYPERLINK / If-Modified-Since:Wed, 22 Feb 2006 04:15:54 GMT響應(yīng)HTTP/1.1 304 Not ModifiedContent-Type:Last-Modified:Wed, 22 Feb 2006 04:15:54 GMT提供緩存內(nèi)容Expires:Expires:Max-age:#seconds請求GET /images/banner.jpg HTTP/1.1Host: HYPERLINK / 響應(yīng)HTTP/1.1 200 OKContent-Type: image/jpegExpires:Fri, 12 Jun 2009 02:50:50 GMT請求GET /images/ban