如何使用JavaScript递归获取嵌套相对样式表并下载前端依赖资源

访问网页时，可通过如下代码获取完整的HTML源码：

document.querySelector('html')

也可以通过遍历styleSheets对象下载所需的样式资源，示例代码如下：

for (var sheet= 0; sheet<document.styleSheets.length; sheet++) {

目前遇到的问题是，样式表中存在递归嵌套的相对链接引用，例如：

url("../fonts/fa-regular.woff2") format("woff2")

核心诉求：

• 如何通过JavaScript访问这类嵌套相对路径引用的资源并下载到本地，实现本地服务加载
• 希望下载所有CSS和JS依赖资源，从本地或自有服务器提供资源服务，确认需求可行性并获取实现指引

这个需求完全可以实现，核心要解决相对路径递归解析、跨域资源访问、资源依赖递归爬取三个核心问题，具体落地步骤如下：

1. 路径解析基础规则 #

所有相对路径解析必须以当前被解析资源的实际响应URL为基准，禁止直接用当前页面URL做全局基准，避免路径计算错误：

• 解析独立CSS文件时，基准路径是该CSS文件自身的URL，不是引用它的HTML页面URL
• 解析CSS中通过@import嵌套引入的子CSS文件时，基准路径临时切换为父CSS的URL，子CSS解析完成后再切回原基准
• 路径解析直接调用浏览器原生URL对象完成，不需要手写路径拼接逻辑，从根源避免../层级计算错误

// 相对路径转绝对路径的标准实现
const resolveFullUrl = (relativePath, basePath) => {
  return new URL(relativePath, basePath).href
}

2. 资源爬取全流程 #

• 初始资源提取：先抓取当前页面的完整HTML源码，从HTML中提取所有外链JS、CSS、字体、图片等静态资源的初始URL，统一转成绝对路径存入待爬取队列，同时维护一份已爬取资源列表做去重判断，避免递归死循环
• CSS资源处理：
  拉取CSS文本内容后，用正则匹配所有url(...)和@import url(...)片段，提取其中的资源路径

  // 提取CSS中所有url引用的示例逻辑
  const urlRegex = /url\(['"]?([^'")\s]+)['"]?\)/g
  let match
  while ((match = urlRegex.exec(cssText)) !== null) {
    const originalPath = match[1]
    // 跳过data协议的内联资源，不需要单独下载
    if (originalPath.startsWith('data:')) continue
    const fullUrl = resolveFullUrl(originalPath, currentCssBaseUrl)
    // 加入待爬取队列
  }
  

  对提取到的每个路径，以当前CSS的URL为基准转成绝对路径，去重后存入待爬取队列；最后将CSS文本中所有原路径替换为本地服务部署的对应路径，保存替换后的CSS文件到本地
• JS资源处理：拉取JS文本内容后，先匹配明文写死的静态资源引用（包括动态import的资源路径、静态资源地址字符串），转成绝对路径去重后加入待爬取队列；替换JS中的资源路径为本地部署路径后保存文件
• 二进制资源处理：字体、图片、音视频等二进制资源拉取时要指定响应类型为blob，避免文本编码转换导致资源损坏
• 收尾替换：所有资源爬取完成后，将HTML源码中引用的初始CSS、JS路径也替换为本地路径，即可通过本地服务正常加载

3. 常见问题适配 #

• 跨域限制：浏览器环境下直接拉取第三方跨域资源会被CORS策略拦截，纯前端实现需要借助浏览器扩展的跨域请求权限，或者搭建简单的本地代理服务转发资源请求绕过限制
• 动态加载资源：部分站点的资源是运行时通过JS动态计算路径加载的，这类资源无法通过静态扫描文本完全覆盖，可以通过拦截页面全局fetch、XMLHttpRequest、原生资源加载请求的方式，补全抓取运行时加载的资源
• 路径映射：建议维护一份「线上绝对URL-本地存储路径」的全局映射表，所有路径替换都基于这张表完成，避免重复替换、路径写错的问题

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