关于高频访问图片引起的重定向方案的思考-倦意博客

最近想把子比默认的加载图改一下，之前的图片是一个静态的图片，用户感知力不强，所以改成了一个动态图。󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄨󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄥󠄥󠄨󠄨󠄣󠄨󠄧󠄤󠄬󠅒󠅢󠄟󠄮󠇕󠅰󠆖󠇖󠅴󠅿󠇕󠅽󠆊󠇕󠆞󠆒󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮

改变：

子比自带的加载图

我修改后的加载图

原来的图用户看不出来图片是在加载，尤其是加载大图片（如gif图）的时候，会造成用户的困扰

新的加载图就好很多，用户知道这个图片在加载，所以会耐心等待。󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄨󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄥󠄥󠄨󠄨󠄣󠄨󠄧󠄤󠄬󠅒󠅢󠄟󠄮󠇕󠅰󠆖󠇖󠅴󠅿󠇕󠅽󠆊󠇕󠆞󠆒󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮

301方案：

我最开始的方案是想使用301重定向

location = /wp-content/themes/zibll/img/thumbnail-lg.svg {
    return 301 /image/jy_loading2.svg;
}

但是有个问题：每次访问图片都会重定向一次，而且我发现重定向后的图片是不会缓存的。

就会白白造成流量的浪费。

如果这个图片只加载一次，那么301造成的多一次HTTP请求的浪费微乎其微，但是问题是每个图片都会调用这个加载图一次，如果文章内图片多，加载图就调用的多，301重定向次数也会增加，对网站加载的影响还是很大的。󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄨󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄥󠄥󠄨󠄨󠄣󠄨󠄧󠄤󠄬󠅒󠅢󠄟󠄮󠇕󠅰󠆖󠇖󠅴󠅿󠇕󠅽󠆊󠇕󠆞󠆒󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮

于是我又想到了Rewrite方案：󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄡󠄢󠄨󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄥󠄥󠄨󠄨󠄣󠄨󠄧󠄤󠄬󠅒󠅢󠄟󠄮󠇕󠅰󠆖󠇖󠅴󠅿󠇕󠅽󠆊󠇕󠆞󠆒󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮

Rewrite方案：

location = /wp-content/themes/zibll/img/thumbnail-lg.svg {
    rewrite ^ /image/jy_loading2.svg last;
}

为什么内部重写更好：

无额外HTTP请求：服务器内部处理，浏览器不知道发生了重写
性能最优：减少一次往返时间（RTT）
流量节省：避免重定向头的传输
用户体验：图片加载更快

这样跳转在服务器内部处理，不需要每次都301跳转一次

总结：

好，我们用AI来总结一次：

1.301重定向 (客户端重定向)

工作原理：像问路后自己重新走

浏览器请求： http://example.com/old-path
服务器响应：”301 Moved Permanently” + 新地址 http://example.com/new-path
浏览器收到响应，自己发起一个新的请求 去访问 http://example.com/new-path
服务器响应新请求，返回 new-path 的内容。
浏览器的地址栏URL会变成新的地址。

核心特点：

两次请求：产生了2次完整的HTTP请求和响应。
客户端行为：是浏览器在收到指令后主动做的第二次请求。
URL变化：用户最终在浏览器地址栏里看到的是目标URL。
SEO友好：明确告诉搜索引擎：”这个地址已永久迁移到新地址，请更新索引。”

2. Nginx Rewrite (服务器内部重写)

工作原理：像公司的前台直接帮你转接分机

浏览器请求： http://example.com/old-path
服务器收到请求，内部将这次请求的URI从 /old-path 改写为 /new-path。
服务器继续处理这个已经被改写的请求，寻找 /new-path 对应的内容。
服务器将 /new-path 的内容返回给浏览器。
整个过程中，浏览器完全不知情，它以为自己请求的一直是 old-path，并且地址栏的URL不会改变。

核心特点：

一次请求：只有1次完整的HTTP请求和响应。
服务器内部行为：是服务器内部处理流程的转变，对客户端透明。
URL不变：用户在整个过程中，浏览器地址栏的URL不会改变。
性能高效：没有额外的网络往返，速度更快，节省流量。

对比表格

特性	301重定向	Nginx Rewrite (内部重写)
HTTP请求次数	2次	1次
行为发生地	客户端（浏览器）	服务器内部
浏览器地址栏	会变化，显示目标URL	不会变化，显示原URL
性能影响	较差（多一次往返）	优秀（无额外开销）
流量消耗	较多（多一次请求/响应头）	极少（仅一次）
SEO影响	传递权重，更新索引	无直接影响（对搜索引擎透明）
适用场景	网站搬家、域名变更、废弃URL	资源替换、URL美化、后端路由