21 заметка с тегом

browsers

Ленивая загрузка в ИЕ11

В IE11 интересную штуку сделали — ленивую загрузку. Можно пометить картинку (включая внедрённые тегом SVG), теги для воспроизведения видео и аудио, скрипты и многое другое специальным атрибутом lazyload, который означает «начать загружать, когда загрузится всё важное».

Иногда может быть удобно, для оптимизации скорости загрузки страницы, попросить браузер не загружать пока что-то объёмное. Я, например, в одном из наших проектов поставил этот атрибут аватарам пользователей. Пример использования:

<img src="avatar-3132.png" width="200" height="200" lazyload="1">

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

2013   browsers   html   ie   программирование

MJPEG, MPNG, MGIF, MSVG

Я вчера показывал вам «телевизор» про фестиваль в Самаре. Сделано очень просто — уменьшил все сделанные там снимки до 66×44 и сконвертировал их в анимированный ГИФ. Мелковато, конечно, но что делать — ГИФ не очень-то предназначен для фотографических изображений и размер анимации сильно растёт с увеличением размера кадра. Для фотографий в интернете принято использовать формат JPEG.

У JPEG есть свой формат анимации, если так можно выразиться, а точнее — скорее простенький формат видео, так как формат анимации, в моём представлении, помимо кадров должен содержать себе какую-то метаинформацию о кадре, например, задержку перед появлением следующего кадра. Этот формат — разновидность MJPEG (motion JPEG).

Мне давно хотелось посмотреть что у этого формата внутри, сегодня наконец посмотрел. Всё оказалось крайне просто.

В данном случае, MJPEG — формат стримминга (потоковой подачи) видео. Собственно, это даже не формат, а простое соединение JPEG и специального заголовка «multipart/x-mixed-replace», которым может применяться для стриминга чего угодно. Можно, например, подавать не JPEG, а PNG и «изобрести» формат видео MPNG, а то и M(JPEG+PNG+GIF), картинки разных форматов можно перемешивать в любых пропорциях.

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

Content-type:  multipart/x-mixed-replace;boundary=СТРОКАРАЗДЕЛИТЕЛЬ

--СТРОКАРАЗДЕЛИТЕЛЬ
Content-type: image/jpeg
Content-length: 232311

…бинарное содержимое первой картинки…

--СТРОКАРАЗДЕЛИТЕЛЬ
Content-type: image/jpeg
Content-length: 47474

…бинарное содержимое второй картинки…

СТРОКУРАЗДЕЛИТЕЛЬ надо выбирать так, чтобы она не встретилась в бинарных данных изображения.

Браузерам этот заголовок достался от фирмы Нетскейп, которая когда-то (ещё в версии 1.1) добавила её поддержку в свой браузер. «Микрософт», будучи конкурентом «Нетскейпа», поддержку заголовка в браузер не внедрила. Остальные браузеры заголовок понимают, но каждый немного по-разному.

Например для «Оперы», нужно выдавать данные с задержкой, то есть показали один кадр, ждём пару секунд, ничего с сервера не отдаём, потом следующий. Иначе, «Опера» «хитрит» — показывает следующий кадр, не дожидаясь загрузки предыдущего. Если канал хороший, то мы увидим только последний кадр.

«Файрфокс» единственный, кто хорошо справляется с тем, что кадры могут быть разных размеров — он отображает их правильно, «Опера» масштабирует по первой картинке, «Хром» и «Сафари» глючат — иногда пропускают кадр, иногда ничего не показывают, иногда показывают нормально.

Самое приятное в этом формате — что все современные браузеры считают его картинкой, то есть тег IMG его преспокойно показывает.

Любопытно, что браузеры позволяют сжимать содержимое всего файла и даже каждого кадра отдельно, то есть можно в заголовке кадра поставить «Content-encoding: gzip» и сжать кадр гзипом. Это полезно, если захочется сделать MSVG, например. Ведь SVG-изображения хорошо сжимаются.

Так что, если вы задумались сделать аналог какого-нибудь хостинга анимированных ГИФ и вам наплевать на «Эксплорер» (я посмотрел, девятая версия не поддерживает), сделайте ещё и поддержку MJPEG/MPNG.

2011   browsers   mjpeg   программирование

Увеличение числа параллельных соединений браузера к одному домену из HTML

Большинство разработчиков сайтов уже знают, что число соединений к серверу у браузеров лимитированно. Старые версии браузеров используют только два соединения на сервер, более свежие побольше (например, «Опера» 11.10 — аж 16).

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

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

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

Выглядеть это может так: static1.example.org, static2.example.org и так далее. «Яндекс», к примеру, грузит свои данные с домена yandex.st. Как видите, подходит другой домен любого уровня.

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

Ничего страшного, чаще всего у пользователя такого хостинга аж четыре домена, просто мало кто об этом подозревает. Первые два достаточно очевидны — хостер часто, кроме какого-нибудь example.org, заводит ещё и www.example.org. Но ведь это два разных домена!

Ещё два не так очевидны— это домены «example.org.» и «www.example.org.». Обратите внимание на точку в конце домена.

Мои эксперименты (проверял на сервисе BrowserShots, операционные системы Linux, Windows XP, Mac OS X) говорят о том, что браузеры умеют с ними работать, то есть картинки с URL, где имя домена кончалось на точку, грузились нормально.

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

В эксперименте я выставил максимальное количество соединений к серверу в единицу («Опера» и «FireFox» позволяют это сделать, где это делается в браузерах на WebKit я не знаю, подскажите, если знаете) и создал две HTML-страницы: одну, где две картинки из моего скрипта грузятся с одного домена, вторую, где одна из них грузится с домена с точкой.

Варианты загрузки (49.40КиБ)

На скриншоте хорошо заметен результат и видно где какой эксперимент (по колонке «Домен»). По скриншоту видно, что я использовал хорошо всем знакомый FireBug, но на Dragonfly из «Оперы» картина такая же.

2011   browsers   html   программирование

CSS vs. JSSS

Почти никто не помнит, но в прошлом веке, в браузере Netscape Navigator (который позже стал Communicator) был ещё один способ задавать таблицы стилей — JSSS.

Вообще, сейчас принято с теплотой вспоминать поделие Netscape и осуждать Microsoft за самоуправство в стандартах, но тогда время было такое. Кто такие были W3C и кто — Microsoft с Netscape. В Netscape придумывали «стандартов» никак не меньше (а то и больше), чем в Microsoft. И где сейчас LAYER, MULTICOL или тот же JSSS? Впрочем, фирма Netscape в 1996 году отправила JSSS в W3C.

Выглядел JSSS примерно так (даже функции поддерживались!):

<style type="text/javascript">
 tags.p.fontSize = "14pt";
 with(tags.H2)
 {
   color = "red";
   fontSize = "16pt";
   marginTop = "2cm";
 }
contextual(tags.H1, tags.EM, ids.x78, classes.foo.all).color = evaluate_color();
tags.P.firstLine.fontStyle = "small-caps";
tags.IMG.width = .50 * document.width;
if (visual.colorDepth > 2) {
  body.bgColor = "white";
  body.color = "blue";
} else {
  body.bgColor = "black";
  body.color = "white";
}
</style>

И иногда, перебирая в голове ушедшие технологии, я задумываюсь — а не было бы принятие JSSS вместо CSS более удачным шагом? Нужно было бы учить на один язык меньше (JS уже есть в браузере), да и последние тенденции в CSS3 показывают, что он медленно двигается в сторону какой-то странного скриптового языка.

Вот пример:

@media only screen and (max-width: 1024px) {
    div {
        width: -moz-calc(100% - 2 * 3px);
        height: -moz-max(50%, 18px);
    }
}

@-webkit-variables {
   step: -1;
}

ol {
    counter-reset: list -webkit-var(step);  
}
li:before {
    counter-increment: list;
    content: counter(list) ". ";
}

Уже похоже на какой-то язык программирования, не так ли? Переменные, какие-никакие циклы, функции (min, max), условия, арифметические действия.

Так вот, нужно ли это всё было городить? В JavaScript это уже есть. Впрочем, нужны, конечно, ограничения, чтобы JSSS не превратился в труднопроходимую кашу, CSS более лаконичен и строг. Но вопрос в том, удобно ли уже сейчас читать CSS больших проектов? Я пробовал, мой ответ — вряд ли. Это чудовищно сложно.

В общем, мне кажется, что Netscape был в чём-то прав. В этом направлении стоило двигаться.

2010   browsers   css   jsss   netscape   программирование

Специальный вид «Яндекса» для speeddial «Оперы»

Яндекс-Опера-френдли (21.44КиБ)

Я рад, что явился катализатором в «Яндексе» появления визуальных закладок для «Оперы» (для плагина FireFox «SpeedDial» тоже будет работать).

Проект «Погоды» я даже поменеджерил.

К сожалению, пока нет технической возможности делать то же самое для «Хрома» и «Сафари», так как использовать media queries (как для «Оперы» и FF) не получится, браузеры на WebKit ведут тут себя нелогично, нужно проверять особый HTTP-заголовок, а это противоречит техническому решению сервиса.

2010   browsers   opera   yandex   программирование

rel=«noreferrer»

Как известно, около года назад в WebKit появилась поддержка атрибута «rel» у ссылки со значением «noreferrer». Если указать это значение, то браузер не будет передавать заголовок «referer», в котором указано с какого адреса браузер осуществил переход.

Это прекрасная вещь, которая позволяет защищать, к примеру, информацию из интранета. У нас (в «Яндексе») стоят специальные скрипты для скрытия заголовка «referer» специальными ухищрениями, чтобы предотвратить утечку (так как некоторые сервисы у нас с ЧПУ) данных. Этот атрибут, если он был бы реализован везде, решил бы эту задачу более изящно.

К сожалению, с его распространением, думаю, будет расти его параноидальное использование, что сильно повлияет на статистику. Сейчас можно быть до какой-то степени уверенным, что если «referer» не выставлен, то человек пришёл из закладок в браузере или набрал адрес руками, скоро такое предположить будет неверно. Так же было удобно по тому же заголовку искать обсуждения своих статей (впрочем, я уже довольно давно делаю это, подписавшись на RSS сформированного мной запроса к «Яндекс.Блогам»).

Ну и ещё один показатель бардака — HTTP-заголовок называется «referer», а значение атрибута — «noreferrer».

P.S. Возможно поддержка «noreferrer» и ещё где-то реализована, я не интересовался.

2010   browsers   html   html5   webkit   программирование

MotionJPEG и favicon

Пришло в голову попробовать использовать «картинку» (я продолжаю считать, что это видео) в формате MotionJPEG в качестве favicon. Ну забавно же — в favicon на сайте не примитивная анимация (через animated GIF или APNG), а что-то долгое, а то и бесконечное.

Да, понимаю, бесполезно и трафик жрёт, это just for lulz.

Смотрел в последних браузерах. IE9PP2 ничего не показал (он MJPEG не понимает), Opera 10.70a ждёт завершения скачивания и ничего не показывает, не дождётся, поток-то бесконечный, «Хром» 6.0.466.0 dev ничего не показал и не попытался, а вот FireFox 4.0b1 показывает стримминг на месте favicon.

Видео в favicon (18.46КиБ)

Вот ещё пример бардака в браузерах — стало быть favicon выводится (почему?) не как обычная картинка. Ну, я понимаю, в DOM favicon выглядит совсем иначе, ну и что? Внедрённое изображение через тег OBJECT тоже выглядит в DOM иначе, но выводится наверняка тем же куском кода, который использует и тег IMG.

2010   browsers   ff   программирование

CSS хак для WebKit («Хром» и «Сафари») через «__qem»

Я тут понял, что CSS Unit «__qem» вполне себе подходит на роль CSS-хака для браузеров на основе WebKit. Правда, мне неизвестно в какой версии эта единица измерения появилась. Подходит, правда не во всех случаях и с некоторыми оговорками.

Во-первых, лучше всего применять этот хак в режиме совместимости со стандартами, иначе Internet Explorer не обращает на хак никакого внимания и не отфильтровывается (впрочем, это обходимо, но неудобно).

Во-вторых, подходят свойства где есть что указать в численных единицах. Для того, чтобы хак сработал, нужно поставить на место числового параметра, например, «0__qem», а на место остальных — то, что необходимо. В некоторых случаях, есть возможность подправить потом и числовой параметр.

К примеру:

div {
    background: #000; /* фон будет чёрным везде, кроме… */
    background: 0__qem #fff; /* …WebKit, тут он будет белым */

    border: 0; /* бордюра не будет, кроме… */
    border: 0__qem solid black; border-width: 10px; /* …WebKit, тут будет чёрный толстый бордюр */

    position: relative; /* блок будет виден везде, кроме… */
    top: -100000_qem; /* …WebKit, тут его видно не будет */
}

Я попробовал поиграть с Media Queries, скомбинировать с «__qem» не удалось, но зато выяснилось, что браузеры и тут стандарт нарушают:

@media (color: 0!) {
     /* работает в «Хроме», по крайней мере, в 6-м */
}

@media (color: 0_) {
    /* работает в «Опере», по крайней мере, в 10.60 */

@media {
   /* работает в «Опере» 10.60, «Хроме» 6, не работае в FF4, IE8, IE9PP2 */
}
}

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

2010   browsers   css   webkit   программирование

CSS hack для FireFox 4

В FireFox4 входит новый селектор — «:-moz-any». Позволяет задать на любом уровне несколько селекторов сразу. Например:

:-moz-any(ol, ul) li {
    list-style-type: none
}
a:-moz-any(:hover, :visited) {
    color: black;
}

В это связи легко получается CSS-хак для FireFox 4 и выше:

:-moz-any(x), .class_for_ff4 {
    color: red; /* стиль только для FF 4+ */
}
2010   browsers   ff   программирование
Ранее Ctrl + ↓