jQuery：重复调用时重绘函数极其缓慢

我有一个名为refreshHistory（）的方法，它基本读取本地存储的json列表（使用https://github.com/marcuswestin/store.js/），并按照它们的存储顺序填充列表。jQuery：重复调用时重绘函数极其缓慢

每次发生用户操作时，都会调用此方法。但是随着列表越来越大，它会拖慢浏览器爬行。

function refreshHistory() { 
    var records = typeof store.get('history') == "undefined" ? 0 : store.get('history').history; 
    ; 
    if (records == 0) { 
     $('#content #historyView').html('<i>history show up here in order.</i>'); 
    } else { 
     var xhistory = '<div id="history">'; 
     for (var i = 0; i < records.length; i++) { 
      var xaction = records[i] 
      xhistory += '<div id="action">' + (i + 1) + '. ' + '<b>' + xaction.action + "</b> " + xaction.caption + '<span class="delaction" id=' + i + ' data-stamp="' + xaction.msg + '" style="color:red;cursor:pointer;">' + '[remove]' + '</span></div>' 
     } 
     xhistory += "</div>" 

     $('#qtip-0-content #historyView').html(xhistory); 

    } 
}

来源

2014-10-28 user299709

我建议用你的问题的简化版本创建一个[jsfiddle]（http://jsfiddle.com），这样其他人可以给你更具体的反馈。 – OlliM 2014-10-28 10:44:55

上每一个事件渲染的一切是一个简单的策略，这是很好的，但它确实碰到你所描述的性能问题。很难给出具体的建议，但你可以：

实现更详细的渲染逻辑，其中只有新项目被渲染并添加到DOM。
使用ReactJs或Virtual DOM库，它们允许您的代码使用render everything模式，但通过执行所需的最低限度来更快地实现DOM的实际更新。

来源

2014-10-28 08:37:54 OlliM

真正做到这一点的唯一方法是以不同的方式实现它。

我一直在使用knockout.js，对此我非常满意。基本上你写了一个模板，库处理DOM节点的变化，只更新需要的部分。你将需要学习如何略有不同的想法，但有一些伟大的tutorials可用。

也就是说，你可以尝试的一个简单的技巧是将选择器移动到函数之外，以便它们只运行一次，而不是每次调用该函数。

为了理智，我也会保留records变量相同的类型，无论.get('history')是否返回undefined。

var contentHistoryView = $('#content #historyView'); 
var qtipHistoryView = $('#qtip-0-content #historyView'); 
function refreshHistory() { 
    var records = typeof store.get('history') == "undefined" ? [] : store.get('history').history; 
    if (records.length) { 
     contentHistoryView.html('<i>history show up here in order.</i>'); 
    } else { 
     var xhistory = '<div id="history">'; 
     for (var i = 0; i < records.length; i++) { 
      var xaction = records[i] 
      xhistory += '<div id="action">' + (i + 1) + '. ' + '<b>' + xaction.action + "</b> " + xaction.caption + '<span class="delaction" id=' + i + ' data-stamp="' + xaction.msg + '" style="color:red;cursor:pointer;">' + '[remove]' + '</span></div>' 
     } 
     xhistory += "</div>" 

     qtipHistoryView.html(xhistory); 

    } 
}

我怀疑这会产生巨大的影响，因为我怀疑大部分执行时间都花在循环中。

来源

2014-10-28 08:47:51 xec

jQuery：重复调用时重绘函数极其缓慢

回答

相关问题