автор: Rachel Costello
JavaScript – это сложная тема, которую иногда чрезвычайно трудно освоить.
Тем не менее важно понимать ее, поскольку JavaScript становится все более распространенным на сайтах, которыми мы управляем.
По мере того как современная веб-среда продолжает развиваться, использование JavaScript продолжает расти.
Специалисты по SEO могут тосковать по временам, когда сайты были статичными и кодировались только на HTML и CSS. Тем не менее современные, привлекательные сайты часто требуют интерактивности, которая обычно реализуется с использованием JavaScript.
Как сказал Джон Мюллер, аналитик трендов вебмастера Google: JavaScript "не исчезнет". Этот язык программирования окружает нас повсюду, поэтому нам следует лучше с ним ознакомиться. Давайте проявим инициативу и углубим свои знания о JavaScript, вместо того чтобы бояться его.
Часто существует заблуждение, что JavaScript — это что-то, о чем должны беспокоиться исключительно разработчики.
Я бы возразил, что это не так. Это может стать проблемой для любого желающего, чтобы клиенты и поисковые системы могли получить доступ к контенту их веб-сайта.
Если вы не совсем знакомы с JavaScript, или даже совершенно не представляете, что это такое и за что отвечает, не переживайте.
Я подготовил глоссарий ключевых терминов и основных концепций, которые вам следует знать, чтобы помочь вам начать свой путь открытий.
Что такое JavaScript?
JavaScript – это язык программирования, который позволяет вам внедрять сложные функции на веб-сайте, такие как динамические элементы или интерактивность.
JavaScript выполняется после того, как информация из HTML и CSS в исходном коде была проанализирована и построена.
Затем JavaScript запускает любые события или переменные, указанные в нем, обновляется объектная модель документа (DOM), и, наконец, JavaScript рендерится в браузере.
HTML и CSS часто формируют основы структуры страницы, и любой JavaScript вносит последние коррективы и изменения.
Что такое Document Object Model (DOM)?
Модель объектов документа (Document Object Model, DOM) создается при загрузке страницы и состоит из узлов и объектов, которые отображают все различные элементы и атрибуты на странице.
Страница структурирована таким образом, чтобы другие программы могли изменять и манипулировать ей в отношении ее структуры, содержимого и стиля.
Изменение элементов объектной модели документа (DOM) страницы возможно с использованием языка, такого как JavaScript.
Что такое ECMAScript?
ECMAScript (ES) – это скриптовый язык, созданный для стандартизации использования кода JavaScript.
Различные версии ECMAScript выпускаются при обновлении и доработке языка, такие как ES5 и ES6 (также известный как ES2015).
Что такое транспиляция?
Транспилятор – это инструмент, который преобразует исходный код в другой язык программирования. Это похоже на Google Translate, но для кода.
Вы можете преобразовать конкретный исходный язык в другой целевой язык, например, JavaScript в C++ или Python в Ruby.
В частности, в отношении рендеринга JavaScript транспилятор раньше рекомендовался для преобразования ES6 в ES5 в то время, когда Google использовал старую версию Chrome для рендеринга, которая не поддерживала более новую версию ECMAScript, ES6.
Что такое Chromium?
При рендеринге страниц Google использует веб-сервис рендеринга (WRS), чтобы обрабатывать страницы, которые требуют JavaScript для питания своих страниц.
Для этого Google использует Chromium, который является открытым исходным кодом проекта и составляет основу браузера Chrome.
По мере обновления Chrome выпускается новые версии браузера с новыми функциями. До мая 2019 года Googlebot использовал WRS на основе Chrome 41, который был выпущен еще в 2015 году.
С тех пор Google объявил, что делает Googlebot вечнозеленым, что означает, что его WRS будет постоянно обновляться каждый раз, когда выходит новая версия Chrome.
Что такое одностраничное приложение (SPA)?
Одностраничное приложение (SPA) – это веб-сайт или веб-приложение, которое динамически переписывает и перерисовывает страницу по мере взаимодействия пользователя с ней, а не отправляет отдельные запросы на сервер для получения нового HTML-кода и контента.
JavaScript-фреймворки могут быть использованы для поддержки динамических элементов SPA.
Что такое Angular, Polymer, React и Vue?
Все это разные типы JavaScript-фреймворков.
- Angular и Polymer были разработаны Google.
- React был разработан Facebook.
- Vue был разработан Еваном Ю, который раньше работал в команде Angular Google.
Каждый JavaScript-фреймворк имеет свои плюсы и минусы, поэтому разработчики выбирают тот, который лучше всего подходит им и их проекту.
Если вы хотите узнать больше о том, как разные фреймворки сравниваются, эта глава дает подробное сравнение.
Что такое рендеринг JavaScript?
JavaScript-рендеринг включает в себя обработку сценария и содержащихся в нем инструкций, а затем ее выполнение, чтобы отобразить требуемый вывод в браузере.
Существует множество различных методов, которые вы можете использовать для управления способом рендеринга JavaScript.
Требование JavaScript для рендеринга на странице может негативно повлиять на два ключевых аспекта:
- Скорость сайта
- Краулинг и индексирование поисковых систем
В зависимости от метода рендеринга, который вы используете, вы можете сократить время загрузки страницы и убедиться, что контент доступен для сканирования и индексирования поисковыми системами.
Пре-рендеринг
Пре-рендеринг включает в себя рендеринг контента на странице до того, как он будет запрошен пользователем или поисковой системой, так что они получат статическую страницу со всем контентом, готовым к работе.
Предварительная загрузка страницы таким образом означает, что ваш контент будет доступен, а не поисковая система или браузер пользователя должен визуализировать страницу самостоятельно.
Предварительный рендеринг обычно используется для ботов поисковых систем, а не для людей. Это связано с тем, что статичная, предварительно отрендеренная страница будет менее привлекательной для пользователей, поскольку она лишена любого динамического контента или интерактивности.
Серверный рендеринг
Хостинговый сервер выполняет всю тяжелую работу и рендерит страницу так, чтобы JavaScript уже был обработан, а контент был готов к передаче в браузер пользователя или поискового робота, когда он будет запрошен.
Этот метод помогает снизить нагрузку на устройство пользователя, которая могла быть вызвана обработкой JavaScript, и это может увеличить скорость загрузки страницы.
Серверный рендеринг также гарантирует, что весь контент будет виден и проиндексирован поисковыми системами.
Клиентский рендеринг
Во время клиентского рендеринга JavaScript обрабатывается браузером пользователя или поисковой системой, запрашивающей страницу.
Сервер будет обрабатывать первоначальный запрос, но остальная работа по обработке и рендерингу страницы ложится на устройство пользователя или поисковую систему.
Часто не рекомендуется использовать клиентский рендеринг, поскольку существует задержка между сканированием Google страниц и их возможностью рендеринга.
Google помещает страницы, которые необходимо отобразить, в очередь до тех пор, пока не станет достаточно ресурсов для их обработки.
Если вы полагаетесь на Google для рендеринга страницы на клиентской стороне, это может привести к задержке индексации до недели после ее первоначального сканирования.
Динамический рендеринг
Динамический рендеринг включает использование различных методов отображения в зависимости от того, запрашивает ли пользователь браузер или поисковый робот страницу.
Если ваш сайт обычно отображается на стороне клиента, то при обнаружении Googlebot страница будет предварительно отображена с использованием мини-клиентского отображателя (например, Puppeteer или Rendertron), чтобы контент мог быть сразу виден и проиндексирован.
Гибридный рендеринг
Гибридный рендеринг включает комбинацию как серверного, так и клиентского отображения.
Основной контент предварительно отображается на сервере и отправляется на клиентскую сторону, будь то браузер пользователя или поисковый робот, запрашивающий контент.
После загрузки страницы дополнительный JavaScript для любого интерактивного контента затем отображается на стороне клиента.
Заключение
Надеюсь, эта статья окажется полезной, и вы лучше поймете основы JavaScript и то, как он влияет на веб-сайты.