Posted on 2008-10-08 15:57
errorfun 閱讀(2248)
評論(2) 編輯 收藏 所屬分類:
JavaScript
在網上大多數的文章里都有教大家怎么優化JS，達到高性能，高效率。這些都說得很正確，同時也跟本文沒有任何沖突。
因為本文所要講的是在客戶使用感覺到的（用戶體驗）速度上的提升，而不是JS執行速度。
在很多JS應用中，優化的方向無非就是減少JS執行時間，比如減少深層對象a.b.c.d……這種形式的調用。但很多情況下，你會感覺優化得越多，頁面使用的速度感覺反而慢了。
這在我做過的三維地圖應用中就有很深的體會，電子地圖大家應該都用過的，像百度和GOOGLE的那樣，不過三維地圖上加載的元素就比他們豐富了一點（當然他們也可以加）。
每次拖動地圖時都會對地圖和加載的內容進行偏移。開始時沒感覺速度慢，但隨著JS優化的完成，每次拖動都會感覺頁面很“卡”。
但測試每次拖動開始到完成所耗的時間都差不多在32到100毫秒之間。這個速度應該說是很快了，應該是基本感覺不到延遲的才對。
在測試的過程中卻發現了一個有趣的事情，就是我在結束前又做了一次定位計算，使耗時加多了差不多一倍，這時拖動的速度明顯流暢了許多。
然后經過多次試驗后，得到一個結論：“卡”是因為速度太快了。因為每次都耗費很短的時間完成，在高速拖動的情況下，幾乎是每時每刻在處在高峰狀態。有點像CPU占用一直處于100%的感覺。
但這種情況只有在IE中會出現，在FF中卻沒有，估計是和IE本身的處理機制有關。
最后的解決方案就是：使用setTimeout處理移動的觸發事件。具體timeout的時間還是跟應用有關的，但一般設在10-30之間就夠了，有些卻只是設了0就可以了。這樣看來setTimeout倒有點像多起了一個線程在處理。
最近在寫的一個webgame程序也出現同樣的情況，突然想起之前的經驗，又一次驗證了setTimout對頁面速度提高的可行性，同時也將此分享給大家。
PS:在做過幾個WEB應用后發覺FF的圖像處理方面好像有點問題，在同一個IMG中切換圖片會出現一些殘像，IE中不會。不知道是不是有其它原因造成，以后有時間再研究看看