近期做1功能,Gis地图 基于百度地图api , 会遇到的问题的,

如后台接口给的数据很多,大几千上万的,如果拿了数据直接渲染dom ,这滋味爽爽的。

再遇上 客户端浏览器悲催的,这卡顿就来了...

前端大量数据渲染的一个弊端。

想到的处理方式:

1. 数据的去重合并

基于当前可是屏幕范围,拿到baidu对应的 经维度区域,baidu api 里有 getBounds 和 getZoom 方法

  1. var viewArea = map.getBounds(); // 可视区域
  2. var mapScale = map.getZoom(); // 地图放大缩小比例

对应后台接口返回数据,要拿基于这个可是区域的维度范围进行返回,

如果回来有万以上,在页面上展示这么多也没实际意义,

前端需要自己进行数据过滤,基于放大缩小比例, 屏幕上返回数据偏差不大的要进行去重  (这个算法就先不细说了)

最先想到的是 2组数据循环对比去重,怎么看都不太对啊,这要数据多了??? 不用想,绝对要挂的节奏....

-------------------------------

和架构师聊了,给了个建议,效率上好很多, 看下图:

给的思路:

1. 基于区域画格子,算出格子对应的经纬度,构造1个二维数组的数据;

2. 拿到后台返回的数据,循环时,算出在二位数组中对应的位置,如状态为无就认为该条数据有效,更改对应二位数组数据的状态, 如已经有状态了数量丢弃,对应的状态数量+1;

处理出有效的数据......扯的有点远了

2. 数据的分片渲染展示

如果有效数据还是很多,假如有大几千几万的,一次展示全也是苦哈哈的;

处理方式其实也不复杂, 把数据照一定数量进行分块,定时异步展示出;

如有6000条数据, 可照1000条拆成6组, 先拿1组展示,循环定时展示出其他....

思路基本上是这样

更多细节也可参考看到的一文章, 里面有个保持数据插入的次序不错,可作参考

JavaScript一次性展示几万条数据实例代码: http://www.php.cn/js-tutorial-360591.html

主要看思路:区域数据去重 + JavaScript一次性展示几万条数据实例代码的更多相关文章

  1. JavaScript如何一次性展示几万条数据

    有一位同事跟大家说他在网上看到一道面试题:“如果后台传给前端几万条数据,前端怎么渲染到页面上?”,如何回答? 于是办公室沸腾了, 同事们讨论开了, 你一言我一语说出自己的方案. 有的说直接循环遍历生成 ...

  2. 最短时间(几秒内)利用C#往SQLserver数据库一次性插入10万条数据

    用途说明: 公司要求做一个数据导入程序,要求将Excel数据,大批量的导入到数据库中,尽量少的访问数据库,高性能的对数据库进行存储.于是在网上进行查找,发现了一个比较好的解决方案,就是采用SqlBul ...

  3. QTreeView处理大量数据(使用1000万条数据,每次都只是部分刷新)

    如何使QTreeView快速显示1000万条数据,并且内存占用量少呢?这个问题困扰我很久,在网上找了好多相关资料,都没有找到合理的解决方案,今天在这里把我的解决方案提供给朋友们,供大家相互学习. 我开 ...

  4. 性能优化:虚拟列表,如何渲染10万条数据的dom,页面同时不卡顿

    列表大概有2万条数据,又不让做成分页,如果页面直接渲染2万条数据,在一些低配电脑上可能会照成页面卡死,基于这个需求,我们来手写一个虚拟列表 思路 列表中固定只显示少量的数据,比如60条 在列表滚动的时 ...

  5. 极限挑战—C#+ODP 100万条数据导入Oracle数据库仅用不到1秒

    链接地址:http://www.cnblogs.com/armyfai/p/4646213.html 要:在这里我们将看到的是C#中利用ODP实现在Oracle数据库中瞬间导入百万级数据,这对快速批量 ...

  6. (转)Python网络爬虫实战:世纪佳缘爬取近6万条数据

    又是一年双十一了,不知道从什么时候开始,双十一从“光棍节”变成了“双十一购物狂欢节”,最后一个属于单身狗的节日也成功被攻陷,成为了情侣们送礼物秀恩爱的节日. 翻着安静到死寂的聊天列表,我忽然惊醒,不行 ...

  7. 绝对干货,教你4分钟插入1000万条数据到mysql数据库表,快快进来

    我用到的数据库为,mysql数据库5.7版本的 1.首先自己准备好数据库表 其实我在插入1000万条数据的时候遇到了一些问题,现在先来解决他们,一开始我插入100万条数据时候报错,控制台的信息如下: ...

  8. Qt中提高sqlite的读写速度(使用事务一次性写入100万条数据)

    SQLite数据库本质上来讲就是一个磁盘上的文件,所以一切的数据库操作其实都会转化为对文件的操作,而频繁的文件操作将会是一个很好时的过程,会极大地影响数据库存取的速度.例如:向数据库中插入100万条数 ...

  9. 使用hibernate在5秒内插入11万条数据,你觉得可能吗?

    需求是这样的,需要查询某几个表的数据,然后插入到另外一个表. 一看到需求,很多人都会用hibernate去把这些数据都查询出来,然后放到list中, 然后再用for循环之类的进行遍历,一条一条的取出数 ...

随机推荐

  1. 在 Go 语言中使用 Log 包--转自GCTT

    Linux 在许多方面相对于 Windows 来说都是独特的,在 Linux 中编写程序也不例外.标准输出,标准 err 和 null devices 的使用不仅是一个好主意,也是一个原则.如果您的程 ...

  2. python之守护进程

    主进程创建子进程,然后将该进程设置成守护自己的进程,守护进程就好比崇祯皇帝身边的老太监,崇祯皇帝已死老太监就跟着殉葬了. 关于守护进程需要强调两点: 其一:守护进程会在主进程代码执行结束后就终止 其二 ...

  3. Ubuntu18.04配制阿里巴巴的源

    配制阿里巴巴的源步骤 使用阿里巴巴的开源镜像:https://opsx.alibaba.com/mirror 然后选择ubuntu的帮助选项,复制ubuntu18.04镜像源 设置root账户密码: ...

  4. python 网络编程之socket开发和socketserver模块

    一 客户端/服务器架构 1.硬件C/S架构(打印机) 2.软件C/S架构 互联网中处处是C/S架构 如黄色网站是服务端,你的浏览器是客户端(B/S架构也是C/S架构的一种) 腾讯作为服务端为你提供视频 ...

  5. 终于解决了贴吧手机版的一个重大BUG

    终于解决了贴吧手机版的一个重大BUG 别诧异虽然同一个域名,但是,PC 和手机打开完全不一样的体验 http://tieba.yunxunmi.com/ 吃点夜校准备做梦去!! 发现 我云贴吧 一个  ...

  6. [Xamarin.Android]如何引用JAR檔案 (转帖)

    這個範例是如何在Xamarin.Android中去使用一個我們自行在開發的JAR檔案. 主要會執行的步驟如下 1. 在Xamarin建立一個Android Java Bindings Library ...

  7. sublime text 3 快捷键&&使用技巧

    参考文章:https://github.com/jikeytang/sublime-text 这里有很多技巧http://www.jianshu.com/p/3cb5c6f2421c/ 置顶: Ctr ...

  8. MIME类型是什么?包含哪些类型?

    摘自:http://www.tuidc.com/idczixun/newsx/newsidc/3479.html 问:MIME类型是什么?    答:MIME(Multipurpose Interne ...

  9. spring中redistemplate不能用通配符keys查出相应Key的问题

    有个业务中需要删除某个前缀的所有Redis缓存,于是用RedisTemplate的keys方法先查出所有合适的key,再遍历删除.但是在keys(patten+"*")时每次取出的 ...

  10. solr集群的搭建教程和使用入门

    1 什么是SolrCloud? SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud. 当一个系统的索引数据量少的时候 ...