Posted on 2008-10-08 15:57
errorfun 阅读(2214)
评论(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中不会。不知道是不是有其它原因造成，以后有时间再研究看看