DOM Update is slower in chrome than firefox, it looks like chrome has some rendering problems

Question

I wrote code that dumps a large number of node in the DOM. When I load it in firefox , it displays after 2-3 seconds, but in chrome (ver: 33) it freezes the user interface and rendering takes a lot of time (8-10 seconds).

$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total * 100;
                $("#fetchProgress").attr("value", percentComplete);
            }
        }, false);
        return xhr;
    },
    type: 'GET',
    url: "/GetSomething",
    data: {},
    success: function (data) {
        ///process and dump to DOM//
        var fileLines = data.split('\n');
        var htmlString = '';
        for (var i = 0; i < fileLines.length; i++) {
            htmlString += '<span>' + (i + 1) + '. ' + fileLines[i]+</span>;
            if ((i % 1000) == 0) {
                $("#textPlace").append(htmlString);
                htmlString = '';
            }
        }
        fileLines = null;
        $("#textPlace").append(htmlString);
    }
});

I found out from the internet that chrome has some rendering errors and tried to crack this URL. " Chrome bug - window.scroll method intercepts DOM rendering " It started working, but now it does not work again. Please suggest something. Any help is appreciated. Tank Size Thanks in Advance :)

Answer 1

, , . for() ( (= )), :

htmlString = '<span>'+ fileLines.join("</span><span>") +'</span>';

i, li .

---

:

var fileLines = '<span>'+ data.replace('\n', '</span><span>') +'</span>';

( </span><span></span>, \n, ( )), ,

Answer 2

, append html

            if ((i % 1000) == 0) {
                $("#textPlace").append(htmlString);
                htmlString = '';
            }

append . DOM - , .

Google Dev: JavaScript: DOM

, -

var anchor, fragment = document.createDocumentFragment();
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    fragment.appendChild(anchor);
  }
  element.appendChild(fragment);