用于显示巨大表格数据的Javascript性能建议

Question

我是一位非常可视化的程序员/设计师，我为我的项目开发了一个用于显示PHP输出数据的迷你框架。

基本上，我设计我的页面和描述div和li块可循环使用我的IDE，Dreamweaver显示。我简单地使用Javascript生成内容，然后在目标div/li元素上执行一个字符串替换例程。我想你可以说我的设计在视觉上就是模板本身。做更改非常容易：之前，我会设计它，然后将块的HTML代码复制并粘贴到PHP中，然后在那里进行值填充。

所以基本上我的PHP脚本输出的对象，我的JavaScript函数的魔力，并生成需要（追加到元素）..

这完美地工作，直到我开始处理表的大量数据（约2000行）。我注意到浏览器在尝试生成内容时暂停了一下，这在桌面上 - 我想象一下，当我的页面在移动设备上运行时，速度会变慢多少。

这让我想到了，我应该回到在后端生成内容并在JS /浏览器端做一个简单的输出吗？我喜欢在JS中操作数据行，并且将所有的模板代码保留在页面上，在原地更方便，并且让Javascript只是捡起并使用它来生成内容。我讨厌回到让PHP生成实际的html代码。

你会在这种情况下推荐什么？

P.S .:对于那些想要建议减少数据限制显示的人：在这种情况下，我不能。我必须显示所有没有分页的返回行。我有我的理由/要求。

Answer 1

简单underscore.js

<table class="outer"> 
<thead> 
    <tr> 
     <th>Id</th> 
     <th>Name</th> 
    </tr> 
</thead> 
<tbody> 
</tbody> 

<div class="outer"> 

<div class="th">Id</div> 
<div class="th">Name</div> 

<p>&nbsp;</p> 
</div> 
<script type="text/html" id='table-data'> 

<% _.each(items,function(item,key,list){ %> 
    <tr> 
     <td><%= key %></td> 
     <td><%= item.name %></td> 
    </tr> 
<% }) %></script> 
<script type="text/html" id='div-data'> 

<% _.each(items,function(item,key,list){ %> 
    <div><%= key %></div> 
    <div><%= item.name %></div> 
<% }) %></script> 

获取数据并填充

var items = [ 
{name:"Nick"}, 
{name:"Lee"}, 
{name:"Jenny"}, 
{name:"Julie"}, 
{name:"Dennis"}, 
{name:"Shawn"}, 
{name:"Justin"}, 
{name:"Scott"}, 
{name:"John"}, 
{name:"Sherell"}, 
{name:"Janie"}, 
{name:"Graham"}, 
{name:"Erica"}] 

var tableTemplate = $("#table-data").html(), 
divTemplate = $("#div-data").html(); 
$("table.outer tbody").html(_.template(tableTemplate,{items:items})); 
$("div.outer p").before(_.template(divTemplate,{items:items}));