你还记得互联网的“狂野西部”时期吗？那时每个网站设计师都随心所欲，网页里充斥着不协调的配色、古怪的界面设计，还有被拉伸变形的图片。那真是个令人难忘的时代。
更别提用手机或平板访问那些网站时的景象了。导航不仅令人头疼，简直就是种折磨。
如今一切都变得更加流畅，既遵循了良好的用户界面规范，又针对各种屏幕尺寸进行了优化。这最后一点要归功于JavaScript。正是这种神奇的语言，将枯燥的静态页面转变为快速、动态的体验。
简而言之，当你为人类优化网站时，JS表现出色。但机器人却难以应对。事实上，基础的网页爬虫若没有额外功能，根本无法从动态网站中提取任何HTML。别担心，本文将探讨原因并介绍解决方法。
网站其实并不需要 JavaScript。仅使用 HTML 和 CSS 也能正常运行（如果你想营造 80 年代的复古风格，甚至只用 HTML 也行）。那么，人们为何还要额外添加 JS 呢？答案即将揭晓。
网站就像房子一样，需要一个坚实的基础。而这个基础的根基正是 HTML 代码。通过添加一些标签和元素，你可以利用 HTML 构建并排列版块、标题、链接等内容。
在构建网站时，几乎没有什么事情是 HTML 代码无法做到的。一个 HTML 元素的结构由开始标签、结束标签以及两者之间的内容组成。网站会根据这两个标签所定义的格式，显示它们之间的信息。
通过学习这种简单的编码方式，你将能够为网站添加标题、链接、图片等丰富内容。后续，你还可以使用 CSS 来指定每种样式应应用于哪个元素。
CSS（全称层叠样式表）是 HTML 的点睛之笔。如果说 HTML 是网站结构，那么 CSS 就是装饰。它允许你在整个页面中更改颜色、字体和页面布局。
至此，网站已基本可以上线，虽然看起来略显单调。如果将过多数据塞进太少的页面，可能会导致加载时间过长；反之，若将内容分散在太多页面上，又会让导航变得繁琐。
因此，是时候提升用户体验了。JavaScript就像房屋的公用设施，虽然对结构并非至关重要，但对居住其中的人来说却能带来巨大的改变。
JavaScript 主要应用于网页浏览器和网络应用，但它是当下最流行的编程语言之一，在软件、服务器以及嵌入式硬件控制系统中都能见到它的身影。
以下是它众多应用场景中的几个示例：
网络上提供了多种 JavaScript 框架，例如 AngularJS、ReactJS 和 Node.js。利用这些框架，您可以缩短开发基于 JavaScript 的网站和应用程序所需的时间。JavaScript 使开发人员能够轻松构建大规模应用程序，让开发大型 Web 应用程序的整个过程变得更加便捷。
近年来，许多网站变得日益复杂，因此突然需要具备“状态管理”功能，以保存客户端的数据和设置。
具有状态的系统是一种动态组件，它将重要事件作为状态数据进行记忆，并据此调整网站行为。通过一个示例可以更直观地理解：
鲍勃访问某网站并注册了一个账户。系统会记住他的登录信息，并在下次访问时保留其状态。这样，鲍勃就无需再次进入登录页面，因为网站会自动将他重定向至会员专属区域。
在后台，一个进程会创建一个中间系统，用于记录用户信息，并自动将其重定向到正确的服务器或网站。
另一方面，无状态系统既不会记住用户信息，也不会进行适应性调整，每次都会将用户导向登录页面并要求其重新输入凭据。
这一原则适用于网页设计的任何环节。无论您在主体中进行何种修改，状态都会相应地随之变化。它操控着网页上显示的无数组件。有状态性使网站能够存储用户特定信息，从而提供个性化体验（访问权限），包括交互历史和保存的设置。
网页设计允许你在服务器上存储用户信息，而浏览器存储虽然也能记住数据，但仅限于当前会话结束前。
JavaScript 是一种简单的编程语言，旨在为浏览器中的网站提供动态功能。当网页加载时，其 JS 代码由浏览器的 JavaScript 引擎执行，并转换为机器可读的代码。虽然这缩短了加载时间，但动态修改的网站可能会阻碍网页抓取。
基础的爬虫会向网站发送 HTTP 请求，并将响应中的内容存储下来。在正常情况下，该响应将包含页面的 HTML 代码。然而，动态网站返回的是 JavaScript 代码，其中并不包含任何有价值的数据。
此外，许多网站能够检测访问者是否具备执行 JavaScript 的能力。由于普通用户通过浏览器浏览互联网，他们无法执行 JavaScript，这表明他们并非使用浏览器访问。由此，网站方便能明确判断访问者是机器人而非真人。这通常会导致机器人的 IP 地址被封禁。
简而言之，若没有合适的工具，无法抓取使用 JavaScript 的网站；而无法执行 JavaScript 的爬虫比能执行的爬虫更容易被识别。
幸运的是，有一个解决方案：无头浏览器。这些程序本质上与普通浏览器相同，具备相同的功能，但缺少标准的图形用户界面。因此，要通过无头浏览器进行操作，必须使用命令行。虽然它们主要用于测试应用程序和网站，但也能执行 JavaScript 代码，这使得它们成为网络爬虫的理想插件。
一旦无头浏览器处理了 JavaScript 代码，网站就会返回常规的 HTML 内容，也就是你真正想要的数据。
无头浏览器相较于其他浏览器的另一大优势在于其速度。由于无需处理图形用户界面（GUI）、加载 JavaScript 或 CSS，它能以更快的速度处理网页，这对网络爬虫而言尤为理想，因为这不会过多拖慢爬虫的运行速度。
若您希望构建自制的数据提取方案，有两种备受青睐的编程语言：Python 和 Node.js。
若选择 Python，执行 JavaScript 渲染的首选库是 Selenium。它能可靠地执行 JavaScript、与按钮交互、滚动页面以及填写在线表单，主要应用于浏览器自动化的开源项目中。WebDriver 协议可控制 Chrome 和 Firefox 等浏览器，并支持远程和本地运行。
Selenium最初作为跨浏览器测试工具开发，如今已迅速演变为一套功能全面的网页浏览器自动化工具集。由于许多网站采用单页应用架构，甚至对真实用户也频繁弹出验证码，加之针对机器人检测的高度警惕，数据提取正变得越来越棘手。
借助 Selenium，机器人可以读取并执行 JavaScript 代码，从而访问 HTML 内容、填写表单以登录网站、滚动网页并模拟点击操作。
但若您使用 Python 进行数据抓取，请不要仅止步于 Selenium。您还可以配合使用 BeautifulSoup 库，它能让 HTML 和 XML 解析变得轻而易举；随后再借助 Pandas 提取数据并将其存储为 CSV 文件。
Puppeteer 是一个 Node.js 包，它允许你运行无头版 Chrome 或 Chromium，并集成开发者工具协议。该项目由 Chrome 开发者工具团队和一个出色的开源社区共同维护。
该方案将助您在网站结构不断变化的背景下管理网络爬虫。数据抓取的主要难点在于，工具需要持续更新以适应变化，从而避免受服务器限制。
Node.js 能做什么？它能让 JavaScript 免费同时运行于客户端和服务器端，同时大幅加快网络应用程序的开发速度。
但让我们聚焦于网页抓取领域的明星——Puppeteer。它允许您手动操控网页浏览器，从填写表单、截屏到自动化 UI 测试，无所不能。
如果您之前从未接触过这些库，或者刚刚开始您的网页抓取之旅，我理解这一切看起来可能令人望而生畏。不过，还有一种更便捷的解决方案可以为您代劳：API。
API（即应用程序接口）能让用户直接获取数据。只需向 API 端点发送请求，应用程序就会返回您所需的数据。更重要的是，数据会自动以 JSON 格式呈现。
使用 API 的最大优势在于，它能与您的其他软件产品或脚本轻松集成。只需几行代码，在获取专属 API 密钥并阅读文档后，您就能将抓取到的数据直接导入其他应用程序。
以下是 WebScrapingAPI 为您提供的功能概览：
从网页设计、HTML、CSS、JavaScript到无头浏览器，万维网始终是一个循环——数据自由流通。这正是互联网存在的初衷。还有什么比数据采集更能充分利用海量内容呢？毕竟，如果没有这些宝贵的信息，企业、开发者乃至普通人今天又会身处何方？
这确实是推动我们前进的动力。既然您已了解 JavaScript 如何影响当今的互联网，您就更有准备开始进行网页抓取，我也希望您能付诸实践。如果您时间紧迫，不妨免费试用我们的解决方案 WebScrapingAPI。试用期为两周，您将能够使用所有核心功能，例如 JS 渲染和住宅代理。
快来了解该 API 的强大功能，若您仍存疑虑，欢迎联系我们响应极快的客服团队获取指导。
加布里埃尔·乔奇（Gabriel Cioci）是 WebScrapingAPI 的全栈开发工程师，负责构建和维护该平台的网站、用户面板以及面向用户的核心功能模块。
