如何在Cloudflare Worker中高效解析DOM以节省带宽？

针对你要处理10-100KB HTML、提取少量目标数据且控制执行时间在10ms内的需求，以下是几个高效的实现思路：

1. 正则表达式（最快首选，适合结构稳定的HTML） #

如果目标数据的HTML结构固定（比如你示例里的useful_parameter属性和really-great-id元素位置不变），直接用正则匹配是最省资源的方式——完全不需要解析整个DOM，速度快到离谱。

示例代码： #

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // 获取目标页面HTML
  const htmlResponse = await fetch('你的目标页面URL');
  const html = await htmlResponse.text();

  const result = {};

  // 提取useful_parameter属性值
  const paramMatch = html.match(/useful_parameter\s*=\s*"([^"]+)"/);
  if (paramMatch) {
    result.useful_parameter = paramMatch[1];
  }

  // 提取really-great-id元素的文本内容
  const contentMatch = html.match(/<div[^>]*id="really-great-id"[^>]*>([\s\S]*?)<\/div>/);
  if (contentMatch) {
    result['really-great-id'] = contentMatch[1].trim();
  }

  // 返回处理后的JSON
  return new Response(JSON.stringify(result), {
    headers: { 'Content-Type': 'application/json' }
  });
}

好处：100KB以内的HTML匹配耗时基本在1-3ms，稳在10ms限制内；不用引入任何库，Worker体积极小。
注意：只适用于HTML结构稳定的场景，如果目标元素的属性顺序、嵌套逻辑经常变，正则可能失效。

2. 轻量DOM解析库（结构复杂时的折中方案） #

如果HTML结构有灵活性，正则搞不定，可以用超轻量的DOM解析库，比如parse5的核心功能，或者cheerio-select（别用完整的cheerio，太沉）。

示例：用parse5解析 #

import { parseFragment } from 'parse5';

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const htmlResponse = await fetch('你的目标页面URL');
  const html = await htmlResponse.text();

  // 只解析HTML片段，不用全量解析
  const fragment = parseFragment(html);
  const result = {};

  // 直接遍历节点找目标元素，避免复杂API
  const bloatDiv = fragment.childNodes.find(node => 
    node.nodeName === 'DIV' && node.attrs?.some(attr => attr.name === 'useful_parameter')
  );
  if (bloatDiv) {
    const usefulParam = bloatDiv.attrs.find(attr => attr.name === 'useful_parameter').value;
    result.useful_parameter = usefulParam;

    // 找子节点里的really-great-id元素
    const targetDiv = bloatDiv.childNodes.find(node => 
      node.nodeName === 'DIV' && node.attrs?.some(attr => attr.name === 'id' && attr.value === 'really-great-id')
    );
    if (targetDiv) {
      // 提取文本内容，处理文本节点
      result['really-great-id'] = targetDiv.childNodes
        .filter(node => node.nodeName === '#text')
        .map(node => node.value.trim())
        .join('');
    }
  }

  return new Response(JSON.stringify(result), {
    headers: { 'Content-Type': 'application/json' }
  });
}

优化技巧：别解析整个文档，只处理包含目标数据的部分；直接遍历节点数组，别用复杂的DOM查询API，能省不少时间。
耗时参考：100KB HTML的解析+提取大概在5-8ms，还是能卡在10ms限制内。

3. 原生DOMParser（谨慎用） #

Cloudflare Worker支持DOMParser，但全量解析DOM的耗时比正则和轻量库高，100KB的HTML可能接近甚至超10ms。如果一定要用，记得先通过正则截取目标数据所在的局部片段，再解析，别搞整个文档。

示例： #

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const htmlResponse = await fetch('你的目标页面URL');
  const html = await htmlResponse.text();

  // 先正则定位目标片段，减少解析量
  const fragmentMatch = html.match(/<div class="very-much-bloat"[^>]*>[\s\S]*?<\/div>/);
  if (!fragmentMatch) return new Response(JSON.stringify({}), { status: 404 });

  const parser = new DOMParser();
  const doc = parser.parseFromString(fragmentMatch[0], 'text/html');
  
  const result = {};
  const bloatDiv = doc.querySelector('div[useful_parameter]');
  if (bloatDiv) {
    result.useful_parameter = bloatDiv.getAttribute('useful_parameter');
    const targetDiv = doc.querySelector('#really-great-id');
    if (targetDiv) {
      result['really-great-id'] = targetDiv.textContent.trim();
    }
  }

  return new Response(JSON.stringify(result), {
    headers: { 'Content-Type': 'application/json' }
  });
}

好处：DOM API直观，适合复杂选择器；缺点：耗时较高，必须配合正则截片段才能控制在10ms内。

额外建议 #

• 用Cloudflare Worker的测试工具看CPU Time指标，确保不超10ms；
• 优先选正则，只有结构不稳定时再考虑轻量库或DOM解析；
• 别用完整的cheerio，体积大、耗时高，完全没必要。

内容的提问来源于stack exchange，提问作者nicael