Оптимизация строкового кода для IE6

Question

У меня есть страница на моем сайте, которая использует JS для записи большого количества динамического контента через строки, которые затем анализируются как HTML. Отлично работает во всех браузерах, но IE6 невероятно медленный. Многие пользователи получают сообщение «скрипт не отвечает, вы хотите прервать его?» сообщение.

Я пытался использовать массивы вместо строк, чтобы увидеть, справится ли IE6 с ними лучше, но у меня все равно примерно такая же производительность. Мне было интересно, есть ли у кого-нибудь какие-нибудь умные идеи о том, как это можно оптимизировать для IE6, или как-то иначе предотвратить появление этого не отвечающего сообщения скрипта.

---

function createTable(){

  var tableStr = "<table><tbody>";

  tableStr += "</tbody></table>";

  for(var x=0; x<contentData.length;x++){
     tableStr += createRow(contentData[x]);
  }

  $("#content").html(tableStr);
}

function createRow(data){
  var rowStr = "<tr>";
  rowStr += "<td>" + data.name + "</td>";
  rowStr += "<td>" + data.address + "</td>";
  rowStr += "<td>" + data.phone + "</td>";
  rowStr += "<td>" + data.fax + "</td>";
  rowStr += "</tr>";
  return rowStr;
}

Answer 1

Посмотрите этот пост с рекомендациями о том, как улучшить производительность Javascript для IE

Answer 2

function createTable(){

    //show loading message here since it will be a async load
    //$("#loadingMsg").show();

    var tableStr = "<table><tbody>";
    tableStr += "</tbody></table>";

    var rowCnt = 0;
    function buildTable(){

        //break up building table into 50 row chucks
        for(var x=0; x<50 && rowCnt<contentData.length;x++){
            tableStr += createRow(contentData[rowCnt]);
            rowCnt++;
        }

        //if we have not built the table, make a call to build next section
        //The setTimeout keeps the unresponsive message from appearing
        if(rowCnt<contentData.length){
            window.setTimeout(buildTable,0);
        }
        else{  //all rows have been added, set the table with the data
            //hide a loading message
            //$("#loadingMsg").hide();
            $("#content").html(tableStr);
        }
    }

    buildTable(); //kick off the table building

}

function createRow(data){
  var rowStr = "<tr>";
  rowStr += "<td>" + data.name + "</td>";
  rowStr += "<td>" + data.address + "</td>";
  rowStr += "<td>" + data.phone + "</td>";
  rowStr += "<td>" + data.fax + "</td>";
  rowStr += "</tr>";
  return rowStr;
}

Answer 3

Рассматривали ли вы использование шаблонизатора? Для jQuery / javascript доступно несколько шаблонизаторов, которые могут помочь в этой ситуации.

Проверьте этот вопрос переполнения стека

Answer 4

Лучшее решение - указать пользователям http://www.ie6countdown.com/ - сайт, созданный Microsoft, чтобы избавить мир от IE6.Я думаю, это говорит о многом, когда компания просит клиентов прекратить использование одного из их продуктов.

Но вы, вероятно, не в состоянии сделать это.Лучшее решение для решения такого сценария в IE6 - это создание HTML на сервере;Операции со строками и присвоение innerHTML очень медленны в IE6, и нет никаких хитростей, чтобы сделать это быстрее.

Чтобы дать вам идею: мне пришлось отобразить 2 МБ HTML.IE6 загрузил это с диска менее чем за одну секунду.Добавление того же HTML-кода к существующей странице путем присвоения innerHTML заняло 110 секунд.

Или вы можете разделить добавление, используя таймер, чтобы избежать блокировки страницы.Смотрите этот ответ: Способы увеличения производительности, когда большое значение установлено в innerHTML