如何实现JavaScript异步高效运行及浏览器扩展页面内容注入优化

Hey there! I see you're building a browser extension that injects HTML after processing table links—let's tweak your code to run faster and handle async operations cleanly. Here's how to do it right:

1. Ditch XMLHttpRequest for the Fetch API #

The Fetch API is modern, promise-based, and way cleaner than XHR. It plays seamlessly with async/await, making your code easier to read, debug, and maintain.

2. Use Async/Await with Controlled Concurrency #

Running all requests at once can overwhelm both the target server and your extension. Instead, process requests in batches or set a concurrency limit to balance speed and reliability.

3. Batch DOM Updates #

Every time you modify the DOM, the browser reflows the page. To avoid unnecessary performance hits, collect all your new content first, then inject it in one go.

Full Optimized Code Example #

Here's a revised version of your code that implements all these best practices:

// Wait for the page to fully load before running logic
document.addEventListener('DOMContentLoaded', async () => {
  // Get all table rows (adjust the selector to match your actual table structure)
  const rows = document.querySelectorAll('table tr');
  const concurrencyLimit = 5; // Adjust based on how many parallel requests you want to allow
  const results = [];

  // Split rows into chunks to control concurrency
  const chunks = [];
  for (let i = 0; i < rows.length; i += concurrencyLimit) {
    chunks.push(Array.from(rows).slice(i, i + concurrencyLimit));
  }

  // Process each chunk sequentially
  for (const chunk of chunks) {
    // Run all requests in the current chunk in parallel
    const chunkPromises = chunk.map(async (row) => {
      try {
        // Extract the link from the first table cell
        const linkElement = row.querySelector('td:first-child a');
        if (!linkElement) return null;
        
        const targetUrl = linkElement.href;
        // Fetch the target page content
        const response = await fetch(targetUrl);
        if (!response.ok) throw new Error(`Failed to load ${targetUrl}`);
        
        const pageHtml = await response.text();
        // Extract your specific string (adjust this regex/selector to match your needs)
        const specificString = pageHtml.match(/your-target-pattern-here/)?.[0] || 'No matching content found';
        
        return { row, extractedContent: specificString };
      } catch (error) {
        console.error(`Error processing row:`, error);
        return null;
      }
    });

    // Wait for all requests in the chunk to complete
    const chunkResults = await Promise.all(chunkPromises);
    results.push(...chunkResults.filter(Boolean));
  }

  // Batch inject all results into the original page
  results.forEach(({ row, extractedContent }) => {
    // Create a new table cell to hold the extracted content
    const newCell = document.createElement('td');
    newCell.textContent = extractedContent;
    // Append it to the target row (adjust insertion position if needed)
    row.appendChild(newCell);
  });
});

Key Performance & Async Tips #

• Concurrency Control: The concurrencyLimit prevents you from hitting server rate limits or causing browser lag. Start with 5-10 and adjust based on testing.
• Error Resilience: Wrapped each request in a try/catch so one failed request doesn't break the entire workflow.
• DOM Efficiency: We collect all results first, then update the DOM once per row—this minimizes expensive page reflows.
• Selector Optimization: Using querySelector instead of chaining getElementsByTagName is cleaner and often faster for DOM traversal.

Bonus: Extension-Specific Enhancements #

If you're building for Chrome/Firefox, consider:

• Using chrome.scripting.executeScript (or browser.scripting for Firefox) to run logic in the page context if needed.
• Adding result caching with chrome.storage.local to avoid re-fetching the same links on subsequent page loads.

内容的提问来源于stack exchange，提问作者Johnathan Brown Johnny