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