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