V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
whatisnew
V2EX  ›  JavaScript

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

  •  
  •   whatisnew · 2015-04-28 02:18:36 +08:00 · 3870 次点击
    这是一个创建于 3482 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    23 条回复    2015-04-29 01:18:10 +08:00
    Septembers
        1
    Septembers  
       2015-04-28 03:31:09 +08:00 via Android   ❤️ 1
    如果不考虑兼容性预加载数据到IndexedDB是更好的选择,再分批取数据
    whatisnew
        2
    whatisnew  
    OP
       2015-04-28 04:06:31 +08:00
    @Septembers 亲,我们说的是 dom(数量) 和 js 内存占用,和取数据没有多大关系哦。
    whatisnew
        3
    whatisnew  
    OP
       2015-04-28 04:20:17 +08:00
    @Septembers 补充:我举个例子,不管从哪预加载数据,最终都要以 dom 呈现的对吧,那么,现在问题来了,他往下拉,你就按批取,他拉到最后一批,也就是说此时页面上就有 10000 个 item 的 dom 了对吧?我这里说的这个意思呢,就是说,是保有 10000 个 item dom 好,还是按屏幕取数据只保留一屏的 item dom 好。
    ericls
        4
    ericls  
       2015-04-28 04:54:07 +08:00
    没遇到过这么大的量

    我目前是一次加载十页的数据 到了11页再加载11页到20页的数据
    whatisnew
        5
    whatisnew  
    OP
       2015-04-28 04:56:53 +08:00
    @ericls 比如,到了11页,加载11页到20页的数据,是替换dom呢,还是插入dom呢?如果是替换,用户按了 home 键 或者滚动到最上面了,那岂不是少了数据。。。
    ericls
        6
    ericls  
       2015-04-28 04:58:08 +08:00
    @whatisnew 之前的数据也在呃 所有的翻页都是替换dom

    我是 angularjs 做的
    whatisnew
        7
    whatisnew  
    OP
       2015-04-28 05:00:13 +08:00
    @ericls 那不可能一次性替换到 11 页的 dom 那效率,那内存。。。而且替换掉dom再滚动到最上面,如果不再替换回来,数据肯定是没有了的啊,他绝对不会神奇般的就在了。
    ericls
        8
    ericls  
       2015-04-28 05:01:23 +08:00
    @whatisnew 利用了https://angular-ui.github.io/bootstrap/#/pagination这个

    你那么大的数据了 我没经历过 不好说 要客户一次加载10000条 好像不是很现实
    ericls
        9
    ericls  
       2015-04-28 05:02:16 +08:00
    @whatisnew 呃 我是横着翻页那种 。。
    whatisnew
        10
    whatisnew  
    OP
       2015-04-28 05:07:49 +08:00
    @ericls 对,翻页这种要点嘛。。。编译好模版,翻页时直接赋值就可以了,不存在最上面和最下面滚动这样的事件,这样做可以的。

    但是我说的这个是,没有翻页。。。就是直接滚动,一直往下滚动,比如,微信的朋友圈,你一直往下拉,拉拉拉,拉到最后,然后,再直接点 toolbar 返回的第一个。
    whatisnew
        11
    whatisnew  
    OP
       2015-04-28 05:09:00 +08:00
    @ericls https://angular-ui.github.io/bootstrap/#/pagination 这个是每一页替换一次 dom 不是 11 页
    ericls
        12
    ericls  
       2015-04-28 05:10:30 +08:00
    @whatisnew 可以自己定制哇 我是每10页 获取一次数据,, 不然一次数据太多 带宽占用大
    而且 后面页数很少有人去看
    whatisnew
        13
    whatisnew  
    OP
       2015-04-28 05:13:56 +08:00
    @ericls 亲。。。获取数据和替换dom是不同的。
    获取数据后,他保存在 js 的一个对象或者数组,然后,只对编译好的模版文件赋值加载当前页的数量的数据,实际是 dom 的数量是每页显示的条数,而不是从你取到的数据总量。
    ericls
        14
    ericls  
       2015-04-28 05:17:29 +08:00
    @whatisnew 对 就是这个意思
    loading
        15
    loading  
       2015-04-28 06:52:22 +08:00 via Android
    页面卡很多时候不是内存不够,看看浏览器渲染机制。
    whatisnew
        16
    whatisnew  
    OP
       2015-04-28 08:00:57 +08:00
    @loading 这个。。。还是从自己能改变的入手吧
    Mirana
        17
    Mirana  
       2015-04-28 09:57:34 +08:00
    第二种方案好,其实dom不用全去掉 在生成一次
    比如react.js
    leofml
        18
    leofml  
       2015-04-28 11:22:12 +08:00   ❤️ 1
    ianva
        19
    ianva  
       2015-04-28 12:00:36 +08:00
    lz 要知道创建一个 element 是多么大的开销,一个 element 的创建要无数的属性和方法,还要渲染,element 少一个是一个,自然要第二种
    whatisnew
        20
    whatisnew  
    OP
       2015-04-28 15:16:52 +08:00
    @leofml 他这个 http://rad-js.com/infinite-scroll/ 就是我形容的第(二)那个解决方案一样。。。
    ezreal
        21
    ezreal  
       2015-04-28 16:46:49 +08:00
    第二种
    ezreal
        22
    ezreal  
       2015-04-28 16:49:54 +08:00
    其实可以两种结合起来吧,滚动分页请求数据,并计算保持页面隐藏看不到的 dom,我们这就是这样的方案。
    AsterOcclu
        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
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1030 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:03 · PVG 06:03 · LAX 14:03 · JFK 17:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.