Избегайте пустого тега Image src

В статье "Avoid Empty Image src" автор рекомендует оставлять тег image src пустым, т.к. это влияет на скорость работы сайта.

Изображение с пустой строкой атрибута src встречается чаще, чем Вы думаете. Это встречается в двух формах:

  1. прямой HTML

    <img src="">

  2. JavaScript

    var img = new Image();

    img.src = "";

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

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

  • Safari и Chrome делают запрос непосредственно на саму страницу.

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

  • Opera не отправляет запрос, если встречает пустой Image src.

 

Почему это плохо?

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

  2. Зря тратит процессорное время для генерации страниц, которые никогда не будут просмотрены.

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

Основная причина такого поведения заключается в том, как выполняется разрешение URI в браузерах. Это поведение определено в комментарии 3986 - URI. Когда пустая строка встречается как URI, она рассматривается в качестве относительного URI и регулируется в соответствии с алгоритмом, определенном в разделе 5.2. Пример с пустой строкой, приведен в разделе 5.4. Firefox, Safari и Chrome решают вопрос с пустой строкой корректно, через спецификацию, в то время как Internet Explorer решает этот вопрос некорректно, очевидно в соответствии с более ранней версией спецификации, комментарий 2396 - URI (раньше это был комментарий 3986). Поэтому технически, браузеры делают то, что они должны делать для того, чтобы решить вопрос относительно URIs. Проблема состоит в том, что в этом контексте, пустая строка явно является непреднамеренной.

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

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

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

Инициатором данного правила был Nicolas C. Zakas, гуру Java-скрипта Yahoo. Для получения дополнительной информации см. его статью о том, как Пустой тег image src может разрушить ваш сайт.. 

 

Оригинал статьи на developer.yahoo.com

Перевод КОМТЕТ komtet.ru