Готовый перевод Best Practices for Speeding Up Your Web Site / Рекомендации лучших вебоводов для ускорения вашего сайта: Avoid Empty Image src / Избегайте картинок без источника

Картинки с пустым атрибутом src встречаются чаще, чем вам может показаться. Они бывают двух видов:

чистый HTML

<img src="">

JavaScript

var img = new Image();
img.src = "";

Оба случая приводят к одному и тому же: браузер делает повторный запрос к серверу.

Internet Explorer делает запрос к директории, в которой находится страница.

Safari и Chrome делают запрос к самой текущей странице.

Firefox 3 и предыдущие версии ведут себя подобно Safari и Chrome, однако в версии 3.5 данный вопрос уже рассмотрен [bug 444931] {URL} и браузер больше не посылает запрос.

Opera ничего не делает, когда встречается пустая картинка.

Чем плохо такое поведение?

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

Лишние циклы расчетов сервера генерируются страницами, которые никогда не будут просмотрены.

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

Корень проблемы в том, каким способом URI обрабатывается браузером. Указанное поведение определено в RFC 3986 - Uniform Resource Identifiers (универсальные идентификаторы ресурсов). Это происходит когда встречается пустая строка и обрабатывается как URI согласно алгоритмам описанным в пункте 5.2, в то время как данный случай (пустая строка) указан в пункте 5.4. Firefox, Safari, и Chrome обрабатывают пустую строку согласно спецификациям, в то время как IE не совсем правильно, вероятно в соответствии с ранней версией спецификаций, RFC 2396 - Uniform Resource Identifiers (отменено спецификацией RFC 3986). Так что технически, браузеры делают то, что они должны делать для обработки относительных адресов. Проблема в том, что в данном контексте пустая строка совершенно не предусмотрена.

HTML5 в пункте 4.8.2 дополняет описание атрибута src, чтобы браузеры не делали дополнительный запрос:

Атрибут src обязателен и должен содержать действительный URL указывающий на неинтерактивную, возможно анимированную картинку, которая не является ни страницей, ни скриптом. Если базовый URI элемента такой же, как адрес документа, то значения атрибута src не должно быть пустой строкой.

Надеемся браузеры не будут иметь указанную проблему в будущем. К сожалению, подобного пункта нет ни для <script src="">, ни для <link href="">. Возможно еще есть время для корректировки, чтобы браузеры случайно не реализовали подобное поведение.

Данное правило было предложено гуру джаваскрипта Yahoo! Николасом Ц. Закасом. Для дополнительной информации обратитесь к его статье "Пустой источник картинки может разрушить ваш сайт"{URL}.

Переведено на Нотабеноиде
http://notabenoid.org/book/31735/110149

Переводчики: Alexasa