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

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

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

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

Ответы

Ответ 1

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

Обратитесь к этой хорошей статье в MSDN: Создание высокопроизводительных HTML-страниц и особенно в разделе о таблицах:

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

Затем есть также хорошая запись в блоге ieblog о рендеринге таблицы: Отображение таблицы.

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