推荐关注 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 4305 次点击这是一个创建于 3838 天前的主题，其中的信息可能已经有所发展或是发生改变。
比如 一个 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