全景图加载过慢求助：通过CURL从API获取全景图加载耗时久

Hey there! Let’s work through this frustrating panorama loading issue together—slow API calls, black screens, and even slower Base64 conversions are no fun. Here are some practical, battle-tested solutions to fix this:

Before jumping to other fixes, let’s optimize the way you fetch the panorama from the API:

• Reuse TCP Connections: Enable persistent connections to avoid repeated TCP handshakes, which can cut down on request latency. Use these CURL options:

  $ch = curl_init($apiEndpoint);
  // Allow reusing connections for subsequent requests
  curl_setopt($ch, CURLOPT_FORBID_REUSE, false);
  curl_setopt($ch, CURLOPT_MAXCONNECTS, 5);
  // Return raw image data instead of outputting it directly
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  // Enable gzip/deflate compression if the API supports it
  curl_setopt($ch, CURLOPT_ENCODING, "gzip, deflate");
  
  $panoramaData = curl_exec($ch);
  curl_close($ch);
  

• Check API Rate Limits & Regional Endpoints: If the API has regional servers, pick the one closest to your server to reduce network travel time. Also, make sure you’re not hitting rate limits that throttle your requests.

Converting raw image data to Base64 on every request is a huge waste of resources. Instead, cache the final result (or even the raw image) so you only do the heavy work once:

• Local File Cache: Save the downloaded panorama to your server’s disk after the first request. On subsequent requests, check if the file exists before hitting the API again:

  $cachePath = './cached_panoramas/' . md5($apiEndpoint) . '.jpg';
  
  if (!file_exists($cachePath)) {
      // Fetch from API with CURL
      $panoramaData = curl_exec($ch);
      // Save to cache
      file_put_contents($cachePath, $panoramaData);
  } else {
      // Load from local cache
      $panoramaData = file_get_contents($cachePath);
  }
  
  // Convert to Base64 only once (or cache the Base64 directly!)
  $base64Img = base64_encode($panoramaData);
  

• Memory Cache for Faster Access: For even quicker responses, use a memory cache like Redis or Memcached to store the Base64 string. Set an expiration time (e.g., 1 hour) so you still get fresh panoramas periodically:

  $cacheKey = 'panorama_' . md5($apiEndpoint);
  $base64Img = $redis->get($cacheKey);
  
  if (!$base64Img) {
      $panoramaData = curl_exec($ch);
      $base64Img = base64_encode($panoramaData);
      // Cache for 1 hour
      $redis->setex($cacheKey, 3600, $base64Img);
  }
  

The black screen happens because users are waiting for the full panorama to load. Give them something to look at immediately:

• Serve a Low-Res Placeholder: Generate a small, compressed version of the panorama (using GD or Imagick) and send its Base64 to the frontend first. Once the high-res version is ready, swap it in:

  // Show low-res placeholder right away
  const panoramaContainer = document.getElementById('panorama-viewer');
  panoramaContainer.style.backgroundImage = 'url("data:image/jpeg;base64,{{LOW_RES_BASE64}}")';
  
  // Async load high-res panorama
  fetch('/api/get-hd-panorama')
    .then(response => response.text())
    .then(hdBase64 => {
      panoramaContainer.style.backgroundImage = `url("data:image/jpeg;base64,${hdBase64}")`;
    });
  

• Add a Loading Spinner: Pair the placeholder with a subtle loading spinner so users know content is on the way—this reduces frustration even more.

Many panorama APIs serve images as tiled segments (smaller pieces of the full panorama). Instead of downloading the entire image at once:

1. Fetch the key tiles first (like the center of the panorama) to show partial content quickly.
2. Fetch remaining tiles in the background and stitch them together on the frontend.
   This way, users see something usable long before the full panorama is ready.

If your API allows multiple concurrent requests, use CURL’s multi-handle feature to fetch tiles or segments in parallel. Just be mindful of API rate limits—don’t flood the server with requests:

$tileUrls = [$tile1Url, $tile2Url, $tile3Url];
$mh = curl_multi_init();
$handles = [];

// Add all tile requests to the multi-handle
foreach ($tileUrls as $url) {
    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_multi_add_handle($mh, $ch);
    $handles[] = $ch;
}

// Execute all requests in parallel
do {
    $status = curl_multi_exec($mh, $active);
} while ($status === CURLM_CALL_MULTI_PERFORM || $active);

// Process each tile's data
foreach ($handles as $ch) {
    $tileData = curl_multi_getcontent($ch);
    // Handle tile data (save to cache, send to frontend, etc.)
    curl_multi_remove_handle($mh, $ch);
    curl_close($ch);
}

curl_multi_close($mh);

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