1、網絡電視事業部 開發工程師 什么是網站性能 為什么要做性能優化 誰去做 怎么做 一點實踐Amazon： EXP .1 EXP .2 前端工程師 ? or 運維工程師 ?http:/ cachehttp:/ Round-Trip Time ) 查詢DNS建立鏈接發送請求等待響應返回數據處理數據渲染元素讀取cache預處理建立鏈接發送請求等待響應返回數據處理數據渲染元素讀取cache預處理查詢DNS發送請求等待響應返回數據處理數據渲染元素讀取cacheHUser-AgentMozilla/5.0 Gecko/20101026 Firefox/3.6.12Accepttext/html,applic

2、ation/xhtml+xml,application/xmlAccept-Languagezh-cn,zhAccept-Encodinggzip,deflateAccept-CharsetGB2312,utf-8Keep-Alive115Connectionkeep-aliveCookieALLYESID4=01A1BC8DCF97116F預處理查詢DNS建立鏈接等待響應返回數據處理數據渲染元素讀取cache預處理查詢DNS建立鏈接發送請求返回數據處理數據渲染元素讀取cache服務器負載數據庫查詢服務端緩存預處理查詢DNS建立鏈接發送請求等待響應處理數據渲染元素讀取cache受帶寬影響 JS

3、，CSS，HTML 做gzip壓縮 刪除js，css文件的注釋 刪除無效的css 緩存改動不大的文件緩存favicon.ico文件 精簡HTML減少DOM元素 優化img文件文件大小預處理查詢DNS建立鏈接發送請求等待響應返回數據處理數據渲染元素 響應304請求Cache-Controlcache-control: max-age=31536000cache-control: privatecache-control: no-cacheExpires expires: Sat, 04 Dec 2010 01:00:43 GMT預處理查詢DNS建立鏈接發送請求等待響應返回數據渲染元素讀取cach

4、e不要對img進行Gzip壓縮預處理查詢DNS建立鏈接發送請求等待響應返回數據處理數據讀取cacheHTML 減少DOM IMG注明：width，heightCSS CSS放在頂部 避免import 避免使用低效選擇符CSSJavaScript script放在head內？ JavaScript放在底部 算法，循環解析HTML，樣式計算，布局，DOM操作，JS解析nhttp:/2010.2cacheno cachenhttp:/nhttp:/nhttp:/nhttp:/HTML去掉注釋，回車符，以及無效字節可節省 65K ( 28%）JavaScript利用 JSMin / YUI Compr

5、essor 工具（每個JS文件可降低26%文件大?。﹏http:/http:/ http:/ http:/ http:/ JavaScriptCSSnhttp:/( http:/ )Minifyscript type=text/javascript”src=http:/ min文件夾 到 網站目錄下，配置 min/config.phpApache配置 mod_Rewrite 或者使用g參數（需配置min/groupsConfig.php）Done！28X28nhttp:/.no3 background : transparent url( ./images/no713.jpg );backgr

6、ound-position : 0 -30px;width : 15px;height : 15px;nhttp:/ http:/ 第一時間顯示logo圖和背景，避免空白和無背景l在img標簽中指定尺寸： 提升瀏覽器渲染效率Googlel預處理nhttp:/CSS放到header中：避免白屏Javascript放置底部：避免阻塞下載JS ，CSS 寫在html內？還是外部link？nhttp:/廣告與頁面分離增加并行下載數提升整站下載時間nhttp:/http:/ (88% reduction).http:/ (45% reduction)http:/ (36% reduction)壓縮html文件，js文件，css文件?？蓽p少文件大小至少60%TYPESIZEGZIPURLd