Что можно сделать, чтобы улучшить производительность IE8 для больших наборов данных? - PullRequest
Новая
       16

Что можно сделать, чтобы улучшить производительность IE8 для больших наборов данных?

5 голосов
/ 24 мая 2010

У меня есть страница, которая отображает табличные данные на ~ 300 страниц. Firefox, Chrome, Safari все работают нормально, но совместимость с IE 7, 8 и 8 делает все возможное. При попытке прокрутки или нажатия кнопки «вверх / вниз» страница задерживается на несколько секунд.

Разбивка на страницы, наборы данных меньшего размера и другие рекомендации по удобству использования не будут работать на этой странице. Предположим, у меня абсолютно нет выбора, кроме как отобразить все эти данные сразу ... что я могу сделать, чтобы настроить их?

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

Я успешно использовал плагины jQuery, такие как SlickGrid, для решения подобных проблем в прошлом, но по причинам, которые объясняли, что это невозможно, даже при использовании возможностей рендеринга микротаблеток, потребовалось много времени. В основном меня интересует, какие настройки я могу сделать, чтобы улучшить производительность, не переделывая всю страницу и не предлагая сторонние решения.

Будет ли упрощенный DOM иметь большое значение? Или IE плохо обрабатывает данные, введенные через JavaScript / Ajax?

Ответы [ 6 ]

4 голосов
/ 24 июня 2010

используйте innerHTML и минимизируйте взаимодействие js / dom.Js не так медленен в IE, но мост js / dom очень медленный.Также избегайте выбирать элементы в HTML, который вы собираетесь вставить.Если вы сделаете это, jQuery должен будет пройти через каждый элемент и проверить его на соответствие атрибуту id или css.Это очень медленно.

Сама по себе вставка нескольких тысяч элементов в DOM в IE выполнима.но если вы начнете вносить некоторые изменения в этот html-файл, у вас могут возникнуть серьезные проблемы с перфорированием.

Помимо этого, ваш код необходим для того, чтобы рассказать, как сделать его быстрее.Также была бы хороша тестовая страница, которую можно профилировать.

FYI, единственный инструмент профилирования производительности, доступный для IE, - это версия dynatrace ajax.Это бесплатное и отличное программное обеспечение.Используйте это!

4 голосов
/ 24 мая 2010

Сложно увидеть без подробностей или примера ... как вы строите контент? Существует немало небольших ловушек с созданием содержимого таблицы: в частности, установка innerHTML непосредственно на <table> не работает в IE, поэтому jQuery html(), вероятно, будет делать это долго и медленно, если вы этого не хотите. Используешь.

Но совет общего назначения для всего, что связано с таблицами, особенно для больших: задайте стиль table-layout: fixed для элемента <table>, задайте стиль для столбца width только в первом ряду ячеек или в наборе <col> с. (Столбцы без явного width будут разделять оставшуюся ширину в равных долях между ними в ситуации разметки.)

Поскольку это не зависит от количества контента в каждой ячейке, fixed макет таблицы быстрее и намного более предсказуем, чем алгоритм auto по умолчанию для таблицы.

0 голосов
/ 10 марта 2014
  1. Может также улучшить визуализацию таблицы, улучшив ее представление. добавив в него colgroup, рендеринг таблицы становится быстрым (можно увидеть разницу при работе с большими таблицами), так как движку браузера не приходится искать отдельные ширины столбцов. 
 <table style="table-layout: fixed" width="600">
    <colgroup>
        <col width="100"><col width="300"><col width="200">
    </colgroup>
    <tr height="20">
        <td>ss</td>
        <td>ss</td>
        <td>ss</td>
    </tr>
    <tr></tr>
   ....
   ...
</table>

see the below link for detailed discription

http://msdn.microsoft.com/en-us/library/ie/ms533002(v=vs.85).aspx

0 голосов
/ 10 марта 2014 
   1. Avoid using script that going to make changes in DOM specially inside a loop.
        eg.

for ( var i = 0; i < rownodes.length; i++) {
  curRow = document.createElement("tr"); // this is a direct operation to DOM
  for(j=0 ;j <colLenth;j==){ 
     cell = document.createElement("td");
   }
}
// instead use..
var table = '<table>';
for ( var i = 0; i < rownodes.length; i++) {
   table = table + '<tr>'; // don't use DOM operation if not needed.
    for(j=0 ;j <colLenth;j==){   
      table = table + '<td> my text </td>';
    }
}
table = table + '</table>';// simple string operations will be much faster
('#myDiv').append($(table));// at the end you can add it to the DOM. 

[Building High Performance HTML Pages][1]

  [1]: http://msdn.microsoft.com/en-us/library/ms533002%28v=vs.85%29.aspx
0 голосов
/ 08 июля 2011

Остерегайтесь jQuery .find () в IE8. Если он не написан тщательно, возможно, вы заставляете IE8 делать довольно смешную гимнастику. Хотелось бы, чтобы я знал больше о том, почему, и так далее, но если вы закомментируете свой .find () в своем jQuery и запускаете его, даже если ваш скрипт временно не работает, вы можете увидеть, что страница неожиданно быстро загружается.

Просто предположение, но легко попробовать.

0 голосов
/ 24 мая 2010

Я обнаружил, что когда вы динамически вставляете большой и сложный контент в существующую страницу, IE намного (намного) быстрее устанавливает innerHTML, чем программно создает десятки или сотни узлов DOM и вставляет их, будь то вы используете библиотеку на стороне клиента или нет. Если вы визуализируете свой серверный HTML-код и отправляете его в виде строки вместо отправки данных JSON и клиентского рендеринга, вы используете большую пропускную способность, но ваши пользователи IE, вероятно, получат лучший опыт.

Производительность JavaScript в IE в настоящее время довольно ужасна, поэтому, если вы хотите сделать свой сайт быстрее в IE, минимизация крупномасштабных манипуляций с DOM является хорошим началом. Не должно быть слишком сложно составить простой контрольный пример для сравнения, чтобы увидеть, принесет ли такое изменение пользу вашей конкретной ситуации.

...