javascript - 大型 Html 代码 - 页面响应时间非常慢

Question

我正在开发一个网络应用程序，我必须显示一个大约400行和9列的html表格。

应用程序中发生了很多事情...(大量事件，不同的 View ) 它有大约1700行Jquery代码。虽然我已经优化了Jquery代码到我在各种文章中读到的程度，使用选择器缓存，使用正确的选择器，使用正确的事件委托(delegate)，链接，引用jsperf来测试几乎所有方法，我使用过的选择器等等。虽然页面的响应能力有所提高，但仍然远远达不到要求。 (严格的性能要求)

问题:对于每个表格单元格 (td)，都有一个打开 Bootstrap 模式的点击事件。如果没有。表中的行数为 50 模态打开时间为 50.32 毫秒，如果表行约为400，则模态打开时间为700ms(使用 console.time 测量时间)。我的表(html 代码)中的**行数如何影响模式打开时间。？？？我该如何解决这个问题？

--> 这是我用来打开模态的代码

$('#mainTable).on('click','.cell',function(){
       cellzoom(this);
 }); 

function cellzoom(obj,e,date) {
    console.time('cellzoom:')
    cellModal();
    console.timeEnd('cellzoom:')
}


function cellModal(){
//  $(mainloader).show();
    console.time('cellModal:')
    $(cellview).modal('show');
    console.timeEnd('cellModal:')
}

P.S:我无法使用分页

任何处理过大型数据集和大量 jquery 代码以及他们为优化代码所做的事情(工具)的人...任何帮助将不胜感激!!

Answer 1

这可能取决于您的模式 CSS。如果它有很多阴影、渐变等，那么浏览器可能会受到大型 HTML 结构的影响，并缓慢地渲染 CSS。但如果我是你，我也会看看显示模态的方法，就像 @Kirk 写的