从历史上看，Googlebot 等搜索引擎机器人不会抓取和索引使用 JavaScript 动态创建的内容，只能查看静态 HTML 源代码中的内容。
然而，JavaScript 的使用以及诸如 AngularJS、React、Vue.JS、单页应用程序 (SPA) 和渐进式 Web 应用程序 (PWA) 等框架出现了巨大的增长。
这意味着特别是谷歌已经有了显着的发展，弃用了他们旧的 AJAX 抓取方案指南，即转义片段 #! 15 年 10 月的 URL 和 HTML 快照，现在通常能够像现代浏览器一样呈现和理解网页。
虽然谷歌通常能够抓取和索引大多数 JavaScript 内容，但他们推荐服务器端渲染、预渲染或动态渲染，而不是依赖客户端 JavaScript，因为它“难以处理 JavaScript，并非所有搜索引擎爬虫都能成功或立即处理它’。
这是今天重要的是能够读取DOM的JavaScript已开始发挥作用，构建了网页后，了解原始响应HTML之间的差异，爬行和评估网站时。
传统的网站爬虫无法爬取 JavaScript 网站，直到我们在我们的Screaming Frog SEO Spider软件中推出了第一个JavaScript 渲染功能。这意味着首先在浏览器中完全呈现页面，然后抓取呈现的 HTML 后 JavaScript。
我们为我们的渲染引擎集成了 Chromium 项目库，以尽可能地模拟 Google。
2019 年，谷歌更新了他们之前基于 Chrome 41的网络渲染服务 (WRS)，使其成为“常青树”，并使用最新、稳定的 Chrome 版本——支持超过 1,000 多项功能。
SEO Spider 使用稍早版本的 Chrome，在撰写本文时为 69 版，但我们建议在更新此应用程序时单击“帮助 > 调试”并向下滚动到“Chrome 版本”行，以查看应用程序中的确切版本频繁地。
因此，虽然渲染显然是相似的，但它不会完全相同，因为支持的功能可能会有一些小的差异（也有人认为 Chrome 本身的确切版本也不会完全相同）。但是，一般来说，WRS 支持与其使用的 Chrome 版本相同的 Web 平台特性和功能，您可以在CanIUse.com 上比较 Chrome 版本之间的差异。
为什么你不应该在启用 JavaScript 的情况下盲目地爬行
虽然它在当今的审计中必不可少，但我们建议在需要时有选择地使用 JavaScript 爬网，并且仅在仔细考虑的情况下默认启用它。
您不必确定站点本身是否使用 JavaScript。您可以在启用 JavaScript 渲染的情况下继续进行爬网，并且将爬网使用 JavaScript 的站点。但是，您应该小心，因为在启用 JavaScript 的情况下盲目爬行会出现问题。
首先，对于服务器来说，JavaScript 抓取速度较慢且强度较大，因为需要获取所有资源（无论是 JavaScript、CSS、图像等）来呈现每个网页。这对于较小的网站来说不是问题，但对于拥有数千个或更多页面的大型网站来说，这可能会产生巨大的影响。
如果您的站点不依赖 JavaScript 来显着地动态操作网页，那么通常就没有必要浪费时间和资源。
更重要的是，如果您正在审核一个网站，您应该知道它是如何构建的，以及它是否依赖任何客户端 JavaScript 来获取关键内容或链接。JavaScript 框架可能彼此完全不同，并且 SEO 的含义与传统的 HTML 站点大不相同。
JavaScript 核心原则
虽然 Google 通常可以抓取 JavaScript 并将其编入索引，但仍有一些核心原则和限制需要了解。
- 页面的所有资源（JS、CSS、图像）都需要可供抓取、呈现和索引。
- Google 仍然需要一个页面的干净、唯一的 URL，并且链接必须位于正确的 HTML 锚标记中（您可以提供静态链接，也可以调用 JavaScript 函数）。
- 它们不会像用户一样点击并在渲染后加载其他事件（例如点击、悬停或滚动）。
- 当确定网络活动已停止或超过时间阈值时，将拍摄呈现的页面快照。如果页面需要很长时间来呈现它可能会被跳过并且元素不会被看到和索引，则存在风险。
- 通常，Google 会呈现所有页面，但如果初始 HTTP 响应或静态 HTML 中包含“noindex”，则它们不会将页面排队以进行呈现。
- 最后，Google 的呈现与索引无关。谷歌最初会抓取网站的静态 HTML，并推迟呈现，直到它有资源。只有这样，它才会发现呈现的 HTML 中可用的更多内容和链接。从历史上看，这可能需要一周的时间，但 Google 已经取得了重大改进，现在中位数时间已降至仅 5 秒。
您必须通过 JavaScript SEO 了解这些内容，因为您的生死取决于排名的呈现。
谷歌关于 JavaScript 和渲染策略的建议
重要的是要记住，Google 建议不要依赖客户端 JavaScript 并建议使用渐进式增强进行开发，仅使用 HTML 构建站点的结构和导航，然后使用 AJAX 改进站点的外观和界面。
如果您使用的是 JavaScript 框架，而不是完全依赖客户端呈现的方法，Google 建议使用服务器端呈现、预呈现或混合呈现，这可以提高用户和搜索引擎爬虫的性能。
服务器端渲染 (SSR) 和预渲染执行页面 JavaScript，并向用户和搜索引擎提供页面的渲染初始 HTML 版本。
混合渲染（有时称为“同构”）是可以在服务器端为初始页面加载和 HTML 进行渲染，然后在客户端为非关键元素和页面进行渲染。
许多 JavaScript 框架（例如 React 或 Angular Universal）允许服务器端和混合渲染。
或者，帮助爬虫的解决方法是使用动态渲染。当无法对前端代码库进行更改时，这尤其有用。动态呈现意味着在为用户呈现的客户端和为特定用户代理（在本例中为搜索引擎）呈现的预呈现内容之间切换。这意味着爬虫将获得网页的静态 HTML 版本以进行爬网和索引。
动态渲染被视为权宜之计，而不是长期策略，因为它没有上述某些解决方案的用户体验或性能优势。如果您已经进行了此设置，那么您可以通过将用户代理切换到 SEO Spider 中的 Googlebot 来测试此功能。
有关 Google 如何处理 JavaScript 的更多信息，请查看他们的JS 基础指南。
JavaScript 索引复杂性
尽管 Google 通常能够抓取 JavaScript 并将其编入索引，但还有进一步的考虑。
谷歌有一个两阶段的索引过程，他们首先对静态 HTML 进行抓取和索引，然后在资源可用于呈现页面时返回，并在呈现的 HTML 中抓取和索引内容和链接。
抓取和呈现之间的时间可能需要长达一周的时间，这对于依赖及时内容的网站（例如发布商）来说是有问题的。虽然在 2019 年谷歌 Chrome 开发者峰会上宣布抓取和渲染之间的中位时间仅为 5 秒。
如果由于某种原因渲染不那么快，那么原始响应中的元素（例如元数据和规范）可以用于页面，直到谷歌在资源可用时开始渲染它。所有页面都将被呈现，除非它们有一个机器人元标记或标头指示 Googlebot 不索引页面。所以初始 HTML 响应需要一致，并且应该被审计，即使您依赖客户端方法。
其他搜索引擎（如Bing）难以大规模呈现和索引 JavaScript，并且由于 JavaScript 的脆弱性，很容易遇到阻碍呈现和内容索引的错误。应该使用特征检测，并且应该通过回退优雅地处理错误。
本指南的目的实际上并不是详细介绍 JavaScript SEO，而是更具体地说，如何使用我们的Screaming Frog SEO Spider软件通过客户端方法识别和抓取 JavaScript 网站。
如何识别 JavaScript 站点
识别使用 JavaScript 框架构建的站点可能非常简单，但是，识别使用 JavaScript 动态调整的部分、页面或较小的元素可能更具挑战性。
您可以通过多种方式了解网站是否是使用 JavaScript 框架构建的。
爬行
这是许多人的起点，您可以继续使用标准配置开始抓取网站。默认情况下，SEO Spider将使用“旧 AJAX 抓取方案”进行抓取，这意味着禁用 JavaScript，但如果网站设置正确，则将遵循旧的 AJAX 抓取方案。
如果该站点使用 JavaScript 并根据 Google 的旧 AJAX 抓取方案设置了转义片段 (#!) URL 和 HTML 快照，那么它将被抓取并且 URL 将显示在SEO Spider的“AJAX”选项卡下。此选项卡仅包含专门使用旧 AJAX 抓取方案的页面，而不是每个使用 AJAX 的页面。
AJAX 选项卡显示 URL 的丑陋和漂亮版本，并且与 Google 一样，SEO Spider 获取 URL 的丑陋版本并将预渲染的 HTML 快照映射到漂亮的 URL。某些 AJAX 站点或页面可能不使用哈希片段，因此元片段标记可用于为爬虫识别 AJAX 页面。
如果网站是使用 JavaScript 构建的，但不遵守旧的抓取方案或预渲染页面，那么您可能会发现只有主页被抓取并带有 200 OK 响应，可能还有几个 JavaScript 和 CSS 文件，但并不多别的。
您会发现该页面在工具底部的选项卡中几乎没有“外链”，因为它们没有被呈现，因此无法看到。
在上面的示例屏幕截图中，SEO Spider 中的“outlinks”选项卡仅在页面上显示 JS 和 CSS 文件。
客户问答
这真的应该是第一步。了解网站的最简单方法之一是与客户和开发团队交谈并提出问题。网站建在什么地方？它使用什么 CMS？
非常明智的问题，你可能会得到一个有用的答案。
禁用 JavaScript
您可以在浏览器中关闭 JavaScript 并查看可用内容。这可以在 Chrome 中使用内置的开发人员工具实现，或者如果您使用 Firefox，则 Web 开发人员工具栏插件具有相同的功能。关闭 JavaScript 后内容是否可用？您可能只看到一个空白页面。
通常，在审计期间禁用 cookie 和 CSS 以及诊断可能遇到的其他抓取问题也很有用。
审计源代码
一个简单的方法，通过右键单击并查看原始 HTML 源代码。实际上有很多文本和 HTML 内容吗？通常有使用 JS 框架和库的标志和提示。您能否在 HTML 源代码中看到浏览器中呈现的内容和超链接？
您正在浏览器处理代码之前查看代码，以及 SEO Spider 将在未处于 JavaScript 呈现模式时抓取的内容。
如果您运行搜索但无法在源代码中找到它们，那么它们将在 DOM 中动态生成，并且只能在呈现的代码中查看。
如果身体像上面的例子一样几乎是空的，这是一个非常明确的迹象。
审计呈现的代码
呈现的代码与静态 HTML 源代码有何不同？通过在 Chrome 中右键单击并使用“检查元素”，您可以查看呈现的 HTML。您经常可以在呈现的代码中看到 JS 框架名称，例如下面示例中的“React”。
您会发现内容和超链接在呈现的代码中，而不是原始 HTML 源代码中。这是 SEO Spider 在 JavaScript 渲染模式下会看到的内容。
通过单击打开的 HTML 元素，然后“复制 > 外部 HTML”，您可以将呈现的源代码与原始源代码进行比较。
工具栏和插件
各种工具栏和插件，例如BuiltWith 工具栏、Wappalyser和Chrome 的 JS 库检测器，可以帮助您一目了然地识别网页上使用的技术和框架。
这些并不总是准确的，但可以提供一些有价值的提示，无需太多工作。
仍需人工审核
这些要点应该可以帮助您轻松识别使用 JS 框架构建的站点。但是，始终建议进一步分析以发现 JavaScript 元素，手动检查页面模板，审核可能需要用户交互的不同内容区域和元素。
我们看到许多电子商务网站依赖 JavaScript 将产品加载到类别页面上，网站管理员和 SEO 经常会忽略这一点，直到他们意识到产品页面没有在标准（非渲染）抓取中被抓取。
此外，您可以通过从整个网站抓取精选模板和页面（禁用和启用 JavaScript）并分析元素和内容的任何差异来支持手动审核。有时，网站会使用变量来表示标题、元标记或规范等元素，这些元素仅凭肉眼很难分辨。
我们建议您阅读 Justin Briggs 的SEO JavaScript 审计指南，其中详细介绍了有关此分析阶段的更多实用细节。
如何使用 SEO Spider 抓取 JavaScript
一旦您确定了要抓取的客户端 JavaScript，接下来您需要将 SEO Spider 配置为 JavaScript 呈现模式。这将允许您抓取动态的、富含 JavaScript 的网站和框架，例如 Angular、React 和 Vue.js。
以下 7 个步骤应该可以帮助您为遇到的大多数情况配置爬网。
1) 将渲染配置为“JavaScript”
要抓取 JavaScript 网站，请打开 SEO Spider，单击“配置 > 蜘蛛 > 渲染”并将“渲染”更改为“JavaScript”。
2) 检查资源和外部链接
确保在“配置 > 蜘蛛”下勾选图像、CSS和JS等资源。
如果资源位于不同的子域或单独的根域中，则应勾选“检查外部链接”，否则它们将不会被抓取并因此呈现。
这是 SEO Spider 中的默认配置，因此您只需单击“文件 > 默认配置 > 清除默认配置”即可恢复此设置。
3) 配置用户代理和窗口大小
您可以配置的用户代理下的“配置> HTTP标头>用户代理”和窗口大小通过点击“配置>蜘蛛>渲染”在JavaScript渲染模式你自己的要求。
这是一个可选步骤，窗口大小设置为标准配置中 Googlebot 的桌面尺寸。预计谷歌很快就会转向移动优先索引，因此如果您正在执行移动审核，您可以配置 SEO Spider 来模仿智能手机的 Googlebot。
4) 抓取网站
现在在“输入蜘蛛网址”框中键入或粘贴您希望抓取的网站，然后点击“开始”。
爬行体验与标准爬行完全不同，因为开始出现在 UI 中的任何内容都需要一些时间，然后突然间大量 URL 一起出现。这是因为 SEO Spider 在显示数据之前等待所有资源被获取以呈现页面。
5) 监控被阻塞的资源
密切关注“响应代码”选项卡内“阻止的资源”过滤器下出现的任何内容。您可以浏览右侧的概览窗格，而不是专门单击选项卡。如果 JavaScript、CSS 或图像通过 robots.txt 被阻止（不响应或错误），那么这将影响呈现、抓取和索引编制。
还可以在“呈现页面”选项卡中查看每个页面的被阻止资源，该选项卡与下方窗口窗格中呈现的屏幕截图相邻。在严重的情况下，如果一个 JavaScript 站点完全阻塞 JS 资源，那么该站点根本不会爬行。
如果影响渲染的关键资源被阻止，则取消阻止它们进行爬网（或允许它们使用自定义 robots.txt进行爬网）。您可以使用排除和自定义 robots.txt 功能测试不同的场景。
也可以通过“批量导出 > 响应代码 > 被阻止的资源链接”报告批量导出受影响的页面和单个被阻止的资源。
6) 查看渲染页面
您可以在“渲染页面”选项卡中查看 SEO Spider 抓取的渲染页面，该选项卡在 JavaScript 渲染模式下爬行时会动态显示在用户界面底部。在顶部窗口中选择 URL 时，这会填充下部窗口窗格。
在分析现代搜索机器人能够看到的内容时，查看呈现的页面至关重要，并且在暂存阶段执行审核时尤其有用，因为您无法在 Search Console 中使用 Google 自己的 Fetch & Render。
例如，如果您已将用户代理和视口调整为 Googlebot 智能手机，您就可以准确地看到每个页面在移动设备上的呈现方式。
如果您在呈现的页面屏幕截图中发现任何问题，并且不是由于资源阻塞造成的，您可能需要考虑调整AJAX 超时，或者深入挖掘呈现的 HTML 源代码以进行进一步分析。
7) 比较原始和渲染的 HTML
在使用 JavaScript 时，您可能希望在 SEO Spider 中存储和查看 HTML 和呈现的 HTML。这可以在“配置 > 蜘蛛 > 提取”下设置，并勾选适当的商店 HTML和商店呈现的 HTML选项。
这将填充下方窗口的“查看源代码”窗格，使您能够比较差异，并确信 DOM 中存在关键内容或链接。
这对于各种场景都非常有用，例如调试浏览器和 SEO Spider 中看到的内容之间的差异，或者仅在分析 JavaScript 的呈现方式以及某些元素是否在代码中时。
8) 调整 AJAX 超时
根据您抓取的响应，您可以通过在 JavaScript 渲染模式下的“配置 > 蜘蛛 > 渲染”下调整设置为 5 秒的“ AJAX 超时”来选择何时拍摄渲染页面的快照。
之前的内部测试表明，Googlebot 在 5 秒时拍摄了渲染页面的快照，当我们在 2016 年更公开地讨论它时，业内许多人都同意这一点。
我们的测试表明 Googlebot 愿意等待（大约）5 秒的时间来获取渲染内容的快照。需要在那之前很好。
– 尖叫青蛙 (@screamingfrog) 2016 年 10 月 13 日
实际上，这是通过 Google Search Console 实现的，现实生活中的 Googlebot 比上述更灵活，它们根据页面加载内容所需的时间、考虑网络活动和缓存等因素进行调整。但是，Google 显然不会永远等待，因此您要抓取和编入索引的内容需要快速可用，否则根本看不到。我们已经看到了 JS 失火导致渲染加载更晚的情况，并且由于页面突然被索引并在几乎没有内容的情况下评分，整个网站的排名直线下降。
值得注意的是，随着时间的推移，我们的软件进行的抓取通常比常规的 Google 抓取需要更多的资源。这可能意味着站点响应时间通常较慢，并且 AJAX 超时需要调整。
您会知道，如果网站无法正确抓取、“内部”选项卡中的“响应时间”超过 5 秒，或者网页似乎没有在“中”正确加载和呈现，则可能需要对此进行调整。呈现页面”选项卡。
