javascript - InnerHTML slow? - Stack Overflow

admin管理员组

文章数量:1322850

I'm using javascript to add 160 rows into a table with 10 columns. If I do:

var cellText = document.createTextNode(value);
cell.appendChild(cellText);
row.appendChild(cell);

It takes no time at all to render, but if I switch to cell.innerHTML = value, it takes significantly slower to render. Do we have another option to render HTML elements inside a cell faster?

BTW, the problem appears to be only on IE (IE 11 to be more specific). It's fine in Google Chrome.

I'm using .NET AjaxToolkit.

I'm using javascript to add 160 rows into a table with 10 columns. If I do:

var cellText = document.createTextNode(value);
cell.appendChild(cellText);
row.appendChild(cell);

It takes no time at all to render, but if I switch to cell.innerHTML = value, it takes significantly slower to render. Do we have another option to render HTML elements inside a cell faster?

BTW, the problem appears to be only on IE (IE 11 to be more specific). It's fine in Google Chrome.

I'm using .NET AjaxToolkit.

• javascript
• html
• dom

Share Improve this question Follow asked Jan 3, 2018 at 23:40 JohnnyJohnny 8111 silver badge88 bronze badges 1

• 1 Possible duplicate of .append VS .html VS .innerHTML performance – random_user_name Commented Jan 3, 2018 at 23:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

innerHTML is slow because it has to look for HTML tags in the value, and parse it into DOM nodes. If you're just inserting plain text that doesn't contain any HTML tags, use textContent instead.

If you need to create plex HTML in the cell, using innerHTML is probably going to be the fastest way, as optimizing HTML parsing has always been a priority of browser designers. But if the HTML is simple (e.g. just a couple of elements) it may be more efficient to create them in Javascript. You'll need to benchmark your specific application to find out where the break-even point is.

It's an outstanding bug in IE9, IE10, IE11 and Edge:- https://developer.microsoft./en-us/microsoft-edge/platform/issues/4561410/

本文标签： javascriptInnerHTML slowStack Overflow