Chrome下填充10w个div实验

综上,批量添加div时,应先将容器隐藏,使其只在内存操作,完成后再显示出来;应该使用display:none;鉴于页面上通常也就1000+个链接,所以测试10倍左右2w个div,可以接受

首先需要解决的是浏览器里有大量绝对定位的元素的效率问题。flash当中可以用一张位图来绘制所有的点击记录,为了能让html版尽量兼容更多的浏览器,采用div来承担这个任务是必要的。所以先来就是测试页面当中包含多少div,交互效果可以接受。

过程就不说了,很简单的代码,看下演示地址就好(我只测试了最新版Chrome)

http://works.meathill.com/astinus/testcase/numbericDivs/

然后得到以下结论:

  1. 添加并渲染dom节点时间开销最大
  2. 内存中操作的话,开销很小
  3. 综上,批量添加div时,应先将容器隐藏,使其只在内存操作,完成后再显示出来
  4. 对比两种隐藏方式,visibility:hidden比起display:none,时间开销增加2/3,所以应该使用display:none,虽然这样会使得页面抖动。
  5. 渲染结束后,使用CSS:hover追踪鼠标事件变得很慢(10w),降低到1w速度明显变快
  6. 鉴于页面上通常也就1000+个链接,所以测试10倍左右2w个div,可以接受
  7. 渲染完成后,Firefox响应鼠标很慢;Opera对先隐藏再渲染反应也不敏感,最慢;IE不支持const,所以还没测

于是,我认为,使用html+js生成肉山热区图不太可行的,必须优化,减少页面中的div数量,以及限制应用场景。接下来,要考虑具体实现。