如何在地图上打点数百万条数据

要将大量数据打点到地图上，原以为添加多个IFrame，充分利用多进程的优势，可以增加打点的数量与速度，结果大相径庭，Iframe数量越多，性能越差，具体测试数据如下，消耗时间单位为毫秒：

打点数量\窗口数量	1个窗口	4个窗口	16个窗口
100000	517	1167	3662
200000	1622	3319	5342
400000	3241	8159	10516
500000	4018	8159	10307
100000	8064	95756	24555

可见，超过400000个数量后，打点等待的时间都过长，对用户而言，几乎处于不可用的状态。

改进方案1： 增量打点

将所有的大数据点划分为多个批次，依次打入，如将400000个节点划分为40次，每次10000个点依次打入（此数字还可以调优），总共消耗的时间为3019(带有一定的随机性)，竟然性能还略有提升，更重要的是，用户的体验提升了很多，依据JS的主线程理论，其他的代码也有机会得到执行，不会产生卡死或长期等待的现象，效果如下所示。

示例代码如下：

var inv = 0,
    perDots = 10000, // 每次打点数量
    times = Math.ceil(counter / perDots);   //  总共打点次数
//  定义定时器   
var timer = setInterval(function() {
    //  结束定时器
    if(inv == times) {
        clearInterval(timer)
        return;
    }
    for(var i = 0; i < perDots; i ++) {
        //  数据打点
        Drawer.drawPoint(Math.round(Math.random() * Drawer.width), Math.round(Math.random() * Drawer.height))
    }
    times ++;
    //  统计技术数据
    parent.Tester.addTime(Date.now())
}, 1)

按照此种方式，打点的数量还可以继续增加，初步测试，打点1000000条数据基本无压力。

改进方案2： 服务器渲染

将地图与所有的数据在数据器渲染完成，然后发送到客户端，这样能充分发挥服务器多线程的优势，尤其在巨型图布局时优势明显，例如上数十万个节点的拓扑图，更能一次渲染，多次使用(易于缓存)，但问题在于对浏览器分辨率的适应性不好。

结论

从以上的测试可以看出，在浏览器上大批量数据打点，最消耗的不是CPU，而是GPU的运作。