这个框架的官网居然放了这种照片......

18岁以下勿入！！！

看到这个标题，是不是觉得我们准备搞事情了，没错！我们的口号就是：

咳咳，这里是TSW的研发团队，在前不久我们开源了TSW (Tencent Server Web)框架，TSW是一套面向WEB前端开发者，以提升问题定位效率为初衷，提供染色抓包、全息日志和异常发现的Node.js基础设施。作为腾讯内部企业级的运维组件，每天为百亿级PV提供稳定服务，大量应用在QQ空间、腾讯微云、QQ音乐、腾讯云、微视等三十几个业务部门当中。本文将带你走进TSW官网的封面故事，讲解TSW官网首页背景刷新不重样的原理。

首先，放出我们的官网地址：https://tswjs.org

点开长酱紫：

尝试每一次刷新，背景图片都会变化，不妨先来猜猜它是怎么实现的>_<

让我想象一下，此时此刻的你，一脸不屑内心呵呵道：难道不是在服务器提前准备了些图片，把当前使用图片在图库里的顺序存在cookie里每次访问更新下cookie，然后每次取出cookie中所指定的那张图当背景？？？

Emmm.......要是真的是如你所想，小编就不卖关子咯~

事实上，当你在pc浏览器打开官网抓下包可以发现图片的url一直没有改变（返回码是666而不是200，想知道原因请听下回分解），刷新http://tswjs.org/assets/images/cover.jpg 这个url你也会看见图片一直在变。怎么做到的呢？

接下来，Etag了解下：

ETag是HTTP1.1中加入的一个属性，用来帮助服务器控制Web端的缓存验证。它的原理是这样的，当浏览器请求服务器的某项资源(A)时, 服务器根据A算出一个哈希值并通过 ETag 返回给浏览器，浏览器把这个服务器算出来的哈希值 和 A 同时缓存在本地，当下次再次向服务器请求A时，会通过 If-None-Match请求头把哈希值发送给服务器，服务器再次计算A的哈希值并和浏览器返回的值做比较，如果发现A发生了变化就把A返回给浏览器，如果发现A没有变化就给浏览器返回一个304未修改。这样通过控制浏览器端的缓存，不仅可以减少服务器的带宽，也提高了用户的体验。

是不是忽然有了一点新的思路?

当用户访问 http://tswjs.org/assets/images/cover.jpg 这个url时，服务器监听到请求判断请求路径为 cover.jpg 的情况下，router进入对应的handler，拿到请求request对象的request.headers['if-none-match']属性，if-none-match的格式类似于‘27-1525249766085’：前面为当前使用的图片序号后面为时间戳，我们把图片序号加1 ，并重新生成时间戳，将它们组合成新的字符串类似于‘28-1525249767085’，并将它作为response对象writeHead方法中Etag的取值，下次客户端在发起请求时，刚刚设置的Etag值就可以通过request.headers['if-none-match']给到服务器，服务器读取出序号对应的图片并以文件的形式返回给客户端，于是每次刷新都可以看到图片在变化。

怎样，这一波操作是否让你心服口服？

最后我们精选了部分图片制作了以下视频，想查看更多，请刷新我们的官网https://tswjs.org，有美女彩蛋哦！！！