当前位置：首页 > news >正文

可狱可囚的爬虫系列课程 19：静态页面和动态页面之分

news 来源：原创 2025/6/23 1:25:47

在爬虫开发中，静态页面和动态页面的核心区别在于数据的生成和加载方式，理解两者的差异直接影响爬虫技术选型和数据抓取策略；掌握静态/动态页面的区别，可显著提升爬虫效率和成功率。

一、静态页面（Static Page）

静态页面的内容（1）在服务器预先生成，以 .html 文件形式存储，用户每次访问时返回相同的 HTML 代码。（2）数据直接嵌入在 HTML 中（如文本、表格、链接等）。（3）纯 HTML + CSS，无复杂交互逻辑。类似于以下代码：

<!-- 服务器预生成的 HTML -->
<html>
  <body>
    <h1>商品列表</h1>
    <ul>
      <li>商品1：价格 100 元</li>
      <li>商品2：价格 200 元</li>
    </ul>
  </body>
</html>

静态页面的数据可以直接通过 requests 或 urllib 请求 URL，使用 BeautifulSoup4 或 lxml 等解析 HTML。抓取简单，无需执行 JavaScript。

二、动态页面（Dynamic Page）

动态页面的内容可以由（1）服务端动态渲染，服务器根据请求参数（如用户身份、Cookie）实时生成 HTML（如 PHP、Java 动态页面）。也可以由客户端动态渲染，通过 JavaScript 在浏览器中异步加载数据（如 Vue/React 单页应用）。（2）初始 HTML 中无数据，通过 Ajax 或 Fetch API 从后端接口获取数据（如 JSON 格式）。（3）采用 JavaScript 框架（React / Vue / Angular）+ 后端 API 的技术栈进行设计开发。类似于以下代码：

<!-- 初始 HTML（无数据） -->
<html>
  <body>
    <div id="app"></div>
    <script>
      // 通过 JavaScript 动态加载数据
      fetch('/api/products')
        .then(res => res.json())
        .then(data => {
          document.getElementById('app').innerHTML = `
            <ul>
              ${data.map(item => `<li>${item.name}：价格 ${item.price} 元</li>`).join('')}
            </ul>
          `;
        });
    </script>
  </body>
</html>

动态页面的数据可以通过（1）直接调用 API 的形式进行爬取，但是当无法找到 API 时，可以使用（2）浏览器渲染工具（Selenium、Playwright 或 Puppeteer 等控制浏览器，等待 JavaScript 执行完成后再解析页面）进行爬取。

三、核心区别

对比维度	静态页面	动态页面
数据位置	直接嵌入 HTML	通过接口异步加载（JSON/XML）
URL 变化	URL 对应唯一 HTML 文件	URL 可能不变（单页应用）
反爬难度	低（直接解析 HTML）	高（需处理加密接口或模拟浏览器）
技术复杂度	简单	复杂（需分析接口或执行 JS）
典型场景	文档、博客、老式网站等	电商、社交平台、管理系统等

四、如何判断页面类型

（1）查看网页源代码：右键 → 查看网页源代码，搜索页面中可见的内容。静态页面的内容存在于源代码中；动态页面的源代码中无数据，需执行 JS 后生成。

（2）分析网络请求：打开浏览器开发者工具（F12 → Network），刷新页面，静态页面仅加载 HTML、CSS、图片等资源；动态页面存在 XHR/Fetch 请求（通常返回 JSON）。

五、关键注意事项

（1）优先调用 API：动态页面尽量通过接口直接获取数据，减少资源消耗。
（2）反爬对抗：动态页面常伴随反爬措施（如滑块验证、Token 验证、IP 封禁等），需结合代理 IP、请求头模拟等手段。
（3）性能权衡：浏览器渲染工具（如 Selenium）占用资源高，仅作为备用方案。