Оптимизация для Internet Explorer

Question

Будучи веб-разработчиком, я заметил, что все, что я создаю, прекрасно работает во всех браузерах, но всегда всегда всегда имеет проблему со скоростью в Internet Explorer. Обратите внимание, что я имею в виду скорость , так как я всегда стараюсь, чтобы он отображался и работал во всех браузерах.

Есть ли у кого-нибудь хорошие советы по программированию для Internet Explorer? Я имею в виду, как это делать, чтобы он был более или менее оптимизирован для Internet Explorer.

Я имею в виду мой последний пример - я возвращаю данные JSON из БД (через AJAX), а затем создаю страницу с результатами. Ответ от сервера минимален, и он мгновенно загружается в браузер aaaaall, но в Internet Explorer занимает 5-10 секунд в зависимости от ОС и версии.

Я потерян для слов, и мне было просто интересно, могу ли я что-нибудь сделать.

Примеры: http://msdn.microsoft.com/en-us/library/ms533019(VS.85).aspx http://www.quirksmode.org/dom/innerhtml.html http://blog.dynatrace.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/

-theo

Answer 1

Краткий ответ: не используйте методы DOM, такие как document.createElement ("div") в IE, для создания разметки. Вместо этого создайте свой HTML-код со строками.

Если вам необходимо использовать методы DOM, убедитесь, что вы не добавляете элементы на страницу более одного раза. То есть создайте основной контейнер, в который все добавлено, затем в качестве последнего шага вызовите document.body.appendChild ("div") (где "div" - ваш основной контейнер). Это сводит к минимуму количество повторных рендеринга.

Answer 2

Вы можете использовать dynaTrace AJAX Edition для профилирования своего сайта в IE, чтобы увидеть, что его тормозит.

Answer 3

Любые манипуляции с DOM всегда дороги (добавление элемента, удаление элемента). Таким образом, вы можете свести к минимуму операции DOM, это можно сделать, сохранив скрытые элементы на странице и изменив их видимость.

Я думаю это стоит посетить.

Answer 4

Производительность Javascript в IE в настоящее время является худшей среди всех популярных браузеров. Предложение использовать IE в качестве основы для производительности вполне обосновано. Я добавлю, что использование принятой библиотеки js / ajax (jQuery, YUI и т. Д.) Обеспечит выполнение и оптимизацию множества специфических для браузера оптимизаций.

Если вы выполняете много пользовательских js в своем веб-приложении и ищете только лучшие практики, я могу порекомендовать несколько веб-сайтов: jspatterns.com , IE + JavaScript. . Это хороший шанс подключить Javascript Дагласа Крокфорда : Хорошие части для обычного js zen.

Answer 5

При создании страницы в IE 6 я столкнулся с похожей проблемой и в итоге выполнил чистую конкатенацию строк, чтобы добиться приемлемой производительности. Моя первая попытка использовала jquery (1.2.6 в то время) для создания элементов и добавления атрибутов, но это оказалось слишком медленно. Создание html-файла вручную в виде строки и последующее задание свойства innerHtml для элемента для отображения таблицы выполнялось намного быстрее. jQuery 1.4+ в отношении IE6 намного быстрее, так что это может больше не выполняться.

Использование промежуточных строк в циклах for, похоже, также повышает производительность, т. Е. Не просто продолжайте использовать "+ =" на одной большой строке. В цикле for добавьте строку для строки таблицы и добавьте ее к большой строке в каждом цикле. Это может быть что-то попробовать.

Я столкнулся с двумя проблемами с IE6 в отношении производительности: - Переключение классов css происходит медленно в IE6, лучше установить, например, цвет фона в атрибуте style для элемента. - Если вы делаете указатели мыши над тегами tr или td в таблице, это будет хорошо работать во всех других браузерах, кроме IE. Вы должны обработать события mouseover и mouseout на уровне таблицы, найти тег tr или td, который был источником события, и выполнить любое поведение на этом этапе.