如何抓取现代 SPA、PWA 和 AI 驱动的动态网站

❗免责声明：这是我们关于高级 Web 抓取的六篇系列文章的第二部分。想从头开始吗？阅读第一部分，跟上进度！

如果您热衷于网页抓取，那么您可能已经熟悉大多数常见挑战。但随着网络以超光速变化（尤其是得益于人工智能的蓬勃发展），抓取游戏中出现大量新变量。要成为网页抓取专家，您必须掌握所有这些变量！🔍

在本指南中，您将发现先进的网页抓取技术，并破解如何抓取当今现代网站的代码——即使结合了 SPA、PWA 和 AI！💪

SPA、PWAs 和 AI 驱动的网站有什么区别？

过去，网站只是一堆由网络服务器管理的静态页面。快进到现在，网络更像是一个繁华的大都市。🌇

我们从服务器端渲染转向了客户端渲染。为什么？因为我们的移动设备比以往更强大，所以让它们处理部分负载是合理的。📲

当然，你可能已经知道了这一切——但要达到今天的水平，我们必须知道我们从哪里开始。如今，互联网是静态网站、动态服务器呈现网站、SPA、PWA、AI 驱动网站等的混合体。🕸️

别担心——SPA、PWA 和 AI 并不是政府机构的秘密缩写。让我们来分解一下这些字母吧。🥣

SPA：单页应用程序

SPA（单页应用程序）并不意味着它实际上是一个页面，但它确实可以处理导航，而无需每次都重新加载所有内容。 想象一下Netflix ：点击并观看内容立即更改，而无需烦人的页面重新加载。🍿

它流畅、快速，并能让您保持流畅。

PWA：渐进式 Web 应用程序

PWAs 就像是强化版的网络应用。💊

从技术角度来说，PWA（渐进式 Web 应用程序）使用尖端的 Web 功能，让您直接从浏览器中获得原生应用程序的感觉。

• 离线功能？✅

• 推送通知？✅

• 通过缓存实现近乎即时的加载？✅

  
  

大多数情况下，您还可以直接在设备上安装 PWAs！

人工智能网站

人工智能网站带来了机器学习的魔力。从动态生成的设计和聊天机器人到个性化推荐，这些网站让你感觉网站了解你。🤖 ✨

这不仅仅是浏览。这是一种适合您的交互式体验。

有趣的部分来了

这些类别？并不互相排斥！

您可以像冻糕一样将它们分层。🍨 PWA 也可以是 SPA，两者都可以利用 AI 让事情变得更智能、更快速。所以，是的，它可以变得有点疯狂！

高级数据抓取：探索当今的网络丛林

长话短说，SPA、PWA 和 AI 驱动网站的兴起使网络变得更加复杂。没错，这意味着网络抓取比以往任何时候都更具挑战性，需要考虑大量新因素。😣

那么Web 3.0又如何呢？好吧，现在说它会对网络抓取产生什么影响还为时过早，但一些专家已经开始猜测了……

为了抢先绕过当今现代网站抓取中最常见（和最烦人）的障碍，请观看我们的朋友Forrest Knight的这段视频。第 3 章涵盖了您正在寻找的内容。👇

现在让我们看看在现代网站上执行高级网页抓取时需要考虑什么！

⚠️警告：如果前几个技巧听起来很熟悉，请不要灰心 — 继续前进，因为随着我们深入了解，会有很多新的见解！🧠

通过 AJAX 和客户端渲染实现动态内容

如今，大多数网站要么完全通过 JavaScript 在客户端呈现（即 客户端呈现），要么具有动态部分，可在您与页面交互时加载数据或更改页面的DOM 。

如果您在过去十年中使用过浏览器，那么您就会知道我们在说什么。这种动态数据检索并不是魔术——它是由 AJAX 技术驱动的！（不，不是足球俱乐部的 Ajax 🔴⚪——这里的魔术是另一种 😉）

您可能已经知道 AJAX 是什么，但如果不知道， MDN 的文档是一个很好的起点。那么，AJAX 对网页抓取来说重要吗？

使用Playwright、Selenium或Puppeteer等浏览器自动化工具，您可以命令脚本在浏览器中加载网页，包括 AJAX 请求。只需使用最好的无头浏览器工具之一，您就可以开始了！

如需更多指导，请阅读有关使用 Python 抓取动态网站的完整教程。

🚨 但是，等等... 这里有一个专业提示！🚨

大多数基于 AJAX 的页面通过 API 调用来获取动态数据。您可以在加载页面时打开浏览器 DevTools 中的“网络”选项卡来捕获这些请求：

您将会看到：

• 一个或多个REST API连接到不同的端点。

• 对单个端点进行一个或多个 GraphQL API 调用，您可以使用GraphQL进行查询。

  
  

在这两种情况下，这都为直接针对这些 API 调用的抓取打开了大门。只需拦截并提取该数据即可——就这么简单！🎉

观看下面的视频来快速了解一下：

延迟加载、无限滚动和动态用户交互

网页的互动性比以往任何时候都强，设计师们不断尝试新方法来吸引我们的注意力。另一方面，某些互动，如无限滚动，甚至已成为标准。（你是否发现自己无休止地滚动浏览 Netflix？一定要看看正确的系列！）

那么，我们如何解决网页抓取中所有这些棘手的交互问题呢？鼓声隆隆……🥁

使用浏览器自动化工具！ （是的，又来了！🎉）

最新的应用程序，例如Playwright ，具有内置方法来处理常见交互。当出现一些它们未涵盖的独特问题时？您通常可以添加自定义 JavaScript 代码来完成此操作。

尤其：

• Playwright 提供valuate()方法在页面上直接运行自定义 JS。

• Selenium 提供了execute_script() ，它允许您在浏览器中执行 JavaScript。

  
  

我们知道，您可能已经掌握了这些基础知识，因此无需在此深入研究。但如果您想了解全部内容，请参阅以下完整指南：

• 剧作家网页抓取
• Selenium 网页抓取

PWA 中的内容缓存

事情开始变得精彩了！🌶️

PWA 专为离线工作而设计，严重依赖缓存。虽然这对最终用户来说很棒，但它会给网页抓取带来麻烦，因为你需要检索新数据。

那么，在抓取数据时，尤其是在处理 PWA 时，如何处理缓存？大多数情况下，您会使用浏览器自动化工具。毕竟，PWA 通常是客户端呈现的和/或依赖于动态数据检索。

好消息是，每次运行浏览器自动化工具时，它们都会启动新的浏览器会话。就 Puppeteer 和 Playwright 而言，它们甚至默认以隐身模式启动。但问题在于：隐身/新会话并非无缓存或无 cookie ！🤯

您在抓取脚本中与网站交互的次数越多，浏览器开始缓存请求的可能性就越大——即使在隐身模式下也是如此。要解决此问题，您可以定期重启无头浏览器。

或者，使用 Puppeteer，你可以用一个简单的命令完全禁用缓存：

 await page.setCacheEnabled(enabled)

但是，如果 PWA 背后的服务器在其终端缓存数据怎么办？好吧，那完全是另一回事……👹

不幸的是，你对服务器端缓存无能为力。同时，一些服务器根据传入请求中的标头提供缓存响应。因此，你可以尝试更改一些请求标头，例如User-Agent 。🔄

发现用于网页抓取的最佳用户代理！

特定语境内容

有没有想过为什么网站似乎总是向你展示你太感兴趣的内容？这不是魔术，而是机器学习在起作用。💡

如今，越来越多的网页提供根据您的喜好定制的个性化内容。根据您的搜索、网站互动、购买、浏览和其他在线行为， ML 算法可以了解您的喜好，然后网页会相应地提供内容。

它有用吗？当然有用——节省大量时间！⏱️

这合乎道德吗？好吧，你确实同意了这些服务条款，所以……我们就说是吧。🤷

但网页抓取也面临挑战：在过去，你只需要担心网站偶尔会更改其 HTML 结构。而现在，网页不断变化，每次访问都可能带来不同的体验。

那么，你该如何处理这个问题呢？为了获得一致的结果，你可以使用预存储的会话启动浏览器自动化工具，这有助于确保内容保持可预测性。Playwright 等工具也为此目的提供了BrowserContext对象：

 const browserContext = await browser.newContext({ // load the context storage state from a JSON file storageState: "session.json" }); const page = await context.newPage();

为了避免个性化内容，你还应该努力标准化语言和 IP 位置等参数——因为这些参数也会影响显示的内容。🗺️

最后一条建议：在抓取数据之前，务必在隐身模式下检查网站。这样，您将获得一个“空白”会话，没有个性化数据。这有助于您更好地了解网站上通常提供的内容。🥷

人工智能生成的网站和网页

现在，当下的热门话题是：人工智能！🔥

人工智能正在改写我们构建网站的方式。过去需要几个月的时间，现在只需几秒钟或几分钟即可完成！⏱️

要快速了解基于人工智能的网络构建技术如何改变游戏，请观看以下视频：

结果如何？网站布局、结构和设计的变化速度比以往任何时候都快。甚至内容也得到了人工智能处理，编辑们在一瞬间就制作出了大量文本、图片和视频。⚡

这仅仅是一个开始……

想象一下，未来网站可以根据您点击或搜索的内容动态生成页面。就像它们实时变形，适应每个用户一样。

对于传统的网页抓取脚本来说，所有这些随机性都是一场噩梦。😱

但另一方面，正如人工智能加速网站更新一样，您可以使用人工智能驱动的网页抓取功能来动态调整脚本。想深入了解吗？阅读有关人工智能网页抓取的指南。

另一个可能的解决方案（特别是为了避免错误）是创建独立的进程来监视页面的变化，并在脚本中断之前提醒您。例如，通过 Telegram 消息。📩

了解如何构建页面更改 Telegram 通知机器人。

AI 机器人检测：所有机器人防护技术之母

到目前为止，我们介绍的几乎每个解决方案都假设现代网站具有高度交互性。这意味着，如果你想要抓取它们，你必须使用浏览器自动化工具。但这种方法有一个弱点：浏览器本身！

浏览器不是为抓取数据而设计的！ 😲

当然，您可以使用扩展程序（例如Puppeteer Extra ）对其进行调整，或者实施上述所有调整。但随着当今人工智能驱动的机器人检测，传统浏览器越来越容易被发现，尤其是当网站采用用户行为分析等先进的反抓取技术时。

那么，解决方案是什么？ 一个功能强大的抓取浏览器可以：

• 像常规浏览器一样以头戴式模式运行，以便与真实用户融合。

• 在云中轻松扩展，节省您的时间和基础设施成本。

• 集成来自最大的、最可靠的代理网络之一的轮换 IP。

• 自动解决验证码、管理浏览器指纹、自定义 cookie 和标头，同时为您处理重试。

• 与 Playwright、Selenium 和 Puppeteer 等顶级自动化工具无缝协作。

  
  

这不仅仅是一个未来主义的想法。它就在这里，而且这正是Bright Data 的 Scraping Browser所提供的。想深入了解吗？请观看此视频：

最后的想法

现在您知道了现代网络抓取的要求——尤其是在采用 AI 驱动的 SPA 和 PWA 时！

您肯定已经在这里学到了一些专业技巧，但请记住，这只是我们六部分高级网页抓取冒险之旅的第二部分！所以，系好安全带，因为我们即将深入探讨更前沿的技术、巧妙的解决方案和内幕技巧。

下一站？更快、更智能的抓取工具的优化秘诀！🚀