Как кодировать HTML для быстрого рендеринга в IE

Question

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

Моя текущая конкретная проблема заключается в том, что мои табличные данные (в элементе таблицы), которые вызывают слишком медленное рисование страницы, делают обновления DOM (эффекты при наведении курсора) и анимацию очень медленными. Я уверен, что это не производительность JavaScript. Я проверил страницу, используя DynaTrace AJAX. Процессор становится слишком загруженным, когда я наводю указатель мыши на элементы, но JS не работает. И наведение осуществляется путем добавления / удаления класса для элементов TR. Я также пробовал YSlow в Firefox, он не показывает какой-либо конкретной проблемы. Это также не связано с сетью. (Firefox размещает страницу быстрее, но не потому, что его движок JS работает быстрее)

Существует ли инструмент для профилирования чертежей и макетов в IE, чтобы я мог выяснить, откуда возникла проблема? И что может заставить рисование быть таким медленным, чтобы я мог избежать их в HTML-коде?

Answer 1

Известно, что Internet Explorer медленно выполняет рендеринг больших таблиц HTML.

См. Эту прекрасную статью на MSDN: Создание высокопроизводительных HTML-страниц и, в частности, раздел о таблицах:

• Установите для таблицы фиксированный атрибут CSS макета таблицы.
• Явно определите объекты col для каждого столбца.
• Установите атрибут WIDTH для каждогоcol.

Затем в журнале ieblog есть хороший пост о рендеринге таблиц: Рендеринг таблиц .

Это сводится к следующему:Постарайтесь сделать контент в таблицах менее сложным, то есть установить фиксированную ширину и не выполнять слишком много динамического рендеринга.IE сначала загружает содержимое, а затем должен рассчитать правильную ширину содержимого == медленно.