› Closure: The Definitive Guide
比如 一个 json 含有 10000 个 item，有两种解决方案，那么现在问题来了：
一、是以分页形式，比如每页 100 个，分批把 item 加载到 dom 呢？
二、还是 js 计算滚动事件和屏高按屏幕一屏一屏加载（滚动到下一屏时清除上一屏的dom），保持始终只加载一屏 item dom。
哪种效率更高？更省内存cpu资源？
第一种方案明显更省事。
第二种方案计算屏幕大小、添加和移除dom肯定是要耗资源的，但是只保持一屏 item 的 dom 肯定是要比累积保有 10000 个 dom 更好的。
纠结了一晚上，拿不定主意，大牛们赶紧来给个说法啊。
 |
1
如果不考虑兼容性预加载数据到IndexedDB是更好的选择，再分批取数据
|
 |
2
@Septembers 亲，我们说的是 dom(数量) 和 js 内存占用，和取数据没有多大关系哦。
|
|
3
@Septembers 补充：我举个例子，不管从哪预加载数据，最终都要以 dom 呈现的对吧，那么，现在问题来了，他往下拉，你就按批取，他拉到最后一批，也就是说此时页面上就有 10000 个 item 的 dom 了对吧？我这里说的这个意思呢，就是说，是保有 10000 个 item dom 好，还是按屏幕取数据只保留一屏的 item dom 好。
|
 |
ericlsApr 28, 2015
4
没遇到过这么大的量
我目前是一次加载十页的数据 到了11页再加载11页到20页的数据 |
|
5
@ericls 比如，到了11页，加载11页到20页的数据，是替换dom呢，还是插入dom呢？如果是替换，用户按了 home 键 或者滚动到最上面了，那岂不是少了数据。。。
|
|
7
@ericls 那不可能一次性替换到 11 页的 dom 那效率，那内存。。。而且替换掉dom再滚动到最上面，如果不再替换回来，数据肯定是没有了的啊，他绝对不会神奇般的就在了。
|
|
ericlsApr 28, 2015
8
@whatisnew 利用了https://angular-ui.github.io/bootstrap/#/pagination这个
你那么大的数据了 我没经历过 不好说 要客户一次加载10000条 好像不是很现实 |
|
10
@ericls 对，翻页这种要点嘛。。。编译好模版，翻页时直接赋值就可以了，不存在最上面和最下面滚动这样的事件，这样做可以的。
但是我说的这个是，没有翻页。。。就是直接滚动，一直往下滚动，比如，微信的朋友圈，你一直往下拉，拉拉拉，拉到最后，然后，再直接点 toolbar 返回的第一个。 |
|
11
@ericls https://angular-ui.github.io/bootstrap/#/pagination 这个是每一页替换一次 dom 不是 11 页
|
|
13
@ericls 亲。。。获取数据和替换dom是不同的。
获取数据后，他保存在 js 的一个对象或者数组，然后，只对编译好的模版文件赋值加载当前页的数量的数据，实际是 dom 的数量是每页显示的条数，而不是从你取到的数据总量。 |
 |
loadingApr 28, 2015 via Android
15
页面卡很多时候不是内存不够，看看浏览器渲染机制。
|
 |
MiranaApr 28, 2015
17
第二种方案好，其实dom不用全去掉 在生成一次
比如react.js |
 |
18
|
 |
ianvaApr 28, 2015
19
lz 要知道创建一个 element 是多么大的开销，一个 element 的创建要无数的属性和方法，还要渲染，element 少一个是一个，自然要第二种
|
|
20
@leofml 他这个 http://rad-js.com/infinite-scroll/ 就是我形容的第（二）那个解决方案一样。。。
|
 |
ezrealApr 28, 2015
21
第二种
|
|
ezrealApr 28, 2015
22
其实可以两种结合起来吧，滚动分页请求数据，并计算保持页面隐藏看不到的 dom，我们这就是这样的方案。
|
 |
23
参考一下这个如何？
《JavaScript Grid with One Million Records》http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records |
1
Select Language