在现代网页应用中，数据常以交互式图表的形式呈现，许多详细信息（如价格、日期等）仅在用户将鼠标悬停在特定图表元素上时才通过工具提示（tooltip）显示。对于数据抓取任务，初学者可能直观地想到使用selenium等自动化工具来模拟鼠标悬停行为。然而，这种方法在某些场景下可能效率低下且不够稳定。
挑战与传统方法（Selenium）的局限性
当需要抓取图表上所有数据点的鼠标悬停信息时，使用Selenium模拟每个点的鼠标悬停是一个常见的思路。例如，尝试定位图表画布元素，然后循环对其进行鼠标悬停操作。
考虑以下基于Selenium的尝试代码片段：
from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
options = Options()
options.add_argument("start-maximized")
webdriver_service = Service()
driver = webdriver.Chrome(options=options, service=webdriver_service)
driver.get('https://www.cpubenchmark.net/cpu.php?cpu=Intel+Core+i9-11900K+%40+3.50GHz&id=3904')
# 尝试定位图表画布元素
element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//*[@id='placeholder']/div/canvas[2]")))
# 错误示例：WebElement对象不可迭代
# for el in element:
# ActionChains(driver).move_to_element(el).perform()
# mouseover = WebDriverWait(driver, 30).until(EC.visibility_of_element_located((By.SELECTOR, ".placeholder > div > div.canvasjs-chart-tooltip > div > span")))
# print(mouseover.text)上述代码中，WebDriverWait(...).until(EC.presence_of_element_located(...))返回的是一个单独的WebElement对象，代表了匹配到的第一个元素，而不是一个元素列表。因此，尝试对其进行for el in element:迭代会导致'WebElement' object is not iterable的错误。即使能够正确获取到多个可迭代的元素，模拟逐个鼠标悬停并等待工具提示出现，也存在以下局限性：
- 效率低下： 每次操作都需要浏览器渲染，速度慢，资源消耗大。
- 稳定性差： 依赖于页面加载速度、元素可见性、动画效果等，容易出现时序问题或元素未找到的错误。
- 复杂性高： 需要处理各种等待条件、异常情况，代码维护成本高。
- 冗余操作： 许多情况下，图表数据在页面加载时就已经存在于HTML或JavaScript代码中，无需模拟用户交互即可直接提取。
高效策略：直接解析JavaScript嵌入数据
对于许多动态图表，其展示的数据通常不是通过AJAX请求在鼠标悬停时才加载的，而是页面加载时就已嵌入在HTML的某个
立即学习“Java免费学习笔记（深入）”；
核心思路：
- 检查网页源代码： 使用浏览器开发者工具（F12），查看“Elements”或“Sources”标签，或直接“查看页面源代码”（Ctrl+U），搜索与图表数据相关的关键词（如“dataArray”、“chartData”等）。
- 定位数据模式： 找到数据在JavaScript代码中的存储格式，通常是数组或JSON对象。
- 使用requests获取页面内容： 避免启动浏览器，直接通过HTTP请求获取HTML文本。
- 使用正则表达式提取数据： 根据定位到的数据模式，编写正则表达式来精确匹配并提取所需的数据点。
- 使用pandas进行数据处理： 将提取到的原始数据转换为结构化的DataFrame，便于后续分析。
实战演练：抓取CPU价格历史数据
以CPU Benchmark网站为例，其“Pricing History”图表的数据在页面加载时已作为JavaScript变量dataArray嵌入到HTML中。我们可以直接解析这些数据。
import re
import pandas as pd
import requests
# 目标URL
url = "https://www.cpubenchmark.net/cpu.php?cpu=Intel+Core+i9-11900K+%40+3.50GHz&id=3904"
# 使用requests获取页面HTML内容
html_text = requests.get(url).text
# 使用正则表达式从HTML中提取数据
# 匹配模式：dataArray.push({x: 数字, y: 数字或小数})
# (\d+) 捕获x的值（时间戳，整数）
# ([\d.]+) 捕获y的值（价格，整数或小数）
df = pd.DataFrame(
re.findall(r"dataArray\.push\({x: (\d+), y: ([\d.]+)}", html_text),
columns=["time", "price"],
)
# 将时间戳转换为日期时间格式
# 原始时间戳是毫秒，需要除以1000转换为秒，然后指定单位为秒
df["time"] = pd.to_datetime(df["time"].astype(int) // 1000, unit="s")
# 打印数据框的最后几行
print(df.tail())代码解析：
- 导入库： re用于正则表达式操作，pandas用于数据结构化和处理，requests用于发送HTTP请求。
- 获取HTML： requests.get(url).text直接获取页面的全部HTML内容，避免了浏览器启动的开销。
-
正则表达式提取：
- re.findall(r"dataArray\.push\({x: (\d+), y: ([\d.]+)}", html_text)是此方法的核心。
- dataArray\.push\({x:：匹配JavaScript中数据推送的固定前缀。.需要转义。
- (\d+)：第一个捕获组，匹配一个或多个数字，用于提取时间戳（x值）。
- , y:：匹配固定分隔符。
- ([\d.]+)：第二个捕获组，匹配一个或多个数字或点，用于提取价格（y值）。
- re.findall会返回所有匹配到的元组列表，每个元组包含两个捕获组的内容。
- 创建DataFrame： 将re.findall的结果直接传递给pd.DataFrame，并指定列名"time"和"price"。
-
时间戳转换： 原始的time列是字符串类型的时间戳，且是毫秒级的。
- df["time"].astype(int)：将时间戳转换为整数类型。
- // 1000：将毫秒转换为秒。
- pd.to_datetime(..., unit="s")：将秒级Unix时间戳转换为datetime对象。
- 结果输出： df.tail()打印数据框的最后几行，展示了抓取并处理后的价格历史数据。
输出示例：
time price 236 2023-05-28 06:00:00 317.86 237 2023-05-29 06:00:00 319.43 238 2023-05-30 06:00:00 429.99 239 2023-05-31 06:00:00 314.64 240 2023-06-01 06:00:00 318.9
优势与适用场景
这种直接解析JavaScript嵌入数据的方法具有显著优势：
- 效率高： 无需启动和维护浏览器实例，仅进行HTTP请求和字符串处理，速度极快。
- 稳定性强： 不受页面渲染、动画效果或元素可见性的影响，只要数据模式不变，抓取就稳定。
- 资源消耗低： 内存和CPU占用远低于Selenium。
- 代码简洁： 避免了复杂的Selenium等待和操作逻辑。
适用场景：
- 当目标数据在页面加载时已存在于HTML源代码的
- 无需模拟复杂的JavaScript执行或用户交互（如点击、滚动、表单填写）。
- 目标是批量获取数据而非模拟用户行为。
注意事项
- 数据源识别： 在开始抓取前，务必使用浏览器开发者工具仔细检查网页的源代码和网络请求。这是判断数据是否直接嵌入HTML的关键一步。如果数据是通过后续AJAX请求动态加载的，则可能需要模拟这些请求或使用Selenium等待数据加载。
- 正则表达式的健壮性： 网页结构和JavaScript代码可能会更新，导致正则表达式失效。因此，定期检查和维护正则表达式的准确性是必要的。
- 反爬机制： 即使使用requests，网站也可能存在反爬机制，如User-Agent检测、IP限制、验证码等。可能需要添加请求头、使用代理IP或处理验证码。
- Selenium的必要性： 当数据确实需要JavaScript渲染、动态加载、或涉及复杂的登录、点击分页、表单提交等用户交互时，Selenium仍然是不可替代的强大工具。选择哪种工具，应根据具体的抓取任务和目标网站的数据加载方式来决定。
总结
对于网页数据抓取，理解数据是如何呈现和加载的至关重要。并非所有动态显示的数据都需要通过模拟用户交互来获取。通过分析网页源代码，识别并直接解析JavaScript中嵌入的数据，往往是获取图表数据最有效和稳定的方法。这种方法结合requests、正则表达式和pandas，能够构建出高效、健壮的数据抓取解决方案，大大提升爬虫的性能和可靠性。在实际应用中，灵活运用多种工具和技术，根据具体场景选择最佳策略，是成为一名优秀爬虫工程师的关键。
