优化JS客户端速度之倒行逆施篇

在网上大多数的文章里都有教大家怎么优化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中不会。不知道是不是有其它原因造成,以后有时间再研究看看

你可能感兴趣的:(优化JS客户端速度之倒行逆施篇)