Javascript 如何影响网页设计和网页抓取

Gabriel Cioci，2021 年 8 月 27 日

你还记得互联网的狂野西部阶段吗？那时，每个网站设计师都各行其是，网页上充斥着不匹配的颜色、奇怪的用户界面选择和拉长的图片。那真是一个生机勃勃的时代。

此外，请回想一下用手机或平板电脑访问这些网站时的情形。导航不仅是件苦差事，而且简直是件痛苦的事。

现在，一切都更加精简，以良好的用户界面实践为基础，并针对各种屏幕尺寸进行了优化。我们要感谢 Javascript 的最后一部分。它是一种神奇的语言，能将枯燥的静态页面转化为快速的动态体验。

简而言之，JS 在为人类优化网站时非常出色。而另一方面，机器人却不能很好地处理它。事实上，如果没有额外的功能，基本的网络刮擦工具无法从动态网站中提取任何 HTML。别担心，我们将在本文中介绍原因以及如何克服这一问题。

网站不需要 Javascript。你可以只使用 HTML 和 CSS（如果你想要 80 年代的风格，甚至可以只使用 HTML）。那么，为什么还要额外添加 JS 呢？你马上就会知道了。

网站为什么要使用 Javascript？

网站就像房屋一样，需要坚实的地基。地基的根本就是 HTML 代码。通过添加一些标记和元素，您可以使用 HTML 来构建和安排版块、标题、链接等。

在创建网站时，很少有什么事情是 HTML 代码做不到的。HTML 元素的结构包括开头标签、结尾标签和中间的内容。网站将按照这两个标签所规定的格式显示这两个标签之间的信息。

通过学习这种简单的编码方式，你就能在网站上添加标题、链接、图片等内容。之后，您可以使用 CSS 来指定每个元素适用的样式。

CSS 是层叠样式表的简称，是 HTML 的点缀。如果 HTML 是结构，那么 CSS 就是装饰。它允许你改变整个页面的颜色、字体和页面布局。

此时，网站就可以开始运行了，尽管有点平淡无奇。如果将过多的数据放在过少的页面上，也会导致加载时间过长；如果将内容分散在过多的页面上，则会使浏览变得乏味。

因此，是时候提升体验了。Javascript 就像家中的水电设施，它对房屋结构来说并不重要，但对居住在这里的人来说却大有不同。

JavaScript 主要用于网络浏览器和网络应用程序，但也是目前最流行的语言之一，在软件、服务器和嵌入式硬件控制中都能找到它的身影。  

下面举例说明了它的多种用途：

• 网站上的音频和视频播放器
• 动画
• 下拉菜单
• 放大和缩小照片
• 滑动浏览主页上的图像
• 创建确认框

在网络上可以访问各种 JavaScript 框架，如 AngularJS、ReactJS 和 Node.js。使用这些框架可以减少创建基于 JavaScript 的网站和应用程序所需的时间。JavaScript 可让开发人员轻松创建大规模应用程序。它使制作大规模网络应用程序的整个过程变得更加容易。

近来，许多网站变得越来越复杂，突然需要保存客户端数据和设置的状态。

什么是网页设计中的状态性？

有状态系统是一种动态组件，它将重要事件作为状态数据进行记忆，并据此调整网站。举个例子更容易理解：

鲍勃访问了一个网站并注册了一个账户。系统将记住他的登录名，并在他下次访问网站时记住他的状态。这样，鲍勃就不必进入登录页面，因为网站会自动将他重定向到网站的会员专区。

在幕后，一个程序会创建一个中间系统，记住用户的详细信息，并自动将其重定向到正确的服务器或网站。

另一方面，无状态系统既不记忆也不适应，它会将用户发送到登录页面，并要求用户每次都重新输入凭据。

这一原则适用于网页设计的任何部分。无论你在主体中修改了什么，状态都会相应跟进。它操纵着网页上显示的无数组件。状态性允许网站存储用户特定信息，以提供个性化体验（访问权限），包括历史交互和保存的设置。

网页设计允许您在服务器上存储用户信息，而浏览器存储仍可记住数据，但只能到会话结束。

Javascript 如何影响网络搜索？

Javascript 是一种简单明了的编程语言，旨在为浏览器中的网站提供动态功能。加载网页时，浏览器的 Javascript 引擎会执行 JS 代码，并将其转化为机器可读代码。虽然这样可以缩短加载时间，但动态修改的网站可能会妨碍网络搜索。

基本刮擦器会向网站发出 HTTP 请求，并将内容存储在响应中。在正常情况下，响应将包含网页的 HTML 代码。然而，动态网站会返回 Javascript，其中没有任何有价值的数据。

此外，很多网站都能检测访问者是否能执行 Javascript。由于普通用户是通过浏览器浏览互联网的，因此他们无法执行 Javascript，这就表明他们使用的不是浏览器。这样，网站就很清楚是机器人而非人类在访问它。这通常会导致机器人的 IP 被屏蔽。

简而言之，如果没有适当的工具，就无法对使用 JS 的网站进行刮擦，而无法执行 JS 的刮擦程序要比可以执行 JS 的刮擦程序更容易捕获。

网络清除器如何处理 Javascript？

幸运的是，有一种解决方案：无头浏览器。这些程序本质上与普通浏览器相同，具有相同的功能，但缺少标准的图形用户界面。因此，要通过无头浏览器导航，就必须使用命令行。虽然无头浏览器主要用于测试应用程序和网站，但它们也可以执行 Javascript 代码，因此是网络搜刮程序的理想插件。

一旦无头浏览器处理了 JS 代码，网站就会发送普通的 HTML，也就是你真正想要的数据。

无头浏览器的另一个优势是速度快。由于无头浏览器无需处理图形用户界面、加载 JS 或 CSS，因此处理网页的速度会快很多，这对于网络搜刮来说是非常好的，因为它不会拖慢机器人太多的速度。

如果您想要 DIY 数据提取解决方案，有两种最受欢迎的编程语言：Python 和 Node.js。

Python 和 Selenium

如果您选择 Python，那么用于 JavaScript 渲染的首选库就是 Selenium。它是执行 Javascript、与按钮交互、滚动和填写在线表单的可靠选择。它主要用于浏览器自动化的开源项目。WebDriver 协议可控制 Chrome 和 Firefox 等浏览器，既可远程运行，也可本地运行。

Selenium 最初是用于跨浏览器测试的工具，现在已迅速成为网络浏览器自动化的全面工具集合。由于许多网站都是以单页应用程序（Single Page Applications）的形式构建的，甚至会向真实用户发送验证码，因此，由于对僵尸检测的高度警惕，提取数据听起来越来越像是一项艰巨的任务。

有了 Selenium，机器人可以读取并执行 Javascript 代码，这样你就可以访问 HTML，填写表格以便登录网站，向下滚动网页，并模仿点击。

但是，如果您要使用 Python 进行刮擦，就不能仅仅停留在 Selenium 上。您可以继续使用 BeautifulSoup 库，它能让 HTML 和 XML 解析变得轻而易举，然后使用 Pandas 将数据提取并存储到 csv 文件中。

Node.js 和 Puppeteer

Puppeteer 是一个 Node.js 软件包，可让你无头运行 Chrome 或 Chromium，并集成 DevTools 协议。Chrome DevTools 团队和一个出色的开源社区负责维护它。

该解决方案将帮助您在网站结构不断变化的背景下管理网络搜刮工具。刮擦的主要障碍是工具需要不断更新才能适应，不受服务器的限制。

Node.js 能做什么？它能帮助 Javascript 免费运行客户端和服务器端，同时更快地创建网络应用程序。

不过，让我们把注意力集中在网络搜刮之星上。Puppeteer 允许你手动处理网络浏览器--从填写表格、截图到自动 UI 测试，无所不能。

如果你以前没有使用过这些库，或者刚刚开始你的网络刮擦之旅，我理解这一切看起来是多么令人生畏。不过，还有一种更方便的解决方案可以为你完成所有工作：API。

应用程序接口（API）也称为应用程序接口（Application Programming Interface），它允许用户直接获取数据。只要向 API 端点发出请求，应用程序就会提供所需的数据。此外，它还会自动以 JSON 格式提供。

使用应用程序接口的最大优势在于它与其他软件产品或脚本的连接非常简单。只需几行代码，您就可以在收到唯一的 API 密钥并阅读文档后，直接将采集到的数据提供给其他应用程序。

以下是 WebScrapingAPI 为您提供的所有功能的简要介绍：

• 执行 Javascript 并访问动态网页背后的 HTML 代码
• 使用包含数十万个住宅和数据中心 IP 的轮流代理池来掩盖你的活动
• 提供对请求标头的访问权限，因此您可以自定义 API 调用，并确保刮擦程序与正常访客无异
• 采用反指纹和反验证码功能
• 返回已解析为 JSON 文件的数据。

轻松便捷的网络搜索解决方案

从网页设计、HTML、CSS、Javascript 到无头浏览器，万维网总是在循环往复--自由流通的数据。这就是互联网存在的初衷。还有什么比数据收集更好的方法来利用成堆的内容呢？毕竟，如果不能获取有价值的信息，今天的企业、开发人员甚至普通人将何去何从？

它确实是我们所有人的动力。既然你已经了解了 Javascript 对当今互联网的影响，那么你就可以更好地准备开始搜索了，我希望你能做到这一点。如果你时间不够，可以考虑免费试用我们自己的解决方案 WebScrapingAPI。试用期为两周，您可以使用 JS 渲染和住宅代理等所有基本功能。

看看应用程序接口能做什么，如果您还不放心，请联系我们反应迅速的客户支持部门寻求指导。