把手花费很长时间呈现表结构

Question

我正在使用车把来渲染大表结构，但是渲染500行（每行38列）要花费很长时间（几乎超过5分钟）。

如果我使用ul li结构而不是表结构，那么它将花费将近2分钟，而对于表结构，则将花费5分钟以上。我在append函数之前和之后添加了performance.now，因此把手本身需要花费一些时间。我使用表格结构是因为如果我更改UI中的任何内容，ul结构会干扰UI。

下面是一些代码片段，

1. 我的车把模板和33列有输入字段，5列有下拉菜单，

<script id="handleBar_occupants_template" type="text/x-handlebars-template">
    {{#each this}}
       <tr class="occupants-row-container" id="occupant_row_{{@key}}">
          <td><input type='text'/></td>
          <td><input type='text'/></td>
          <td><input type='text'/></td>
          .
          .
       </tr>
    {{/each}}
</script>

1. 呈现html数据

<div class="data fixedfooterdata">
<table class="" data-pattern="stripes" id="fixed_footer_data_table">
</table>
</div>

1. 从服务器追加数据，

var groupContractOccupantsGridData = {};
for( var i = 0; i< intNoOfRows; i++ ) {
occupantsGridData[i] = {};
occupantsGridData[i].occupant_id = this.arrmixOccupantsDetails.occupant_details[i].occupant_id;
occupantsGridData[i].occupant_name = this.arrmixOccupantsDetails.occupant_details[i].occupant_name;
.
.
}

$('#fixed_footer_data_table').append( renderOccupantRows.OccupantsGrid( occupantsGridData ) );

1. 我的客户handlebar.js

var handleBarOccupantsTemplate = $('#handleBar_occupants_template').html();

this.renderOccupantRows = {
    OccupantsGrid: Handlebars.compile( handleBarOccupantsTemplate ),
};

请提供您的建议以优化表结构的呈现时间。