ajax - 基于 DOM 的数据存储，最佳选择/性能？

Question

这个问题是关于load data embedded into DOM structure 。我使用的是 jQuery2，但这个问题对于任何其他框架或单个 Javascript 代码都有效。

有两种情况:

1. 当数据加载一次(随页面)时，不需要“刷新数据”。

2. 当数据被某些事件刷新时。

平均性能可以通过其中之一进行更改

假设场景 2 的典型情况，其中必须使用新的 HTML 和新数据重新加载页面片段。所以，$('#myDiv').load('newHtmlFragment')将以任何方式使用...并且，对于 jQuery 程序员来说，使用 AJAX，有两种方法来加载“基于 DOM 的数据”:

• 通过 HTML:将所有数据表达为“newHtmlFragment”HTML。假设有很多段落，每个段落都像 <p id="someId" data-X="someContent">...more content</p> 。
  每个data-X1="contentX1" data-X2="contentX2" ...都有一些“详细的开销” ，如果 webservice 脚本不是面向 XHTML 的脚本，那么它就不优雅(我使用 PHP，我的数据是一个数组，我更喜欢使用 json_encode )。
• 通过 jQuery 评估:使用相同的 $('#myDiv').load('newHtmlFragment')仅限<p id="someId">...more content</p> ，没有 data-X 。第二个 AJAX 加载 jQuery 脚本，如 $('#someId').data(...)并对其进行评价。因此，对于节点选择和数据包含来说，这是一个开销，但是对于大项数据，每个数据都可以通过 JSON 进行编码。
• 通过纯 JSON:类似于“通过 jQuery”，但第二个 AJAX 加载 JSON 对象，如 var ALLDATA={'someId1':{...}, 'someId2':{...}, ...} 。因此，这是执行类似 $('#myDiv p').each(function(){... foreach ... $(this).data('x',ALLDATA[id]['x']);}) 的静态函数的开销。检索选择，但对于大数据，所有数据都可以通过 JSON 进行编码。

问题:最好的选择是什么？这取决于场景或其他上下文参数？是否存在显着的性能权衡？

PS:完整的答案需要解决性能问题...如果没有显着的性能差异，则最佳选择依赖于“最佳编程风格”和软件工程考虑。

---

如果您需要作为答案的引用，请提供更多背景信息。我的实际问题是场景 1，我使用第二个选择，“通过 jQuery 脚本”，执行:

 $('#someId1').data({'bbox':[201733.2,7559711.5,202469.4,7560794.9],'2011-07':[3,6],'2011-08':[2,3],'2011-10':[4,4],'2012-01':[1,2],'2012-02':[12,12],'2012-03':[3,6],'2012-04':[6,12],'2012-05':[3,4],'2012-06':[2,4],'2012-07':[3,5],'2012-08':[10,11],'2012-09':[7,10],'2012-10':[1,2],'2012-12':[2,2],'2013-01':[6,10],'2013-02':[19,26],'2013-03':[2,4],'2013-04':[5,8],'2013-05':[4,5],'2013-06':[4,4]});

 $('#someId2').data({'bbox':[197131.7,7564525.9,198932.0,7565798.1],'2011-07':[39,51],'2011-08':[2,3],'2011-09':[4,5],'2011-10':[13,14],'2011-11':[40,42],'2011-12':[21,25],'2012-01':[10,11],'2012-02':[26,31],'2012-03':[27,35],'2012-04':[8,10],'2012-05':[24,36],'2012-06':[4,7],'2012-07':[25,30],'2012-08':[9,11],'2012-09':[42,52],'2012-10':[4,7],'2012-11':[17,22],'2012-12':[7,8],'2013-01':[21,25],'2013-02':[5,8],'2013-03':[8,11],'2013-04':[28,40],'2013-05':[55,63],'2013-06':[1,1]});

$('#...').data(...);   ... more 50 similar lines...  

Answer 1

这个问题可以从不同的方面来讨论。我现在能想到的两个是软件工程和最终用户体验。覆盖第一个的全面解决方案也可以覆盖后面的解决方案，但通常不可能提出这样的解决方案(由于其成本)，这两者几乎不重叠。

软件工程观点

在此 POV 中，强烈建议系统的不同部分尽可能隔离。这意味着您最好尽可能晚地推迟数据和 View 的结合。它可以帮助您将开发人员分为两个不同的组；那些了解服务器端编程但不知道 HTML(或任何其他接口(interface)层技术)如何工作的人以及那些仅对 HTML 和 Javascript 有经验的人。仅此一个部门就对管理层来说是一种祝福，并且对于团队合作至关重要的大型项目有很大帮助。它还有助于系统的维护和扩展，这都是软件工程的目标。

用户体验观点

尽管之前的解决方案听起来不错，但它也有(可解决的)缺点。正如您在问题中提到的，如果我们要单独加载 View 和数据，则会增加我们必须发送到服务器以检索它们的请求数量。它带来了两个问题，首先是每个请求带来的开销，其次是延迟用户必须等待每个请求得到响应。第二个更明显，所以让我们从第二个开始。随着互联网和带宽的进步，但用户超出的期望迫使我们考虑这种延迟。减少请求数量的一种方法是您的首选:HTML 片段中的数据。多个请求也存在开销问题。这可以通过 HTTP 协议(protocol)的握手(在客户端和服务器端)以及每个请求将导致在服务器上加载 session 这一事实来解释，这在大规模上可能是相当可观的。因此，您的第一个选择可能就是这个问题的答案。

决胜局

故事的双方都说了，然后呢？最终的解决方案是数据和 View 在客户端结合但同时下载的组合。说实话我不知道有这样的图书馆。但原理很简单，你需要一种机制来将数据和空 HTML 片段打包在同一个响应中，并将它们组合成用户将在客户端看到的内容。这个解决方案的成本很高(实现起来)，但这种成本一旦支付，您就可以终生受益。