javascript - jquery/js 操作超过 2000 行时速度太慢

Question

我有2000行数据如下

<div class="rr cf">
    <span>VLKN DR EXP</span>
    <span>01046</span>
    <span>VELANKANNI</span>
    <span>20:30</span>
    <span>DADAR</span>
    <span>10:00</span>
</div>

单击按钮后，我将检查其中的文本并将每行的显示更新为阻止或无。执行此操作的代码是

$('.rr').each(function(){
    this.style.display="block";
});

var nodes = $(".rr");
for(var i=0;i < nodes.length; i++) {
     // if data found
         nodes.get(i).style.display="block";
     // else
         nodes.get(i).style.display="none";
}

这似乎可能非常慢。我收到 chrome 警告框以终止该页面。

有什么想法吗？我可以在这里做哪些优化？

Answer 1

局部变量和循环

---

Another simple way to improve the performance of a loop is to decrement the iterator toward 0 rather than incrementing toward the total length. Making this simple change can result in savings of up to 50% off the original execution time, depending on the complexity of each iteration.

取自:http://oreilly.com/server-administration/excerpts/even-faster-websites/writing-efficient-javascript.html

• 尝试将nodes.length保存为局部变量，以便循环不必每次都计算它。
• 此外，如果您经常访问该数据，您可以将 nodes.get(i) 存储到本地变量中以节省一些时间。
• 如果顺序不重要，请考虑递减 for 循环向0。
• jQuery 的 each() 循环比自己循环遍历集合要慢一点。你可以看到here 存在明显差异。

非常简单 example

您将看到，在我的示例中，我已将循环压缩为 while 循环:

var nodes = $(".rr span");
var i = nodes.length;

while(i--){ 
  if(i%2 === 0){
    nodes.get(i).style.color = "blue";}
}​

请注意，while 循环在每次迭代中都会递减 i。这样，当 i = 0 时，循环将退出，因为 while(0) 的计算结果为 false。

---

对数组进行“分块”

---

The chunk() function is designed to process an array in small chunks (hence the name), and accepts three arguments: a “to do” list of items, the function to process each item, and an optional context variable for setting the value of this within the process() function. A timer is used to delay the processing of each item (100ms in this case, but feel free to alter for your specific use). Each time through, the first item in the array is removed and passed to the process() function. If there’s still items left to process, another timer is used to repeat the process.

看看 Nick Zakas 定义的 chunk 方法 here ，如果您需要分段运行循环以减少浏览器崩溃的机会:

function chunk(array, process, context){
    setTimeout(function(){
        var item = array.shift();
        process.call(context, item);

        if (array.length > 0){
            setTimeout(arguments.callee, 100);
        }
    }, 100);
} 

---

使用createDocumentFragment()

---

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance.

DocumentFragment are supported in all browsers, even Internet Explorer 6, so there is no reason to not use them.

Reflow is the process by which the geometry of the layout engine's formatting objects are computed.

由于您正在迭代地更改这些元素的显示属性，因此页面必须为每次更改“重新绘制”窗口。如果您使用 createDocumentFragment 并在其中进行所有更改，然后将这些更改推送到 DOM，则可以大大减少所需的重绘 量。