在html

Question

您能告诉我将大量数据加载到html网页的最佳方法吗？我有一个很好的布局，但是我担心一旦数据库开始填满，这将对性能产生重大影响。我最好使用数据表，延迟加载是一个不错的选择。在我深入研究项目并意识到自己走错路之前，我只是想做一些研究。 这是当前的客户端视图

<div class="row">
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="profile.html">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="img/a2.jpg">
                            <div class="m-t-xs font-bold">Graphics designer</div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h3><strong>John Smith</strong></h3>
                        <p><i class="fa fa-map-marker"></i> Riviera State 32/106</p>
                        <address>
                            <strong>Twitter, Inc.</strong><br>
                            795 Folsom Ave, Suite 600<br>
                            San Francisco, CA 94107<br>
                            <abbr title="Phone">P:</abbr> (123) 456-7890
                        </address>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            </div>

Answer 1

你需要的不是真正懒惰加载而是延迟渲染。您可以轻松地将10k客户端的名称和联系信息保存为RAM中的JS对象。你的问题都将集中在这些元素的渲染上，你可能会看到几百张卡的性能下降。

由于您的元素非常相似，只是变化的数据，您可以重用已有的DOM元素。更好的是，有很多图书馆已经帮助解决了这个问题！到目前为止，React和react-list一起对我有用。您现在只渲染屏幕上可见的元素，当元素从视图中退出时，React会确保您重复使用这些DOM元素。

使用这种延迟渲染，您还可以期望过滤列表即时！

缺点是你需要为React调整一个特殊的工作流程（将你的卡写成React组件，为.jsx文件添加一个编译步骤）。有许多其他库解决了这个问题（好的搜索短语包括＆＃34; js列表视图＆＃34;和＆＃34;无限滚动列表＆＃34;）。但我发现它们中的大多数都存在基本缺陷，例如糟糕的公共API，或者没有附加到全局窗口滚动条。反应列表是迄今为止我唯一满意的反应列表。

你真正应该做的是停止猜测。使用您最喜爱的faker库在您的数据库中生成几千个^{（或您期望的任何数量）}随机记录。