虚拟dom的运用

  • 最近的开发中,遇到一个很头疼的事情,使用HTML5的canvas画布绘图的时候,画布要加载的数据很多,要进行不同画布之间进行切换时候,每一次切换,都要进行重新调用加载的方法,因为数据量大的问题,导致加载速度很慢。对于这个问题,进行了以下方面思考:

  1. 对多画面的加载,进行分布式加载。就是把以上要加载的东西,进行每一个小块的加载,然后利用js的回调机制,让画布列表先加载起来,然后在根据对应的画布,进行画布的数据加载。这个方法能够解决很大一部分的问题,其实总的加载时间是差不多的,但是把画布先加载起来,或者先把主要的东西加载给用户看,让用户觉得已经加载完了,但是其实并没有,剩下的是在回调中进行着,然后当用户反映过来时,已经悄悄的加载完成了。这个方法也有一个问题,就是当一个画布中的数据量很大,那它加载的时间还是会很慢。特别是多画面进行快速切换的时候,每一个切换要等待3-5秒左右,这个让用户体验度大打折扣。

  2. 然后就想到了一种加载一次,就能够一直使用的方法,不需要再进行反复加载。实现的大概思路是这样的:先把要添加的画布都初始化出来,但是不放到页面中,先保存至内存当中,把对应的数据进行load进去,当要显示对应画面的时候,就把对应的画面取出来,然后放到指定的div当中去。这样实现的好处是,不需要每次要显示的时候都要去调用load方法,然后需要进行对应画布的数据修改的时候,可以在看不到的时候就进行修改,因为把所有的数据都保存在内存当中,修改起来是很快的。当然,这也存在一个问题,就是当画面很多的时候,浏览器占用的内存就会很大,而且一直保持着那么大(当然,也有一定好处,就是不会而外增加)。

 

Leave a Reply

Your email address will not be published. Required fields are marked *