Как работает браузер вопрос на собеседовании
Простыми словами объясняем, как браузер подключается и общается с сервером.
Поэтому первым делом браузеру нужно понять, какой IP-адрес у сервера, на котором находится сайт.
Такая информация хранится в распределенной системе серверов — DNS (Domain Name System). Система работает как общая «контактная книга», хранящаяся на распределенных серверах и устройствах в интернете.
Однако перед тем, как обращаться к DNS, браузер пытается найти запись об IP-адресе сайта в ближайших местах, чтобы сэкономить время:
- Сначала в своей истории подключений . Если пользователь уже посещал сайт, то в браузере могла сохраниться информация c IP-адресом сервера.
- В операционной системе . Не обнаружив информации у себя, браузер обращается к операционной системе, которая также могла сохранить у себя DNS-запись. Например, если подключение с сайтом устанавливалось через одно из установленных на компьютере приложений.
- В кэше роутера , который сохраняет информацию о последних соединениях, совершенных из локальной сети.
Не обнаружив подходящих записей в кэше, браузер формирует запрос к DNS-серверам, расположенным в интернете.
Как только браузер узнал IP-адрес нужного сервера, он пытается установить с ним соединение. В большинстве случаев для этого используется специальный протокол — TCP.
TCP — это набор правил, который описывает способы соединения между устройствами, форматы отправки запросов, действия в случае потери данных и так далее.
Например, для установки соединения между браузером и сервером в стандарте TCP используется система «трёх рукопожатий». Работает она так:
- Устройство пользователя отправляет специальный запрос на установку соединения с сервером — называется SYN -пакет.
- Сервер в ответ отправляет запрос с подтверждением получения SYN-пакета — называется SYN/ACK -пакет.
- В конце устройство пользователя при получении SYN/ACK-пакета отправляет пакет с подтверждением — ACK -пакет. В этот момент соединение считается установленным.
Задача браузера — как можно подробнее объяснить серверу, какая именно информация ему нужна .
Сервер получил запрос от браузера с подробным описанием того, что ему требуется. Теперь ему нужно обработать этот запрос. Этой задачей занимается специальное серверное программное обеспечение — например, nginx или Apache. Чаще всего такие программы принято называть веб-серверами.
Когда ответ сформирован, он отправляется веб-сервером обратно браузеру. В ответе как правило содержится контент для отображения веб-страницы, информация о типе сжатия данных, способах кэширования, файлы cookie, которые нужно записать и так далее.
👉 Чтобы обмен данными был быстрым, браузер и сервер обмениваются сразу множеством небольших пакетов данных — как правило, в пределах 8 КБ. Все пакеты имеют специальные номера, которые помогают отслеживать последовательность отправки и получения данных.
Браузер распаковывает полученный ответ и постепенно начинает отображать полученный контент на экране пользователя — этот процесс называется рендерингом .
Сначала браузер загружает только основную структуру HTML-страницы. Затем последовательно проверяет все теги и отправляет дополнительные GET-запросы для получения с сервера различных элементов — картинки, файлы, скрипты, таблицы стилей и так далее. Поэтому по мере загрузки страницы браузер и сервер продолжают обмениваться между собой информацией.
Параллельно с этим на компьютер как правило сохраняются статичные файлы пользователя — чтобы при следующем посещении не загружать их заново и быстрее отобразить пользователю содержимое страницы.
Как только рендеринг завершен — пользователю отобразится полностью загруженная страница сайта.
Примечание: публикация основана на содержании репозитория What happens when.
Мы перенесли перевод в репозиторий GitHub и отправили Pull Request автору материала — оставляйте свои правки к тексту, и вместе мы сможем значительно улучшить его.
1. Нажата клавиша «g»
Далее в статье содержится информация о работе физической клавиатуры и прерывания операционной системы. Но много чего происходит и помимо этого — когда вы нажимаете клавишу «g», браузер получает событие и запускается механизм автоподстановки. В зависимости от алгоритма браузера и его режима (включена ли функция «инкогнито») в выпадающем окне под строкой URL пользователю будет предложено определённое количество вариантов для автоподстановки.
2. Клавиша «enter» нажата до конца
В качестве некой нулевой точки можно выбрать момент, когда клавиша Enter на клавиатуре нажата до конца и находится в нижнем положении. В этой точке замыкается электрическая цепь этой клавиши и небольшое количество тока отправляется по электросхеме клавиатуры, которая сканирует состояние каждого переключателя клавиши и конвертирует сигнал в целочисленный код клавиши (в данном случае — 13). Затем контроллер клавиатуры конвертирует код клавиши для передачи его компьютеру. Как правило, сейчас передача происходит через USB или Bluetooth, а раньше клавиатура подключалась к компьютеру с помощью коннекторов PS/2 или ADB.
В случае USB-клавиатуры:
- Для работы USB-контуру клавиатуры требуется 5 вольт питания, которые поступают через USB-контроллер на компьютере.
- Сгенерированный код клавиши хранится в регистре внутренней памяти клавиатуры, который называется «конечной точкой» (endpoint).
- USB-контроллер компьютера опрашивает эту конечную точку каждые 10 микросекунд и получает хранящийся там код клавиши.
- Затем это значение поступает в USB SIE (Serial Interface Engine) для конвертации в один или более USB-пакетов, которые формируются по низкоуровневому протоколу USB.
- Эти пакеты затем пересылаются с помощью различных электрических сигналов через D+ и D- контакты с максимальной скоростью 1,5 Мб/сек — поскольку HID-устройства (Human Interface Device) всегда были «низкоскоростными».
- Этот последовательный сигнал далее декодируется в USB-контроллере компьютера и интерпретируется универсальным драйвером HID-устройства (клавиатуры). Затем значение кода клавиши передаётся на «железный» уровень абстракции операционной системы.
2.1 Возникло прерывание [не для USB-клавиатур]
Клавиатура отправляет сигналы в свою «линию запросов прерываний» (IRQ), которая затем сопоставляется с «вектором прерывания» (целое число) контроллером прерываний. Процессор использует «таблицу дескрипторов прерываний» (IDT) для сопоставления векторов прерываний с функциями («обработчики прерываний») ядра. Когда появляется прерывание, процессор (CPU) обновляет IDT вектором прерывания и запускает соответствующий обработчик. Таким образом, в дело вступает ядро.
2.3 (В OS X) Событие NSEVent KeyDown отправлено приложению
Сигнал прерывания активирует событие прерывания в драйвере I/O Kit клавиатуры. Драйвер переводит сигнал в код клавиатуры, который затем передаётся процессу OS X под названием WindowServer . В результате, WindowsServer передаёт событие любому подходящему (активному или «слушающему») приложению через Mach-порт, в котором событие помещается в очередь. Затем события могут быть прочитаны из этой очереди потоками с достаточными привилегиями, чтобы вызывать функцию mach_ipc_dispatch . Чаще всего это происходит и обрабатывается с помощью основного цикла NSApplication через NSEvent в NSEventype KeyDown .
2.4 (В GNU/Linux) Сервер Xorg слушает клавиатурные коды
В случае графического X server, для получения нажатия клавиши будет использован общий драйвер событий evdev . Переназначение клавиатурных кодов скан-кодам осуществляется с помощью специальных правил и карт X Server. Когда маппинг скан-кода нажатой клавиши завершён, X server посылает символ в window manager (DWM, metacity, i3), который затем отправляет его в активное окно. Графический API окна, получившего символ, печатает соответствующий символ шрифта в нужном поле.
3. Парсинг URL
Теперь у браузера есть следующая информация об URL:
Resource «/»
Показать главную (индексную) страницу
3.1 Это URL или поисковый запрос?
Когда пользователь не вводит протокол или доменное имя, то браузер «скармливает» то, что человек напечатал, поисковой машине, установленной по умолчанию. Часто к URL добавляется специальный текст, который позволяет поисковой машине понять, что информация передана из URL-строки определённого браузера.
3.2 Список проверки HSTS
3.3 Конвертация не-ASCII Unicode символов в название хоста
4. Определение DNS
- Браузер проверяет наличие домена в своём кэше.
- Если домена там нет, то браузер вызывает библиотечную функцию gethostbyname (отличается в разных ОС) для поиска нужного адреса.
- Прежде, чем искать домен по DNS gethostbyname пытается найти нужный адрес в файле hosts (его расположение отличается в разных ОС).
- Если домен нигде не закэширован и отсутствует в файле hosts , gethostbyname отправляет запрос к сетевому DNS-серверу. Как правило, это локальный роутер или DNS-сервер интернет-провайдера.
- Если DNS-сервер находится в той же подсети, то ARP-запрос отправляется этому серверу.
- Если DNS-сервер находится в другой подсети, то ARP-запрос отправляется на IP-адрес шлюза по умолчанию (default gateway).
4.1 Процесс отправки ARP-запроса
Кэш ARP проверяется для каждого целевого IP-адреса — если адрес есть в кэше, то библиотечная функция возвращает результат: Target IP = MAC .
Если же записи в кэше нет:
- Проверяется таблица маршрутизации — это делается для того, чтобы узнать, есть ли искомый IP-адрес в какой-либо из подсетей локальной таблицы. Если он там, то запрос посылается с помощью интерфейса, связанного с этой подсетью. Если адрес в таблице не обнаружен, то используется интерфейс подсети шлюза по умолчанию.
- Определяется MAC-адрес выбранного сетевого интерфейса.
- Отправляется ARP-запрос (второй уровень стека):
Sender MAC: interface:mac:address:here
Sender IP: interface.ip.goes.here
Target MAC: FF:FF:FF:FF:FF:FF (Broadcast)
Target IP: target.ip.goes.here
В зависимости от того, какое «железо» расположено между компьютером и роутером (маршрутизатором):
- Если компьютер напрямую подключён к роутеру, то это устройство отправляет ARP-ответ (ARP Reply).
- Если компьютер подключён к сетевому концентратору, то этот хаб отправляет широковещательный ARP-запрос со всех своих портов. Если роутер подключён по тому же «проводу», то отправит ARP-ответ.
- Если компьютер соединён с сетевым коммутатором, то этот свитч проверит локальную CAM/MAC-таблицу, чтобы узнать, какой порт в ней имеет нужный MAC-адрес. Если нужного адреса в таблице нет, то он заново отправит широковещательный ARP-запрос по всем портам.
- Если в таблице есть нужная запись, то свитч отправит ARP-запрос на порт с искомым MAC-адресом.
- Если роутер «на одной линии» со свитчем, то он ответит (ARP Reply).
Sender MAC: target:mac:address:here
Sender IP: target.ip.goes.here
Target MAC: interface:mac:address:here
Target IP: interface.ip.goes.here
Теперь у сетевой библиотеки есть IP-адрес либо DNS-сервера либо шлюза по умолчанию, который можно использовать для разрешения доменного имени:
- Порт 53 открывается для отправки UDP-запроса к DNS-серверу (если размер ответа слишком велик, будет использован TCP).
- Если локальный или на стороне провайдера DNS-сервер «не знает» нужный адрес, то запрашивается рекурсивный поиск, который проходит по списку вышестоящих DNS-серверов, пока не будет найдена SOA-запись, а затем возвращается результат.
5. Открытие сокета
- Этот запрос сначала проходит через транспортный уровень, где собирается TCP-сегмент. В заголовок добавляется порт назначения, исходный порт выбирается из динамического пула ядра ( ip_local_port_range в Linux).
- Получившийся сегмент отправляется на сетевой уровень, на котором добавляется дополнительный IP-заголовок. Также включаются IP-адрес сервера назначения и адрес текущей машины — после этого пакет сформирован.
- Пакет передаётся на канальный уровень. Добавляется заголовок кадра, включающий MAC-адрес сетевой карты (NIC) компьютера, а также MAC-адрес шлюза (локального роутера). Как и на предыдущих этапах, если ядру ничего не известно о MAC-адресе шлюза, то для его нахождения отправляется широковещательный ARP-запрос.
В конечном итоге пакет доберётся до маршрутизатора, управляющего локальной подсетью. Затем он продолжит путешествовать от одного роутера к другому, пока не доберётся до сервера назначения. Каждый маршрутизатор на пути будет извлекать адрес назначения из IP-заголовка и отправлять пакет на следующий хоп. Значение поля TTL (time to live) в IP-заголовке будет каждый раз уменьшаться после прохождения каждого роутера. Если значение поля TTL достигнет нуля, пакет будет отброшен (это произойдёт также если у маршрутизатора не будет места в текущей очереди — например, из-за перегрузки сети).
5.1 Жизненный цикл TCP-соединения
a. Клиент выбирает номер начальной последовательности (ISN) и отправляет пакет серверу с установленным битом SYN для открытия соединения.
b. Сервер получает пакет с битом SYN и, если готов к установлению соединения, то:
- Выбирает собственный номер начальной последовательности;
- Устанавливает SYN-бит, чтобы сообщить о выборе начальной последовательности;
- Копирует ISN клиента +1 в поле ACK и добавляет ACK-флаг для обозначения подтверждения получения первого пакета.
- Увеличивает номер своей начальной последовательности;
- Увеличивает номер подтверждения получения;
- Устанавливает поле ACK.
- Когда одна сторона отправляет N байтов, то увеличивает значение поля SEQ на это число.
- Когда вторая сторона подтверждает получение этого пакета (или цепочки пакетов), она отправляет пакет ACK, в котором значение поля ACK равняется последней полученной последовательности.
- Сторона, которая хочет закрыть соединение, отправляет пакет FIN;
- Другая сторона подтверждает FIN (с помощью ACK) и отправляет собственный FIN-пакет;
- Инициатор прекращения соединения подтверждает получение FIN отправкой собственного ACK.
6. TLS handshake
Сервер отвечает специальным кодом, который обозначает статус запроса и включает ответ следующей формы:
200 OK
[заголовки ответа]
304 Not Modified
[заголовки ответа]
и, соответственно, клиенту не посылается никакого контента, вместо этого браузер «достаёт» HTML из кэша.
— Сервер разбирает запрос по следующим параметрам:
— Сервер проверяет, имеет ли клиент право использовать этот метод (на основе IP-адреса, аутентификации и прочее).
— Если на сервере установлен модуль перезаписи ( mod_rewrite для Apache или URL Rewrite для IIS), то он сопоставляет запрос с одним из сконфигурированных правил. Если находится совпадающее правило, то сервер использует его, чтобы переписать запрос.
— Сервер находит контент, который соответствует запросу, в нашем случае он изучит индексный файл.
— Далее сервер разбирает («парсит») файл с помощью обработчика. Если Google работает на PHP, то сервер использует PHP для интерпретации индексного файла и направляет результат клиенту.
8. За кулисами браузера
Задача браузера заключается в том, чтобы показывать пользователю выбранные им веб-ресурсы, запрашивая их с сервера и отображая в окне просмотра. Как правило такими ресурсами являются HTML-документы, но это может быть и PDF, изображения или контент другого типа. Расположение ресурсов определяется с помощью URL.
Способ, который браузер использует для интерпретации и отображения HTML-файлов описан в спецификациях HTML и CSS. Эти документы разработаны и поддерживаются консорциумом W3C (World Wide Wib Consortium), которая занимается стандартизацией веба.
Интерфейсы браузеров сильно похожи между собой. У них есть большое количество одинаковых элементов:
- Адресная строка, куда вставляются URL-адреса;
- Кнопки возврата на предыдущую и следующую страницу;
- Возможность создания закладок;
- Кнопки обновления страницы (рефреш) и остановки загрузки текущих документов;
- Кнопка «домой», возвращающая пользователя на домашнюю страницу.
Высокоуровневая структура браузера
Браузер включает следующие компоненты:
9. Парсинг HTML
Движок рендеринга начинает получать содержимое запрашиваемого документа от сетевого механизма браузера. Как правило, контент поступает кусками по 8Кб. Главной задачей HTML-парсера является разбор разметки в специальное дерево.
Получающееся на выходе дерево («parse tree») — это дерево DOM-элементов и узлов атрибутов. DOM — сокращение от Document Object Model . Это модель объектного представления HTML-документа и интерфейс для взаимодействия HTML-элементов с «внешним миром» (например, JavaScript-кодом). Корнем дерева является объект «Документ».
Алгоритм разбора
HTML-нельзя «распарсить» с помощью обычных анализаторов (нисходящих или восходящих). Тому есть несколько причин:
- Прощающая почти что угодно природа языка;
- Тот факт, что браузеры обладают известной толерантностью к ошибкам и поддерживают популярные ошибки в HTML.
- Процесс парсинга может заходить в тупик. В других языках код, который требуется разобрать, не меняется в процессе анализа, в то время как в HTML с помощью динамического кода (например, скриптовые элементы, содержащие вызовы document.write() ) могут добавляться дополнительные токены, в результате чего сам процесс парсинга модифицирует вывод.
Алгоритм состоит из двух этапов: токенизации и создания дерева.
Действия после завершения парсинга
После этого браузер начинает подгружать внешние ресурсы, связанные со страницей (стили, изображения, скрипты и так далее).
На этом этапе браузер помечает документ, как интерактивный и начинает разбирать скрипты, находящиеся в «отложенном» состоянии: то есть те из них, что должны быть исполнены после парсинга. После этого статус документа устанавливается в состояние « complete » и инициируется событие загрузки (« load »).
Важный момент: ошибки «Invalid Syntax» при разборе не может быть, поскольку браузеры исправляют любой «невалидный» контент и продолжают работу.
10. Интерпретация CSS
- Во время разбора браузер парсит CSS-файлы, содержимое тегов и атрибутов «style» c помощью «лексической и синтаксической грамматики CSS».
- Каждый CSS-файл разбирается в объект StyleSheet , каждый из таких объектов содержит правила CSS с селекторами и объектами в соответствии с грамматикой CSS.
- Парсер CSS может быть как восходящим, так и нисходящим.
11. Рендеринг страниц
- Путём перебора DOM-узлов и вычисления для каждого узла значений CSS-стилей создаётся «Дерево рендера» (Render Tree или Frame Tree).
- Вычисляется предпочтительная ширина каждого узла в нижней части дерева — для этого суммируются значения предпочтительной ширины дочерних узлов, а также горизонтальные поля, границы и отступы узлов.
- Вычисляется реальная ширина каждого узла сверху-вниз (доступная ширина каждого узла выделяется его потомкам).
- Вычисляется высота каждого узла снизу-вверх — для этого применяется перенос текста и суммируются значения полей, высоты, отступов и границ потомков.
- Вычисляются координаты каждого узла (с использованием ранее полученной информации).
- Если элементы плавающие или спозиционированы абсолютно или относительно, предпринимаются более сложные действия. Более подробно они описаны здесь и здесь.
- Создаются слои для описания того, какие части страницы можно анимировать без необходимости повторного растрирования. Каждый объект (фрейма или рендера) присваивается слою.
- Для каждого слоя на странице выделяются текстуры.
- Объекты (рендеры/фреймы) каждого слоя перебираются и для соответствующих слоёв выполняются команды отрисовки. Растрирование может осуществляться процессором или возможна отрисовка на графическом процессоре (GPU) через D2D/SkiaGL.
- Все вышеперечисленные шаги могут требовать повторного использования значений, сохранённых с последнего рендеринга страницы, такая инкрементальная работа требует меньше затрат.
- Слои страницы отправляются процессу-компоновщику, где они комбинируются со слоями для другого видимого контента (интерфейс браузера, iframe-элементы, addon-панели).
- Вычисляются финальные позиции слоёв и через Direct3D/OpenGL отдаются композитные команды. Командные буферы GPU освобождаются для асинхронного рендеринга и фрейм отправляется для отображения на экран.
12. Рендеринг GPU
- Во время процесса рендеринга уровни графических вычислений могут использовать процессор компьютера или графический процессор (GPU).
- Во втором случае уровни графического программного обеспечения делят задачу на множество частей, что позволяет использовать параллелизм GPU для вычисления плавающей точки, которое требуется для процесса рендеринга.
13. Вызванное пользователем и пост-рендеринговое исполнение
После завершения рендеринга, браузер исполняет JavaScript-код в результате срабатывания некоего часового механизма (так работают дудлы на странице Google) или в результате действий пользователя (ввод поискового запроса в строку и получение рекомендаций в ответ). Также могут срабатывать плагины вроде Flash или Java (но не в рассматриваемом примере с домашней страницей Google). Скрипты могут потребовать обработки дополнительных сетевых запросов, изменять страницу или её шаблон, что приведёт к следующему этапу рендеринга и отрисовки.
Как подготовиться к собеседованию на вакансию QA? Как обычно, информации можно найти очень много, в этой статье постарались собрать "самый сок" знаний для того , чтоб начать развиваться в сфере тестирования.
Самые популярные вопросы:
Какие методики тестирования Вы знаете?
модульная/компонентная: проверяет функциональность и ищет дефекты в частях приложения, которые доступны и могут быть протестированы по отдельности;
интеграционная: предназначена для проверки связи между компонентами, а также взаимодействия с различными частями системы.
системная: высокоуровневая проверка функционала всей программы или системы в целом.
приемочная: проводится на этапе сдачи готового продукта заказчику.
Именно в этом порядке программное обеспечение подвергается испытанием.
Расскажите про виды тестирования?
Все виды тестирования программного обеспечения, можно условно разделить на следующие группы:
функциональное - направлено на тестирование всех функций системы, для подтверждения, что каждая функция программы работает в соответствии с документацией.
нефункциональное - это тестирование свойств, которые не относятся к функциональности системы, а именно: производительность, удобство пользования, портируемость(установки), надежность (отказ/восстановление).
связанные с изменениями, то есть после исправления бага/дефекта необходимо повторное тестирование, с целью убедиться, что внесенные изменения действительно решили проблему.
Что такое нагрузочное тестирование и чем отличается от стресс тестированием?
Чтобы ответить на этот вопрос надо разобраться в определениях. И так нагрузочное тестирование - это автоматизированные испытания приложения, которые имитируют нагрузочные модели, с целью комплексной оценки производительности, проверки качественной и бесперебойной работы системы, а также проверки соответствия требованиям, предъявляемым к конкретному объекту тестирования. А стресс-тестирование используется для определения устойчивости системы в условиях превышения пределов нормального функционирования. Итого, нагрузочное – это тестирование в пределах значений нагрузки, которые должна выдерживать система, а стрессовое – это тестирования за ее пределами.
Какие бывают подходы тестирования?
Всё зависит от доступа к коду программного обеспечения.
метод "Чёрного ящика" (Black box testing) - тестировщик имеет доступ к ПО только через интерфейс;
метод "Белого ящика" (White box or «glass-box» testing) - тестировщик имеет доступ к исходному коду;
метод "Серого ящика" (Grey box) - тестирование ПО с частичным знанием исходного кода.
Что такое чек-лист и как его оформлять?
Без какого инструмента невозможна жизнь тестировщика? Правильно - чек-лист! Чек-лист - это список проверок для тестирования продукта. Выполненные пункты отмечаются статусами, например: “Passed”, “Failed”, “Blocked”, “Skipped”, “Not run”. Несколько советов, чтоб правильно его составить: один пункт = одна проверка; опираться на требования; понятные названия пунктов всех членов команды; детализация; объединять чек-листы в матрицы, например, зависимость проверок от версий браузера.
Литературы по тестированию множество и вам всё не перечитать, это и не нужно! Выбирайте книгу более современную и тоньше.
Что такое web приложение? Однозначно, это клиент-серверное приложение, в котором клиент взаимодействует с веб-сервером при помощи браузера. Поэтому не избежать вопросов про сетевые протоколы взаимодействия. Могут быть общие вопросы:
Какие интернет протоколы Вам известны?
На собеседование достаточно будет рассказать про основные протоколы, углубляться в эту тему не следует. Наиболее известные протоколы:
FTP (File Transfer Protocol)
POP3 (Post Office Protocol)
SMTP (Simple Mail Transfer Protocol)
Расскажите какие между ними различие?
Метод POST используется для отправки данных на сервер, например, из HTML форм, которые заполняет посетитель сайта.
Метод PUT заменяет все текущие представления ресурса данными запроса.
Метод DELETE удаляет указанный ресурс.
Метод CONNECT преобразует существующее соединение в тоннель.
Метод PATCH используется для частичного изменения ресурса.
Отвечая на этот вопрос можете перечислить только основные методы.
Для расширения кругозора рекомендую прояснить понятия "Транспортный уровень", "Уровень сети интернет", "Канальный уровень".
Основы Web-программирования
Веб-приложение — клиент-серверное приложение, в котором клиент взаимодействует с веб-сервером при помощи браузера. Поэтому вопросы на собеседовании по этой теме обязательно будут!
Почему не открывается гиперссылка?
При ответе на вопрос необходимо уточнить, что у пользователя устойчивое интернет соединение. Даны следующие вводные: пользователь заходит на популярный ресурс с новостями, нажимает на "Срочная новость!", но страница не открывается. Самый простой способ разобраться в причине, это воспользоваться браузерной консолью. Открыли консоль, выбрали элемент с гиперссылкой, и анализируем какой веб-адрес указан. Самая популярная ошибка, которую находят тестировщики, это неверно указанный веб-адрес.
Почему не соответствует цвет кнопки дизайну?
Посмотреть цвет кнопки можно аналогичным способом через браузерную панель, и сравнить кодировки цвета.
Расскажите про браузерную консоль.
Самый важный инструмент в жизни web-тестировщика - это браузерная консоль, большинство проблем можно диагностировать благодаря ей, поэтому следует обратить внимание на основные панели:
Панель Elements показывает разметку страницы точно так же, как она рендерится в браузере, так же можно посмотреть, как бы выглядела открытая страница на каком-нибудь девайсе с другим расширением экрана.
Панель Console - это самая популярная вкладка тестировщиков , поскольку именно здесь отображаются найденные при выполнении скрипта ошибки в коде.
Панель Sources - проводится отладка кода программистами. Состоит из зоны исходных файлов ( в ней находятся все подключённые к странице файлы, включая JS/CSS); зоны текста (в ней находится текст файлов), зоны информации и контроля.
Панель Network. Основная функция данной вкладки – запись сетевого журнала. Она дает представление о запрашиваемых и загружаемых ресурсах в режиме реального времени.
Панель Performance. Данная вкладка используется при необходимости полного обзора затраченного времени.
Панель Memory. Данная панель дает возможность профилировать время исполнения и использование памяти веб приложением или страницей, таким образом помогая понять где именно тратится много ресурсов и как можно оптимизировать код.
Панель Application. Предназначена для исследования загруженных элементов.
Если у вас есть основы знаний HTML, CSS, JS это будет огромным плюсом, хотя бы следует развиваться в этом направлении, чтобы стать хорошим специалистом!
Что же именно входит в основы?
HTML - это теги, атрибуты, элементы; тайтлы страниц; параграфы; заголовки; списки; ссылки; изображения; таблицы; формы.
JavaScript - переменные и данные; математические функции; логика; условия; циклы; функции; объекты; массивы; работа со структурой документа; события; AJAX; JSON; область видимости.
CSS - виды таблиц стилей; виды селекторов; комбинация селекторов; группировка селекторов; наследование и каскад.
А что же с API?
Сложность тестирования API (программный интерфейс приложения) заключается в отсутствии пользовательского интерфейса. Поэтому нужно настроить с необходимым набором параметров среду тестирующую API, а затем проанализировать результаты теста. Какие же вопросы могут таиться:
Чем отличается REST от SOAP протокола?
REST более простой, гибкий и быстрый, SOAP типизированный, но в некоторых случаях лучше визуализируется за счет применения им синтаксиса похожего на HTML разметку.
Какой формат передачи информации используется в SOAP, а какой в REST?
REST использует Json и XML, SOAP только XML.
Какие инструменты вы знаете для тестирования API?
Отвечая на этот вопрос, опирайтесь на свой опыт. Список самых популярных инструментов: SoapUI, Postman, REST-Assured, Fiddler, Karate, JMeter.
Информации по API в свободном доступе огромное количество, поэтому вы сможете разобраться в этом разделе.
Как быть с автоматизацией?
Во многих компаниях активно используется автоматическое тестирование. Часто разбором результатов прогонов и анализом занимаются ручники. Поэтому нужно иметь небольшое представление, как строится процесс автоматизации и какие инструменты используются.
Если раньше в работе сталкивались с автоматизацией, то расскажите подробнее какой использовался технический стек, как происходил разбор тестов, и какой был алгоритм действий, если автотест падал с ошибкой.
Вокруг процесса найма в Яндекса много мнений и стереотипов, в том числе касаемых сложных собеседований и задач на алгоритмы и структуры данных.
До недавнего времени Яндекс был едва ли не единственной компанией в России, которая задавала такие задачи на собеседованиях. У Яндекса не самая простая процедура найма, но тем приятнее ее успешно пройти и получить оффер. Но прежде чем вас пригласят на первое собеседование, надо чтобы вас заметил рекрутер.
Это оказалось просто. Я зашёл на сайт с вакансиями и откликнулся на пару понравившихся. Через два дня мне позвонила рекрутер Яндекса, задала пару общих вопросов и записала на первый этап собеседований.
Не думаю, что моё резюме чем-то привлекло рекрутера, оно у меня типичное для программиста. Скорее всего, Яндекс не хочет пропустить хорошего кандидата и как минимум созванивается с каждым откликнувшимся. Поэтому не стоит бояться, что ваше резюме затеряется в сотнях других при отклике на вакансию через сайт. Отклик на вакансии — это всего лишь повод начать разговор.
В итоге я попал в команду, на которую первоначально не откликался. Есть и более короткие выходы в нанимающие команды. Если вам интересен финтех и вы хотите поучаствовать в создании банка с нуля, то в Яндексе есть такой стартап и отдельный сайт с вакансиями. А ещё есть возможность попасть в Яндекс за два дня через Weekend Offer,
Первый этап — решить 2 задачи за час
Для подготовки к первому этапу я взял неделю. За это время успел решить около 20 задач. Правда, до этого у меня уже были около 100 решенных задач в разное время. Про LeetCode я узнал в 2018 году, с того момента время от времени захожу на сайт и решаю задачки.
Зачем задавать задачи на алгоритмы на собеседованиях
Чтобы высказать сугубо личное мнение по этому вопросу, я бы хотел сначала рассказать, как я решил стать программистом.
Был 1994 год, один из первых школьных уроков информатики. Учительница проверяла, как мы усвоили материал с прошлого урока, надо было на доске написать сортировку пузырьком на Бейсике. Немного подождав и поняв, что никто не решается, я вышел к доске и мелом написал эти несколько строчек кода.
При этом мы все сидели в классе за компьютерами. Но решение надо было написать мелом на доске. После того урока я решил, что хочу стать программистом. Пройдёт ещё лет 10–15, прежде чем компании в США, а потом и в России, начнут тестировать программистов так же, как моя школьная учительница информатики проверяла наше понимание алгоритмов. Именно так сейчас проводят собеседования компании, которые хотят нанимать хороших разработчиков.
Считаю, что давать алгоритмические задачки на собеседовании бэкенд-разработчиков надо обязательно. Такой подход даёт много ложноотрицательных, но мало ложноположительных сигналов. Другими словами, на таких задачках часто заваливаются хорошие и опытные разработчики, потому что к таким собеседованиям надо отдельно готовиться.
Даже если вы хорошо решали алгоритмические задачи в прошлом, перед самим собеседованием всё равно надо размять мозги, вспомнить базовые вещи. С другой стороны, если человек после успешного прохождения этапа с алгоритмическими задачами плохо справляется с работой для своего уровня и опыта, то, скорее всего, дело в мотивации, а не в умениях и навыках. И да, мне 43, а я всё еще не брезгую решать алгоритмические задачи.
Для чего вообще надо давать такие задачки на собеседовании? Разработчики пишут программы, которые принимают на вход данные, выполняют их обработку и выдают результат. Именно это и надо сделать в задаче, решение большинства которых укладывается в 25–30 строк. И если у человека возникает сложность в написании программы в 25 строк, то как он напишет или разберётся в программе в 10 тыс. строк? А ведь это размер небольшого микросервиса. Что уж говорить о монолитах на сотни тысяч строк, с которыми мне приходится работать в Яндексе.
Следующие этапы собеседований
После успешно пройденного первого этапа мне назначили ещё четыре секции — две на алгоритмы и две на проектирование распределённых систем. С алгоритмами всё просто — чем больше времени уделил на подготовку, чем больше прорешал задачек, тем выше шанс на успех. После первого этапа я взял ещё месяц на подготовку и успел решить примерно 40 задач. Для подготовки к архитектурной секции читал:
На одном интервью меня попросили задизайнить один из сервисов Яндекса, на другом — известную социальную сеть. Смысл секций на архитектуру — понять, какой у вас опыт, умеете ли вы проектировать масштабируемые сервисы, какой грейд вам дать в оффере.
После успешного прохождения алгоритмов и архитектуры я вышел на финалы — собеседования с пятью командами, с которыми у нас был взаимный интерес друг к другу. Но это уже были обычные беседы о продукте, который они делают, я рассказывал о своём опыте и интересах.
Мой выбор был мучительным, потому что все команды делают классные продукты и решают интересные задачи. Кстати, это был третий заход в Яндекс, предыдущие 2 раза я не проходил как раз этап выбора команды, хотя с задачами в целом справлялся.
Итого я прошёл 5 технических собеседований и по одной встрече с пятью командами. В целом процесс мне показался нормальным, интервьюеры были позитивными и дружелюбными. В день было 1–2 собеседования, поэтому много энергии они не отнимали, а поскольку я продолжал работать на старом месте, растянутость процесса во времени даже помогала мне не отвлекаться от работы.
Почему я принял оффер от Яндекса
До того, как я устроился в Яндекс, часто слышал разговоры, что Яндекс платит ниже рынка. Возможно, это было раньше, но сейчас это не так. В оффере мне предложили столько, на сколько я оцениваю себя на рынке. При этом совокупный доход в Яндексе состоит из ежемесячного оклада, премий и опционов на акции. Опционы, правда, начинают веститься (зачисляться на счет) через год работы, а чтобы это компенсировать в первый год работы, мне выдали sing-up бонус.
В тот момент у меня были офферы на руках от других компаний. Некоторые предлагали ежемесячный оклад выше, чем Яндекс. В своей карьере я уже выбирал работу ради денег, потом жалел. В этот раз я выбрал в пользу интересной работы и уникального опыта.
Чем уникален Яндекс? Тут не только создаются продукты и сервисы, тут создаются технологии для этих продуктов. Все приличные компании уже используют ClickHouse, аналитическую СУБД, разработанную в Яндексе. Ничего подобного от больших зарубежных технологических компаний нет в свободном доступе. Яндекс нельзя сравнивать не только ни с одной российской компанией, но и ни с одной компанией в мире. Яндекс — это поиск и маркетплейс, такси и беспилотники, а ещё есть облако, доставка еды, каршеринг и много чего интересного.
Минусы работы в Яндексе
Если вы не очень любите осваивать инструменты, которые не используются за пределами Яндекса, то для вас это будет существенным минусом. К счастью, различия между внутренними сервисами Яндекса и их аналогами за пределами Яндекса не всегда большие.
Чем я занимаюсь в Яндексе
Примерно половину всех доходов Яндексу приносит реклама. Да, Яндекс теперь это не только поиск и реклама. В последнее время, например, очень сильно вырос фудтех. Кому интересно, о структуре доходов компании можно ознакомиться в пресс-релизе.
Видео: робота Spot от Вoston Dynamics оснастили рукой-манипулятором. Получился идеальный помощник по дому
Например, в апреле 2021 года Apple выпустила iOS 14.5, в котором запрещает отслеживать идентификатор устройства (IDFA) без явного запроса разрешения пользователя. Без IDFA невозможно сопоставить показ рекламы с действиями, которые совершил пользователь, посмотрев эту рекламу, например, установил ли он рекламируемое мобильное приложение.
Чтобы подготовить рекламную систему Яндекса к работе с iOS 14.5 и выше, пришлось вносить изменения во многие её компоненты, разобраться, как доставляется реклама в мобильные приложения, подключенные как непосредственно к рекламной сети Яндекса, так и подключенные к другим рекламным сетям, например, Google, из которых они могут получать рекламу от Яндекса опосредованно по протоколу OpenRTB.
Работая в Яндексе, мне уже приходилось писать код на Python, немного Java, иногда даже Perl, но в большую часть на С++. Теперь понимаете, почему Яндекс не спрашивают знание языков программирования на собеседовании? Это бессмысленно. Ещё в начале года часть нашей команды писала на Python, теперь пишут на Kotlin. Для хорошего программиста не составит труда выучить новый язык программирования. Да и вообще, язык программирования всего лишь инструмент для решения задач, а сложных и интересных задач в Яндексе мне хватает.
Большинство разработчиков, когда их спрашивают, почему они хотят сменить работу, отвечают что-то вроде: «Я хочу совершенствоваться, как программист, а моё текущее место не даёт такой возможности». Все ищут новых знаний, однако когда приходит время задать вопросы новому работодателю, обычно всё сводится к этому:
- Можно ли у вас иногда работать удалённо?
- Медицинская страховка предоставляется?
- А что насчёт отпуска?
Тут можно сделать один из двух выводов: либо разработчикам всё-таки в первую очередь нужна возможность работать удалённо, иногда отдыхать и лечиться за счёт компании, либо они задают не те вопросы.
Для тех из вас, кто заинтересован в постоянном профессиональном самосовершенствовании мы подготовили несколько советов о том, что на самом деле нужно спрашивать во время собеседования.
1. Как разработчики узнают что-то новое?
Ревью кода
Обмен знаниями
Отдельные спринты для рефакторинга
Парное программирование
Ретроспективные обсуждения
Не самые лучшие:
Stack Overflow
Можно спросить других разработчиков
Иногда отправляем на конференции
Смотря как вам удобнее узнавать новое
Этот вопрос поможет узнать, заботится ли компания о повышении уровня разработчиков и способствует ли получению новых знаний сотрудниками.
Возможные хорошие ответы:
- Мы проводим ревью кода, некоторые спринты выделяются только для погашения технического долга, практикуем парное программирование, проводим ретроспективы.
- Разработчики регулярно принимают участие в наших внутренних или внешних хакатонах.
- Мы не против экспериментов с любыми новыми вещами на выбор самих разработчиков.
- У нас есть собрания для обмена знаниями.
- Разработчики учатся друг у друга (здорово, если в компании есть кто-то хотя бы с таким же или большим опытом, чем у вас самих).
- Разработчики читают книги на разные темы и обсуждают их между собой.
- Если не получается решить проблему самостоятельно, разработчики ищут её решение в Интернете.
2. Вы разрешаете разработчикам экспериментировать?
Свободный выбор технологий
Поощрение новых идей
Вы сами планируете своё время для
покорения неизведанных территорий
Не самые лучшие:
Никаких экспериментов
Менеджеры расскажут, как нужно это сделать
У нас нет времени на эту ерунду
Эксперименты с чем-то новым — это один из лучших путей расширения горизонтов и обучения, так что если работодатель не против самостоятельного выбора разработчиками технологий для реализации нового проекта, то это хороший знак.
Вам лучше заранее узнать, придётся ли вам работать на сверхзвуковой скорости, постоянно гоняясь за смехотворно короткими дедлайнами. Если это так, то вам, скорее всего, придётся всегда использовать наиболее знакомый вам стек технологий — на что-то другое просто не будет времени.
Также неплохо, если в компании выделяют время на собственные проекты сотрудников. Не ждите, что это будет какое-то фиксированное количество часов в неделю или в месяц, важно лишь, что руководство в принципе не против этого. Если же они скажут, что компания не может себе позволить тратить время на такие эксперименты, ведь времени и так всегда не хватает, то спросите, каким образом ещё один разработчик в вашем лице сможет изменить ситуацию.
3. Что нужно для того, чтобы получить повышение?
У нас разработан путь продвижения
программистов по карьерной лестнице
Личное обсуждение с руководителем
Обратная связь
Экспертный обзор
Оценка как минимум раз в пол года
Не самые лучшие:
Продвижение после N лет работы
Мы скажем, когда вы будете готовы
Вы ведущий программист тогда,
когда вы помогаете другим
Не стоит недооценивать эту тему, ведь то, насколько быстро люди продвигаются по службе, отражает насколько быстро они получают новые навыки в компании. Конечно, всё это зависит от личной мотивации и других персональных характеристик человека, но компании могут помочь разработчикам в отслеживании прогресса и обозначении точек роста. Есть три вещи, которые вам стоит проверить:
- Руководство знает и открыто заявляет, какие именно навыки они ожидают от вас на различных карьерных уровнях. Если вам заранее известно, каким качествам нужно соответствовать, чтобы получить повышение, то над этим намного проще работать. Да, это на самом деле довольно очевидная вещь.
- В компании отслеживают ваши успехи и предоставляют обратную связь по работе. Ещё один вполне очевидный, но крайне важный пункт. Убедитесь, что с вами будут встречаться лично раз в несколько месяцев и предоставлять информацию, помогающую оставаться на верном пути.
- Другие разработчики будут производить экспертную оценку вашей работы, что поможет компании в целом лучше понимать успехи своих сотрудников.
4. Расскажите о вашем опыте работы с чем-то необычным или инновационным
Мы платим в биткоинах
Как-то раз проводили хакатон
по боям роботов
У нас бывают недели, когда запрещено
использовать мышку
Однажды мы попробовали использовать X,
но ничего не вышло.
Не самые лучшие:
Хм, не припомню такого
Технология X — самая крутая и
мы используем только её
Не стоит изменять то,
что и так отлично работает
«Нам нужен программист для работы над интересным, инновационным проектом» — сколько раз вы видели подобные слова в вакансиях? Так давайте же предоставим шанс работодателю оправдать написанное.
На самом деле это очень коварный вопрос! Вероятно, он может сильно удивить вашего собеседника и привести либо к 10-минутному страстному рассказу о том, какую классную уникальную штуку они как-то раз создавали, либо к оправданию по поводу того, что они не могут себе позволить сделать что-то большее, чем стандартное решение.
5. Будет ли у меня наставник и стану ли я сам для кого-то в будущем наставником?
В команде есть как опытные
разработчики, так и новички
В каждой команде есть технический
наставник
Парное программирование
Ревью кода
Не самые лучшие:
Вы будете один на проекте
Все работают удалённо
Пожалуй, вы будете единственным
разработчиком с таким опытом
Вполне очевидно, что если вы будете самым опытным на проекте, то станете тем самым разработчиком, к которому посылают всех остальных за помощью в решении проблем. Конечно, это неплохо для самолюбия, но так вы останетесь без того, с кем можно поделиться новыми идеями и обсудить их. Даже если вы уже очень опытный специалист, наличие кого-либо со схожим опытом рядом определённо пойдет на пользу вашему развитию.
6. Какие у вас есть перспективы для ведущих разработчиков?
У нас есть планы для роста и для
ведущих разработчиков тоже
Будем рады помочь вам
строить ваше будущее
Всегда есть чему ещё научиться,
можно заняться наставничеством
Не самые лучшие:
Через год мы сможем обсудить
повышение оклада
Отправим вас на более сложные проекты
Вы даже можете занять моё место
когда-нибудь
Представим, что вы заняли позицию «самого главного» разработчика в компании, много работали для этого и добились своего. Но что дальше?
Как понять, что после определённой точки ваш рост не прекратится и вам всегда будет куда развиваться? Просто спросите! Может быть, в компании есть более высокие должности для разработчиков. Тогда обязательно попросите их описать эти должности подробнее, чтобы не получилось, что они сводятся к другой надписи на визитке и большему количеству денег.
Возможно, вам предложат заняться наставничеством и участвовать в обучении молодых специалистов с меньшим опытом. Или же вас будут продвигать как публичного эксперта и предложат выступать на конференциях от лица компании. В любом случае стоит убедиться, что у них есть планы по дальнейшему развитию специалистов любого уровня и они готовы в том числе учитывать ваши идеи по этому поводу.
7. Вы выделяете бюджеты и время на обучение сотрудников и посещение конференций?
Мы оплачиваем участие в конференциях
Сами тоже выступаем
Покупаем книги
Выделяем деньги на покупку
учебных материалов
Не самые лучшие:
Аээ, зачем?
В Интернете же и так всё можно найти!
Конечно, вы в любом случае будете учиться в процессе работы, но разве не было бы здорово иногда посещать сторонние конференции или слетать послушать вашего кумира в мире программирования?
И если есть хотя бы какие-то бюджеты на обучение, то это будет огромным плюсом, ведь можно будет покупать полезные книжки для корпоративной библиотеки или какие-нибудь учебные курсы.
8. Что вы делаете, когда понимаете, что проект начинает проваливаться?
Если вы ошиблись,
мы все можем поучиться на этом!
Посмотрим, что пошло не так
и не будем допускать подобных
ошибок в следующий раз!
Мы проводим ретроспективы как в случае
успеха, так и при провалах!
Не самые лучшие:
Бывает, что не повезло,
нужно двигаться дальше
Мы не будем платить за время
на исправление ваших собственных ошибок
Давайте признаем, что не существует команды, которая всегда делала бы всё идеально и не ошибалась. Самое важное здесь, что происходит после того, когда становится понятно, что дела идут наперекосяк. И правильный ответ: компания должна рассматривать каждую кризисную ситуацию, как возможность для обучения, чтобы стать лучше. Если это так, что вы попали в команду, в которой никто не боится экспериментировать и ошибаться. Другими словами, лучше быть там, где неудачная попытка считается лучшим, чем отсутствие попытки совсем.
Также можете попробовать спросить:
- Насколько проведение ретроспектив вообще привычно для вашей компании?
Теперь вы знаете, какие вопросы стоит спросить на вашем следующем собеседовании. Важно, что всё это нужно спрашивать у технического специалиста или руководителя во время их части интервью. Профессиональные рекрутёры из HR-отдела скорее всего уже слышали ранее такие вопросы и будут отвечать так, чтобы вам это больше всего понравилось.
Хорошие программисты высоко ценятся на современном рынке труда. Компании часто соревнуются за работников банально своими кошельками — кто сможет больше платить, тот и получит лучшего специалиста. Конечно, иметь хорошую зарплату дело полезное, никто не просит вас работать только за идею! Но разве мы не можем рассчитывать на нечто большее, чем просто деньги?
В конце концов, вы, как программист, производите код, а взамен, получаете деньги и опыт. И если вас заботит в том числе вторая часть про опыт, то будет вполне уместным задать некоторые свои вопросы на собеседовании, а не только поинтересоваться уровнем оклада. Хорошем тоном тут будет заранее сообщить, что вы планируете это сделать, чтобы собеседник выделил достаточно времени на вас.
А вы задаёте свои вопросы на собеседованиях? Использовали ли когда-либо вопросы из этого списка? Какие получили ответы в каких компаниях? Какие ещё вопросы вы используете и с какой целью? Поделитесь своим мнением в комментариях, это будет очень полезно для остальных читателей.
Читайте также: