讓我們戴上有色眼鏡,-Web性能優(yōu)化分享 QQ空間產(chǎn)品中心 Stonehuang,Web性能優(yōu)化分享,對(duì)于一個(gè)不斷發(fā)展的Web應(yīng)用，優(yōu)化如同逆水行舟，不進(jìn)則退。,閉著眼睛也能優(yōu)化,頁面內(nèi)容實(shí)現(xiàn)動(dòng)靜分離 頁面HTML用JS生成 全面推廣Ajax技術(shù) 前臺(tái)對(duì)不同業(yè)務(wù)模塊數(shù)據(jù)做mash-up 動(dòng)態(tài)數(shù)據(jù)實(shí)現(xiàn)合并和靜態(tài)化 異步化 各種各樣看似合理的嘗試和瞎忙活,我們?cè)缙诘膬?yōu)化成果,好像，大概，應(yīng)該，也許，可能有些效果吧？ 數(shù)據(jù)是很少滴！ 我們居然成功了，這要感謝我們前面有那么多的瓶頸，還有那么多公認(rèn)的優(yōu)化準(zhǔn)則（銀彈）可以套用,優(yōu)化平臺(tái)期,我們做了很多優(yōu)化，打開速度也感覺快了很多，抱怨了少了一些，可是 哪個(gè)優(yōu)化貢獻(xiàn)最大？有多大影響？ 所有用戶都快了嗎？ 夠快了嗎？還能再快些嗎？ 為什么有的時(shí)候還是感覺慢？ 為什么有些用戶還是抱怨慢？,優(yōu)化平臺(tái)期,公認(rèn)的優(yōu)化手段幾乎都用上了，還有新的銀彈嗎？ 有些優(yōu)化手段代價(jià)很高，值得做嗎？ 有些優(yōu)化手段似乎相互矛盾，聽誰的呢？ 為什么優(yōu)化效果有反彈？,帶上有色眼鏡,轉(zhuǎn)換不同的角度審視web應(yīng)用 用不同的監(jiān)控手段監(jiān)控web應(yīng)用的不同方面 為了滿足自己的獨(dú)特視角，發(fā)明自己獨(dú)特的監(jiān)控方式和工具 想盡辦法，發(fā)現(xiàn)自己真正的優(yōu)化點(diǎn) 每個(gè)優(yōu)化有沒效果，都需要有反饋,早期的監(jiān)控,早期的監(jiān)控,早期的監(jiān)控,自產(chǎn)自銷的簡(jiǎn)單數(shù)據(jù)分析工具,早期的監(jiān)控,自產(chǎn)自銷的簡(jiǎn)單數(shù)據(jù)分析工具,持續(xù)進(jìn)化的測(cè)速系統(tǒng),持續(xù)進(jìn)化的測(cè)速系統(tǒng),持續(xù)進(jìn)化的測(cè)速系統(tǒng),持續(xù)進(jìn)化的測(cè)速系統(tǒng),持續(xù)進(jìn)化的測(cè)速系統(tǒng),持續(xù)進(jìn)化的測(cè)速系統(tǒng),持續(xù)進(jìn)化的測(cè)速系統(tǒng),持續(xù)進(jìn)化的測(cè)速系統(tǒng),教育網(wǎng)12月份,持續(xù)進(jìn)化的測(cè)速系統(tǒng),教育網(wǎng)1月份,持續(xù)進(jìn)化的測(cè)速系統(tǒng),Gomez數(shù)據(jù)采樣分析工具,HttpWatch分析工具,HttpWatch分析工具,限速工具,限速工具,YSlow,YSlow,自產(chǎn)自銷的小工具,自產(chǎn)自銷的小工具,透過有色眼鏡看問題,從靜態(tài)化率波動(dòng)我們看到了： 每個(gè)新特性對(duì)數(shù)據(jù)產(chǎn)生的影響 每次數(shù)據(jù)遷移帶來的影響 最迫切需要主動(dòng)靜態(tài)化的數(shù)據(jù) 程序的bug（相冊(cè)無封面、個(gè)人信息轉(zhuǎn)義符，甚至留言板XSS） 服務(wù)器壓力不均造成的影響 當(dāng)前系統(tǒng)的趨勢(shì)是在變好還是變壞,透過有色眼鏡看問題,從時(shí)間點(diǎn)統(tǒng)計(jì)曲線我們看到了： 每天24個(gè)時(shí)段的用戶感受如何 各個(gè)省份各個(gè)ISP當(dāng)前情況如何 用戶花多少時(shí)間看到頁面 用戶花多少時(shí)間才能和頁面交互 這些時(shí)間是怎么花掉的 哪些用戶花費(fèi)的時(shí)間特別多 我們應(yīng)該從哪里下手繼續(xù)優(yōu)化,透過有色眼鏡看問題,用各種第三方工具我們看到了 頁面打開過程一般會(huì)發(fā)生些什么事情 某一個(gè)用戶在打開某個(gè)頁面時(shí)發(fā)生了什么 什么時(shí)候?yàn)g覽器在發(fā)呆 哪些過程產(chǎn)生了堵塞，為什么堵塞 有沒有不必要的請(qǐng)求和不必要的流量 如果網(wǎng)速很慢，會(huì)發(fā)生什么事情 如果電腦很慢，會(huì)發(fā)生什么事情 怎么讓用戶感覺好一點(diǎn),用有色眼鏡看待優(yōu)化手段,我們做了許多些別人建議的事情 合并圖片，合并腳本，壓縮代碼，使用Gzip，合并CSS，控制cookie膨脹，使用CDN，SEO,用有色眼鏡看待優(yōu)化手段,但即使是專家建議和公認(rèn)的準(zhǔn)則，我們也要進(jìn)行自己的思考和審視 拆分域名，盡可能并行下載？有更好的辦法嗎？ 頁面標(biāo)準(zhǔn)化？用戶價(jià)值在哪里？ 跨瀏覽器？非IE瀏覽器的用戶有多少？使用IE的用戶要付出的代價(jià)是什么？ 混淆壓縮代碼來減少流量？是否有更好的辦法？,只有不斷創(chuàng)新，才能持續(xù)優(yōu)化,我們還進(jìn)行了一些自己的思考和嘗試 網(wǎng)頁使用本地持久存儲(chǔ)：使用User Data和Share Object 動(dòng)態(tài)數(shù)據(jù)No Cache：嘗試允許和控制動(dòng)態(tài)數(shù)據(jù)Cache，并嘗試讓CGI放回304 全面改造AJAX為JSON+AJAX 動(dòng)態(tài)頁面分階段渲染 DNS解析錯(cuò)誤的矯正 優(yōu)化指南,CheckList,* 資源檢查（針對(duì)html，js，swf，css，圖片等） 是否新增加了文件請(qǐng)求？ 是否有404請(qǐng)求？ 新增加的文件請(qǐng)求響應(yīng)中是否有expirex頭（好頭）？ 新增加的文件請(qǐng)求響應(yīng)中是否有etag頭（壞頭）？ 新增加的文件請(qǐng)求是否支持gzip壓縮？ 新增加的文件請(qǐng)求下載過程是否有block? 新增加的文件請(qǐng)求下載過程是否導(dǎo)致其他資源block? 新增加的文件請(qǐng)求能否延遲加載？ 是否減少了文件請(qǐng)求或者合并了文件請(qǐng)求？ 新增加的請(qǐng)求能否被瀏覽器緩存？ 新增加的請(qǐng)求是否適合進(jìn)行長(zhǎng)時(shí)間緩存？ 在empty cache和full cache兩種情況下，是否有重復(fù)的文件請(qǐng)求？ 在empty cache和full cache兩種情況下，是否有abort的文件請(qǐng)求？ 新增加的文件請(qǐng)求是否需要通過一個(gè)301/302跳轉(zhuǎn) （針對(duì)imgcache）新增加的文件是否適合分散到新域名下？,CheckList,* Js檢查 新增加的js請(qǐng)求能否合并到現(xiàn)有的js請(qǐng)求或者頁面請(qǐng)求中？ 新增加的js請(qǐng)求是否在關(guān)鍵路徑上? 新增加的js請(qǐng)求能否放到body之后加載？能否延遲異步加載？ 新增加的js文件是否重寫了大量已有js文件的代碼？ Js文件能否進(jìn)行混淆和壓縮？ 循環(huán)中的計(jì)算有沒有能提出到循環(huán)外進(jìn)行的？ 有沒有大量連續(xù)的字符串連接操作（如有考慮用數(shù)組join） * CSS檢查 新增加的CSS是否有相互import？ 新增加的CSS是否大量復(fù)寫了原有CSS文件的大量規(guī)則？ 新增加的多個(gè)CSS能否合并？ CSS能否直接寫到html頁面中(可復(fù)用性高嗎?)？ 是否使用了expression？ 是否在hover樣式中重新聲明了背景圖片（會(huì)導(dǎo)致重復(fù)請(qǐng)求）？,CheckList,* 限速檢查 是否進(jìn)行過netlimiter限速測(cè)試？ 在限制IE下載進(jìn)程為2個(gè)和8個(gè)兩種情況下打開頁面的速度是否有明顯差異？ 是否進(jìn)行過cpukiller限速測(cè)試？ * http檢查 DNS Lookup次數(shù)： Block 請(qǐng)求個(gè)數(shù)（請(qǐng)求的）： 關(guān)鍵路徑上Block請(qǐng)求個(gè)數(shù) *Cookie檢查 是否創(chuàng)建了新的cookie? 是否創(chuàng)建了新的文件cookie? 是否創(chuàng)建了新的域名cookie? 能否用user-data或者share object代替cookie？ * 圖片檢查 新增加的圖片能否延遲到用戶要看的時(shí)候再加載？ 新增加的圖片是否用innerHTML方式填充到頁面中的（可能導(dǎo)致重復(fù)請(qǐng)求）？ 新增加的圖片是否需要進(jìn)行預(yù)加載？ 新增加的圖片能否合并到已有的圖片中？,CheckList,* Html檢查 是否使用了iframe？ Css是否寫在head中？ Script是否（能否）寫到頁面最下面？ Html文件能否進(jìn)行混淆和壓縮？ Inline的css是否使用了了expression,是否在hover樣式中重新聲明了背景圖片？ * flash檢查 Flash是否使用了比較耗費(fèi)cpu的渲染效果? Flash是否超過了100k？ Flash是否需要下載額外的網(wǎng)絡(luò)資源? Flash能否延遲加載? * Ajax檢查 頁面能否分階段渲染？ 頁面能否邊顯示（或者交互）邊渲染 寫操作是否用post方式提交