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

2015-04-28 02:18:36 +08:00
 whatisnew

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

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

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

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

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

3701 次点击
所在节点    JavaScript
23 条回复
ezreal
2015-04-28 16:46:49 +08:00
第二种
ezreal
2015-04-28 16:49:54 +08:00
其实可以两种结合起来吧,滚动分页请求数据,并计算保持页面隐藏看不到的 dom,我们这就是这样的方案。
AsterOcclu
2015-04-29 01:18:10 +08:00
参考一下这个如何?
《JavaScript Grid with One Million Records》http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/186862

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX