У меня есть виджет, который вставляется на многочисленных веб-страницах. Он состоит из некоторого JavaScript, который загружает HTML-документ с моего сервера (как JSONP), который затем вставляется в динамически создаваемый
Я использую Clicky для аналитики / отслеживания, чтобы измерить количество просмотров страниц, которые получает страница хоста моего виджета. Недавно мне нужно было пойти немного дальше, чтобы отследить количество фактических просмотров самого виджета. Цель этих данных - более точно интерпретировать производительность виджета при генерации переходов по ссылкам - то есть, если посетитель не прокручивает страницу хоста достаточно далеко, чтобы увидеть мой виджет, во-первых, я никак не мог бы вдохновили на клик.
Чтобы добиться этого отслеживания, я написал функцию, которая подписывается на событие браузера «onscroll»; в основном, каждый раз, когда он вызывается, он сравнивает расстояние между вершиной документа страницы хоста и верхней частью виджета, с расстоянием, на которое область просмотра прокручивается вниз от вершины страницы хоста, плюс высотой окна просмотра и половиной. высота виджета. Когда последний превышает первый, виджет может быть виден наполовину видимым в окне просмотра браузера.
Когда функция определяет, что это произошло (виджет должен оставаться в окне просмотра в течение 2 секунд или более), он регистрирует «действие» для Clicky, то есть сообщает аналитическому программному обеспечению, что это произошло. Это делается путем вызова предопределенной функции, которая загружает «изображение» с сервера Clicky - в основном это способ использовать междоменный запрос GET для передачи некоторых данных отслеживания.
Проблема в том, что для выполнения этого запроса - в среднем, чуть более секунды - в течение этого времени окно браузера не может быть прокручено. Это шоу для меня. Небольшая задержка - в идеале намного меньше половины секунды - приемлема, но ничто не приближается к секунде.
Я приложил все усилия, чтобы проанализировать данные, которые генерируют различные инструменты повышения производительности (Net Panel от Firebug, Google Page Speed), но я затрудняюсь объяснить, что происходит.
Я был бы чрезвычайно признателен всем, кто может дать некоторое представление о том, что происходит, или, что еще лучше, поделиться возможным решением (ями), чтобы уменьшить или устранить заблокированную прокрутку браузера. Время выполнения запроса для меня неважно, но количество времени, в течение которого полоса прокрутки «застревает», является критически важным. Например, есть ли способ сделать этот запрос Clicky, не прерывая работу полосы прокрутки браузера?
В качестве подтверждения концепции моего кода я создал прототип, который можно просмотреть здесь:
http://troy.onespot.com/static/3128/prototype.html
Когда вы прокручиваете страницу вниз до тех пор, пока середина серого прямоугольника не войдет в область просмотра в течение 2 секунд или более, в правом верхнем углу экрана появится индикатор того, что «виджет» зарегистрирован.
(Я тестировал этот код только для работы в Firefox 3.0 или более поздних версиях - фактически, за исключением, возможно, Safari, он вряд ли будет работать где-либо еще, поскольку он не учитывает различия между браузерами в свойствах измерения.)
Кроме того, вот скриншот вывода инструмента Google Page Speed во время этой регистрации:
http://img.skitch.com/20100121-t6bt1wauaar2drg1xdmwk9g4sb.png
Чтобы сгенерировать это, я постоянно прокручивал / перетаскивал страницу, вставляя серый прямоугольник в окно просмотра. Можно видеть, что функция, запускаемая событием onscroll, многократно работает как прерывистая черная линия в верхней части вывода. Как вы можете видеть, как только происходит регистрация Clicky (большой разрыв в пунктирной черной линии), примерно 1,2 секунды проходит там, где прокрутка невозможна. Я понятия не имею, что происходит во время пустого промежутка во второй половине этого периода, и я не совсем понимаю, почему весь период препятствует прокрутке.
Сетевая панель Firebug показывает более короткий период прошедшего времени (хотя субъективно он все еще ощущается как секунда или более):
http://img.skitch.com/20100121-pwf1ifngffsnqm8qekmm8wp9mt.png
В этом случае подавляющее большинство времени (544 мс) проводится на стадии «блокирования», что для меня не имеет смысла; Насколько я понимаю, этот этап встречается только тогда, когда запрос находится в очереди, поскольку максимальное количество запросов на имя хоста уже выполняется.
Буду очень признателен за любые идеи, предложения или другие идеи. Спасибо!