При нахождении на сайте Вы соглашаетесь с политикой обработки персональных данных.
Всё понятно!
Браузер (Browser)
Браузер (Browser) — это программное обеспечение для доступа к интернету и просмотра веб-страниц: оно запрашивает файлы страницы у веб-сервера и показывает их пользователю.
Кратко
- Программа получает по протоколу HTTP файлы сайта (текст, стили, изображения) и превращает их в страницу, поэтому её называют HTTP-клиентом или user agent.
- Страницу «рисует» движок. Chrome, Edge, Opera и Яндекс Браузер работают на Blink, Firefox на Gecko, Safari на WebKit.
- Это не поисковая система: Google или Яндекс открывают в нём, а сайты в поиск добавляет поисковый робот.
- Кроссбраузерность — проверка, что сайт работает в приемлемом числе браузеров: не во всех, но у вашей аудитории в первую очередь.
Кому и зачем это знать
С запросом «браузер» приходят люди с разными задачами. Найдите свою ситуацию.
Владелец сайтаСитуация: Клиент пишет: «на моём телефоне у вас всё съехало», а у вас на компьютере всё хорошо.Зачем: Сайт может выглядеть по-разному на разных устройствах и в разных программах: у них бывают ошибки, разная поддержка технологий и разные экраны.Что сделать: Попросите клиента назвать программу и устройство и откройте сайт в таком же сочетании. Проверяйте не только Chrome: возьмите Safari или Firefox, у них другие движки. Передайте разработчику скриншот и адрес страницы.
Маркетолог, SEO-специалистСитуация: Нужно проверить страницу, посмотреть выдачу или понять, как сайт видит посетитель.Зачем: Человек видит страницу в браузере, а робот поисковой системы обрабатывает её отдельно. Googlebot бывает двух видов: для смартфонов и для компьютеров, и Google в основном индексирует мобильную версию сайтов.Что сделать: Проверяйте мобильную версию так же внимательно, как десктопную. Не путайте то, что видите вы, с тем, что видит робот: ответы на это дают отчёты поисковых систем. Для проверки кода и сетевых запросов используйте встроенные инструменты разработчика.
РазработчикСитуация: Вёрстка или скрипт ведёт себя по-разному в разных браузерах.Зачем: Причины обычно три: ошибки и различия в реализации, разная поддержка новых технологий, ограничения устройств.Что сделать: Сузьте проблему: платформа, устройство, версия браузера. Проверьте, не исправлена ли ошибка в новой версии. Если ошибка в коде, обходите её через определение поддержки функции (feature detection), а не по названию браузера, и повторите тест.
Новичок, пользовательСитуация: Не понимаете, чем отличается браузер от поисковика, и где «выходить в интернет».Зачем: Это разные вещи: браузер — программа на вашем устройстве, поисковая система — сервис, который ищет страницы.Что сделать: Запомните: Chrome, Firefox, Safari, Edge, Opera, Яндекс Браузер — браузеры. Google и Яндекс как поисковые системы открываются в любом из них.
Как работает браузер
Браузер запрашивает у сервера файлы страницы по протоколу HTTP и показывает их пользователю, поэтому его называют HTTP-клиентом или user agent, то есть программой, которая действует от имени пользователя.
- Движок отображения. Он превращает загруженные текст, стили и изображения в интерактивную страницу. Его называют движком вёрстки или рендеринга.
- Движок JavaScript. Он работает отдельно от движка отображения и выполняет скрипты страницы.
- Инструменты разработчика. По Википедии, в самых популярных настольных браузерах есть развитые средства для веб-разработки: через них смотрят код страницы и сетевые запросы.
Какие бывают браузеры и на каких движках они работают
По данным Википедии, большинство популярных браузеров делят на три семейства по движку.
| Движок | Браузеры | Что важно знать |
|---|---|---|
| Blink | Google Chrome, Microsoft Edge, Opera, Яндекс Браузер, Brave, Vivaldi | основа кода Chrome — проект Chromium с открытым кодом, на нём построены многие другие |
| Gecko | Firefox, Tor Browser | код Firefox разрабатывает Mozilla |
| WebKit | Safari | Safari использует код WebKit от Apple |
Проверка на одном движке не заменяет проверки на другом: Chrome и Edge показывают страницу одним движком, Firefox и Safari — своими.
Кроссбраузерность: что это и зачем
Кроссбраузерность — это практика, при которой сайт работает у пользователей в приемлемом числе браузеров, независимо от устройства и вспомогательных средств; по MDN, «приемлемое число» не означает все существующие браузеры, а сайт может выглядеть по-разному, если сохраняет полную функциональность.
| Причина проблемы | Что происходит | Что делать |
|---|---|---|
| Ошибки и разная реализация | иногда содержат ошибки или реализуют возможности по-разному | сузить проблему: платформа, устройство, версия; проверить в новой версии |
| Неодинаковая поддержка технологий | новые возможности JavaScript могут не работать в старых версиях | использовать полифиллы или запасной вариант, определять поддержку функции |
| Ограничения устройств | сайт под компьютер мелкий на смартфоне, много анимаций тормозит на слабых устройствах | проверить на реальных устройствах, при их отсутствии на эмуляторах |
Целевой набор удобно определить по аудитории: сравните доли браузеров и устройств в своей аналитике, а не общие рейтинги.
Браузер, поисковая система и поисковый робот: чем отличаются
Браузер открывает сайты для человека, поисковая система ищет страницы, а поисковый робот обходит сайты, и эти три понятия часто путают.
| Понятие | Что это | Пример |
|---|---|---|
| Браузер | программа на устройстве пользователя, которая показывает сайты | Chrome, Firefox, Safari, Edge, Opera, Яндекс Браузер |
| Поисковая система | сервис, который по запросу ищет и ранжирует страницы | Google, Яндекс |
| Поисковой робот | программа поисковой системы, которая обходит сайты; у Google два вида: Googlebot Smartphone и Googlebot Desktop | Googlebot |
Google в основном индексирует мобильную версию сайта, поэтому большинство запросов Googlebot приходит от робота для смартфонов. Для SEO мобильная версия важна не меньше десктопной.
Как проверить сайт на разных движках и устройствах
Проверка состоит из нескольких простых шагов, которые можно повторять после каждого крупного обновления сайта.
- Откройте основные страницы в нескольких стабильных браузерах на разных движках: например, в Chrome (Blink), Firefox (Gecko) и Safari (WebKit).
- Посмотрите сайт на смартфоне; если реальных устройств нет, используйте эмуляторы и виртуальные машины.
- Проверьте с клавиатуры, без мыши: так находят проблемы доступности.
- Сравните, какие браузеры используют ваши посетители, в своей аналитике и расширьте список проверки до них.
- Исправьте ошибки и повторите проверку.
Что делать, если сайт плохо работает в браузере
| Что видите | Что сделать |
|---|---|
| Вёрстка «едет» только в одной программе | Определите браузер, версию и устройство; проверьте, не исправлена ли ошибка в новой версии; передайте разработчику |
| Не работает кнопка или форма | Проверьте, не выполняется ли скрипт только в части браузеров; откройте инструменты разработчика и посмотрите ошибки |
| Сайт мелкий на смартфоне | Проверьте мобильную версию и адаптивность |
| Изменения на сайте не видны | Очистите кэш и обновите страницу |
Типичные ошибки
- Проверять сайт только в Chrome и считать, что он одинаков везде.
- Не смотреть сайт на смартфоне, хотя Google в основном индексирует мобильную версию.
- Путать его с поисковой системой и поисковым роботом.
- Писать код под название программы вместо проверки поддержки функции.
- Требовать идентичного вида во всех браузерах: достаточно полной функциональности.
Частые вопросы
Что такое браузер простыми словами?
Программа, через которую вы открываете сайты: она запрашивает страницу у сервера и показывает её вам.
Чем браузер отличается от поисковой системы?
Он открывает сайты, а поисковая система (Google, Яндекс) ищет страницы по запросу. Саму поисковую систему открывают в нём.
Что такое движок?
Часть программы, которая превращает загруженные текст, стили и изображения в интерактивную страницу. Отдельно работает движок JavaScript.
На каких движках работают популярные браузеры?
По данным Википедии, Chrome, Edge, Opera и Яндекс Браузер работают на Blink, Firefox на Gecko, Safari на WebKit.
Что такое кроссбраузерность?
Практика, при которой сайт работает у пользователей в приемлемом числе браузеров, независимо от устройства и вспомогательных средств. Это не значит, что нужны все существующие браузеры.
Почему сайт выглядит по-разному в разных браузерах?
Они иногда содержат ошибки или реализуют возможности по-разному, поддерживают новые технологии в разной степени, а устройства различаются по экрану и мощности.
Как проверить сайт в разных браузерах?
Откройте его на разных движках (Blink, Gecko, WebKit) и на смартфоне; если реальных устройств нет, используйте эмуляторы и виртуальные машины.
Связанные термины
- Поисковая машина: сервис, который ищет страницы по запросу, а не программа для их просмотра
- Поисковой робот: программа поисковой системы, обходящая сайты, а не инструмент человека
- Веб-сайт: то, что браузер открывает и показывает
- CSS: Cascading Style Sheets: язык оформления, который по-разному поддерживают браузеры
- Script: код, который выполняется в браузере движком JavaScript
Сайт плохо выглядит на смартфонах? Разрабатываем мобильную версию сайта.
Разработка мобильной версии сайта