用深度学习提升DOM解析——自动提取页面关键区块
一、时间轴：一次“抓不到重点”的二手车数据爬虫事故
- 2025/03/18 09:00
产品经理希望抓取懂车帝平台上“北京地区二手车报价”作为竞品监测数据源。我们初步使用传统XPath方案，试图提取车型、年限、里程、价格等数据。 - 2025/03/18 10:00
初版脚本运行失败，返回的数据全是空值，XPath定位的路径在页面中根本不存在。 - 2025/03/18 11:00
检查HTML源代码发现，页面由**前端异步渲染（JavaScript动态生成）**构建，传统静态DOM无法解析真实内容。 - 2025/03/18 14:00
改用Playwright模拟浏览器渲染，成功获取完整DOM。但新的问题是：页面结构复杂、不稳定，多个汽车列表卡片并非结构统一，手动XPath依旧容易出错。 - 2025/03/19 10:00
启动深度学习方案：利用预训练模型BERT对HTML做块级语义识别，自动提取“车卡片”结构与核心字段。
二、方案分析：XPath失效 vs 语义块提取
1. 初始方案失败原因
- 页面为前端渲染（SPA架构），传统的
requests + XPath方案根本无法加载数据； - 即使用Playwright动态渲染后获取HTML，汽车信息DOM结构依旧不稳定，嵌套层级深，XPath脆弱；
- 页面存在部分反爬机制（navigator.webdriver特征、IP频控、UA检测），需解决隐藏身份问题。
2. 深度学习方案构思
- 将完整HTML节点转为token序列（含标签结构+文本）；
- 使用BERT或LayoutLM模型对DOM节点进行语义分类，标注“车卡片”、“车型名”、“报价”等字段；
- 利用位置+标签结构配合抽取规则，提高抗变动能力；
- 构建领域微调训练样本，通过正则与标注相结合构建少量训练集。
三、架构改进方案：深度语义解析 + 隐身身份访问
以下是优化后的爬虫架构，融合了：
- Playwright动态渲染页面；
- 代理IP隐藏身份（爬虫代理）；
- 设置cookie与user-agent；
- 调用深度学习模块提取语义块。
✅ 示例代码如下：
import asyncio
from playwright.async_api import async_playwright
import base64
import json
import torch
from transformers import BertTokenizer, BertForTokenClassification
from typing import List# === 亿牛云代理配置 www.16yun.cn ===
PROXY_SERVER = "http://proxy.16yun.cn:3100"
PROXY_USERNAME = "16YUN"
PROXY_PASSWORD = "16IP"# Base64编码代理身份
def get_proxy_auth():credentials = f"{PROXY_USERNAME}:{PROXY_PASSWORD}"return "Basic " + base64.b64encode(credentials.encode()).decode()# === 深度学习模型加载（模拟）===
tokenizer = BertTokenizer.from_pretrained("bert-base-chinese")
model = BertForTokenClassification.from_pretrained("bert-base-chinese")def predict_blocks(text_list: List[str]) -> List[str]:"""使用BERT模拟DOM区块分类输入：文本列表（如标签+内容组成）输出：每个文本的分类结果，如[车型] [年限] [报价]"""inputs = tokenizer(text_list, return_tensors="pt", padding=True, truncation=True)with torch.no_grad():outputs = model(**inputs).logitspredictions = torch.argmax(outputs, dim=-1)labels = [model.config.id2label[idx.item()] for idx in predictions[0]]return labels# === Playwright爬虫主流程 ===
async def main():async with async_playwright() as p:browser = await p.chromium.launch(headless=True)# 启动代理 + 设置UA和Cookiecontext = await browser.new_context(proxy={"server": PROXY_SERVER},user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/122.0.0.0 Safari/537.36",extra_http_headers={"Proxy-Authorization": get_proxy_auth(),"Cookie": "your_cookie_here" # 真实抓包填入cookie})page = await context.new_page()# 搜索“北京二手车”await page.goto("https://www.dongchedi.com/usedcar/search?city_name=%E5%8C%97%E4%BA%AC")await page.wait_for_timeout(5000) # 等待JS加载完# 提取页面HTMLhtml = await page.content()# 简化提取所有车卡片文本（真实项目中解析DOM结构）elements = await page.query_selector_all("div.CarCard_card__...") # 选择器根据真实页面调整for el in elements:text = await el.inner_text()label = predict_blocks([text])[0]print(f"[{label}] {text}")await browser.close()asyncio.run(main())
四、总结与优化建议
📌 深度学习DOM解析优点：
- 抗结构变化能力强，不再依赖脆弱的XPath；
- 适合复杂网页（如懂车帝、汽车之家等）中提取卡片、列表、评论等区域；
- 可结合小样本微调适应特定领域，如二手车、新闻等。
⚙️ 技术架构演进图
[静态爬虫Requests+XPath] ──> [动态爬虫Playwright+XPath] ──> [Playwright+DOM语义BERT]❌失效 ⚠️结构脆弱 ✅语义提取，稳定高效
附加建议
- 如需更高精度，可构建100~300条有标注数据微调BERT；
- 可加入图神经网络（如DOM-GCN）提升DOM上下文理解；
- 建议结合VisualDOM信息（元素位置+截图）形成多模态提取模型。