性能優化

Sharp 已經是一個高性能的圖像處理庫，但通過一些優化技巧，您可以進一步提升性能。

基准測試

Sharp 相比其他圖像處理庫的性能優勢：

比 ImageMagick 快 4-5 倍
比 GraphicsMagick 快 4-5 倍
內存佔用更低
支持流式處理

內存優化

使用流式處理

對於大文件，使用流式處理可以顯著減少內存佔用：

javascript

import fs from 'fs';

// ❌ 不推薦：將整個文件加載到內存
const buffer = fs.readFileSync('large-image.jpg');
await sharp(buffer).resize(800, 600).toFile('output.jpg');

// ✅ 推薦：使用流式處理
fs.createReadStream('large-image.jpg')
  .pipe(sharp().resize(800, 600).jpeg())
  .pipe(fs.createWriteStream('output.jpg'));

分塊處理

對於超大文件，可以分塊處理：

javascript

import fs from 'fs';

async function processLargeFile(inputPath, outputPath, chunkSize = 1024 * 1024) {
  const pipeline = sharp()
    .resize(800, 600)
    .jpeg({ quality: 80 });

  return new Promise((resolve, reject) => {
    const readStream = fs.createReadStream(inputPath, { highWaterMark: chunkSize });
    const writeStream = fs.createWriteStream(outputPath);

    readStream
      .pipe(pipeline)
      .pipe(writeStream)
      .on('finish', resolve)
      .on('error', reject);
  });
}

await processLargeFile('large-input.jpg', 'output.jpg');

及時釋放內存

javascript

// 處理完成後及時清理
async function processImage(inputPath, outputPath) {
  const sharpInstance = sharp(inputPath);
  
  try {
    await sharpInstance
      .resize(800, 600)
      .jpeg({ quality: 80 })
      .toFile(outputPath);
  } finally {
    // 手動清理（雖然 Node.js 會自動垃圾回收）
    sharpInstance.destroy();
  }
}

並發優化

控制並發數量

javascript

async function processWithConcurrency(files, concurrency = 3) {
  const results = [];
  
  for (let i = 0; i < files.length; i += concurrency) {
    const batch = files.slice(i, i + concurrency);
    const batchPromises = batch.map(file => 
      sharp(file)
        .resize(300, 200)
        .jpeg({ quality: 80 })
        .toFile(`processed-${file}`)
    );
    
    const batchResults = await Promise.all(batchPromises);
    results.push(...batchResults);
  }
  
  return results;
}

const files = ['file1.jpg', 'file2.jpg', 'file3.jpg', 'file4.jpg'];
await processWithConcurrency(files, 2);

使用 Worker 線程

對於 CPU 密集型任務，可以使用 Worker 線程：

javascript

import { Worker, isMainThread, parentPort, workerData } from 'worker_threads';

if (isMainThread) {
  // 主線程
  async function processWithWorkers(files, numWorkers = 4) {
    const workers = [];
    const results = [];
    
    for (let i = 0; i < numWorkers; i++) {
      const worker = new Worker('./image-worker.js', {
        workerData: { files: files.slice(i * Math.ceil(files.length / numWorkers), (i + 1) * Math.ceil(files.length / numWorkers)) }
      });
      
      worker.on('message', (result) => {
        results.push(result);
      });
      
      workers.push(worker);
    }
    
    await Promise.all(workers.map(worker => new Promise(resolve => worker.on('exit', resolve)));
    return results;
  }
  
  const files = ['file1.jpg', 'file2.jpg', 'file3.jpg'];
  await processWithWorkers(files);
} else {
  // Worker 線程
  const { files } = workerData;
  
  for (const file of files) {
    await sharp(file)
      .resize(300, 200)
      .jpeg({ quality: 80 })
      .toFile(`processed-${file}`);
  }
  
  parentPort.postMessage('done');
}

緩存優化

緩存處理結果

javascript

import crypto from 'crypto';
import fs from 'fs';

class ImageCache {
  constructor(cacheDir = './cache') {
    this.cacheDir = cacheDir;
    if (!fs.existsSync(cacheDir)) {
      fs.mkdirSync(cacheDir, { recursive: true });
    }
  }

  generateCacheKey(inputPath, options) {
    const content = JSON.stringify({ inputPath, options });
    return crypto.createHash('md5').update(content).digest('hex');
  }

  async getCachedResult(cacheKey) {
    const cachePath = `${this.cacheDir}/${cacheKey}.jpg`;
    if (fs.existsSync(cachePath)) {
      return cachePath;
    }
    return null;
  }

  async setCachedResult(cacheKey, resultPath) {
    const cachePath = `${this.cacheDir}/${cacheKey}.jpg`;
    fs.copyFileSync(resultPath, cachePath);
  }

  async processImage(inputPath, options) {
    const cacheKey = this.generateCacheKey(inputPath, options);
    const cached = await this.getCachedResult(cacheKey);
    
    if (cached) {
      console.log('使用緩存結果');
      return cached;
    }

    const outputPath = `output-${Date.now()}.jpg`;
    await sharp(inputPath)
      .resize(options.width, options.height)
      .jpeg({ quality: options.quality })
      .toFile(outputPath);

    await this.setCachedResult(cacheKey, outputPath);
    return outputPath;
  }
}

const cache = new ImageCache();
await cache.processImage('input.jpg', { width: 300, height: 200, quality: 80 });

算法優化

選擇合適的調整算法

javascript

// 對於照片，使用 lanczos3 內核
await sharp('photo.jpg')
  .resize(800, 600, { kernel: sharp.kernel.lanczos3 })
  .toFile('photo-resized.jpg');

// 對於圖標或線條圖，使用 nearest 內核
await sharp('icon.png')
  .resize(32, 32, { kernel: sharp.kernel.nearest })
  .toFile('icon-resized.png');

// 對於需要快速處理的圖像，使用 cubic 內核
await sharp('image.jpg')
  .resize(300, 200, { kernel: sharp.kernel.cubic })
  .toFile('image-resized.jpg');

優化 JPEG 質量

javascript

// 根據圖像內容調整質量
async function optimizeJPEGQuality(inputPath, outputPath) {
  const metadata = await sharp(inputPath).metadata();
  
  // 根據圖像尺寸調整質量
  let quality = 80;
  if (metadata.width > 1920 || metadata.height > 1080) {
    quality = 85; // 大圖像使用更高質量
  } else if (metadata.width < 800 && metadata.height < 600) {
    quality = 75; // 小圖像可以使用較低質量
  }
  
  await sharp(inputPath)
    .jpeg({ 
      quality,
      progressive: true, // 漸進式 JPEG
      mozjpeg: true      // 使用 mozjpeg 優化
    })
    .toFile(outputPath);
}

網絡優化

預生成不同尺寸

javascript

const sizes = [
  { width: 320, suffix: 'sm' },
  { width: 640, suffix: 'md' },
  { width: 1024, suffix: 'lg' },
  { width: 1920, suffix: 'xl' }
];

async function pregenerateSizes(inputPath) {
  const promises = sizes.map(size => 
    sharp(inputPath)
      .resize(size.width, null, { fit: 'inside' })
      .jpeg({ quality: 80 })
      .toFile(`output-${size.suffix}.jpg`)
  );
  
  await Promise.all(promises);
}

await pregenerateSizes('input.jpg');

使用現代格式

javascript

// 生成多種格式以支持不同瀏覽器
async function generateModernFormats(inputPath) {
  const promises = [
    // JPEG 作為後備
    sharp(inputPath)
      .resize(800, 600)
      .jpeg({ quality: 80 })
      .toFile('output.jpg'),
    
    // WebP 用於現代瀏覽器
    sharp(inputPath)
      .resize(800, 600)
      .webp({ quality: 80 })
      .toFile('output.webp'),
    
    // AVIF 用於最新瀏覽器
    sharp(inputPath)
      .resize(800, 600)
      .avif({ quality: 80 })
      .toFile('output.avif')
  ];
  
  await Promise.all(promises);
}

監控和調試

性能監控

javascript

import { performance } from 'perf_hooks';

async function measurePerformance(fn) {
  const start = performance.now();
  const result = await fn();
  const end = performance.now();
  
  console.log(`執行時間: ${end - start}ms`);
  return result;
}

await measurePerformance(async () => {
  await sharp('input.jpg')
    .resize(800, 600)
    .jpeg({ quality: 80 })
    .toFile('output.jpg');
});

內存使用監控

javascript

import { performance } from 'perf_hooks';

function getMemoryUsage() {
  const usage = process.memoryUsage();
  return {
    rss: `${Math.round(usage.rss / 1024 / 1024)}MB`,
    heapTotal: `${Math.round(usage.heapTotal / 1024 / 1024)}MB`,
    heapUsed: `${Math.round(usage.heapUsed / 1024 / 1024)}MB`,
    external: `${Math.round(usage.external / 1024 / 1024)}MB`
  };
}

console.log('處理前內存使用:', getMemoryUsage());

await sharp('input.jpg')
  .resize(800, 600)
  .jpeg({ quality: 80 })
  .toFile('output.jpg');

console.log('處理後內存使用:', getMemoryUsage());

最佳實踐總結

使用流式處理大文件
控制並發數量
緩存處理結果
選擇合適的調整算法
優化輸出格式和質量
預生成常用尺寸
監控性能指標

性能對比

操作	Sharp	ImageMagick	GraphicsMagick
調整大小	100ms	450ms	420ms
格式轉換	80ms	380ms	360ms
濾鏡應用	120ms	520ms	480ms
內存佔用	低	高	高

下一步

查看 API 文檔了解所有可用方法
學習示例了解更多用法
查看更新日志了解最新功能

性能優化 ​

基准測試 ​

內存優化 ​

使用流式處理 ​

分塊處理 ​

及時釋放內存 ​

並發優化 ​

控制並發數量 ​

使用 Worker 線程 ​

緩存優化 ​

緩存處理結果 ​

算法優化 ​

選擇合適的調整算法 ​

優化 JPEG 質量 ​

網絡優化 ​

預生成不同尺寸 ​

使用現代格式 ​

監控和調試 ​

性能監控 ​

內存使用監控 ​

最佳實踐總結 ​

性能對比 ​

下一步 ​

性能優化

基准測試

內存優化

使用流式處理

分塊處理

及時釋放內存

並發優化

控制並發數量

使用 Worker 線程

緩存優化

緩存處理結果

算法優化

選擇合適的調整算法

優化 JPEG 質量

網絡優化

預生成不同尺寸

使用現代格式

監控和調試

性能監控

內存使用監控

最佳實踐總結

性能對比

下一步