Выполнение Javascript блокирует рендеринг/прокрутку в IE 8

У меня небольшие проблемы с IE 8 (и, возможно, со всеми предыдущими версиями). Firefox и Chrome/Webkit, похоже, в порядке.

Что-то заставляет рендеринг страницы, прокрутку и вообще любое взаимодействие со страницей блокироваться. Насколько я могу судить, это происходит из-за выполнения Javascript.

В частности, я думаю, что в моей конкретной ситуации есть две основные ответственные стороны: Google Maps API (v3) и Facebook Connect.

В обоих случаях я использую методы асинхронной загрузки, предоставляемые Google и Facebook.

Я пробовал пару вещей до сих пор, безрезультатно:

  1. Задержка выполнения с помощью jQuery $(document).ready(). Это просто предотвращает блокировку до чуть более поздней загрузки страницы. На самом деле, поскольку я использую сжатие gzip, я не совсем уверен, что оно что-то делает — я не понимаю, как это работает.
  2. Задержка выполнения с помощью window.onload. Та же ситуация — загружается вся страница, затем она блокируется, пока захватывает и выполняет код Facebook Connect.
  3. Использование setTimeout(function(){}, 0). Я не на 100% понимаю, как это должно работать на самом деле - насколько я понимаю, это, по сути, должно заставить выполнение кода функции ждать, пока стек не будет очищен. К сожалению, это, кажется, ничего не делает для меня.

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

Я не могу придумать какие-то особые странности с моим сайтом, которые могли бы стать фактором, но я не буду этого исключать.

Итак, мой вопрос:

Существуют ли какие-либо рекомендации или существующие решения для этой проблемы?

Есть ли что-то, что я очевидно делаю неправильно?

Сайт-нарушитель находится по адресу: http://myscubadives.com/, если кто-нибудь захочет взглянуть на конкретная реализация.

Заранее благодарим вас за ваше время и помощь.

Сэм


google-maps javascript facebook internet-explorer settimeout
person Sam    schedule 04.03.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Да, браузер (по крайней мере, IE) приостанавливается во время выполнения Javascript. Это немного ускоряет работу, потому что не нужно перерисовывать и пересчитывать макет каждый раз, когда вы вносите изменения. Однако, если ваш Javascript выполняется долго, это может показаться зависанием. Синхронные запросы XMLHttpRequest также учитываются.

К сожалению, нет красивого обходного пути. Типичный совет — использовать функцию window.setTimeout() с тайм-аутом, установленным на 0 (или что-то очень маленькое), чтобы разделить рабочую нагрузку на несколько частей. Между тем браузер может перерисовывать себя и реагировать на некоторые действия пользователя, поэтому он не кажется зависшим. Однако код становится уродливым.

В случае длинных запросов XMLHttpRequest у вас нет другого выбора, кроме как использовать асинхронную версию.

Добавлено: А-а, я вижу, вы это уже знаете. Следует читать внимательнее. :P Знаете ли вы также, что в IE8 встроены инструменты разработчика (нажмите F12 для активации) и что на вкладке Javascript есть профилировщик? Я проверил это, и 2 секунды были потрачены исключительно на метод jQyery get(). Это дает мне сильное подозрение, что что-то все еще использует синхронные XMLHttpRequests.

Функция: get
Количество: 10
Включающее время: 2 039,14
Эксклюзивное время: 2 020,59
URL: http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js
Строка: 127

person Vilx-    schedule 04.03.2011
comment
Хм! Я не знал об инструментах разработчика IE - при первом запуске у меня было 6 секунд времени get(). Гах! Я понятия не имею, как это называется - я думаю, это место для начала. Спасибо! - person Sam; 04.03.2011
comment
На самом деле, этот метод get был не тем, о котором мы оба думали. На самом деле это находится в разделе кода, посвященном непрозрачности CSS, и похоже, что существует реальная вероятность того, что проблема, с которой я столкнулся, связана с чем-то совершенно не связанным с тем, что я подозревал. Еще раз спасибо за вашу помощь, небольшой толчок в правильном направлении имеет большое значение. :) - person Sam; 04.03.2011
comment
И теперь, когда у меня была возможность отладить все: проблема заключалась в плагине jQuery под названием colorbox, который, несмотря на то, что на самом деле не вызывался, выполнял некоторый код конфигурации, когда он был включен через тег скрипта (и запускал некоторые ошибки). , специфичный для IE код альфа-прозрачности). При удалении функции Facebook Connect или Google Maps не оказывают негативного блокирующего воздействия на страницу. Ошибочный виновник, мои извинения. Еще раз спасибо, Vilx-! - person Sam; 04.03.2011