CodeIgniter 4图片URL验证耗时过长，求优化方案

当前在CodeIgniter4项目中，通过Ajax请求给DataTables展示数据时，验证图片URL的操作耗时极长——仅50行数据就需要2.4分钟。目前用CURL每行最多验证3张图片，试过file_exists()但无效，求优化方案。

原代码：

<?php 
    ... 

    // 返回查询结果数组
    foreach ($this->query->datatables() as $row) {

        $images = '<div style="width: 70px; height: 40px;"><ul class="list-inline">';

        // 最多循环3次，每行最多3张图
        for ($i = 1; $i <= 3; $i++) { 

            // 用CURL验证URL
            $url_image = 'www.examples.com/images/'. $row->name . $i .'.jpg';
            $response = $this->curl->request('GET', $url_image, [
                'connect_timeout' => 0,
                'http_errors' => false
            ]);

            // 请求成功则添加图片
            if ($response->getStatusCode() == 200){
                $images .= '
                <li class="list-inline-item">
                    <img style="width: 100%; height: 100%;" class="table-avatar" src="'.$url_image.'">
                </li>
                ';
            }
        }

        $images .= '</ul></div>';


        // 组装结果数组
        $data[] = array(
            $images
        );
    }
    
    ...
?>

核心问题分析 #

原代码最大的坑是同步串行请求：每行3个CURL请求，50行就是150次逐个等待的HTTP请求，而且connect_timeout=0会导致无限等待，直接拉垮性能。另外file_exists()本身不支持远程URL验证，所以没用很正常。

优化方案 #

1. 用HEAD请求代替GET请求 #

不需要下载完整图片，只请求响应头就能判断状态，大幅减少数据传输量，同时给请求加合理超时：

$response = $this->curl->request('HEAD', $url_image, [
    'connect_timeout' => 2, // 2秒连接超时
    'timeout' => 3, // 3秒请求超时
    'http_errors' => false
]);

2. 并发请求批量验证 #

把所有需要验证的URL收集起来，一次性并发请求，避免串行等待。CodeIgniter4的CURL基于Guzzle，可以用异步请求实现：

// 第一步：收集所有待验证的URL，关联行和图片序号
$allUrls = [];
foreach ($this->query->datatables() as $rowIndex => $row) {
    for ($i = 1; $i <= 3; $i++) {
        // 补全URL协议头，否则请求会失败
        $url = 'https://www.examples.com/images/'. $row->name . $i .'.jpg';
        $allUrls[] = [
            'url' => $url,
            'rowIndex' => $rowIndex,
            'imgIndex' => $i
        ];
    }
}

// 第二步：发起异步HEAD请求
$client = \Config\Services::curlrequest();
$promises = [];
foreach ($allUrls as $item) {
    $promises[$item['url']] = $client->requestAsync('HEAD', $item['url'], [
        'connect_timeout' => 2,
        'timeout' => 3,
        'http_errors' => false
    ]);
}

// 第三步：等待所有请求完成，获取结果
$results = \GuzzleHttp\Promise\unwrap($promises);

// 第四步：整理验证结果，按行分组
$validUrls = [];
foreach ($allUrls as $item) {
    $response = $results[$item['url']];
    if ($response->getStatusCode() == 200) {
        $validUrls[$item['rowIndex']][$item['imgIndex']] = $item['url'];
    }
}

// 第五步：生成DataTables数据
$data = [];
foreach ($this->query->datatables() as $rowIndex => $row) {
    $images = '<div style="width: 70px; height: 40px;"><ul class="list-inline">';
    // 遍历当前行的有效图片
    if (isset($validUrls[$rowIndex])) {
        foreach ($validUrls[$rowIndex] as $url) {
            $images .= '
            <li class="list-inline-item">
                <img style="width: 100%; height: 100%;" class="table-avatar" src="'.$url.'">
            </li>
            ';
        }
    }
    $images .= '</ul></div>';
    $data[] = [$images];
}

3. 缓存验证结果 #

把图片的验证结果缓存起来，比如用CI4的缓存服务，避免每次请求都重复验证：

$cache = \Config\Services::cache();
// 用URL的MD5作为缓存键
$cacheKey = 'img_valid_'. md5($url_image);
$isValid = $cache->get($cacheKey);

if ($isValid === null) {
    // 执行HEAD请求验证
    $response = $this->curl->request('HEAD', $url_image, [
        'connect_timeout' => 2,
        'timeout' => 3,
        'http_errors' => false
    ]);
    $isValid = ($response->getStatusCode() == 200);
    // 缓存1天，可根据需求调整时长
    $cache->save($cacheKey, $isValid, 86400);
}

if ($isValid) {
    // 生成图片标签
}

4. 前端懒加载+容错（最优性能） #

直接跳过后端验证，后端生成所有图片标签，前端用onerror事件隐藏加载失败的图片：

// 后端直接生成图片标签，无需验证
$images .= '
<li class="list-inline-item">
    <img style="width: 100%; height: 100%;" class="table-avatar" 
         src="'.$url_image.'" 
         onerror="this.style.display=\'none\'">
</li>
';

这种方式后端零验证开销，性能拉满，唯一的小缺点是会有少量无效请求，但对用户体验几乎没影响。

5. 补全URL协议头 #

原代码里的URL缺少http://或https://，这不仅会导致CURL请求失败，也是file_exists()无效的原因（file_exists不支持无协议的远程URL），所以一定要补全协议头。

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