1
alexrezit 2014-01-20 21:22:01 +08:00
这玩意儿应该用 canvas 或者至少是 table 吧...
|
2
binux 2014-01-20 21:27:30 +08:00
让我猜猜,你是不是一个div一个div追加到页面里面去的?
|
5
ry_wang OP @binux 就是一次追加进去的,但是监控项实在太多了。。
就拿这个图,好几千台机器,每台机器都至少10个分区。。。所以能不慢么。。。 |
6
unstop 2014-01-20 21:39:34 +08:00
用 DIV 画是 OK 的,但是如果一个一个追加会有性能问题,因为导致了页面回流(reflow)之类的。@binux 的方案是可以的,先在 JS 里面拼接完毕之后再一次性加进去。
另外,D3 有一个实现了类似效果的示例:http://mbostock.github.io/d3/talk/20111018/calendar.html 话说回来,用 JS 自己画 Canvas 应该是最好的方案。 |
7
ry_wang OP |
8
unstop 2014-01-20 21:49:38 +08:00 1
@ry_wang 另外我刚刚在搜索 D3 的这个示例的时候找到了这个,可能有帮助: http://kamisama.github.io/cal-heatmap/
|
10
binux 2014-01-20 22:09:16 +08:00
@ry_wang http://jsbin.com/aSelozi/1
很慢吗?根本没有啊,10w个div毫无压力啊,当然js执行是要很久,谁让数据量那么大 不能分页吗,或者分开部分加载 你确定是div的问题而不是模板引擎的问题,或者是reflow次数太多的问题? |
11
9hills 2014-01-20 22:17:55 +08:00
这个想法很不错
|
12
ry_wang OP |
13
ayanamist 2014-01-20 23:16:38 +08:00
|
15
alexapollo 2014-01-20 23:30:55 +08:00
做tuning嘛,做异步加载就好了,先把主页面加载进去,然后一个一个把小灯点亮~
|
16
miniwade514 2014-01-21 09:43:42 +08:00
感觉用 canvas 会更快吧, JS 的运算量相当,但是不用碰 DOM
|
17
loading 2014-02-13 12:41:06 +08:00
在个人主页导航做过类似的东西,就是一个个div,把它变成点阵屏幕。。。还写了26字幕的map。
IE爆卡。。。 |