Chrome下填充10w个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数量，以及限制应用场景。接下来，要考虑具体实现。