Это видео с онлайн-конференции JavaScript fwdays’20, которая прошла 14 марта 2020 года. Спикер: Martin Splitt (Мартин Сплит).
Далее, вы найдете перевод выступления.
Сегодня я бы хотел поговорить о том, как Google видит Интернет, и это в частности означает, что мы собираемся сосредоточится на том, как бот Google, который является сканером и инфраструктурой рендеринга, которую мы используем для поиска Google, понимает, о чем веб-сайт, и фактически создает веб-сайт так как пользователь видит его в браузере, а затем использует его для индексации в своей поисковой системы.
Я хотел бы поговорить о том, что в любом случает рендерится, поэтому мы поговорим о рендеринге, потому что рендеринг может означать несколько разных вещей, и я имею ввиду одну очень конкретную вещь. Мы собираемся изучить нашу службу веб-рендеринга, которая является компонентом бота Google, который на самом деле занимается рендерингом страницы, чтобы страницу можно было проиндексировать в поисковом индексе для поиска Google, и, наконец, что не менее важно, я хотел бы дать несколько советов и приемов, и рассказать о том, на что следует обратить внимание.
Что такое рендеринг?
Есть несколько разных определений того, что влечет за собой рендеринг, и само определение зависит от того кого вы спрашиваете. Но когда я говорю о рендеринге в этом выступлении, я говорю о процессе рендеринга превращения гипертекста, отправляемого в браузер, в пиксели (отрисовка), которые появляются на экране, однако для робота Google в поиске Google мы на самом деле не заботимся о конкретных пикселях, но подробнее об этом чуть позже.
Я сказал, «превращая гипертекст в пиксели», но что это влечет за собой? Давайте посмотрим, как браузер на самом деле переходит к пикселям на экране. Если вы открываете веб-сайт, скажем example.com, и окно открывается, и теперь нам нужно дождаться запуска сервера, поэтому мы отправили запрос на сервер, мы должны дождаться, пока сервер ответит нам.
Ответ придет в формате HTML и кроме этого HTML-документа у нас ничего нет. Поэтому h1 может появиться только в теле (body), поэтому мы можем сразу добавить его в тело, так что здесь у нас есть элемент h1, и в нем есть текст внутри, в этом случае по мере того, как приходит больше HTML, и когда сервер отправляет это в наш браузер, мы можем продолжить синтаксический анализ.
В этом случае у нас есть элемент абзаца и снова в нем какой-то текст, а затем у нас есть еще один элемент абзаца, и у нас есть какое-то изображение, и теперь мы видим весь сайт. Веб-сайт был перенесен, и у нас есть понимание его структуры.
Мы проанализировали HTML, и на самом деле это действительно большое преимущество HTML, вы можем анализировать его по мере поступления, его можно постепенно анализировать пока данные поступают с вашего сервера. Мы представляем поток в виде дерева тегов Dom, эту объектную модель документа, где мы понимаем, что находится на странице, где body, заголовок, абзац, есть еще один абзац в этом абзаце, и второй, а также изображение. Но если я открою браузер и перейду на сайт я не вижу такой древовидной структуры. Я на самом деле вижу то, что на самом деле является правильным на веб-сайте (прим. речь идет о дизайне, т.е. отображение сайта со стороны пользователя).
Перейдем ко второму шагу. У нас есть определенное количество места, и это пространство зависит от того, на каком устройстве я его использую, это также зависит от того, нахожусь ли я в полноэкранном режиме, если я перемещаю окно для определенной службы, или вы изменяете размер окна до определенного размера, поэтому в основном у меня разные объемы пространства, и мне каким-то образом нужно выяснить, как все эти элементы попадают в тот кусок пространства, который у меня есть – например, в мое окно браузера на телефоне.
У меня обычно есть и другое доступное пространство, кроме телефона, например, настольный компьютер, поэтому мы начинаем анализировать заново. В этом случае есть заголовок и CSS.
CSS не задействован, если бы был задействован CSS, нам пришлось бы проанализировать CSS, а также другое дерево, которое называется объектной моделью CSS, и использовать его, чтобы на самом деле выяснить как макет, размеры фрагментов выглядят. Поэтому заголовок автоматически является элементом уровня блока, он охватывает все вертикальное пространство, которое представляет открытое окно, и имеет немного более жирный и больший размер шрифта. У нас на самом деле нет текста, это просто поле, теперь мы знаем, насколько велико будет это поле с заголовком, какой высоты и какой шрифт мы будем использовать, и какой вес шрифта, поэтому теперь известна вся информация о стиле, и мы знаем, как мы можем разместить это в окне браузера. И мы переходим к абзацу. То же самое — что занимает все пространство, и теперь мы переходим к следующему абзацу, проделываем то же самое с другим абзацем. Но у нас также есть изображение, мы могли бы случайно узнать размер изображения, потому что оно было частью HTML, или, если это не так, мы можем начать загрузку файла изображения, потому что большинство форматов изображений имеют размер изображения в первой паре байтов, поэтому по мере поступления их байтов мы можем выяснить насколько большим будет изображение, и затем мы можем поместить изображение туда, что автоматически делает контейнер абзацем немного выше, чем он был раньше.
В основном макете берется информация о дереве DOM, выясняется как все эти кусочки и части вписываются в окно браузера, как они сочетаются друг с другом, где мы их помещаем, но это все еще не то, что я вижу.
