История создания браузера элементов
Обновлено: 21.11.2024
Первая версия HTML была написана Тимом Бернерсом-Ли в 1993 году. С тех пор появилось множество различных версий HTML. Наиболее широко используемой версией в 2000-х годах был HTML 4.01, который стал официальным стандартом в декабре 1999 года.
Другая версия, XHTML, представляла собой переписанный HTML как язык XML. XML — это стандартный язык разметки, который используется для создания других языков разметки. Сегодня используются сотни XML-языков, включая GML (язык географической разметки), MathML, MusicML и RSS (Really Simple Syndication). Поскольку каждый из этих языков был написан на общем языке (XML), их содержимое можно легко использовать в разных приложениях. Это делает XML потенциально очень мощным, и неудивительно, что W3C создал XML-версию HTML (опять же, называемую XHTML). XHTML стал официальным стандартом в 2000 году и был обновлен в 2002 году. XHTML очень похож на HTML, но имеет более строгие правила. Для всех языков XML необходимы строгие правила, поскольку без них взаимодействие между приложениями было бы невозможно. Вы узнаете больше о различиях между HTML и XHTML в Разделе 2.
Большинство страниц в Интернете сегодня созданы с использованием HTML 4.01 или XHTML 1.0. Однако в последние годы W3C (в сотрудничестве с другой организацией, WHATWG) работает над совершенно новой версией HTML, HTML5. В настоящее время (2011 г.) HTML5 все еще находится в стадии проекта спецификации и еще не является официальным стандартом. Однако он уже широко поддерживается браузерами и другими устройствами с доступом в Интернет, и за ним будущее. Таким образом, HTML5 является основным языком, изучаемым в этом курсе.
Примеры типов контента, которые можно размещать на веб-страницах
В следующей таблице приведен список многих типов контента, который можно добавить на веб-страницы с помощью различных версий HTML. На заре Интернета HTML (версия 1.2) был очень простым, но со временем были выпущены новые версии, которые добавляли все больше и больше возможностей. Тем не менее, если веб-дизайнеры хотели добавить контент или функции, не поддерживаемые HTML, им пришлось бы делать это с помощью нестандартных проприетарных технологий, таких как Adobe Flash. Эти технологии требуют от пользователей установки подключаемых модулей браузера, а в некоторых случаях означают, что некоторые пользователи не смогут получить доступ к контенту (например, iPhone и iPad не поддерживают Flash).
В HTML5 добавлена поддержка многих новых функций, которые позволяют делать больше с HTML, не полагаясь на нестандартные проприетарные технологии.
Это всеобъемлющее руководство по внутренним операциям WebKit и Gecko является результатом обширных исследований, проведенных израильским разработчиком Тали Гарсиэль. За несколько лет она просмотрела все опубликованные данные о внутреннем устройстве браузера (см. Ресурсы) и потратила много времени на чтение исходного кода веб-браузера. Она написала:
В годы доминирования IE на 90 % ничего особенного не оставалось, кроме как рассматривать браузер как «черный ящик», но теперь, когда на браузеры с открытым исходным кодом приходится более половины доли использования, это хорошо время заглянуть под капот двигателя и посмотреть, что находится внутри веб-браузера. А внутри миллионы строк C++.
Тали опубликовала свое исследование на своем сайте, но мы знали, что оно заслуживает более широкой аудитории, поэтому мы подчистили его и повторно опубликовали здесь.
Как веб-разработчик, изучение внутренних операций браузера поможет вам принимать более обоснованные решения и понимать обоснования передовых методов разработки. Хотя это довольно объемный документ, мы рекомендуем вам потратить некоторое время на его изучение; мы гарантируем, что вы будете рады, что вы сделали. Пол Айриш, специалист по связям с разработчиками Chrome
Эта статья была переведена на несколько языков: HTML5 Rocks поддерживает немецкую, испанскую, японскую, португальскую, русскую и упрощенную китайскую версии. Вы также можете просматривать переводы на корейский и турецкий языки, размещенные на внешних серверах.
Введение
Содержание
Браузеры, о которых мы поговорим
Сегодня на настольных компьютерах используется пять основных браузеров: Chrome, Internet Explorer, Firefox, Safari и Opera. На мобильных устройствах основными браузерами являются Android Browser, iPhone, Opera Mini и Opera Mobile, UC Browser, браузеры Nokia S40/S60 и Chrome — все они, за исключением браузеров Opera, основаны на WebKit. Я приведу примеры из браузеров с открытым исходным кодом Firefox и Chrome, а также Safari (который является частично открытым исходным кодом). Согласно статистике StatCounter (по состоянию на июнь 2013 г.), на Chrome, Firefox и Safari приходится около 71% использования настольных браузеров в мире. На мобильных устройствах Android Browser, iPhone и Chrome составляют около 54 % использования.
Основные функции браузера
Основная функция браузера — представить выбранный вами веб-ресурс, запросив его с сервера и отобразив в окне браузера. Ресурс обычно представляет собой HTML-документ, но также может быть PDF-файлом, изображением или другим типом контента. Расположение ресурса указывается пользователем с помощью URI (унифицированного идентификатора ресурса).
То, как браузер интерпретирует и отображает HTML-файлы, указано в спецификациях HTML и CSS. Эти спецификации поддерживаются организацией W3C (Консорциум World Wide Web), которая является организацией по стандартизации для Интернета. В течение многих лет браузеры соответствовали только части спецификаций и разрабатывали собственные расширения. Это вызвало серьезные проблемы совместимости для веб-авторов. Сегодня большинство браузеров более или менее соответствуют спецификациям.
- Адресная строка для вставки URI
- Кнопки «Назад» и «Вперед».
- Параметры закладок
- Кнопки «Обновить» и «Стоп» для обновления или остановки загрузки текущих документов.
- Кнопка "Главная", которая открывает главную страницу.
Как ни странно, пользовательский интерфейс браузера не указан ни в какой официальной спецификации, он просто основан на передовом опыте, сформированном многолетним опытом, и браузерами, имитирующими друг друга. Спецификация HTML5 не определяет элементы пользовательского интерфейса, которые должен иметь браузер, но перечисляет некоторые общие элементы. Среди них адресная строка, строка состояния и панель инструментов. Конечно, есть функции, уникальные для конкретного браузера, такие как менеджер загрузок Firefox.
Структура верхнего уровня браузера
Основные компоненты браузера (1.1):
Важно отметить, что такие браузеры, как Chrome, запускают несколько экземпляров механизма рендеринга: по одному для каждой вкладки. Каждая вкладка выполняется в отдельном процессе.
Механизм рендеринга
Ответственность механизма рендеринга хорошо. Рендеринг, то есть отображение запрошенного содержимого на экране браузера.
По умолчанию механизм рендеринга может отображать документы и изображения HTML и XML. Он может отображать другие типы данных через плагины или расширения; например, отображение PDF-документов с помощью подключаемого модуля для просмотра PDF-файлов. Однако в этой главе мы сосредоточимся на основном варианте использования: отображении HTML и изображений, отформатированных с помощью CSS.
Двигатели рендеринга
Разные браузеры используют разные механизмы визуализации: Internet Explorer использует Trident, Firefox использует Gecko, Safari использует WebKit. Chrome и Opera (начиная с версии 15) используют Blink, ответвление WebKit.
Основной поток
Механизм рендеринга начнет получать содержимое запрошенного документа с сетевого уровня. Обычно это делается фрагментами по 8 КБ.
После этого основной поток движка рендеринга:
Рис. : Основной процесс рендеринга
Механизм рендеринга начнет синтаксический анализ HTML-документа и преобразует элементы в узлы DOM в дереве, которое называется "дерево контента". Движок будет анализировать данные стиля как во внешних файлах CSS, так и в элементах стиля. Информация о стилях вместе с визуальными инструкциями в HTML будет использоваться для создания другого дерева: дерева рендеринга.
Дерево рендеринга содержит прямоугольники с визуальными атрибутами, такими как цвет и размеры. Прямоугольники расположены в правильном порядке для отображения на экране.
После построения дерева рендеринга оно проходит через процесс "макетирования". Это означает предоставление каждому узлу точных координат, где он должен появиться на экране. Следующим этапом является отрисовка: дерево рендеринга будет пройдено, и каждый узел будет отрисован с использованием внутреннего слоя пользовательского интерфейса.
Важно понимать, что это постепенный процесс. Для лучшего взаимодействия с пользователем механизм рендеринга попытается отобразить содержимое на экране как можно скорее. Он не будет ждать, пока весь HTML будет проанализирован, прежде чем начать построение и компоновку дерева рендеринга. Части содержимого будут проанализированы и отображены, в то время как процесс продолжится с остальным содержимым, которое продолжает поступать из сети.
Примеры основного потока
Рисунок : Основной поток WebKit Рисунок : Основной поток механизма рендеринга Mozilla Gecko (3.6)
Из рисунков 3 и 4 видно, что, хотя WebKit и Gecko используют немного разную терминологию, процесс в основном одинаков.
Gecko называет дерево визуально отформатированных элементов "Деревом фреймов". Каждый элемент представляет собой рамку. WebKit использует термин «Дерево рендеринга» и состоит из «Объектов рендеринга». WebKit использует термин «макет» для размещения элементов, а Gecko называет его «перекомпоновкой». «Вложение» — это термин WebKit для соединения узлов DOM и визуальной информации для создания дерева рендеринга. Небольшое несемантическое отличие заключается в том, что у Gecko есть дополнительный слой между HTML и деревом DOM.Он называется «приемником контента» и представляет собой фабрику по созданию элементов DOM. Мы поговорим о каждой части потока:
Синтаксический анализ — общее
Поскольку синтаксический анализ — очень важный процесс в механизме рендеринга, мы углубимся в него. Начнем с небольшого введения в синтаксический анализ.
Синтаксический анализ документа означает преобразование его в структуру, которую может использовать код. Результатом синтаксического анализа обычно является дерево узлов, представляющее структуру документа. Это называется деревом разбора или синтаксическим деревом.
Например, синтаксический анализ выражения 2 + 3 - 1 может вернуть следующее дерево:
Рисунок : узел дерева математических выражений
Грамматика
Синтаксический анализ основан на правилах синтаксиса, которым подчиняется документ: язык или формат, в котором он был написан. Каждый формат, который вы можете анализировать, должен иметь детерминированную грамматику, состоящую из словаря и правил синтаксиса. Это называется контекстно-свободной грамматикой. Человеческие языки не являются такими языками и поэтому не могут быть проанализированы с помощью обычных методов синтаксического анализа.
Комбинация парсер-лексер
Синтаксический анализ можно разделить на два подпроцесса: лексический анализ и синтаксический анализ.
Лексический анализ — это процесс разбиения входных данных на токены. Токены — это словарный запас языка: набор действительных строительных блоков. В человеческом языке это будут все слова, встречающиеся в словаре этого языка.
Синтаксический анализ — это применение правил синтаксиса языка.
Синтаксические анализаторы обычно делят работу между двумя компонентами: лексером (иногда называемым токенизатором), который отвечает за разбиение входных данных на допустимые токены, и синтаксическим анализатором, который отвечает за построение дерева синтаксического анализа путем анализа структуры документа в соответствии с языком. правила синтаксиса. Лексер знает, как удалить ненужные символы, такие как пробелы и разрывы строк.
Рисунок : от исходного документа к деревьям синтаксического анализа
Процесс синтаксического анализа повторяется. Парсер обычно запрашивает у лексера новый токен и пытается сопоставить токен с одним из правил синтаксиса. Если правило соответствует, узел, соответствующий токену, будет добавлен в дерево синтаксического анализа, и синтаксический анализатор запросит другой токен.
Если ни одно правило не соответствует, синтаксический анализатор сохранит токен внутри и будет запрашивать токены до тех пор, пока не будет найдено правило, соответствующее всем хранящимся внутри маркерам. Если правило не найдено, парсер выдаст исключение. Это означает, что документ недействителен и содержит синтаксические ошибки.
Перевод
Во многих случаях дерево синтаксического анализа не является конечным продуктом. Синтаксический анализ часто используется при переводе: преобразование входного документа в другой формат. Пример - компиляция. Компилятор, который компилирует исходный код в машинный код, сначала преобразует его в дерево синтаксического анализа, а затем переводит это дерево в документ с машинным кодом.
Рисунок : поток компиляции
Пример синтаксического анализа
На рисунке 5 мы построили дерево синтаксического анализа из математического выражения. Давайте попробуем определить простой математический язык и посмотрим на процесс синтаксического анализа.
Словарный запас: наш язык может включать целые числа, знаки плюс и минус.
- Основными элементами синтаксиса языка являются выражения, термины и операции.
- Наш язык может включать любое количество выражений.
- Выражение определяется как «термин», за которым следует «операция», за которой следует еще один термин.
- Операция – это плюс или минус.
- Термин — это целочисленный токен или выражение.
Формальные определения словарного запаса и синтаксиса
Словарь обычно выражается регулярными выражениями.
Например, наш язык будет определен как: Как видите, целые числа определяются регулярным выражением.
Синтаксис обычно определяется в формате BNF. Наш язык будет определен как:
Мы сказали, что язык может быть проанализирован обычными синтаксическими анализаторами, если его грамматика является контекстно-свободной грамматикой. Интуитивное определение контекстно-свободной грамматики — это грамматика, которая может быть полностью выражена в БНФ. Формальное определение см. в статье Википедии о контекстно-свободной грамматике
Типы парсеров
Существует два типа парсеров: парсеры "сверху вниз" и парсеры "снизу вверх". Интуитивное объяснение состоит в том, что синтаксические анализаторы сверху вниз изучают высокоуровневую структуру синтаксиса и пытаются найти соответствие правилу. Синтаксические анализаторы снизу вверх начинают с входных данных и постепенно преобразуют их в синтаксические правила, начиная с правил нижнего уровня до тех пор, пока не будут соблюдены правила высокого уровня.
Давайте посмотрим, как два типа синтаксических анализаторов будут анализировать наш пример.
Парсер сверху вниз начнет с правила более высокого уровня: он идентифицирует 2 + 3 как выражение. Затем он идентифицирует 2 + 3 - 1 как выражение (процесс определения выражения развивается в соответствии с другими правилами, но отправной точкой является правило самого высокого уровня).
Синтаксический анализатор снизу вверх будет сканировать ввод до тех пор, пока не будет найдено соответствие правилу. Затем он заменит соответствующий ввод правилом. Это будет продолжаться до конца ввода. Частично совпавшее выражение помещается в стек парсера.
| Стек | Ввод |
|---|---|
| 2 + 3 - 1 | |
| термин | + 3 - 1 |
| термин операция | 3 - 1 |
| выражение | - 1 |
| операция выражения | 1 |
| выражение | - |
Автоматическое создание парсеров
Существуют инструменты, которые могут создавать синтаксический анализатор. Вы скармливаете им грамматику вашего языка — его словарный запас и правила синтаксиса — и они генерируют работающий синтаксический анализатор. Создание синтаксического анализатора требует глубокого понимания синтаксического анализа, а создать оптимизированный синтаксический анализатор вручную непросто, поэтому генераторы синтаксических анализаторов могут быть очень полезными.
WebKit использует два известных генератора синтаксических анализаторов: Flex для создания лексера и Bison для создания синтаксического анализатора (вы можете встретить их с именами Lex и Yacc). Входные данные Flex — это файл, содержащий определения регулярных выражений токенов. Ввод Bison — это правила синтаксиса языка в формате BNF.
Синтаксический анализатор HTML
Задачей синтаксического анализатора HTML является преобразование HTML-разметки в дерево синтаксического анализа.
Определение грамматики HTML
Словарь и синтаксис HTML определены в спецификациях, созданных организацией W3C.
Не контекстно-свободная грамматика
Как мы видели во введении к синтаксическому анализу, синтаксис грамматики можно формально определить с помощью таких форматов, как BNF.
К сожалению, все темы, посвященные обычным парсерам, неприменимы к HTML (я привел их не просто для развлечения — они будут использоваться при разборе CSS и JavaScript). HTML не может быть легко определен контекстно-свободной грамматикой, которая нужна синтаксическим анализаторам.
Существует формальный формат для определения HTML — DTD (определение типа документа), но это не контекстно-свободная грамматика.
На первый взгляд это кажется странным; HTML довольно близок к XML. Существует множество доступных парсеров XML. Существует XML-вариация HTML — XHTML — так в чем же большая разница?
Разница в том, что HTML-подход более "щадящий": он позволяет опустить определенные теги (которые затем добавляются неявно), а иногда и начальные или конечные теги и т. д. В целом это «мягкий» синтаксис, в отличие от жесткого и требовательного синтаксиса XML.
Эта, казалось бы, небольшая деталь имеет огромное значение. С одной стороны, это основная причина популярности HTML: он прощает ваши ошибки и облегчает жизнь веб-автору. С другой стороны, это затрудняет написание формальной грамматики. Подводя итог, можно сказать, что HTML не может быть легко проанализирован обычными синтаксическими анализаторами, поскольку его грамматика не является контекстно-свободной. HTML не может быть проанализирован синтаксическими анализаторами XML.
HTML DTD
Определение HTML находится в формате DTD. Этот формат используется для определения языков семейства SGML. Формат содержит определения для всех разрешенных элементов, их атрибутов и иерархии. Как мы видели ранее, HTML DTD не формирует контекстно-свободную грамматику.
Выходное дерево ("дерево синтаксического анализа") представляет собой дерево элементов DOM и узлов атрибутов. DOM — это сокращение от объектной модели документа. Это объектное представление HTML-документа и интерфейс HTML-элементов с внешним миром, такой как JavaScript.
Корнем дерева является объект "Документ".
DOM почти полностью связан с разметкой. Например: эта разметка будет преобразована в следующее дерево DOM:
Рисунок : DOM-дерево примера разметки
Когда я говорю, что дерево содержит узлы DOM, я имею в виду, что дерево состоит из элементов, реализующих один из интерфейсов DOM. Браузеры используют конкретные реализации, которые имеют другие атрибуты, используемые браузером внутри.
Алгоритм синтаксического анализа
Как мы видели в предыдущих разделах, HTML нельзя анализировать с помощью обычных парсеров "сверху вниз" или "снизу вверх".
- Снисходительный характер языка.
- Тот факт, что браузеры имеют традиционную устойчивость к ошибкам для поддержки хорошо известных случаев недопустимого HTML.
- Процесс синтаксического анализа является повторным. Для других языков источник не изменяется во время синтаксического анализа, но в HTML динамический код (например, элементы скрипта, содержащие document.write()) могут добавлять дополнительные токены, поэтому процесс синтаксического анализа фактически изменяет ввод.
Не имея возможности использовать обычные методы синтаксического анализа, браузеры создают собственные синтаксические анализаторы для анализа HTML.
Алгоритм синтаксического анализа подробно описан в спецификации HTML5. Алгоритм состоит из двух этапов: токенизация и построение дерева.
Токенизация – это лексический анализ, который преобразует входные данные в токены. Среди маркеров HTML есть начальные теги, конечные теги, имена атрибутов и значения атрибутов.
Токенизатор распознает токен, передает его конструктору дерева и использует следующий символ для распознавания следующего токена и так далее до конца ввода.
Рис. : Процесс синтаксического анализа HTML (взято из спецификации HTML5)
Алгоритм токенизации
Выводом алгоритма является токен HTML. Алгоритм выражается в виде конечного автомата. Каждое состояние использует один или несколько символов входного потока и обновляет следующее состояние в соответствии с этими символами. На решение влияет текущее состояние токенизации и состояние построения дерева. Это означает, что один и тот же использованный символ будет давать разные результаты для правильного следующего состояния в зависимости от текущего состояния. Алгоритм слишком сложен для полного описания, поэтому давайте рассмотрим простой пример, который поможет нам понять принцип.
Базовый пример — токенизация следующего HTML:
Исходным состоянием является "Состояние данных". Когда персонаж встречается, состояние меняется на «Состояние тега открыто». Использование символа az вызывает создание «токена начального тега», состояние изменяется на «состояние имени тега». Мы остаемся в этом состоянии до тех пор, пока символ > не будет израсходован. Каждый символ добавляется к новому имени токена. В нашем случае созданный токен является токеном html.
При достижении тега > выдается текущий токен, и состояние снова меняется на «Состояние данных». Тег будет обрабатываться теми же шагами. До сих пор были испущены теги html и body. Теперь мы вернулись к «состоянию данных». Использование символа H Hello world приведет к созданию и выдаче маркера персонажа, это продолжается до тех пор, пока не будет выполнено
Вы помните, как запускали веб-браузер, чтобы прочитать эту статью? Если нет, не беспокойтесь. История веб-браузеров началась более тридцати лет назад, и мы уже не замечаем, насколько беспроблемным является просмотр в Интернете.
Но задумывались ли вы когда-нибудь, с чего все началось?
В сегодняшней статье мы углубимся в историю посещенных страниц (именно так), чтобы проследить ключевые вехи эволюции современных веб-браузеров:
- 🥚 Каким был первый веб-браузер?
- 🐓 Кто это придумал?
- ⚔️ Кто выиграл «Войны браузеров»?
- 📈 Почему Chrome так популярен сегодня?
- 🗂 Кто первым применил просмотр с вкладками?
- 🔎 И многое другое…
💡 Прежде чем начать… Первый веб-браузер изменил историю производительности в Интернете. Обязательно следите за другими изобретениями, проложившими этот путь.
👩🔬 1990-е годы в ЦЕРНе: браузер WorldWideWeb
Как и многие интересные изобретения, в том числе сенсорный экран вашего смартфона, веб-браузеры появились в коридорах Европейской организации ядерных исследований (ЦЕРН). И это не пустяк, учитывая другие интересы ЦЕРНа, включая «божественную частицу» и антиматерию.
Наша история начинается с еще не посвященного в рыцари Тима Бернерса-Ли, британского инженера-программиста, который заключил контракт с ЦЕРН в 1980-х годах. Во время своего пребывания Бернерс-Ли увлекся концепцией системы, которая могла бы упростить и улучшить сотрудничество между сотрудниками CERN.
«На самом деле я написал несколько программ, чтобы брать информацию из одной системы и преобразовывать ее, чтобы ее можно было вставить в другую систему. Больше чем единожды. А когда вы программист и решаете одну задачу, а затем решаете другую, очень похожую, вы часто думаете: «Разве нет лучшего способа? Разве мы не можем решить эту проблему навсегда?»
Тим Бернерс-Ли через W3 (2)
Хотя первоначальный проект, получивший название ENQUIRE, не получил распространения, Бернерс-Ли пересмотрел эту идею в 1989 году в двух официальных предложениях, которые он подготовил вместе с сотрудником CERN Робертом Кайо. Оттуда пара перешла к разработке первичной инфраструктуры для Всемирной паутины — сервера на компьютере NeXT, веб-страницы и браузера WorldWideWeb. (3)
Установив эти три компонента, Бернерс-Ли в ноябре 1992 года представил публике свое изобретение вместе с программным пакетом libWWW. Это было началом (в основном) замечательной истории веб-браузеров. (4)
Привлекательность современных инструментов повышения производительности во многом заключается в их кроссплатформенности. Независимо от того, хотите ли вы редактировать документы, вычеркивать элементы из списков дел, отправлять электронные письма или просматривать веб-страницы, вы можете рассчитывать на сопоставимые возможности на всех ведущих платформах.
Хотя WorldWideWeb Бернерса-Ли не мог работать ни на чем другом, кроме системы NeXT, его более молодое и более гибкое потомство смогло. В 1991 году стажер CERN Никола Пеллоу создал браузер линейного режима, в котором некоторые функции WWW были заменены на лучшую аппаратную совместимость. (5)
Согласно официальному руководству пользователя, браузер линейного режима может работать «почти на чем угодно. Все системы unix, VMS с любой разновидностью TCP/IP, VM/CMS, ПК (любая разумная библиотека сокетов), MVS (даже Mac).
Вот еще один проект реставрации ЦЕРН, демонстрирующий его возможности. 👇
🧩 NCSA и браузер Mosaic (1993 г.)
После того как Бернерс-Ли выпустил libWWW, по всему миру начали появляться новые веб-браузеры. Одно из ключевых дополнений к этому роду было сделано двумя программистами из Национального центра суперкомпьютерных приложений (NCSA).
23 января 1993 года Марк Андриссен и Эрик Бина выпустили веб-браузер X Mosaic. Официальное сообщение о выпуске, позже распространенное самим Бернерсом-Ли, гласило:
«Властью, предоставленной мне никем конкретно, настоящим выпущена альфа/бета-версия 0.5 сетевой информационной системы NCSA на основе Motif и браузера World Wide Web, X Mosaic. ”(6)
Согласно примечаниям к выпуску, новый браузер включает в себя такие функции, как многооконная поддержка, печать документов, настраиваемые шрифты, поиск по ключевым словам и «горячий список», который по сути представляет собой боковую панель для навигации по документам с закладками.
Что касается чистой производительности, Mosaic также предлагает некоторые новые возможности совместной работы в режиме реального времени. Благодаря интеграции с сетью NCSA пользователи могут вводить и извлекать документы из системы.
Поговорим о перспективном дизайне!
Веб-браузеры сделали еще один шаг в сторону повышения производительности в 1996 году, когда Джон Стефенсон фон Течнер и Гейр Иварсой создали Opera. То, что началось как внутренний исследовательский проект для Norwegian Telenor, в конечном итоге превратилось в независимое предприятие. (8)
Одной из самых интересных особенностей норвежского браузера была поддержка просмотра многодокументного интерфейса (MDI) — ранняя версия современных вкладок браузера. В прошлогодний День дурака компания пошутила, что вернет MDI в качестве части фиктивного браузера Vintage Opera.
Netscape был первым браузером, который мог отображать частично загруженные веб-страницы. В мае 1995 года в ходе партнерства с Бренданом Эйхом Netscape также получила поддержку JavaScript, которая должна была сделать работу в Интернете более динамичной. (12)
После того, как компания Netscape произвела фурор и приобрела большое количество поклонников, в конце концов она уступила свое господство Internet Explorer от Microsoft (подробнее об этом чуть позже). AOL приобрела компанию вместе с ее интеллектуальной собственностью в 1998 году и окончательно уничтожила браузер в 2008 году. (13)
🚀 Взлет Internet Explorer (1995)
В августе 1995 года Microsoft, опоздавшая на рынок браузеров, выпустила Internet Explorer 1.0. IE начинался как отдельный продукт, но в конечном итоге стал поставляться в комплекте с последней (и вряд ли самой лучшей) Windows 95. Этот шаг ознаменовал начало конца для Netscape Navigator.
С точки зрения производительности изобретение просмотра с вкладками стало одним из поворотных моментов в истории веб-браузеров. Это не только ускорило процесс поиска и сбора информации в Интернете, но и позволило сравнивать данные на разных сайтах.
Просмотр с вкладками настолько крут, что мы даже включили его в настольные приложения Taskade! Вы можете открывать отдельные проекты в виде новых вкладок, перетаскивать их и быстро переключаться между соответствующими пространствами.
🦖 Проект Mozilla обретает форму (1998 г.)
Когда IE окончательно сверг Navigator с престола, Netscape решила опубликовать исходный код браузера. Интеллектуальная собственность Netscape затем была включена в проект Mozilla Project, глобальный стимул сообщества, который позже в 2003 году стал некоммерческим фондом Mozilla.
В 2002 году сообщество Mozilla Project выпустило два (!) новых веб-браузера: Mozilla и Phoenix 0.1. В то время как первый был основан на наследии Netscape и существенной финансовой поддержке со стороны таких компаний, как AOL, последний использовал подход «начать с нуля». (16)
Не волнуйтесь, в официальном FAQ по выпуску Phoenix 0.1 все проясняется (в некоторой степени). 👇
В: «Что за кучка идиотов. Почему его не назвали, скажем, Mozilla Lite? Разве они не знают о важности узнаваемости бренда?»
О: «В-третьих, «Mozilla» — это не название приложения; это название монолитного комплекта, содержащего браузер, почтовый клиент, irc-клиент и крытый каток (мы все равно слышим, что это грядет[…].Мы также считаем, что Mozilla в целом движется в неправильном направлении с точки зрения раздувания и пользовательского интерфейса, и не видим причин для того, чтобы наши выпуски содержали такие коннотации».
Примечания к выпуску Phoenix 0.1 и часто задаваемые вопросы от Mozilla (18)< /цитата>В 2005 году Mozilla Foundation учредила свою дочернюю компанию Mozilla Corp, чтобы «[…] создавать и распространять великолепные открытые и бесплатные продукты для конечных пользователей, такие как популярный веб-браузер Mozilla Firefox и Mozilla Thunderbird. почтовый клиент, который способствует выбору и инновациям в Интернете». (19)
К августу 2008 г. недавно переименованный Firefox стал вторым по популярности браузером с долей рынка 32,4%. Хотя IE от Microsoft возглавил (короткий) список ключевых браузеров с 60 % рынка, это был лишь вопрос времени, когда Firefox или другой конкурент сбросят его с шаткого трона.
Firefox + Taskade 🐑
Знаете ли вы, что у Taskade есть собственное расширение для Firefox? Создавайте контрольные списки, фиксируйте идеи и сотрудничайте со своей командой прямо в браузере. Перейдите сюда, чтобы скачать.
🍎 Apple отправляется в сафари (2003)
23 июня 2004 г. Apple отметила еще одну важную веху в истории веб-браузеров, выпустив Safari 1.0, совершенно новый веб-браузер, который компания назвала «Самым быстрым браузером для Mac — лучшим браузером на любой платформе».< /p>
Продолжение официальной страницы выпуска Apple после WWDC 2003:
«Самый быстрый веб-браузер, когда-либо созданный для Mac, Safari возрождает категорию браузеров благодаря таким инновациям, как встроенный поиск Google; SnapBack для мгновенного возврата к результатам поиска; совершенно новый способ называть, организовывать и представлять закладки; просмотр с вкладками; и автоматическая блокировка всплывающей рекламы». (21)
Интересно, что до того, как Apple разработала собственный браузер, компания должна была поставлять свои устройства с Internet Explorer в качестве браузера по умолчанию. Это условие было частью примирительной сделки на сумму 150 млн долларов, которую две компании заключили в 1997 году. (22)
После нескольких лет игры в пятнашки со своими конкурентами Safari нашел удобную нишу среди пользователей macOS и iOS. По состоянию на август 2020 года на этот браузер приходится 17,2 % мирового рынка веб-браузеров.
🤘 Google Chrome лидирует
Был ли IE от Microsoft опоздавшим на рынке браузеров? Конечно, но все это меркнет по сравнению с тем, как Google врезался во Вторую войну браузеров в 2008 году. После двух лет разработки 2 сентября 2008 года Google представила собственный браузер Chrome.
Хром, получивший название «Новый взгляд на веб-браузер», был оснащен такими инновационными функциями, как вкладки в песочнице в качестве отдельных процессов, диспетчер задач, унифицированный поиск, панель адресов и истории, веб-приложения или динамическое размещение вкладок.
р>На первый взгляд, мы разработали обтекаемое и простое окно браузера. Для большинства людей важен не браузер. Это всего лишь инструмент для запуска важных вещей — страниц, сайтов и приложений, из которых состоит сеть. […] Он уйдет с вашего пути и приведет вас туда, куда вы хотите.
Примечания к бета-версии Google Chrome. (25)
Новая функциональность Chrome и исключительный пользовательский интерфейс оказались удачным сочетанием. К августу 2012 года браузер Google стал вожаком во Второй войне браузеров. Восемь лет спустя Chrome по-прежнему лидирует и занимает более 61 % доли мирового рынка браузеров.
Поздний, но чрезвычайно успешный вход Google в историю веб-браузеров доказывает, что всегда есть возможности для совершенствования. Конечно, Firefox, Safari, IE уже потрясали рынок браузеров в 2008 году, но все эти браузеры были, ну… просто браузерами.
Компания Google разработала Chrome как нечто большее, чем просто средство просмотра контента в Интернете. Это сделало его платформой, которая позже превратилась в целую экосистему, основанную на обширном рынке приложений и расширений. И все это при поддержке сообщества разработчиков открытого исходного кода.
Что еще мы можем желать?
Chrome + Taskade 🐑
Используете Chrome в качестве ежедневного драйвера? Расширение Taskade для Chrome поможет вам. Превратите каждую новую вкладку в суперинструмент повышения производительности. Вы можете получить наше бесплатное расширение здесь.
🏅 Почетное упоминание
Майкрософт Эдж
Первые новости о Microsoft, преемнике Internet Explorer, начали появляться в СМИ в конце 2014 года. Проект Edge, получивший прозвище "Спартанец", должен был стать новым продуктом компании на рынке браузеров. Быстрый, простой, мощный, у него было все, чтобы сиять.
Новый браузер был официально представлен 29 апреля 2015 года на ежегодной конференции Microsoft Build. Edge рекламировался как «браузер, созданный для работы, со встроенными функциями создания заметок и обмена ими; панель для чтения, чтобы ничего не отвлекало; и интеграция с Cortana». (26)
В 2019 году браузер унаследовал наследие Chromium с открытым исходным кодом и претерпел серьезные изменения, фактически став еще одним веб-продуктом, созданным с использованием технологий Google.К концу сентября 2020 года Edge и IE занимали чуть более 6,3% доли рынка. (20)
Эдж + Таскейд 🐑
Если вы хотите попробовать браузер Microsoft, не забудьте скачать наше расширение Edge здесь!
🐑 Заключение
Кажется, история веб-браузеров достигла своеобразной точки. С Chrome у руля и отсутствием серьезной конкуренции за государственный переворот мы вряд ли увидим грандиозную следующую войну браузеров в ближайшее время.
Но, может быть, это не так уж и плохо?
Спустя 30 лет инноваций веб-браузеры стали важным элементом любого рабочего процесса. Неважно, хотите ли вы получить ценный контент, стать более продуктивным или общаться с миром. Адресная строка вашего браузера содержит все это и многое другое.
Майкл Хайне — сертифицированный CompTIA писатель, редактор и сетевой инженер с более чем 25-летним опытом работы в сфере телевидения, обороны, интернет-провайдеров, телекоммуникаций и образования.
Что нужно знать
- В Chrome, Firefox или Safari: щелкните элемент правой кнопкой мыши и выберите "Проверить".
- В Internet Explorer или Edge включите проверки, щелкните элемент правой кнопкой мыши и выберите "Проверить элемент".
В этой статье объясняется, как проверять элементы в Chrome, Firefox, Safari, Internet Explorer и Microsoft Edge, в том числе как включить проверки в IE и Edge.
Как проверять веб-элементы с помощью браузера
Веб-сайты состоят из строк кода, но в результате появляются страницы с изображениями, видео, шрифтами и другими функциями. Чтобы изменить один из этих элементов или посмотреть, из чего он состоит, найдите строку кода, которая им управляет. Для этого используйте инструмент проверки элементов. Вам не нужно загружать инструмент проверки или устанавливать надстройку для вашего любимого веб-браузера. Вместо этого щелкните элемент страницы правой кнопкой мыши и выберите «Проверить» или «Проверить элемент». Однако доступ к этому инструменту зависит от браузера.
В этой статье щелчок правой кнопкой мыши используется для обозначения действия устройства мыши на ПК с Windows и действия Control+щелчок на Mac.
Проверка элементов в Google Chrome
В Google Chrome существует два способа проверки веб-страницы с помощью встроенных в браузер Chrome DevTools:
- Нажмите правой кнопкой мыши элемент на странице или в пустой области, затем выберите "Проверить".
- Откройте меню Chrome и выберите "Дополнительные инструменты" > "Инструменты разработчика".
Используйте Chrome DevTools, чтобы скопировать или изменить разметку языка гипертекстовой разметки (HTML), а также скрыть или удалить элементы до перезагрузки страницы.
Когда Chrome DevTools откроется сбоку страницы, измените его положение, выдвиньте его за пределы страницы, найдите файлы страницы, выберите элементы на странице для более детального просмотра, скопируйте файлы и URL-адреса и настройте параметры.
Проверка элементов в Mozilla Firefox
У Mozilla Firefox есть два способа открыть инструмент проверки, который называется Inspector:
- Нажмите правой кнопкой мыши элемент на веб-странице и выберите "Проверить элемент".
- В строке меню Firefox выберите Инструменты >Веб-разработчик >Инспектор.
Когда вы перемещаете указатель по элементам в Firefox, Inspector автоматически находит информацию об исходном коде элемента. Когда вы выбираете элемент, оперативный поиск прекращается, и вы можете изучить элемент из окна Инспектора.
Щелкните элемент правой кнопкой мыши, чтобы найти поддерживаемые элементы управления. Используйте элементы управления для редактирования страницы в виде разметки HTML, копирования или вставки внутренней или внешней разметки HTML, отображения свойств объектной модели документа (DOM), создания снимка экрана или удаления узла, применения новых атрибутов, см. Каскадные таблицы стилей (CSS) и многое другое.
Проверка элементов в Safari
Есть несколько способов проверки веб-элементов в Safari:
- Нажмите правой кнопкой мыши любой элемент или место на веб-странице, затем выберите "Проверить элемент".
- Перейдите в меню "Разработка" и выберите "Показать веб-инспектор".
Если вы не видите меню «Разработка», перейдите в меню Safari и выберите «Настройки». На вкладке "Дополнительно" установите флажок "Показать меню "Разработка" в строке меню".
Выберите отдельные элементы на веб-странице, чтобы увидеть разметку, относящуюся к этому разделу.
Проверка элементов в Internet Explorer
Аналогичный инструмент проверки элементов, доступ к которому можно получить, включив Инструменты разработчика, доступен в Internet Explorer. Чтобы включить инструменты разработчика, нажмите F12. Или перейдите в меню "Инструменты" и выберите "Инструменты разработчика".
Чтобы отобразить меню "Инструменты", нажмите Alt+X.
Чтобы проверить элементы на веб-странице, щелкните страницу правой кнопкой мыши и выберите "Проверить элемент". В инструменте выбора элемента Internet Explorer выберите любой элемент страницы, чтобы просмотреть разметку HTML или CSS. Вы также можете отключить или включить подсветку элементов при просмотре DOM Explorer.
Как и другие инструменты инспектора элементов, используйте Internet Explorer для вырезания, копирования и вставки элементов и редактирования HTML-разметки, добавления атрибутов, копирования элементов с присоединенными стилями и т. д.
Проверка элементов в Microsoft Edge
Прежде чем вы сможете проверять элементы в Microsoft Edge, вы должны включить проверку. Есть два способа включить проверку:
- В адресной строке введите about:flags. В диалоговом окне установите флажок «Показать исходный код и проверить элемент в контекстном меню».
- Нажмите F12, затем выберите "Проводник DOM".
Чтобы проверить элемент, щелкните его правой кнопкой мыши на веб-странице и выберите "Проверить элемент".
Читайте также: