比如 一个 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 |