1、WEB前端優(yōu)化2010-12-25目錄關(guān)于Web01優(yōu)化對比分析03怎么優(yōu)化04為什么需要優(yōu)化02目錄關(guān)于Web01優(yōu)化對比分析03怎么優(yōu)化04為什么需要優(yōu)化02關(guān)于WebWeb 是新媒體，它來自印刷，印刷的技巧，設(shè)計及慣例對 Web 影響巨大。那些“殺手級網(wǎng)站”常常是那些對 Web 的野性加以馴服，讓頁面中規(guī)中矩就象它們也是紙張一樣的網(wǎng)站，也就是桌面印刷版的 Web。這種風(fēng)尚很自然，但我們需要前進，讓 Web 成為它自己的媒體，擁有自己的天性。關(guān)于Web核心價值互聯(lián)網(wǎng)用戶及市場信息服務(wù)商Internet User&Marketing Information Provider市場信息互聯(lián)網(wǎng)用戶

2、監(jiān)測分析發(fā)現(xiàn)監(jiān)測終端用戶訪問體驗分析運維及服務(wù)的表現(xiàn)發(fā)現(xiàn)運營者的優(yōu)化策略監(jiān)測截獲的訪問流量分析市場表現(xiàn)及發(fā)展動態(tài)發(fā)現(xiàn)市場商機目錄關(guān)于Web01優(yōu)化分析03怎么優(yōu)化04為什么需要優(yōu)化02為什么需要優(yōu)化決策層市場部門客戶服務(wù)技術(shù)部門: 我在外地出差，為什么無法訪問網(wǎng)站？技術(shù)部門: 為什么我們網(wǎng)站速度比競爭對手差？技術(shù)部門: 用戶投訴網(wǎng)站頁面打開太慢所有問題歸結(jié)于技術(shù)部門為什么需要優(yōu)化時間花哪里去了？13.7/729.4 = 1.88%為什么需要優(yōu)化時間花哪里去了？26.5/543.1 = 4.88%為什么需要優(yōu)化時間花哪里去了？只有10%-20%的最終用戶響應(yīng)時間花在了下載html文檔上,其余80

3、%-90%時間花在了下載頁面的相關(guān)組件上。如：圖片、Flash為什么需要優(yōu)化時間花哪里去了？為什么需要優(yōu)化時間花哪里去了？腳本的加載是按順序串行加載的瀏覽器在下載腳本時會阻塞額外的http請求目錄關(guān)于Web01優(yōu)化對比分析03怎么優(yōu)化04為什么需要優(yōu)化02優(yōu)化對比分析設(shè)備優(yōu)化優(yōu)化對比分析內(nèi)容優(yōu)化在不減少內(nèi)容的情況下，優(yōu)化結(jié)構(gòu)代碼優(yōu)化首屏?xí)r間內(nèi)的對象數(shù)控制頁面每個元素（圖片，Javascript，CSS等）其他內(nèi)容優(yōu)化手段可以提高用戶體驗：40 50目錄關(guān)于Web01優(yōu)化對比分析03怎么優(yōu)化04為什么需要優(yōu)化02怎么優(yōu)化只有10%-20%的最終用戶響應(yīng)時間花在了下載html文檔上, 其余80%-

4、90%時間花在了下載頁面的相關(guān)組件上。怎么優(yōu)化(1) 減少HTTP請求合并文件將多個CSS文件或Javascript文件合并成一個圖片地圖在一個圖像上劃分不同區(qū)域映射不同的鏈接內(nèi)聯(lián)圖像讓圖像與文本一起下載和顯示CSS Sprites利用 CSS background 相關(guān)元素進行背景圖絕對定位怎么優(yōu)化(2) 緩存怎么優(yōu)化(3) 減少文件大小 壓縮Javascript和CSS文件1 優(yōu)化代碼2怎么優(yōu)化(3) 減少文件大小優(yōu)化代碼去除不必要的html標(biāo)簽：a. b. margin 或者 padding、letter-spacing避免內(nèi)聯(lián)式樣式： css styleCSS代碼優(yōu)化：a. .colo

5、r1 color:Red; .color2 color:Red; .color1,.color2color:Red;b. .style1border-left:solid 1px #112233;border-right:solid 1px #112233 ;border-top:solid 1px #112233 ;border-bottom:solid 1px #112233 ; .style1border:solid 1px #112233;c. #ffffff #fff ; #66aa00 #6a0d. 0px ; 0pt 0怎么優(yōu)化(4) 將樣式表放在頂部css，全稱Cascadin

6、g Style Sheets(層疊樣式表單)。層疊即意味這后面的css可以覆蓋前面的css，級別高的css可以覆蓋級別低的css。既然前面的可以被覆蓋，瀏覽器在他完全加載完畢之后再去渲染無疑也是合情合理的很多瀏覽器下，所以我們應(yīng)該盡快讓css加載完畢.怎么優(yōu)化(4) 將script放在底部1、因為防止script腳本的執(zhí)行阻塞頁面的下載。2、腳本引起的第二個問題是它阻塞并行下載數(shù)量。怎么優(yōu)化(5)減少DNS查詢 在 Internet上域名與IP地址之間是一一對應(yīng)的，域名（）很好記，但計算機不認識，計算機之間的“相認”還要轉(zhuǎn)成ip地址。在網(wǎng)絡(luò)上每臺計算機都對應(yīng)有一個獨立的ip地址。在域名和ip地

7、址之間的轉(zhuǎn)換工作稱為域名解析，也稱DNS查詢。一次DNS的解析過程會消耗20-120毫秒的時間,在dns查詢結(jié)束之前，瀏覽器不會下載該域名下的任何東西。所以減少dns查詢的時間可以加快頁面的加載速度。怎么優(yōu)化(6) 避免重定向頁面的重定向會消耗一定的時間。例： 當(dāng)輸入的時候服務(wù)器會自動產(chǎn)生一個301服務(wù)器轉(zhuǎn)向 發(fā)生重定向的原因有很多，但是不變的是每增加一次重定向就會增加一次web請求，所以因該盡量減少怎么優(yōu)化(7)杜絕 http 404 錯誤404錯誤是由于未找到文件引起的。HTTP請求時間消耗是很大的，因此使用HTTP請求來獲得一個沒有用處的響應(yīng)（例如404沒有找到頁面）是完全沒有必要的，它只會降低用戶體驗而不會有一點好處。 有些站點把404錯誤響應(yīng)頁面改為“你是不是要找*”，這雖然改進了用戶體驗但是同樣也會浪費服