前端设计技能高效下载方案：构建自动化资源采集系统

2次阅读

没有评论

共计 3901 个字符，预计需要花费 10 分钟才能阅读完成。

作为一名前端开发者，获取高质量设计资源（如 UI 组件、图标、配色方案等）是日常工作的重要环节。然而，在这个过程中我们常常会遇到以下三个主要问题：

反爬机制导致手动下载低效：许多设计平台（如 Dribbble、Behance）都实施了严格的防爬虫措施，使得手动下载变得异常缓慢且容易中断。
多平台资源格式不统一：不同平台提供的资源格式各异（SVG、PNG、Sketch、Figma 等），需要花费大量时间进行格式转换和整理。
版本管理困难：设计资源更新频繁，手动跟踪和管理不同版本既耗时又容易出错。

在构建自动化采集系统时，我们主要考虑两种技术路径：

Puppeteer：Google Chrome 团队开发的 Node 库，能完全模拟浏览器行为，适合处理动态渲染的页面（SPA）。优势是能执行 JavaScript、处理 AJAX 请求，缺点是资源消耗较大。
Cheerio：轻量级的 jQuery-like 解析器，适合处理静态 HTML。优点是速度快、内存占用低，缺点是无法处理动态内容。

实际应用中，我们采用 混合策略：先用 Puppeteer 获取完整页面，再用 Cheerio 提取静态资源。

设计资源通常包含多种文件类型，我们通过分析 HTTP 响应的 Content-Type 头部实现自动分类：

// TypeScript 示例：资源分类器
function classifyResource(response: Response): ResourceType {const contentType = response.headers.get('content-type') || '';

  if (contentType.includes('image/svg+xml')) return 'SVG';
  if (contentType.includes('image/png')) return 'PNG';
  if (contentType.match(/application\/(vnd.*)?sketch/)) return 'SKETCH';
  // ... 其他类型判断
  return 'UNKNOWN';
}

为避免重复下载相同资源，我们使用 Bloom Filter 这种概率型数据结构：

初始时创建一个 m 位的二进制向量（全部置 0）
添加元素时，通过 k 个哈希函数计算得到 k 个位置并置 1
检查元素是否存在时，若所有对应位置都为 1 则可能已存在

以下是用 TypeScript 实现的简化版：

class BloomFilter {
  private size: number;
  private storage: boolean[];

  constructor(size: number = 1024) {
    this.size = size;
    this.storage = Array(size).fill(false);
  }

  add(url: string) {this.storage[this.hash1(url) % this.size] = true;
    this.storage[this.hash2(url) % this.size] = true;
    // 更多哈希函数...
  }

  mightContain(url: string): boolean {return this.storage[this.hash1(url) % this.size] &&
           this.storage[this.hash2(url) % this.size];
  }

  private hash1(str: string): number {/* 实现哈希函数 1 */}
  private hash2(str: string): number {/* 实现哈希函数 2 */}
}

async function fetchWithRetry(
  url: string,
  retries = 3,
  delay = 1000
): Promise<Response> {
  try {const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response;
  } catch (error) {if (retries <= 0) throw error;
    await new Promise(resolve => setTimeout(resolve, delay));
    return fetchWithRetry(url, retries - 1, delay * 2); // 指数退避
  }
}

const proxyPool = [
  'http://proxy1.example.com:8080',
  'http://proxy2.example.com:8080',
  // ... 更多代理
];

let currentProxyIndex = 0;

function getNextProxy(): string {currentProxyIndex = (currentProxyIndex + 1) % proxyPool.length;
  return proxyPool[currentProxyIndex];
}

async function fetchViaProxy(url: string) {const proxy = getNextProxy();
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000);

  try {
    const response = await fetch(url, {
      signal: controller.signal,
      agent: new HttpsProxyAgent(proxy)
    });
    clearTimeout(timeoutId);
    return response;
  } catch (error) {clearTimeout(timeoutId);
    throw error;
  }
}

为避免触发目标网站的速率限制，我们实现令牌桶算法控制请求频率：

class TokenBucket {
  private tokens: number;
  private lastFilled: number;

  constructor(
    private capacity: number,
    private fillRate: number // tokens/ms
  ) {
    this.tokens = capacity;
    this.lastFilled = Date.now();}

  take(): boolean {this.refill();
    if (this.tokens > 0) {
      this.tokens--;
      return true;
    }
    return false;
  }

  private refill() {const now = Date.now();
    const elapsed = now - this.lastFilled;
    const newTokens = elapsed * this.fillRate;
    this.tokens = Math.min(this.capacity, this.tokens + newTokens);
    this.lastFilled = now;
  }
}

// 使用示例：每秒最多 5 个请求
const bucket = new TokenBucket(5, 5/1000);

async function throttledFetch(url: string) {while (!bucket.take()) {await new Promise(resolve => setTimeout(resolve, 50));
  }
  return fetch(url);
}

我们采用两级缓存机制：

内存缓存：使用 LRU 算法缓存热门资源
磁盘缓存：按照资源类型和日期组织目录结构

// Deno 实现文件存储
async function saveToCache(
  content: Uint8Array,
  category: string,
  filename: string
) {const date = new Date();
  const dirPath = `cache/${category}/${date.getFullYear()}/${date.getMonth()+1}`;

  await Deno.mkdir(dirPath, { recursive: true});
  await Deno.writeFile(`${dirPath}/${filename}`, content);
}