最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - InnerHTML slow? - Stack Overflow

programmeradmin0浏览0评论

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.

Share Improve this question asked Jan 3, 2018 at 23:40 JohnnyJohnny 811 silver badge8 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

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/

发布评论

评论列表(0)

  1. 暂无评论