說在前頭
別說不可能會遇到，確實，正常情況下是不會有那麼大的數據的，用戶也不可能幹等着你，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
結束語
有更好的解決方案，請留言~