Георгий Мостоловица — «Браузеры»

Браузеры

Георгий Мостоловица
Разработчик интерфейсов

Браузеры

Общая схема работы браузера

Браузеры

Краткая история

Браузеры

Браузерные войны

Браузеры

Режимы отображения

Браузеры

UserAgent

Браузеры

UserAgent
Кроссбраузерность

Бра́узер — программное обеспечение для просмотра
веб-сайтов, т.е. для запроса веб-страниц, их обработки,
вывода и перехода от одной страницы к другой.

Wikipedia

4

Схема работы браузера

5

Архитектура браузеров

Пользовательский интерфейс
Хранилище данных

Высокоуровневый движок

Движок рендеринга

Сеть JS UI Backend

6

Краткая история браузеров. 1991 год

8

WorldWideWeb

8

WorldWideWeb
• Начало эпохи браузеров

8

WorldWideWeb
• Разработал Тим Бернерс-Ли

8

WorldWideWeb
– он очень крутой

8

WorldWideWeb
– изобретатель всемирной паутины и как следствие: URI,
URL, HTTP, HTML, семантического веба

8

WorldWideWeb
• Переименован в Nexus, чтобы избежать путаницы

8

WorldWideWeb
• Графический браузер

8

WorldWideWeb
– но картинки только в отдельном окне

8

WorldWideWeb
– WYSIWYG

8

WorldWideWeb
– WYSIWYG
– NeXT, Objective C

8


9


Mosaic

9


Mosaic
• Разработан в NCSA

9


Mosaic
• Популяризовал веб

9


Mosaic
– удобный установщик

9


Mosaic
– понятный интерфейс

9


Mosaic
– Windows, Unix и Mac версия

9


Mosaic
– Windows, Unix и Mac версия
– и конечно же инлайновые картинки

9


10


Netscape Navigator 1.x

10


• Обладает самыми широкими возможностями

10


• Стремительно набирает популярность

10


• Сodename Mozilla (Mosaic Killer)

10


– вообще сложная история с названием Mozilla

10


– вообще сложная история с названием Mozilla
– ещё и имя маскота

10


11


Netscape Navigator 2.x-3.x

11


• Добавлена поддержка

11


– LiveAudio, LiveVideo, QuickTime, POP3, HTML 3.2

11


– Java, JavaScript, плагины и само собой
анимированые гифки

11


– email клиент и многое другое

11


– email клиент и многое другое
• Около 90% рынка

11


12


Opera 2

12


Opera 2
• публичная версия

12


Opera 2
• публичная версия
• поддержка фреймов

12


13


Internet Explorer 1-2

13


• Разработан на основе Mosaic

13


• Поддерживает CSS

13


– правда очень частично

13


– но зато, впервые на рынке

13


• Плагины ActiveX, Java

13


• Поставляется с Windows 95 OSR2

13


• Поставляется с Windows 95 OSR2
• Первая версия включавшая синюю букву E

13


14


• CSS1 частично

14


• Очень старый движок по сравнению с IE4

14


• Начало падения рыночной доли

14



Opera 3

14



Opera 3
• кроссплатформенная

14



Opera 3
• кроссплатформенная
• JavaScript

14


15


Internet Explorer 4

15


Internet Explorer 4
• Код полностью переписан

15


Internet Explorer 4
• Cобственные расширения JavaScript, не совместимые с
Netscape

15


Internet Explorer 4
Netscape
• Собственная объектная модель документа (DOM)

15


Internet Explorer 4
Netscape
• Проще и стабильнее чем в Netscape

15


Internet Explorer 4
Netscape
• Проще и стабильнее чем в Netscape
• Поставляется с Windows 98

15


16


Netscape. Последние дни.

16


– Очень старый движок

16


– Множество ошибок обработки HTML и CSS

16


• AOL покупает Netscape

16


• Netscape наносит Microsoft последний удар в спину и
опенсорсит код браузера в рамках проекта Mozilla

16


• Netscape наносит Microsoft последний удар в спину и
опенсорсит код браузера в рамках проекта Mozilla
• Internet Explorer — новый лидер рынка

16


17


Opera 3.5

17


Opera 3.5
• Начинает поддерживать CSS

17


Opera 3.5
• Начинает поддерживать CSS
• Техническим директором компании становится один из
создателей CSS — Хокон Виум Ли

17


18


Internet Explorer 5.0-5.5

18


• Улучшенная поддержка HTML и CSS

18


• Поддержка XML и XSL

18


• XMLHttpRequest

18


• XMLHttpRequest
– можно считать днём рождения AJAX

18


• XMLHttpRequest
– хотя сам термин появится гораздо позже

18


• XMLHttpRequest
• Последняя шестнадцатибитная версия

18


• XMLHttpRequest
• Последняя шестнадцатибитная версия
• Поставляется с Windows 98 SE, Windows ME,
Windows 2000 и Microsoft Office

18


19


Konqueror 2

19


Konqueror 2
• Игра на именах:

19


Konqueror 2
– Navigator — мореплаватель, штурман

19


Konqueror 2
– Explorer — путешественник, исследователь

19


Konqueror 2
– Conqueror — завоеватель, победитель

19


Konqueror 2
• «K» это от KDE

19


Konqueror 2
• «K» это от KDE
• Основан на KHTML и KJS

19


20


Opera 6

20


Opera 6
• Microsoft заблокировала доступ к MSN.com

20


Opera 6
– спасает опция «представляться как Internet Explorer»

20


Opera 6
– в конце года полная маскировка под ИЕ

20


Opera 6

Internet Explorer 6

20


Opera 6

Internet Explorer 6
• Улучшена поддержка CSS1 и DOM уровня 1

20


Opera 6

Internet Explorer 6
• Всё ещё не соответствует стандартам W3C

20


Opera 6

Internet Explorer 6
• Всё ещё не соответствует стандартам W3C
• Что, в купе с монополией, мешает их внедрению

20


21


Phoenix 0.1-0.5

21


Phoenix 0.1-0.5
• Основан на движке Gecko

21


Phoenix 0.1-0.5
– который начинали разрабатывать ещё в Netscape

21


Phoenix 0.1-0.5
– теперь разрабатывается Mozilla Foundation

21


Phoenix 0.1-0.5
– основной принцип — поддержка открытых стандартов

21


Phoenix 0.1-0.5
• Много всего хорошего

21


Phoenix 0.1-0.5
– блокировка всплывающих окон

21


Phoenix 0.1-0.5
– табики

21


Phoenix 0.1-0.5
– табики
– темы

21


22


Firebird 1.5

22


Firebird 1.5
• Переименованный Phoenix

22


Firebird 1.5
– проблемы с торговой маркой

22


Firebird 1.5
• Какие-то улучшения

22


Firebird 1.5

Opera 7.0-7.2

22


Firebird 1.5

Opera 7.0-7.2
• Новый движок — Presto. Полностью переписанный

22


Firebird 1.5

Opera 7.0-7.2
• Выросла скорость и стабильность работы

22


Firebird 1.5

Opera 7.0-7.2
• Очередной конфликт с MSN

22


Firebird 1.5

Opera 7.0-7.2
– люди думали, что виновата Опера

22


Firebird 1.5

Opera 7.0-7.2
– люди думали, что виновата Опера
– Microsoft не признался
22


23


Safari 1.0

23


Safari 1.0
• Онован на Webkit — форке KHTML

23


Safari 1.0
– небольшой код (140 000 строк кода)

23


Safari 1.0
– хорошо спроектированный

23


Safari 1.0
– поддержка стандартов

23


Safari 1.0
• Состоит из WebCore и JavaScriptCore

23


Safari 1.0
• Состоит из WebCore и JavaScriptCore
• Браузер по умолчанию на Маках

23


24


Internet Explorer 6 SP2

24


• Никаких изменений в движке

24



Opera 7.x

24



Opera 7.x
• Проблемы с Hotmail

24



Opera 7.x
• Направлена жалоба в Майкрософт

24



Opera 7.x
• Направлена жалоба в Майкрософт
• Но они не ответили

24


25


Firefox 0.8-1.0

25


Firefox 0.8-1.0
• Опять переименован из-за аналогичной причины

25


Firefox 0.8-1.0
• Получил множество положительных оценок

25


Firefox 0.8-1.0
• 25 млн. загрузок за первые 99 дней

25


Firefox 0.8-1.0
• 25 млн. загрузок за первые 99 дней
• Становится одним из самых популярных свободных
приложений

25


26


Opera 8.x

26


Opera 8.x
• Браузер становится полностью бесплатным и без рекламы

26


Opera 8.x

Firefox 1.5

26


Opera 8.x

Firefox 1.5
• Через 344 дня после выпуска первой версии — загружен в
100 миллионный раз

26


Opera 8.x

Firefox 1.5
• Рыночная доля около 10%

26


Opera 8.x

Firefox 1.5

Safari 2.0

26


Opera 8.x

Firefox 1.5

Safari 2.0
• Проходит Acid2 тест

26


Opera 8.x

Firefox 1.5

Safari 2.0
• Проходит Acid2 тест
• Webkit в OpenSource

26


27


Internet Explorer 7

27


Internet Explorer 7
• PNG с альфа-каналом

27


Internet Explorer 7
• Какие то улучшения поддержки стандартов

27


Internet Explorer 7
• Первая версия, в которой не содержался код Mosaic

27


Internet Explorer 7
• Первая версия, в которой не содержался код Mosaic
• Trident 3.1 (раньше без версий)

27


28


Мобильная версия Safari

28


• Стив Джобс представляет iPhone

28


• А вместе с ним и мобильную версию

28


• Основан на обычном Webkit

28


• Основан на обычном Webkit
• С изменениями для мобильных устройств

28


29


Opera 9.x

29


Opera 9.x
• Повышение производительности

29


Opera 9.x
– вдвое быстрее предыдущей версии

29


Opera 9.x
– на 50% быстрее Firefox 2

29


Opera 9.x
– вдвое быстрее Internet Explorer 7

29


Opera 9.x

Firefox 3.0

29


Opera 9.x

Firefox 3.0
• 8 миллионов загрузок в день релиза

29


Opera 9.x

Firefox 3.0
• 8 миллионов загрузок в день релиза
• Глобальная доля рынка — 20%, в Европе — 30%

29


30


Chrome 1.0

30


Chrome 1.0
• Простой интерфейс

30


Chrome 1.0
• Высокая скорость работы

30


Chrome 1.0
• Основан на Webkit

30


Chrome 1.0
• V8, вместо JavaScriptCore

30


Chrome 1.0
• Наверное, можно считать, что положил начало

30


Chrome 1.0
– гонке за скорость

30


Chrome 1.0
– гонке за скорость
– в том числе и для Яваскриптовых движков

30


31

Internet Explorer 8.0

31

• Новый режим рендеринга, который называется
«режим стандартов»

31

• Проходит Acid2

31


Chrome 2.0-3.0

31


Chrome 2.0-3.0
• Существенно увеличена производительность JavaScript

31


Chrome 2.0-3.0

Firefox 3.5

31


Chrome 2.0-3.0

Firefox 3.5
• Новая версия SpiderMonkey — TraceMonkey

31


Chrome 2.0-3.0

Firefox 3.5

31


Chrome 2.0-3.0

Firefox 3.5
• Первый JIT компилятор для JavaScript
31


32


Chrome 4.0-8.0

32


Chrome 4.0-8.0
• Полное прохождение тестов ACID3

32


Chrome 4.0-8.0
• Улучшена скорость работы JavaScript

32


Chrome 4.0-8.0

Opera 10.50-11.00

32


Chrome 4.0-8.0

Opera 10.50-11.00
• Новый JavaScript-движок Carakan

32


Chrome 4.0-8.0

Opera 10.50-11.00

Firefox 3.6

32


33


Firefox 4.0-9.0

33


Firefox 4.0-9.0
• Gecko 2.0 и JägerMonkey

33


Firefox 4.0-9.0
• Переход на быстрый цикл разработки релизов

33


Firefox 4.0-9.0
• Acid3 — 97/100

33


Firefox 4.0-9.0
• Acid3 — 97/100


33


Firefox 4.0-9.0
• Acid3 — 97/100

• Поддержка большей части CSS3

33


Firefox 4.0-9.0
• Acid3 — 97/100

• Более быстрая обработка JavaScript

33


Firefox 4.0-9.0
• Acid3 — 97/100

• Более быстрая обработка JavaScript
• Аудио- и видеотеги HTML5

33


34


Chrome 9.0-16.00

34


Chrome 9.0-16.00
• Ускорено выполнение JavaScript

34


Chrome 9.0-16.00
• Становится вторым по полярности браузером в мире

34


Chrome 9.0-16.00
– cмещая Firefox на третье место

34


Chrome 9.0-16.00

Safari 5.1

34


Chrome 9.0-16.00

Safari 5.1
• Переход на Webkit2

34


Chrome 9.0-16.00

Safari 5.1
– быстрее и надёжнее

34


Chrome 9.0-16.00

Safari 5.1
– обработка web контента производится в изолированных
процессах

34


Chrome 9.0-16.00

Safari 5.1
– обработка web контента производится в изолированных
процессах
– так же как и в Хроме, но реализовано на уровне движка
34


35


Chrome 17.00-21.00

35


Chrome 17.00-21.00
• Новый V8 «JavaScript Harmony»

35


Chrome 17.00-21.00
• Поддержка протокола SPDY

35


Chrome 17.00-21.00

Firefox 10.00-15.0.1

35


Chrome 17.00-21.00

Firefox 10.00-15.0.1
• Борьба с утечками памяти

35


37


• Борьба за господство на рынке web-браузеров

37


• Вроде бы ничего страшного

37


• Если бы не используемые методы — добавление
специфических, нестандартных возможностей к браузеру

37


• В результате — многие сайты «оптимизированы» для
конкретного браузера

37


• В результате — многие сайты «оптимизированы» для
конкретного браузера
• Но вообще, проявляется по разному

37

Первая браузерная война

39


Причины

39


Причины
• дерзкий Netscape

39


Причины
• отказ в продаже Microsoft своих технологий

39


Причины
• полное отсутствие Microsoft на рынке браузеров

39


Причины

Факторы

39


Причины

Факторы
• Netscape коммерческая компания, которой необходимо
зарабатывать деньги

39


Причины

Факторы
• У Microsoft монополия на рынке операционных систем

39


Причины

Факторы
• Могут позволить раздавать браузер бесплатно

39


Причины

Факторы
• Могут позволить раздавать браузер бесплатно
• Ну и вообще Internet Explorer лучше

39


40


Итоги

40


Итоги
• Internet Explorer становится доминирующим браузером
на рынке

40


Итоги
• Internet Explorer становится доминирующим браузером
на рынке
• Суд: Соединённые штаты против Microsoft

40

Основные режимы отображения

46


Quirks Mode (clck.ru/27PuB)

46


Standards Mode

46


Standards Mode
Almost Standards Mode (clck.ru/27Q1n)

46

Режимы отображения в IE

47


IE7 Standards

47


IE7 Standards
IE8 Standards

47


IE7 Standards
IE8 Standards
IE8 Almost Standards

47


IE7 Standards
IE8 Standards
IE9 Standards

47


IE7 Standards
IE8 Standards
IE9 Standards

clck.ru/27QXD
47

User Agent — это клиентское приложение,
использующее определённый сетевой протокол.
Термин обычно используется для приложений,
осуществляющих доступ к веб-сайтам, таким как
браузеры, поисковые роботы (и другие «пауки»),
мобильные телефоны и другие устройства

Wikipedia

49

The User-Agent request-header field contains information
about the user agent originating the request. This is for
statistical purposes, the tracing of protocol violations, and
automated recognition of user agents for the sake of
tailoring responses to avoid particular user agent limitations.
User agents SHOULD include this field with requests.

RFC 2616, 14.43

50

UserAgent

Пример HTTP запроса

GET / HTTP/1.1
Host: www.yandex.ru
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
User-Agent: Mozilla/5.0 (Macintosh; ru-ru; Intel Mac OS X
10_8_0) AppleWebKit/535.22 (KHTML, like Gecko) Chrome/
19.0.1048.0 Safari/535.22
Accept: text/html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

51

User-Agent = "User-Agent" ":" 1*( product | comment )

product = token ["/" product-version]
product-version = token

token = 1*<any CHAR except CTLs or separators>
comment = "(" *( ctext | quoted-pair | comment ) ")"

RFC 2616

52

UserAgent

clck.ru/1WYC
clck.ru/27hxV
53

UA: Mosaic

NCSA_Mosaic/2.7b4 (X11;AIX 1)

54

UA: Netscape Navigator

Mozilla/3.0 (Macintosh; I; PPC)

55

UA: Internet Explorer

Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)

56

UA: Mozilla

Mozilla/5.001 (Macintosh; N; PPC; ja) Gecko/25250101

57

UA:Firefox

Mozilla/5.0 (X11; Linux i686; rv:1.7.5) Gecko/20041108
Firefox/1.0

58

UA: Konqueror

Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD)
(KHTML, like Gecko)

59

UA: Safari

Mozilla/5.0 (Macintosh; U; PPC Mac OS X;
en-us) AppleWebKit/85.7 (KHTML, like Gecko)
Safari/85.6

60

UA: Chrome

Mozilla/5.0 (Windows NT 6.1; WOW64)
AppleWebKit/537.1 (KHTML, like Gecko)
Chrome/22.0.1207.1 Safari/537.1

61

Кроссбра́узерность — свойство сайта отображаться
и работать во всех популярных браузерах идентично.
Под идентичностью понимается отсутствие развалов
верстки и способность отображать материал с
одинаковой степенью читабельности.

Wikipedia

63


64


• Много браузеров

64


– их вообще много

64


– да ещё и разных версий

64


– а ещё с разным уровнем поддежки технологий

64


• Требуется дополнительное время, которое стоит денег

64


• Но иначе — посетитель уйдёт

64


• Но иначе — посетитель уйдёт
• Ну и вообще это плохо

64

Limited browser support

65


• Поддержка ограниченного количества браузеров

65


• Может проявляться по разному

65


– блокировка работы в некоторых браузерах

65


– предупреждение о возможных проблемах

65


– предупреждение о возможных проблемах
– просто ограниченная поддержка

65


66

Browser detection

Определение браузера по его особенностям:

.bang
{
// some properties
}

* html .bang
{
zoom: 1;
}

67

Graceful degradation

• Современные и популярные браузеры получают
контент в полном виде

68

Graceful degradation

• Современные и популярные браузеры получают
контент в полном виде
• Остальные — в упрощённом

68

Progressive enhancement

69


• основной контент доступен во всех браузерах

69


• основная функциональность доступна во всех браузерах

69


• не используется экстраразметка для эмуляции
неподдерживаемых свойств

69


• улучшение внешнего вида достигается за счет
дополнительных браузерозависимых стилей

69


• улучшение функциональности достигается за счет
«ненавязчивых» (unobtrusive) скриптов

69


• улучшение функциональности достигается за счет
«ненавязчивых» (unobtrusive) скриптов
• учитываются возможности браузера пользователя

69

Feature detection

Проверка поддержки тэга video:

if(!!document.createElement('video').canPlayType) {
// Insert HTML5 Video
} else {
// Insert Flash Video
}

70

Feature detection
<!DOCTYPE html>
<html class="draganddrop rgba ...">
<head>
<title>Bang!</title>
<script src="//yandex.st/modernizr/2.6.2/
modernizr.js"></script>
...
</head>
<body>
..
<script>
if(!Modernizr.inputtypes.date) {
// no native support for <input type="date"> :(
// maybe build one yourself with Dojo or jQueryUI
}
</script>
</body>
</html>

71

Здравый смысл

72



72


• Список совместимости

72


• Основывается на доле браузера среди нашей аудитории

72


– > 2% — полная совместимость

72


– < 2% — слабая совместимость

72


– < 0.5% — не поддерживаем

72


– < 0.5% — не поддерживаем
• Но контент должен быть доступен везде

72

Browser detection: условные комментарии


<link rel="stylesheet" href="//yandex.st/.../style.css">



73


Browser detection: дополнительные стили для iPad

{
block: 'b-page',
head: [
...
data.isIpad ? {
elem: 'css',
url: '//yandex.st/.../style.ipad.css'
} : '',
],
...
}

74

Feature detection: определение JavaScript и режима отображения

<!doctype html>
<html class="i-ua_js_no i-ua_css_standard">
<head>
<script>
;(function(d,e,c,r) {
e=d.documentElement; c="className";
r="replace";
e[c]=e[c][r]("i-ua_js_no","i-ua_js_yes");
if(d.compatMode!="CSS1Compat")
e[c]=e[c][r]("i-ua_css_standart","i-
ua_css_quirks")
})(document);
</script>
<link rel="stylesheet" href="//yandex.st/.../style.css">
<style>
.b-huge-js-block { display: none }
</style>
75

Списки совместимости в IE

76


• Internet Explorer старше седьмой версии

76


• Приезжают вместе с обновлениями

76


• Основываются на поведении пользователей

76


• Основываются на поведении пользователей
• support.microsoft.com/kb/960321

76

Browser JavaScript в Opera

77


• Не путать с UserJS

77


• Автоматически исправляет

77


– веб страницы

77


– устаревшие скрипты

77


– страницы которые по неосторожности блокируют Оперу

77


• Лежит на ГитХабе

77


– operasoftware/browserjs

77


– operasoftware/browserjs
• www.opera.com/docs/browserjs/

77


Кусок скрипта который чинит Facebook:

if(hostname.endsWith('www.facebook.com')){
opera.addEventListener('BeforeCSS', function(e) {
e.cssText = e.cssText.replace(/border-(top|bottom)-
(right|left)-radius:3px/g, '');
}, false);
}

78

Заключение

• Движков много, а браузеров ещё больше

81


• Браузеры сложные

81


• Следует следить за их развитием, чтобы быть в курсе

81


• Всё будет хорошо

81


• Всё будет хорошо
• А может быть и плохо

81

Георгий Мостоловица

Разработчик интерфейсов

gfranco@yandex-team.ru

Спасибо

Георгий Мостоловица — «Браузеры»

Recommandé

Recommandé

Contenu connexe

Similaire à Георгий Мостоловица — «Браузеры»

Similaire à Георгий Мостоловица — «Браузеры» (20)

Plus de Yandex

Plus de Yandex (20)

Георгий Мостоловица — «Браузеры»