Производительность IE 6 против чистого, ненавязчивого Javascript - PullRequest
3 голосов
/ 22 декабря 2009

Обычно я люблю хранить мой HTML-код чистым, семантическим и свободным от Javascript или CSS. Я включаю мои файлы .JS и .CSS вверху, а функциональность слоя поверх элементов DOM.

Положительные стороны этого:

  • Архитектурное разделение концернов
  • Изящная деградация, когда Javascript или CSS не поддерживаются
  • Удобство поиска

Есть один главный минус:

  • Проблемы с производительностью в IE 6

Поскольку все события присоединяются к элементам через код Javascript, который обращается к DOM, страдает производительность в IE.

Это особенно верно при использовании jQuery (который является моим любимым фреймворком Javascript).

Похоже, у меня есть два варианта: либо оставить код красивым и аккуратным, и заставить пользователей IE 6 (около 20% пользовательской базы) жаловаться, либо «отменить нормализацию» кода для повышения производительности IE 6 .

Есть ли "средний путь" в этой ситуации? Или я обречен?


Примечание: я не говорю, что мои проблемы с производительностью вызваны наличием Javascript в отдельном файле.

Я могу добиться замечательной производительности в IE, сохранив ее в отдельном файле.

Проблема в том, что мне все еще приходится помещать фактические обработчики событий в атрибуты 'onclick' в HTML. Например:

<span onclick="doSomething()">More...</span>

Было бы намного лучше, если бы я мог написать:

<span id="more-button">More...</span>

А затем назначьте его отдельно, в Javascript, со следующим:

$("#more-button").click(doSomething);

К сожалению, похоже, что это плохо для производительности IE6.

Ответы [ 4 ]

3 голосов
/ 22 декабря 2009

В разговоре , доступном в YUI Theatre, Джозеф Смарр рассказывает о производительности и высказывает мнение, что в целях улучшения производительности в коде есть обработчики onmousedown и тому подобное вместо поиска DOM элемент, а затем присоединение обработчика событий. Тем не менее, я не знаю никаких мер, с помощью которых это ускоряет вещи. Другие методы для ненавязчивого повышения производительности: (EIDT: обратите внимание, что они не зависят от браузера, следовательно, не ограничиваются IE):

  • Используйте onmousedown вместо onclick. Смарр говорит, что между выстрелами двух событий примерно 100 мс.
  • Для воспринимаемой производительности: обеспечьте мгновенную визуальную обратную связь, используя window.setTimeout(visualFeedback, 0). Это позволяет браузеру мгновенно отображать графические изменения, давая пользователю понять, что что-то происходит.
  • Когда вам нужно пройти DOM, кешируйте промежуточные результаты в переменную, чтобы использовать их повторно (думаю, вы это знаете).

Существует также демо , которое показывает преимущество первых двух пунктов. Кнопка вверху использует onclick и нормальное выполнение, ниже - onmousedown и setTimeout(func, 0).

2 голосов
/ 22 декабря 2009

На самом деле вы должны поместить свой JavaScript внизу страницы . Что касается проблем с производительностью при присоединении событий, обязательно тщательно измеряйте их перед оптимизацией. Dynatrace AJAX edition - отличный инструмент для измерения и понимания работы IE.

1 голос
/ 22 декабря 2009

Я не думаю, что у вас проблемы с производительностью, потому что вы помещаете свой код JavaScript в отдельные файлы. Я делаю это ... многие люди делают это ... Это считается наилучшей практикой.

JQuery имеет некоторые проблемы с производительностью. Это может быть одно место, чтобы посмотреть. Другое место, которое вам нужно посмотреть, это сам код вашего JavaScript. Без этого я не смог бы помочь вам улучшить работу вашего приложения.

0 голосов
/ 22 декабря 2009

Если ваш код работает в браузерах и плохо работает на IE6, то просто повезло!

Действительно, игнорируй этого старого зверя!

Если ваш код отлично работает в большинстве браузеров, и вам нужно сделать его медленным, потому что IE6 не может его запустить, тогда вы должны отобразить сообщение этим пользователям IE6 (или просто жить с плохой производительностью в каждом браузере). *

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

...