通过PHP从MySQL获取的优化后图片加载耗时过长问题咨询

代码层面的明显错误 #

• 缺少结果集获取步骤
  你执行完$stmt->execute()后没有调用fetch方法读取查询结果，直接使用未定义的$row变量会触发PHP警告，如果你配置了错误日志写入、或者错误显示延迟，会直接导致页面输出卡慢。
• 变量名不匹配
  你将数据库读取的扩展名存在$db_image_ext变量中，但拼接图片URL时使用的是未定义的$db_ext，同样会触发PHP运行时警告，甚至导致生成的图片URL无效，浏览器等待无效响应超时就会显示5秒加载耗时。

修正后的参考代码 #

<?php
if (!isset($_GET['filename'])) {
    header("Location: login.php");
    exit; // 跳转后一定要加exit终止后续代码执行
}
$filename = $_GET['filename'];

$stmt = $connection->prepare("SELECT filename, file_extension, image_title FROM imageposts WHERE filename = :filename");
$stmt->execute([
    ':filename' => $filename
]); 
// 新增获取查询结果的代码
$row = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$row) {
    // 没有查到对应图片的处理逻辑，比如跳转404
    header("HTTP/1.1 404 Not Found");
    exit;
}

$www_root = "http://localhost:8888/site";

$db_image_filename = htmlspecialchars($row['filename']);
// 变量名统一，后续拼接URL直接用这个变量
$db_image_ext = htmlspecialchars($row['file_extension']);
$db_image_title = htmlspecialchars($row['image_title']);

?>

<!-- 图片输出 -->
<img
src="<?php echo $www_root . '/images-lib/' . $db_image_filename . '-500.' . $db_image_ext; ?>"
srcset="<?php echo $www_root . '/images-lib/' . $db_image_filename . '-500.' . $db_image_ext; ?> 500w,
        <?php echo $www_root . '/images-lib/' . $db_image_filename . '-750.' . $db_image_ext; ?> 750w"
alt="<?php echo $db_image_title; ?>" 
title="<?php echo $db_image_title; ?>"
>

环境层面的优化建议 #

• 给imageposts表的filename字段添加普通索引，避免每次查询全表扫描：

  ALTER TABLE imageposts ADD INDEX idx_filename (filename);
  

• 检查MAMP的MySQL配置，关闭DNS反查：打开MAMP的MySQL配置文件my.cnf，添加skip-name-resolve配置项后重启MySQL，可解决本地数据库连接延迟问题。
• 给站点的图片资源配置缓存头，让浏览器加载过一次后直接复用本地缓存，减少重复请求。

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