jQuery和追加大量的HTML [英] jQuery and appending large amounts of HTML

问题描述

我来发现，使用jQuery来创建HTML客户端可以是一个巨大的性能助推器如果处理得当。我使用AJAX返回JSON检索动态内容，然后我建立了相关的HTML和使用jQuery插入。我第一次搞砸使用这种技术，我发现，在IE浏览器的JavaScript字符串连接符执行真的慢慢等，建立一个动态表有超过50行左右的可怕表现。

I have come to find that using jQuery to create HTML client-side can be a huge performance booster if done properly. I use AJAX returning JSON to retrieve dynamic content and then I build the relevant HTML and insert it using jQuery. The first time I messed with this technique I found that the string concatenator in IE's JavaScript performed really slowly so that building a dynamic table with more than 50 or so rows performed terribly.

var shtml = '<table>';
for(var i=0;i<100;i++) shtml += '<tr><td>A bunch of content</td></tr>';
shtml += '</table>';
$('#myTable').append(shtml);

然后，我发现了一个技术字符串连接这改变了一切。除了使用刺+ =运算符使用数组做级联;

Then I found a technique for string concatenation that changed everything. Instead of using the sting += operator use arrays to do concatenation;

var shtml = ['<table>'];
for(var i=0;i<100;i++) shtml.push('<tr><td>A bunch of content</td></tr>');
shtml.push('</table>');
$('#myTable').append(shtml.join(''));

我发现性能显著改善。然而，现在有大约100行的上限之前，我开始看到浏览器本身带有动态插入如此多的内容在一次斗争。有没有人有可以使用任何指针或技术来帮助我实现下一个性能提升大集动态HTML的？

I found that performance improved significantly. Now, however, there is a ceiling of about 100 rows before I start to see the browser itself struggle with dynamically inserting so much content at once. Does anyone have any pointers or techniques that can be used to help me achieve the next performance boost for large sets of dynamic HTML?

推荐答案

有与jQuery性能问题，并插入一个大字符串的HTML的DOM，由于其$ .trim功能。

There's a performance issue with jQuery and inserting a large string of html to the DOM, due to its $.trim function.

我有时会发现普通的旧的DOM脚本比使用jQuery的要快得多。尝试像

I sometimes find plain old dom scripting much faster than using jquery. Try something like

document.getElementById('id').innerHTML = myarray.join('')

这篇关于jQuery和追加大量的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！