JavaScript呈现在线内容的成功与否会影响网站的性能、搜索引擎可见性和整体用户体验。

在本文中，我们将解释:

• 什么是JavaScript渲染，以及不同的浏览器和搜索引擎如何处理它
• JavaScript渲染对搜索引擎优化(SEO)
• 处理JavaScript渲染的三种主要方法
• 如何检查网站上的JS渲染问题

什么是JavaScript渲染？

JS渲染是浏览器如何解释和执行在网页上实现的JavaScript代码的过程。 然后将其转换为用户看到的结果内容显示在浏览器中。

同样，在SEO上下文中，搜索引擎将抓取，呈现和索引网站的JS内容。 因此，它可以在用户的在线搜索结果中发现。

那么什么是JavaScript？

JavaScript（JS）是一种用于创建交互式网站（其中包含比传统静态网站更具吸引力的用户元素）和web应用程序的编程语言。

进一步阅读：了解JavaScript在我们的JS基本指南.

JS是web最常见的计算机语言之一，以及HTML和CSS。

Web开发人员使用JS向站点添加功能，包括:

• 动态内容:用户输入或网站后端数据库更改生成的任何内容。 例如，个性化的产品推荐，社交媒体新闻推送和天气预报信息。
• 动画:示例包括图像轮播、动画图标、加载动画和交互式信息图表
• 表单验证:网站在提交表单之前验证用户的表单输入-例如，检查用户是否使用有效的密码格式。 这可以改善用户体验（UX）并减少由于表单错误而产生的挫折感。

浏览器如何处理JavaScript

当您访问一个页面时，web浏览器（用于访问网站的软件）通常会通过三个步骤处理JavaScript:

• 解析;解析:浏览器的JavaScript渲染引擎分析代码脚本以了解其结构和语法
• 编译:引擎将脚本转换为浏览器可以执行的代码
• 执行死刑:浏览器执行代码，从而生成完全呈现的网页

搜索引擎如何呈现JavaScript

搜索引擎是旨在帮助用户搜索互联网的软件。不同的搜索引擎以不同的方式处理JavaScript。 让我们看看最受欢迎的是如何做到的。

谷歌

谷歌的JavaScript渲染过程分三个阶段进行:

1. 爬行:发现一个新页面并下载它包含的文本和媒体
2. 渲染图:执行JavaScript代码以了解页面内容
3. 索引:了解页面的内容，并将其包含在谷歌索引

这是一个视觉摘要从谷歌搜索中心当谷歌渲染一个网站的JS时发生了什么:

谷歌的网络爬虫,古格尔博特，排队网页进行抓取和渲染。

首先，它评估每个页面是否可以抓取。 然后古格尔博特检查呈现的页面是否有链接。 并将它在那里找到的任何Url排队以进行进一步的抓取。

必应

必应不支持所有最新的javascript框架（代码库集合）进行渲染。

搜索引擎的官方建议是网站使用动态渲染而不是JavaScript。

什么是动态渲染？

网站检测访问者的用户代理（用户识别软件），以确定它是人类还是搜索引擎爬虫。 它会为人类和搜索引擎呈现不同的内容。

在检测必应的搜索引擎爬虫时，网站应预先呈现内容通过服务器端渲染（SSR）. 然后向用户提供静态HTML网站。

优点是它最大限度地减少HTTP请求（用户浏览器向服务器发出的请求），因为完全呈现的页面会立即交付。

雅虎

雅虎尚未透露有关其搜索引擎如何呈现JavaScript的官方信息。 但它确实提供了一些建议关于网站应该如何处理JavaScript:

• 推迟JavaScript加载:执行JS代码之后页面的主要内容加载。 这样可以提高页面加载速度。
• 缩小JavaScript文件:通过删除不必要的数据（如注释和空白）来减少JS文件的大小。 以帮助代码更快地加载。
• 删除重复的脚本:网站可能会意外地最终得到重复的JavaScript文件。 检查并删除重复的脚本，以避免代码冲突和增加页面加载时间。

燕基科斯

燕基科斯允许网站管理员选择是否允许搜索引擎在其页面上呈现JavaScript代码。

搜索引擎建议网站使用服务器端JavaScript呈现。

如何检查古格尔博特是否正确呈现您的网站

在本节中，我们将重点介绍最广泛使用的搜索引擎—以及在SEO中起主导作用的搜索引擎。

您可以使用URL检查功能谷歌搜索控制台（GSC）来检查谷歌的网络爬虫是否已经呈现你的网站，因为它应该。

点击GSC仪表板顶部的搜索框，输入您网站的URL，然后点击"进入.”

该工具将检查您的网站是否已被抓取。 如果它有资格出现在谷歌的搜索结果中。

点击"查看已爬网页面.”

接下来，点击"截图"标签后接"测试实时URL.”

该工具将向您显示古格尔博特如何呈现您的网站的屏幕截图。

将屏幕截图与您的网站在浏览器中的呈现方式进行比较，以检查是否存在任何问题。

JavaScript如何影响SEO？

JavaScript渲染可以对您网站的SEO性能产生积极和消极的影响。

例如，交互式网站元素和动态内容更新可以提供更好的页面体验. 谷歌倾向于以更好的回报搜索引擎结果页(SERP)可见性。

网站还使用JavaScript动态生成结构化数据-或架构标记-对于网页。

虽然没有确认谷歌排名因素，结构化数据可以在提高搜索引擎可见性方面发挥作用。

但是，如果没有javascript代码的正确实现，JS渲染可能会有SEO的缺点。

结果呢？

• 降低页面加载速度:网站加载速度会更慢。 而我们知道吗页面速度一直是一个谷歌排名因素很多年了。
• 爬行问题:搜索引擎有时会出现问题爬网和索引包含JavaScript的页面。 这会导致搜索引擎结果中的网站可见性降低。
• 重复内容: 当同一网页具有不同的格式时，例如，作为具有JavaScript呈现的页面和静态HTML页面，会出现问题。 搜索引擎不会知道在搜索结果中显示哪个版本，最终可能会显示两者。 网站上也可能出现重复的内容。

处理JavaScript渲染的3种方法

如果您的网站使用JavaScript（并且很可能是这样），您需要弄清楚的一个关键方面是如何它将呈现JS代码。 这一决定最终会影响您网站的性能和整体用户体验。

有三种JavaScript渲染方法可供选择：客户端渲染、服务器端渲染和静态站点生成。

所有这三种方法都有其优点和缺点，我们将进入下一个。

客户端渲染(CSR)

在CSR中，JavaScript代码在用户的浏览器中执行，而不是在服务器端执行。

当用户访问网站时，网站的服务器会使用仅包含页面基本结构的HTML文件进行响应。 以及JS和CSS文件的链接。

然后，用户的浏览器下载文件并在本地执行它们，呈现网站。

客户端渲染(CSR)的利弊

CSR的优势包括:

• 减少服务器负载:在用户浏览器中呈现JavaScript可减少服务器的整体负载，从而避免服务器性能出现问题
• 改善网站表现:在初始页面加载后，后续页面更新往往更快。 原因：CSR允许页面内容更新，而无需重新加载页面。
• 离线功能:一旦一个页面的初始资源下载，CSR允许用户访问该页面，即使没有互联网连接。

但CSR也有其缺点:

• 增加初始加载时间:使用CSR，在呈现页面之前，有必要在用户的设备上下载并执行JavaScript代码。 这可能会延长初始页面加载时间-可能导致更糟糕的UX。
• 爬网和索引问题:CSR可以使搜索引擎更难以抓取和索引包含JavaScript的页面。 可能对网站的搜索引擎可见性产生负面影响。
• 依赖于设备的性能:由于CSR依赖于用户设备上的代码执行，因此CSR在较旧的设备上可能表现不佳

服务器端渲染(SSR)

SSR的工作原理是在网站的服务器上执行JavaScript。

首先，用户使用浏览器访问URL。 浏览器向服务器请求网页。 服务器完全呈现页面，将其发送回浏览器。

服务器端渲染(SSR)的优缺点

JavaScript服务器端渲染提供:

• 改进的可抓取性和索引:搜索引擎将能够在抓取页面时整体呈现HTML内容
• 更快的初始加载时间:在服务器上完整呈现页面，然后将其发送到用户的浏览器会导致更快的初始加载时间。 由于用户的浏览器不必自行下载和执行JavaScript。
• 提高安全性:SSR减少了用户侧的输入。 这使得网站不易受到跨站点脚本（恶意方将有害代码注入其他可信网站）和其他类型的网络攻击的影响。

同时，服务器端渲染的主要缺点是它会对网站的服务器造成更大的负载，特别是在高流量期间。 这可能会减慢您的网站速度，甚至使其无法访问。

静态站点生成(SSG)

在SSG中，网站作为静态文件提供服务-这意味着完全存储在网站的服务器上，无需任何服务器端处理。

呈现发生在网站的服务器上。 但与SSR不同，它发生在用户发出请求之前。

静态站点生成(SSG)的优缺点

静态站点生成允许:

• 提高页面加载速度:与其他类型的渲染相比，静态站点生成可以显着提高加载速度
• SEO友好性:搜索引擎可以更轻松地抓取静态网站，从而实现更快的索引和排名
• 成本效益:与动态网站相比，静态网站需要更少的资源来操作

静态站点生成也有几个缺点:

• 缺乏动态功能:在静态网站上实现动态功能（如个性化或用户生成的内容）可能很困难
• 内容管理问题:管理静态站点上的内容更加复杂，因为每次更改都需要编码。 与动态站点不同，动态站点可以通过内容管理系统(CMS).

如何分析您的JavaScript网站

使用Semrush的现场审核工具来发现各种问题，可能会阻止您的JS驱动的网站实现更高的搜索引擎排名。

输入你的网站域名，然后按"开始审核"检查你的网站。

您将能够自定义审核设置，包括:

• 您希望该工具在对您的网站进行爬网时使用的用户代理
• 每次审核要检查多少页
• 您要分析（或排除）的特定页面

确保在"爬网程序设置"部分中启用JavaScript呈现。

然后，点击"开始现场审核."该工具将生成一份报告，详细说明您网站的整体健康状况。

点击"问题"tab。 在搜索框中键入"JavaScript"，以通过JS相关关注点进行过滤。

从这里，选择任何问题以查看具有它的页面列表。 您可能会遇到的一些常见问题是:

• 破碎的JavaScript文件:由于某种原因停止运行的JS文件。 查看这些文件并修复任何问题（或将其从您的网站中完全删除）。
• 未修改的JavaScript文件:包含不必要的行、空格和增加文件大小的注释的文件。 使用像这样的工具小型化机以减小它们的尺寸并使它们更快地加载。
• 未缓存的JavaScript文件:当网站没有为JS文件启用浏览器缓存（用于在用户设备上下载和存储文件以供重复使用的机制）时，会出现此问题。 在您的网站上启用浏览器缓存，这样文件就不需要用户的浏览器多次下载，从而减慢页面加载时间。

或者，单击"为什么以及如何解决它"在每个问题类型旁边学习如何解决它。

今天注册一个免费的Semrush帐户，开始提高您的JS网站的技术和有机性能。