如何，或者我应该如何使用 php 和 mysql 缓存图像？

Question

基本上我想做的就是在插入我需要显示的数据时让图像加载得更快。图像永远不会改变，但相同代码中的文本会根据您正在查看的人而改变。我的代码循环遍历一组 25 个“技能”并获取每个技能的图像，并将用户信息显示在与图像相同的行上。我将如何缓存图像以使代码运行得更快并且不必不断加载图像？这是我的代码的样子：

    function compare($user1) {
    include "mysql.ws";
    $user1 = str_replace(" ", "_", $user1);
    $query = mysql_query("SELECT a.*, b.* FROM skills a JOIN activities b ON(a.playerName LIKE b.playerName) WHERE a.playerName LIKE '".fixName($user1)."' LIMIT 1") or die(mysql_error());

    $row = mysql_fetch_array($query);
    $overall['lvl'] = 0;
    $overall['xp'] = 0;
    for ($i = 1; $i <=25; $i++){
        $xptype = findType($i)."xp";  
        $overall["lvl"] += getLevelForXP($row[$xptype], $i);
        $overall["xp"] += $row[$xptype];
    }
        //updateDonator($user1);

    echo'<div class="OrnamentalBoxBg"><div class="OrnamentalBoxContent">
        <div class="header">
        <div class="left">
        <span class="columnLevel">Level</span>
        <span class="columnTotal">Total XP</span>
        <span class="columnRank">Rank</span>
        </div></div>
        <div class="row" data-skill="combat" data-member="false">
        <div class="left">
        <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table=0&amp;rank='.findRank($user1,"0").'#'.findRank($user1,"0").'">
        <span class="columnLevel">
        '.dots($overall["lvl"]).'
        </span>
        </a>
        <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table=0&amp;rank='.findRank($user1,"0").'#'.findRank($user1,"0").'">
        <span class="columnTotal">
        '.dots($overall["xp"]).'
        </span>
        </a>
        <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table=0&amp;rank='.findRank($user1,"0").'#'.findRank($user1,"0").'">
        <span class="columnRank">
        '.findRank($user1,"0").'
        </span>
        </a>
        </div>
        <div class="middle">
        <img src="http://sage-scape.com/hiscores/img/overall.png?2" alt="" title="">
        <span class="statName"><span><span><span>Overall</span></span></span></span>
        </div>
        </div>
    ';
    for ($i = 1; $i <=25; $i++){
        $xptype = findType($i)."xp";  
        if($i == 25){
            echo'
                <div class="row last-row" data-skill="'.findSkill($i).'" data-member="'.member($i).'"> ';

        } else {
            echo'
                <div class="row" data-skill="'.findSkill($i).'" data-member="'.member($i).'"> ';
        }
        if($row[$xptype] > 1)
        echo'
            <div class="left">
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnLevel">
                    '.getLevelForXP($row[$xptype],"$i").'
                    </span>
            </a>
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnTotal">
            '.dots($row["$xptype"],"$i").'
            </span>
            </a>
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnRank">
            '.findRank($user1,"$i").'
            </span>
            </a>
            </div>
            <div class="middle">
            <img src="http://sage-scape.com/hiscores/img/xp_'.fixName(findType($i)).'_total.png?2" alt="" title="" />
            <span class="statName"><span><span><span>'.findType($i).'</span></span></span></span>
            </div>
            </div>
        ';
        else
        echo'
            <div class="left">
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnLevel">
                    --
                    </span>
            </a>
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnTotal">
            --
            </span>
            </a>
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnRank">
            --
            </span>
            </a>
            </div>
            <div class="middle">
            <img src="http://sage-scape.com/hiscores/img/xp_'.fixName(findType($i)).'_total.png?2" alt="" title="" />
            <span class="statName"><span><span><span>'.findType($i).'</span></span></span></span>
            </div>
            </div>
        ';
    }
    echo'
    </div></div>
<div class="OrnamentalBoxBottom"></div>
</div>
<div class="OrnamentalBox Width923 SegmentTwo" id="activityStats">
<div class="OrnamentalBoxTop"></div>
<div class="OrnamentalBoxTitle"><div class="Centre1"><div class="Centre2">
<h3 class="Gradient NoFlourish Centre"><span class="spacing" aria-hidden="true">Activity Stats</span>
<span class="G0">Activity Stats</span>
<span class="G1" aria-hidden="true">Activity Stats</span>
<span class="G2" aria-hidden="true">Activity Stats</span>
<span class="G3" aria-hidden="true">Activity Stats</span>
<span class="G4" aria-hidden="true">Activity Stats</span>
<span class="G5" aria-hidden="true">Activity Stats</span>
<span class="G6" aria-hidden="true">Activity Stats</span>
</h3></div></div></div>
<div class="FlatHeader playerNames">
<div class="left">
'.BBCode($user1).'</div>
</div>
<div class="playerAvatars">
<div class="left">
<img src="http://services.runescape.com/m=avatar-rs/'.$user1.'/chat.png?cachebust=1342804665991" alt="" title="">
</div>
</div>
<div class="OrnamentalBoxBg"><div class="OrnamentalBoxContent">
<div class="header">
<div class="left">
<span class="columnScore">Score</span>
<span class="columnRank">Rank</span>
</div>
</div>';
    for ($i = 0; $i < 7; $i++){
        $xptype = findActivityP($i);  
        if($i == 6){
            echo'
                <div class="row last-row">';
        } else {
            echo'
                <div class="row">';
        }
        echo'
        <div class="left">
        <a href="http://sage-scape.com/hiscores/overall.ws?category_type=1&amp;table='.$i.'&amp;rank='.findARank($user1,"$i").'#'.findARank($user1,"$i").'">
        <span class="columnScore">
        '.$row["$xptype"].'
        </span>
        </a>
        <a href="http://sage-scape.com/hiscores/overall.ws?category_type=1&amp;table='.$i.'&amp;rank='.findARank($user1,"$i").'#'.findARank($user1,"$i").'">
        <span class="columnRank">
        '.findARank($user1,"$i").'
        </span>
        </a>
        </div>
        <div class="middle">
        <img src="http://sage-scape.com/hiscores/img/'.findActivityP($i).'.png" alt="" title="">
        <span class="statName"><span><span><span>'.findActivity($i).'</span></span></span></span>
        </div>
        </div>
        ';
    }
}

有没有办法做到这一点？我有一个 MySQL 数据库，我可以做到这一点，但我不确定如何做到这一点。有人能告诉我怎么做吗？

Answer 1

就缓存的实际机制而言，您不会用您可以构建的任何东西击败浏览器或服务器中的内置工具。您可以做几件事来优化这些机制。

this great article by Yahoo! on best practices 中详细介绍了许多很棒的技术。总结一下：

• 在图片上使用较长的 Expires 标头（便宜且有效）
• 使用图像精灵和图像映射
• 内嵌图像（通常称为 base64 内嵌图像）
• 使用 CDN（内容分发网络）
• 缩小 CSS 和 JavaScript
• gzip 内容（压缩）
• 将脚本放在底部，将 CSS 放在顶部

到目前为止，最有效且普遍廉价和有效的优化方法之一是将这些图像转换为单个 CSS sprite，这需要每个访问者下载一​​个，可缓存的。

CSS 精灵非常简单。有一个很棒的article on how to achieve them on css-tricks，还有一个on A List Apart。

基本上，将图像组合成一个平铺图像。 sprites 的灵感来自于旧的主机游戏，所以我将以我的例子向他们致敬：

然后您“剪辑”图像以仅显示您想要的每个图像的区域：

div.sprite { background-image:url('assets/sprites/avatars.gif')}
div.sprite.purple_druid {background-position: -75px 0px }
div.sprite.king {background-position: -150px -150px}

一旦你有了这样的东西，我认为在 PHP 和 MySQL 中没有太多要解决的问题，坦率地说，当你只有 25 张静态内容的图像时，我认为这是一个错误的优化位置。

缓存的另一个重要考虑因素是您是否真的需要优化。更高端的服务器是否比花在优化上的开发时间更实用？网站真的很慢吗？内容交付网络能否以低廉的成本加快速度？

我希望这会有所帮助。

Answer 2

据我了解您的问题，您不想每次都加载图像，它应该缓存在浏览器中，因此为了实现这一点，您必须在图像名称后删除 ?2

src="http://sage-scape.com/hiscores/img/xp_'.fixName(findType($i)).'_total.png?2
                                                                              ^

您将2 作为图像名称后的参数传递，因为这个浏览器没有缓存图像并一遍又一遍地加载相同的图像。所以删除?2它会将图片缓存在浏览器中。