javascript - ‘.jpg!q90’这样的后缀名是什么原理？

Question

http://img14.360buyimg.com/n4/s130x130_jfs/t3106/48/2477034070/420786/74b5f312/57e1ec39Ne84222e6.jpg!q90

京东新首页用的图片是这样的后缀名，是通过什么生成的

Answer 1

首先, 你需要意识到HTTP URL中的文件名背后不一定是有一个对应的目录结构和文件的

因为绝大多数web服务器都是有rewrite功能的, 通过rewrite机制, 服务器层面你完全可以把一个请求当成是另一个程序的输入参数

举个简单的nginx例子(和京东的这个例子无关, 但道理是一样的)

 rewrite ^/foo/images/(.*).(png|jpg|gif) /image.php?filename=$1.$2 ;

这样的话访问 /foo/images/hello/world/a.jpg 实际上是访问 /image.php?filename=hello/world/a.jpg
所以在这个时候 php 就可以采取一些措施并且来决定最终应该输出什么样的数据了(当然我们这里期望的应该是输出一个jpeg图像的数据)

所有的支持质量参数的图片CDN都是这个道理

nginx也有插件可以直接实现类似的效果(不需要依赖php等其它服务器端程序)

Answer 2

url中的文件名其实很有意思，一般而言人们总会通过后缀名判断文件类型，比如.jpg后缀名的文件一定是图片。其实后缀名跟文件类型根本就没有对应关系，浏览器对服务器发来的数据的类型的判断，是来自HTTP头中Content-Type字段的。后缀名只是作为一种提示而已。
拿PHP举例子，你可以在Response中写入jpeg二进制数据，然后设置Content-Type: image/jpeg，浏览器请求的网址可能是xxx.php，但浏览器解析的文件类型是jpeg图像数据
回到问题上面，服务端收到xxx.jpg!q=n这样的请求，就可以先获取n的值，然后再对对应的文件进行修改最后输出二进制数据，当然作为cdn，肯定会缓存处理结果以便加速访问的

Answer 3

根据我的判断，来猜测下他的原理:

第一，q0-99应该是图片的质量问题。

第二，从q0到q99代表了不同的图片url地址。

为什么这么说呢，从q1到q99，请求返回成功是200 ok，并没有从缓存里面获取。 第一次访问q1，如果再次访问!q1，敲回车是200k (from cache)，F5刷新变成304 （Not Modified） 然而， 200 OK (from cache)  是浏览器没有跟服务器确认，直接用了浏览器缓存；而 304 Not Modified 是浏览器和服务器多确认了一次缓存有效性，再用的缓存。

第三，q100，或者除了q0-q99，都是不存在的。

由此可见，此项做法应该是根据你当前的网络速度进行不同程度的缓存图片质量。就像你在京东APP里面，会跟你当前是wifi还是移动网络数据来做相应的处理。

使用的是CDN图片节省流量技术。

以上是我的个人判断，如有不对的地方，还望大家见谅，给出指正。