用於顯示巨大表格數據的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}));