paint-brush
如何抓取现代 SPA、PWA 和 AI 驱动的动态网站经过@brightdata
984 讀數
984 讀數

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

经过 Bright Data9m2024/11/14
Read on Terminal Reader
Read this story w/o Javascript

太長; 讀書

本指南是高级网页抓取系列的第 2 部分,深入探讨了抓取现代动态网站的复杂性。随着单页应用程序 (SPA)、渐进式 Web 应用程序 (PWA) 和 AI 驱动的网站的出现,网络不断发展,传统抓取面临新的挑战。本指南介绍了 SPA 的无缝导航、PWA 的类似应用程序的功能,以及 AI 如何个性化内容——从而产生客户端渲染、AJAX 和缓存等障碍。抓取技术包括浏览器自动化工具(例如 Playwright)和绕过机器人检测、管理动态数据和处理个性化内容的策略。本指南预览了即将推出的有关优化抓取工具以提高速度和可靠性的技巧。

People Mentioned

Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - 如何抓取现代 SPA、PWA 和 AI 驱动的动态网站
Bright Data HackerNoon profile picture
0-item

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


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


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

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

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


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


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


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

SPA:单页应用程序

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


Fry 并不是唯一一个对使用 SPA 时页面刷新存有疑虑的人


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

PWA:渐进式 Web 应用程序

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


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

  • 离线功能?✅

  • 推送通知?✅

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


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

人工智能网站

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


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

有趣的部分来了

这些类别?并不互相排斥!


Web → SPA → PWA → AI


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

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

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


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


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


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


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

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

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


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


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


并不真地…


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


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


🚨 但是,等等... 这里有一个专业提示!🚨


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


注意“Fetch/XHR”用于过滤 AJAX 请求


您将会看到:

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

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


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

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

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

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


是时候学习新东西了!别再浪费时间向下滚动了


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


使用浏览器自动化工具! (是的,又来了!🎉)


旧闻就是好消息


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


尤其:

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

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


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

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 时!


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


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