如何实现axios或fetch加载<head>元素后终止获取剩余HTML文档？

核心思路 #

要避免下载整个大文件，关键是在流式接收响应的过程中，一旦读取到</head>标签就主动中断请求，而非等待整个文件下载完成。这种方式比依赖HTTP Range请求更可靠（Range需要提前知晓的字节范围，而该范围通常无法预先确定）。

Fetch 实现方案 #

Fetch原生支持流式响应和AbortController，可轻松实现中途中断请求：

async function fetchHeadOnly(url) {
  const controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(url, { signal });
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let headContent = '';
    // 用正则匹配带空格、大小写不同的结束标签，兼容多样HTML格式
    const headEndRegex = /<\/head\s*>/i;

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value, { stream: true });
      headContent += chunk;

      // 检查是否匹配到<head>结束标签
      const match = headContent.match(headEndRegex);
      if (match) {
        // 截取到标签结束的位置
        const endIndex = match.index + match[0].length;
        headContent = headContent.slice(0, endIndex);
        // 主动中断请求，停止后续下载
        controller.abort();
        break;
      }
    }

    // 解析并提取<head>内的特定元素
    const parser = new DOMParser();
    const doc = parser.parseFromString(headContent, 'text/html');
    const title = doc.querySelector('title')?.textContent;
    const metaKeywords = doc.querySelector('meta[name="keywords"]')?.content;
    console.log('Title:', title);
    console.log('Keywords:', metaKeywords);
    return headContent;
  } catch (err) {
    // 主动中断的错误无需处理
    if (err.name !== 'AbortError') {
      console.error('Fetch failed:', err);
    }
  }
}

Axios 实现方案 #

Axios 0.22.0及以上版本支持AbortController，结合responseType: 'stream'可实现同样功能：

async function axiosFetchHeadOnly(url) {
  const controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await axios.get(url, {
      responseType: 'stream',
      signal,
      headers: { 'Cache-Control': 'no-cache' } // 避免读取缓存的完整文件
    });

    const decoder = new TextDecoder('utf-8');
    let headContent = '';
    const headEndRegex = /<\/head\s*>/i;

    response.data.on('data', (chunk) => {
      const chunkStr = decoder.decode(chunk, { stream: true });
      headContent += chunkStr;

      const match = headContent.match(headEndRegex);
      if (match) {
        const endIndex = match.index + match[0].length;
        headContent = headContent.slice(0, endIndex);
        // 中断请求
        controller.abort();
        // 解析并处理内容
        const parser = new DOMParser();
        const doc = parser.parseFromString(headContent, 'text/html');
        const metaDesc = doc.querySelector('meta[name="description"]')?.content;
        console.log('Description:', metaDesc);
      }
    });

    response.data.on('abort', () => {
      console.log('Request stopped after fetching <head> section');
    });

    response.data.on('error', (err) => {
      if (err.name !== 'AbortError') {
        console.error('Stream error:', err);
      }
    });
  } catch (err) {
    if (err.name !== 'AbortError') {
      console.error('Axios request failed:', err);
    }
  }
}

关键注意事项 #

• 编码处理：必须使用TextDecoder的stream: true参数，确保多块二进制数据拼接时不会出现编码乱码，导致无法识别</head>标签。
• Axios拦截器的局限性：Axios拦截器是在响应完全接收后触发的，无法在流式传输过程中中断请求，因此这里不需要使用拦截器，直接用流式响应+AbortController是正确方案。
• 服务器兼容性：大部分现代服务器支持中途中断TCP连接，主动abort请求后，服务器会停止发送剩余数据，有效节省带宽；少数老旧服务器可能会继续发送，但浏览器会忽略后续数据，不影响前端逻辑。

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