Зачем вообще обслуживать данные GIF (веб-жучки) 1x1 пикселей? - PullRequest
73 голосов
/ 10 июля 2011

Многие аналитические и отслеживающие инструменты запрашивают изображение GIF 1x1 (веб-ошибка, невидимая для пользователя) для хранения / обработки междоменных событий.

Зачем вообще обслуживать это изображение GIF? Не будет ли более эффективным просто вернуть некоторый код ошибки, такой как 503 Сервис временно недоступен или пустой файл?

Обновление: Чтобы быть более понятным, я спрашиваю, зачем обслуживать данные изображений GIF, когда вся необходимая информация уже отправлена ​​ в заголовках запросов.Само изображение GIF не возвращает никакой полезной информации.

Ответы [ 7 ]

66 голосов
/ 11 июля 2011

Ответ Дуга довольно всеобъемлющий; Я думал, что добавлю дополнительную заметку (по запросу ОП, вне моего комментария)

Ответ Дуга объясняет, почему маяки с разрешением 1x1 пикселей используются для тех целей, для которых они используются; Я подумал обрисовать потенциальный альтернативный подход, который заключается в использовании HTTP-кода статуса 204 «Нет содержимого» для ответа, а не в отправке тела изображения.

204 Нет содержимого

Сервер выполнил запрос но не нужно возвращать сущность-тело, и может захотеть вернуться обновленная метаинформация. Ответ МОЖЕТ включать новый или обновленный метаинформация в виде заголовки объекта, которые, если присутствуют ДОЛЖЕН быть связан с запрашиваемый вариант.

Обычно сервер получает запрос и решает не отправлять тело (в этом случае не отправлять изображение). Но он отвечает кодом, чтобы сообщить агенту, что это было сознательное решение; в основном, это просто более короткий способ ответить утвердительно.

С Документация Google Speed ​​Page :

Один из популярных способов записи страницы взгляды в асинхронном режиме является включить фрагмент JavaScript на нижняя часть целевой страницы (или как обработчик события onload), который уведомляет сервер регистрации, когда пользователь загружает стр. Самый распространенный способ сделать это построить запрос к сервер для "маяка" и закодировать все интересующие данные в качестве параметров в URL-адрес ресурса маяка. к оставьте HTTP-ответ очень маленьким, Прозрачное 1x1-пиксельное изображение является хорошим кандидат на запрос маяка. чуть более оптимальный маяк будет использовать ответ HTTP 204 («нет содержимого») который немного меньше, чем 1x1 GIF.

Я никогда не пробовал, но теоретически он должен служить той же цели, не требуя передачи самого gif-файла, что экономит вам 35 байт, в случае Google Analytics. (По схеме, если вы не используете Google Analytics, обслуживающий много триллионов обращений в день, 35 байтов - это действительно ничто.)

Вы можете проверить это с помощью этого кода:

var i = new Image(); 
i.src = "http://httpstat.us/204";
54 голосов
/ 10 июля 2011

Во-первых, я не согласен с двумя предыдущими ответами - ни один не затрагивает вопрос.

Однопиксельное изображение решает внутреннюю проблему для веб-аналитических приложений (например, Google Analytics) при работе по протоколу HTTP - как передавать (веб-метрики) данные изклиент к серверу .

Самый простой из методов, описанных в Протоколе, самый простой (по крайней мере, самый простой метод, который включает тело запроса) - это GET запрос .Согласно этому методу протокола клиенты инициируют запросы к серверам на ресурсы;серверы обрабатывают эти запросы и возвращают соответствующие ответы.

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

Итак, каково решение проблемы получения данных от клиента обратно на сервер? В пределахВ контексте HTTP существуют другие методы протокола, отличные от GET (например, POST), но это ограниченный вариант по многим причинам (о чем свидетельствует его нечастое и специализированное использование, такое как отправка данных формы).

Если вы посмотрите наGET Запрос из браузера, вы увидите, что он состоит из URL-адреса запроса и Заголовки запроса (например, заголовки Referer и User-Agent), последний содержит информацию о клиенте--eg, тип и версия браузера, язык браузера, операционная система и т. д.

Опять же, это часть запроса о том, что клиентотправляет на сервер.Так что идея, которая мотивирует однопиксельный gif, заключается в том, что клиент отправляет данные веб-метрик на сервер, обернутый в заголовок запроса.

Но тогда как заставить клиента запрашивать ресурс, чтобы его можно было «обмануть» при отправке данных метрик? А как заставить клиента отправлять фактические данные, которые хочет сервер?

GoogleХороший пример - аналитика: файл ga.js (большой файл, загрузка которого клиенту запускается небольшим скриптом на веб-странице) содержит несколько строк кода, которые направляет клиентузапрашивать конкретный ресурс с определенного сервера (сервера GA) и отправлять определенные данные, заключенные в заголовок запроса.

Но поскольку целью этого запроса является не получение ресурса, аДля отправки данных на сервер этот ресурс должен быть как можно меньше, и он не должен быть виден при визуализации на веб-странице - следовательно, прозрачный GIF размером 1 x 1 пиксель.Размер - наименьший возможный размер, а формат (gif) - наименьший среди форматов изображений.

Точнее, все данные GA - каждый элемент - собираются и упаковываются в Запросить строку запроса URL (все после '?').Но для того, чтобы эти данные передавались с клиента (где он создается) на сервер GA (где он регистрируется и агрегируется), должен быть HTTP-запрос, поэтому ga.js (загруженный скрипт Google Analytics, если онкэшируется клиентом в результате функции, вызываемой при загрузке страницы) указывает клиенту собрать все аналитические данные - например, файлы cookie, строку местоположения, заголовки запроса и т. д. - объединить их в одну строкуи добавьте его в виде строки запроса к URL (*http://www.google -analytics.com / __ utm.gif *?), и он станет URL запроса .

Это легко доказать, используя любой веб-браузер, который позволяет просматривать HTTP-запрос для веб-страницы, отображаемой в вашем браузере (например, Safari Web Inspector , Firefox / Chrome Firebug и т. Д.).

Например, я ввел действительный URL-адрес корпоративной домашней страницы в адресную строку моего браузера, которая вернула эту домашнюю страницу и отобразила ее в моем браузере (я мог бы иметьвыбрал любой веб-сайт / страницу, которая использует одно из основных аналитических приложений, GA, Omniture, Coremetrics и т. д.)

В качестве браузера я использовал Safari, поэтому я нажал Разработка в строке меню, а затем Показать веб-инспектор .В верхней строке веб-инспектора нажмите Resources , найдите и щелкните ресурс utm.gif в списке ресурсов, показанном в левом столбце, а затем перейдите на вкладку Headers ,Это покажет вам что-то вроде этого:

Request URL:http://www.google-analytics.com/__utm.gif?
           utmwv=1&utmn=1520570865&
           utmcs=UTF-8&
           utmsr=1280x800&
           utmsc=24-bit&
           utmul=enus&
           utmje=1&
           utmfl=10.3%20r181&

Request Method:GET
Status Code:200 OK

Request Headers
    User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/533.21.1 
                 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

Response Headers
    Cache-Control:private, no-cache, no-cache=Set-Cookie, proxy-revalidate
    Content-Length:35
    Content-Type:image/gif
    Date:Wed, 06 Jul 2011 21:31:28 GMT

Ключевые моменты, на которые следует обратить внимание:

  1. Запрос был фактически запросом на utm.gif, так какОб этом свидетельствует первая строка выше: * URL запроса: http://www.google -analytics.com / __ utm.gif *.

  2. Параметры Google Analytics хорошо видны в строке запросадобавлен к URL-адресу запроса : например, utmsr - это имя переменной GA для ссылки на разрешение экрана клиента; для меня это значение равно 1280x800; utmfl - это имя переменной для флэш-версии со значением 10,3 и т. Д.

  3. Заголовок ответа , называемый Содержимое-Тип (отправленный сервером обратно клиенту) также подтверждает, что запрошенный и возвращенный ресурс был размером 1x1 пикселей: Тип содержимого: image / gif

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

14 голосов
/ 10 июля 2011

Некоторые браузеры могут отображать значок ошибки, если ресурс не может быть загружен. Это также усложняет отладку / мониторинг службы, вам нужно убедиться, что ваши инструменты мониторинга рассматривают ошибку как хороший результат.

ОТО, вы ничего не получаете. Сообщение об ошибке, возвращаемое сервером / платформой, обычно больше, чем изображение 1x1. Это означает, что вы увеличиваете сетевой трафик практически ни за что.

8 голосов
/ 10 июля 2011

Поскольку у такого GIF есть известная презентация в браузере - это один пиксель, точка.Все остальное представляет риск визуального вмешательства в реальное содержание страницы.

Ошибки HTTP могут отображаться как увеличенные рамки текста ошибки или даже как всплывающее окно.Некоторые браузеры также могут жаловаться, если они получают пустые ответы.

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

4 голосов
/ 03 октября 2013

Это ответ на вопрос ОП - «зачем обслуживать данные изображений GIF ...»

Некоторые пользователи добавляют простой тег img для вызова службы регистрации событий -

<img src="http://www.example.com/logger?event_id=1234">

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

Что ясделайте, найдите поле заголовка Accept .Когда ваш скрипт вызывается с помощью тега img , подобного этому, в заголовке запроса вы увидите что-то вроде следующего:

Accept: image/gif, image/*
Accept-Encoding:gzip,deflate
...

Когда есть "image /"* строка в поле заголовка Accept , я предоставляю изображение, в противном случае я просто отвечаю с 204.

1 голос
/ 05 декабря 2014

Что ж, главная причина - прикрепить к нему cookie, поэтому если пользователи переходят с одной стороны на другую, у нас остается тот же элемент для прикрепления cookie.

0 голосов
/ 28 сентября 2018

Вам не нужно обслуживать изображение, если вы используете Beacon API (https://w3c.github.io/beacon/) метод реализации.

Код ошибки будет работать, если у вас есть доступ к файлам журналов вашегосервер. Цель обслуживания изображения - получить больше данных о пользователе, чем вы обычно делаете с файлом журнала.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...