Лет 5-6 назад среди веб-разработчиков распространилась мода на «unobtrusive javascript» – «ненавязчивый» javascript, который внедряется в тело HTML страницы только в виде ссылок на файлы js (а не в виде непосредственно кода). Мода эта, однако, почему-то не коснулась счётчиков, информеров и разных прочих «бегунов» и «директов»: все они полностью запихивают свои «тела» прямо в HTML. Особенно громоздким в этом плане выглядит счётчик Рейтинг@mail.ru: он содержит кучу условных комментариев и элементов script (пример: top.mail.txt, 1.2 K); и все подобные конструкции (обращения к внешним ресурсам) содержат потенциальную опасность «подвесить» загрузку страницы (то есть их код «навязчив» вдвойне). Как убрать со страницы (и заодно отсрочить загрузку) простых счётчиков, не содержащих javascript, мы рассмотрели в статье defer.aspx. Сечас попробуем проделать ту же операцию для более сложного счётчика.
При ближайшем рассмотрении вся куча тэгов (у счётчика mail.ru) состоит в основном из повторяющегося кода вида js = какое-то число, где число зависит от атрибута language у элемента script:
...и так далее. Как показала двойная проверка, в этом нет никакого смысла: 1) в атрибуте language можно написать что угодно (например, "javascript1.9"), и это будет работать; 2) если счётчик хочет учитывать разные версии языка, то почему в перечислении отсутствует, например, версия "jscript"? Максимальное число на данный момент счётчик предлагает 1.3, его сразу попросту и запишем в переменную js.
Есть другой момент в этих «условностях». Например, информацию об объекте screen счётчик пытается получать внутри элемента с атрибутом «javascript1.2». То есть преполагается, что какие-то старые браузеры с версией js 1.1 не будут пытаться исполнить код для версии 1.2. Практика показывает, что это очень слабое предположение. И сам же счётчик предлагает для других вычислений более продвинутое решение: он проверяет, есть ли у объекта screen свойство colorDepth, и если нету, пытается получить другое свойство – pixelDepth. Так ведь то же самое вполне можно делать и с самим объектом screen, в едином современном стиле:
Счётчик мэйл.ру с javascript по сути ничем не отличается от такого же счётчика с простой картинкой. «Продвинутый» счётчик точно так же «дёргает» удалённую картинку, только с более сложным адресом, в который в качестве параметров УРЛ передаётся некоторая дополнительная информация (о браузере, экране и странице, с которой пришёл пользователь). То есть данный счётчик даже не загружает (как другие) удалённый javascript со своего сервера. Так поможем ему получить эту информацию через наши обычные каналы (через общий js из внешних файлов). То есть сформируем полностью src для картинки счётчика (структуру src возьмём из «штатного» кода счётчика, предлагаемого поставщиком данной услуги) внутри обычной javascript-функции:
Далее, следуя идее «двойной ненавязчивости» (не только выносим код программы из HTML документа, но и загружаем все обращающиеся к внешним сайтам объекты последними), создадим простую систему отложенной загрузки счётчика:
1) в текст страницы, в то место, где должен быть счётчик, вставим пустой элемент <div id='rating_mail_ru'></div>;
2) создадим во внешнем js-файле функцию заполнения этого элемента:
3) и подключим эту функцию к событию «загрузка страницы» (window.onload = addCounter;), либо просто впишем вызов этой функции в другую функцию, которая, как мы точно знаем, должна вызываться на данной странице всегда после загрузки всего остального содержимого.
Вот система «двойной ненавязчивости» счётчика и готова. Интересно, что при формировании src счётчик не пытается получить никакой информации о браузере. Это, конечно, не значит, что счётчик её не получает. Просто информацию о браузере можно получить непосредственно из HTTP-заголовка, который отправляется браузером при запросе любого ресурса (в том числе и картинки счётчика), вот начало примерного списка таких заголовков:
В третьей строке там, как миленький, стоит user-agent (то есть наш браузер). Строго говоря, счётчикам не нужна информация ни о браузере, ни об экране пользователя. Для чего вообще ставят счётчики? Они нужны хозяевам сайтов для изучения трафика: откуда приходят посетители и насколько эти посетители уникальны. Вот это вот «откуда» счётчик получает с помощью свойства referer; уникальность посетителей отслеживается с помощью куки. Всё остальное – от лукавого (мэйл.ру, например, предлагает в выдаче своей статистики даже пол и возраст пользователей).
Проблема уникальности в том, что пользователь может удалить куки (а хитрые счётчики будут пытаться восстановить эту уникальность по совокупности других факторов: ip-адресу + свойствам экрана + свойствам браузера...). Но тут уж ничего не поделаешь. Пользователь может и javascript отключить, и поменять представление своего браузера, работать в каком-нибудь «анонимном» режиме... Какой-то процент «брака» в работе любого счётчика будет всегда.
Большинство счётчиков, в отличие от мэйл.ру, используют более «прямой» путь получения информации – просто загружают файл javascript со своего сайта (предлагая вам вставить в HTML страницу приблизительно следующий код):
Принципиальная схема «отложенного» ненавязчивого подключения в этом случае несколько изменится:
1) точно так же в текст страницы, в то место, где должен быть виден счётчик, вставим пустой элемент <div id='top100Counter'></div>;
2) создадим во внешнем js-файле функцию заполнения этого элемента, с некоторыми отличиями от мэйл.ру – на этот раз функция будет состоять из двух частей (показ картинки счётчика и подключение удалённого скрипта):