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