#7-131. Понимание основ JavaScript. Правка

'#6. Тексты : texts';

'Library_ChapterController_actionUpdate_';

'#library_chapter_update_';

VirtualityCMS

Идентификатор ссылки (англ.)	vigbo-copy
Статус:	Активен

Описание

Идентификатор ссылки (англ.)	rukovodstvo-po-seo-parametrov-url-67050
Статус:	Архив

Описание

131. Понимание основ JavaScript. Правка

Архив

Экспресс-правка Разметка ред. Summernote ред. Quill ред. CKEditor ред. Trumbowyg ред. Imperavi ред. Jodit

Общая информация

Название

Том: Продвинутое техническое СЕО

ID Тома: 9

Статус: Активен
Глава: №19

ID Главы: 131

Статус: Архив
Время действия не указано

Всего знаков в главе: 17537

id (статус)	131 (2)
Идентификатор ссылки (англ.)	ponimaniye-osnov-javascript-65107
Сайт (ID сайта)	. #3
Смотреть на сайте	https://panel.kb77.ru/texts/prodvinutoye-tekhnicheskoye-seo/ponimaniye-osnov-javascript-65107/
Время последнего обновления	27-08-2025 в 11:38:16
Ссылка в БД	https://shopnseo.ru/texts/prodvinutoye-tekhnicheskoye-seo/ponimaniye-osnov-javascript-65107/

Полное название и описание

Полное название

Описание главы

Как правило описание должно иметь около 150 знаков. Оно используется для заполнения мета-тега Description веб-страницы.
Сейчас используется - 0 символов

Описание скопировано!

Описание вставлено!

Ключевое слово (главное):

Персонажи:

Метки:

Комментарии:

Примечания:

Полный текст < > & " ' « » – — … • · ← → ↑ ↓ ↔

Юридические: © ® ™

Валюты: € £ ¥ ¢

Типографика: § ¶ ° ± × ÷

Дроби: ½ ⅓ ⅔ ¼ ¾ ⅛ ⅜ ⅝ ⅞

Греческие: α β γ δ ε λ μ π σ ω Δ Σ Ω

Математические: ≈ ≠ ≤ ≥ ∞ √ ∑ ∫ ∂ ∇

<p style="text-align: right;">автор: <a title="Go to Author Page" href="https://www.searchenginejournal.com/author/rachel-costello/">Rachel Costello</a></p>
<p>JavaScript &ndash; это сложная тема, которую иногда чрезвычайно трудно освоить.</p>
<p>Тем не менее важно понимать ее, поскольку JavaScript становится все более распространенным на сайтах, которыми мы управляем.</p>
<p>По мере того как современная веб-среда продолжает развиваться, использование JavaScript продолжает расти.</p>
<p>Специалисты по SEO могут тосковать по временам, когда сайты были статичными и кодировались только на HTML и CSS. Тем не менее современные, привлекательные сайты часто требуют интерактивности, которая обычно реализуется с использованием JavaScript.</p>
<p><img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_29775810611704964203118.webp" alt="JavaScript " width="768" height="358" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy"></p>
<p>Как сказал Джон Мюллер, аналитик трендов вебмастера Google: JavaScript "не исчезнет". Этот язык программирования окружает нас повсюду, поэтому нам следует лучше с ним ознакомиться. Давайте проявим инициативу и углубим свои знания о JavaScript, вместо того чтобы бояться его.</p>
<p><img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_63026826221704964302265.webp" alt="твиттер, " width="471" height="257" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy"></p>
<p>Часто существует заблуждение, что JavaScript &ndash; это что-то, о чем должны беспокоиться исключительно разработчики.</p>
<p>Я бы возразил, что это не так. Это может стать проблемой для любого желающего, чтобы клиенты и поисковые системы могли получить доступ к контенту их веб-сайта.</p>
<p>Если вы не совсем знакомы с JavaScript, или даже совершенно не представляете, что это такое и за что отвечает, не переживайте.</p>
<p>Я подготовил глоссарий ключевых терминов и основных концепций, которые вам следует знать, чтобы помочь вам начать свой путь открытий.</p>
<h2>Что такое JavaScript?</h2>
<p>JavaScript &ndash; это язык программирования, который позволяет вам внедрять сложные функции на веб-сайте, такие как динамические элементы или интерактивность.</p>
<p>JavaScript выполняется после того, как информация из HTML и CSS в исходном коде была проанализирована и построена.</p>
<p>Затем JavaScript запускает любые события или переменные, указанные в нем, обновляется объектная модель документа (DOM), и, наконец, JavaScript рендерится в браузере.</p>
<p>HTML и CSS часто формируют основы структуры страницы, и любой JavaScript вносит последние коррективы и изменения.</p>
<h3>Что такое Document Object Model (DOM)?</h3>
<p>Модель объектов документа (Document Object Model, DOM) создается при загрузке страницы и состоит из узлов и объектов, которые отображают все различные элементы и атрибуты на странице.</p>
<p>Страница структурирована таким образом, чтобы другие программы могли изменять и манипулировать ей в отношении ее структуры, содержимого и стиля.</p>
<p><img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_15770457231704964411810.webp" alt="Что такое Document Object Model" width="480" height="341" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy"></p>
<p>Изменение элементов объектной модели документа (DOM) страницы возможно с использованием языка, такого как JavaScript.</p>
<h3>Что такое ECMAScript?</h3>
<p>ECMAScript (ES) &ndash; это скриптовый язык, созданный для стандартизации использования кода JavaScript.</p>
<p>Различные версии ECMAScript выпускаются при обновлении и доработке языка, такие как ES5 и ES6 (также известный как ES2015).</p>
<h3>Что такое транспиляция?</h3>
<p>Транспилятор &ndash; это инструмент, который преобразует исходный код в другой язык программирования. Это похоже на Google Translate, но для кода.</p>
<p>Вы можете преобразовать конкретный исходный язык в другой целевой язык, например, JavaScript в C++ или Python в Ruby.</p>
<p>В частности, в отношении рендеринга JavaScript транспилятор раньше рекомендовался для преобразования ES6 в ES5 в то время, когда Google использовал старую версию Chrome для рендеринга, которая не поддерживала более новую версию ECMAScript, ES6.</p>
<h3>Что такое Chromium?</h3>
<p>При рендеринге страниц Google использует веб-сервис рендеринга (WRS), чтобы обрабатывать страницы, которые требуют JavaScript для питания своих страниц.<br>Для этого Google использует Chromium, который является открытым исходным кодом проекта и составляет основу браузера Chrome.</p>
<p>По мере обновления Chrome выпускается новые версии браузера с новыми функциями. До мая 2019 года Googlebot использовал WRS на основе Chrome 41, который был выпущен еще в 2015 году.</p>
<p>С тех пор Google объявил, что делает Googlebot вечнозеленым, что означает, что его WRS будет постоянно обновляться каждый раз, когда выходит новая версия Chrome.</p>
<h3>Что такое одностраничное приложение (SPA)?</h3>
<p>Одностраничное приложение (SPA) &ndash; это веб-сайт или веб-приложение, которое динамически переписывает и перерисовывает страницу по мере взаимодействия пользователя с ней, а не отправляет отдельные запросы на сервер для получения нового HTML-кода и контента.</p>
<p>JavaScript-фреймворки могут быть использованы для поддержки динамических элементов SPA.</p>
<h3>Что такое Angular, Polymer, React и Vue?</h3>
<p>Все это разные типы JavaScript-фреймворков.</p>
<ul>
<li>Angular и Polymer были разработаны Google.</li>
<li>React был разработан Facebook.</li>
<li>Vue был разработан Еваном Ю, который раньше работал в команде Angular Google.</li>
</ul>
<p><img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_49741155641704964824399.webp" alt="разные типы JavaScript-фреймворков" width="680" height="262" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy"></p>
<p>Каждый JavaScript-фреймворк имеет свои плюсы и минусы, поэтому разработчики выбирают тот, который лучше всего подходит им и их проекту.</p>
<p>Если вы хотите узнать больше о том, как разные фреймворки сравниваются, эта глава дает подробное сравнение.</p>
<h3>Что такое рендеринг JavaScript?</h3>
<p>JavaScript-рендеринг включает в себя обработку сценария и содержащихся в нем инструкций, а затем ее выполнение, чтобы отобразить требуемый вывод в браузере.</p>
<p>Существует множество различных методов, которые вы можете использовать для управления способом рендеринга JavaScript.</p>
<p>Требование JavaScript для рендеринга на странице может негативно повлиять на два ключевых аспекта:</p>
<ul>
<li>Скорость сайта</li>
<li>Краулинг и индексирование поисковых систем</li>
</ul>
<p>В зависимости от метода рендеринга, который вы используете, вы можете сократить время загрузки страницы и убедиться, что контент доступен для сканирования и индексирования поисковыми системами.</p>
<h3>Пре-рендеринг</h3>
<p>Пре-рендеринг включает в себя рендеринг контента на странице до того, как он будет запрошен пользователем или поисковой системой, так что они получат статическую страницу со всем контентом, готовым к работе.</p>
<p>Предварительная загрузка страницы таким образом означает, что ваш контент будет доступен, а не поисковая система или браузер пользователя должен визуализировать страницу самостоятельно.</p>
<p>Предварительный рендеринг обычно используется для ботов поисковых систем, а не для людей. Это связано с тем, что статичная, предварительно отрендеренная страница будет менее привлекательной для пользователей, поскольку она лишена любого динамического контента или интерактивности.</p>
<h3 data-sourcepos="3:1-4:210">Серверный рендеринг</h3>
<p data-sourcepos="3:1-4:210">Хостинговый сервер выполняет всю тяжелую работу и рендерит страницу так, чтобы JavaScript уже был обработан, а контент был готов к передаче в браузер пользователя или поискового робота, когда он будет запрошен.</p>
<p data-sourcepos="3:1-4:210"><img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_83369202851704964973377.webp" alt="Серверный рендеринг" width="680" height="201" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy"></p>
<p data-sourcepos="6:1-6:164">Этот метод помогает снизить нагрузку на устройство пользователя, которая могла быть вызвана обработкой JavaScript, и это может увеличить скорость загрузки страницы.</p>
<p data-sourcepos="8:1-8:109">Серверный рендеринг также гарантирует, что весь контент будет виден и проиндексирован поисковыми системами.</p>
<h3>Клиентский рендеринг</h3>
<p>Во время клиентского рендеринга JavaScript обрабатывается браузером пользователя или поисковой системой, запрашивающей страницу.</p>
<p>Сервер будет обрабатывать первоначальный запрос, но остальная работа по обработке и рендерингу страницы ложится на устройство пользователя или поисковую систему.</p>
<p><img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_97503750061704965037010.webp" alt="Клиентский рендеринг" width="680" height="203" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy"></p>
<p>Часто не рекомендуется использовать клиентский рендеринг, поскольку существует задержка между сканированием Google страниц и их возможностью рендеринга.</p>
<p>Google помещает страницы, которые необходимо отобразить, в очередь до тех пор, пока не станет достаточно ресурсов для их обработки.</p>
<p>Если вы полагаетесь на Google для рендеринга страницы на клиентской стороне, это может привести к задержке индексации до недели после ее первоначального сканирования.</p>
<h3>Динамический рендеринг</h3>
<p>Динамический рендеринг включает использование различных методов отображения в зависимости от того, запрашивает ли пользователь браузер или поисковый робот страницу.</p>
<p>Если ваш сайт обычно отображается на стороне клиента, то при обнаружении Googlebot страница будет предварительно отображена с использованием мини-клиентского отображателя (например, Puppeteer или Rendertron), чтобы контент мог быть сразу виден и проиндексирован.</p>
<p><img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_8192084811704965287187.webp" alt="Динамический рендеринг" width="680" height="341" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy"></p>
<h3>Гибридный рендеринг</h3>
<p>Гибридный рендеринг включает комбинацию как серверного, так и клиентского отображения.</p>
<p>Основной контент предварительно отображается на сервере и отправляется на клиентскую сторону, будь то браузер пользователя или поисковый робот, запрашивающий контент.</p>
<p>После загрузки страницы дополнительный JavaScript для любого интерактивного контента затем отображается на стороне клиента.</p>
<p data-sourcepos="8:1-8:109"><img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_70249431921704965360876.webp" alt="Гибридный рендеринг" width="680" height="404" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy"></p>
<h2>Заключение</h2>
<p>Надеюсь, эта статья окажется полезной, и вы лучше поймете основы JavaScript и то, как он влияет на веб-сайты.</p>

Скопировано в буфер!

Вставлено из буфера!

Карточка текста Карточки текста

Тема

Персонажи

Изменить дату действия. 18/02/2026

Выбрать дату

Время: 03:45 .

Идея текста

Сюжет

План действий

Заметки

Редакторские правки

Персонажи

Идея текста

Сюжет

План действий

Заметки

Дополнительные поля
Дополнительные поля отсутствуют

131. Понимание основ JavaScript. Правка

Редактировать комментарии, примечания, метки и персонажи

Дополнительные символы

Понимание основ JavaScript