JavaScript 大 json 加载到 dom 和 分屏加载到 dom 哪个更省内存？

[whatisnew]

比如 一个 json 含有 10000 个 item，有两种解决方案，那么现在问题来了：

一、是以分页形式，比如每页 100 个，分批把 item 加载到 dom 呢？
二、还是 js 计算滚动事件和屏高按屏幕一屏一屏加载（滚动到下一屏时清除上一屏的dom），保持始终只加载一屏 item dom。

哪种效率更高？更省内存cpu资源？

第一种方案明显更省事。
第二种方案计算屏幕大小、添加和移除dom肯定是要耗资源的，但是只保持一屏 item 的 dom 肯定是要比累积保有 10000 个 dom 更好的。

纠结了一晚上，拿不定主意，大牛们赶紧来给个说法啊。

[Septembers]

如果不考虑兼容性预加载数据到IndexedDB是更好的选择，再分批取数据

[whatisnew]

@Septembers 亲，我们说的是 dom(数量) 和 js 内存占用，和取数据没有多大关系哦。

[whatisnew]

@Septembers 补充：我举个例子，不管从哪预加载数据，最终都要以 dom 呈现的对吧，那么，现在问题来了，他往下拉，你就按批取，他拉到最后一批，也就是说此时页面上就有 10000 个 item 的 dom 了对吧？我这里说的这个意思呢，就是说，是保有 10000 个 item dom 好，还是按屏幕取数据只保留一屏的 item dom 好。

[ericls]

没遇到过这么大的量

我目前是一次加载十页的数据 到了11页再加载11页到20页的数据

[whatisnew]

@ericls 比如，到了11页，加载11页到20页的数据，是替换dom呢，还是插入dom呢？如果是替换，用户按了 home 键 或者滚动到最上面了，那岂不是少了数据。。。

[ericls]

@whatisnew 之前的数据也在呃 所有的翻页都是替换dom

我是 angularjs 做的

[whatisnew]

@ericls 那不可能一次性替换到 11 页的 dom 那效率，那内存。。。而且替换掉dom再滚动到最上面，如果不再替换回来，数据肯定是没有了的啊，他绝对不会神奇般的就在了。

[ericls]

@whatisnew 利用了https://angular-ui.github.io/bootstrap/#/pagination这个

你那么大的数据了 我没经历过 不好说 要客户一次加载10000条 好像不是很现实

[ericls]

@whatisnew 呃 我是横着翻页那种 。。

[whatisnew]

@ericls 对，翻页这种要点嘛。。。编译好模版，翻页时直接赋值就可以了，不存在最上面和最下面滚动这样的事件，这样做可以的。

但是我说的这个是，没有翻页。。。就是直接滚动，一直往下滚动，比如，微信的朋友圈，你一直往下拉，拉拉拉，拉到最后，然后，再直接点 toolbar 返回的第一个。

[whatisnew]

@ericls https://angular-ui.github.io/bootstrap/#/pagination 这个是每一页替换一次 dom 不是 11 页

[ericls]

@whatisnew 可以自己定制哇 我是每10页 获取一次数据，， 不然一次数据太多 带宽占用大
而且 后面页数很少有人去看

[whatisnew]

@ericls 亲。。。获取数据和替换dom是不同的。
获取数据后，他保存在 js 的一个对象或者数组，然后，只对编译好的模版文件赋值加载当前页的数量的数据，实际是 dom 的数量是每页显示的条数，而不是从你取到的数据总量。

[ericls]

@whatisnew 对 就是这个意思

[loading]

页面卡很多时候不是内存不够，看看浏览器渲染机制。

[whatisnew]

@loading 这个。。。还是从自己能改变的入手吧

[Mirana]

第二种方案好，其实dom不用全去掉 在生成一次
比如react.js

[leofml]

http://rad-js.com/infinite-scroll/ 这个是效率最高的办法了

http://rad-js.com/wp-content/uploads/2014/02/list3.gif

[ianva]

lz 要知道创建一个 element 是多么大的开销，一个 element 的创建要无数的属性和方法，还要渲染，element 少一个是一个，自然要第二种

[whatisnew]

@leofml 他这个 http://rad-js.com/infinite-scroll/ 就是我形容的第（二）那个解决方案一样。。。