说在前头
别说不可能会遇到，确实，正常情况下是不会有那么大的数据的，用户也不可能干等着你，content Download都要炸，所以前台界面估计不多，但在后台的大数据分析、gis监控、自动采集等的环境下还是较为常见的。
开始
假设下面有这样的一段后端代码返回
let obj = [{
title: '中国',
key: 'a_0',
pos: [1, 2],
child: [{
title: '江苏省',
key: 'a_2',
pos: [11, 2],
}, {
title: '浙江省',
key: 'a_1',
pos: [11, 21],
child: [{
title: '杭州市',
key: 'a_0_1_0',
pos: [3, 7],
}]
// 省略n... 县 乡 镇 医院 学校 厕所 等等等等
}]
}, {
title: '美国',
key: 'a_6',
pos: [6, 9],
}]
// 省略n...
业务上你需要做的处理是
1、把点位在ol上渲染上去（测试可以用dom）
2、与后台建立socket，会实时返回具体哪些点位的更变（增删改）（返回对象为json）
3、添加input输入框 - 输入key - 当前地图直接定位到key对应的pos位置
4、点击ol上渲染好的点位，ajax获取点位更为详细的信息且根据不同的返回值，进行相关运算
很容易看懂对不对，思考5分钟，可以给出你的答案了~
解决方案一：70分
1、createDocumentFragment创建vdom将点位递归把对应的值挂载至自定义属性上一次性渲染（自定义属性data-key、data-pos、data-title）
2、对返回的json进行遍历，劫持对应含有data-key相关的dom，赋新值与方法1相同一次性渲染
3、寻dom取data-pos值，执行定位函数
4、统一绑定click事件，根据自定义属性的传参进行if或swith或建立键值匹配的对象执行等操作
解答：
其实没有错，但优化的点不够多，思维有些固定，似乎忘了这不是几百条而是上万条数据
解决方案二：80分
1、将父级dom独立为一层，加pos定位、zindex、硬件加速等且在方案一的基础上，边appendChild vdom边添加键值M模型边以porxy双向绑定建立VM模型
// M大致是这样的
let obj_plane = {
'a_0': {title: '中国', pos: [1, 2]},
'a_2': {title: '江苏省', pos: [11, 2]},
// more...
}
2、直接修改M（model）层触发V
3、直接对象执行
4、与方案一相同
解答：
这儿有了一些细节的优化，用zindex独立了层级且创建了mvvm的雏形，便于以后的扩展，但这还不够
解决方案三：100分
1、与后端交流，以版本号方式交互，后端比较版本号，返回差异后的问题二数据，如相同则不反悔，本地无版本号，则全量返回。且在方案二的基础上创建渲染dom，取消porxy双向绑定键值配对存入indexDB
2、与方案一相同且修改indexDB上的值
3、与方案一相同（非取库的值执行）
4、与方案一相同且添加函数重载如果运算复杂添加Worker
解答：
核心思路为数据同步
同步本地与服务两端的数据库
为什么不用proxy，其实大批量的数据更新，双向绑定会产生相当多的无用回流，等于for + appendChild
而绑定的对象不像是个简单的父子结构，他是数万的定位属性，所以一般不会做vdom替换父节点的情况
indexDB解决了缓存问题，服务端每次的批量请求从数据库中取值是个很奢侈的行为，可让后端比较版本号，无变动则告诉js可直接用本地DB，有变动则返回问题2即可
问题4是比较模糊的，答出的内容可根据需求变动，所以回答当然是多多表现自己为好
关于
make：o︻そ╆OVE▅▅▅▆▇◤（清一色天空）
blog：http://blog.csdn.net/mcky_love
掘金：https://juejin.im/user/59fbe6c66fb9a045186a159a/posts
lofter：http://zcxy-gs.lofter.com/
sf：https://segmentfault.com/u/mybestangel
结束语
有更好的解决方案，请留言~