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

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,有美女彩蛋哦!!!

视频内容

原文发布于微信公众号 - tswjs(tsw_service)

原文发表时间:2018-05-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏域名资讯

如何判断你买的域名有没有被K过?

不知道大家有没有遇到过这种情况,Google不收录你的外贸网站。这个问题困扰了我很久,从SEO的角度来说,这个外贸网站基本是废了,一直想知道为什么...

2106
来自专栏开源优测

Python3接口测试pdf+源码免费领取

https://pan.baidu.com/s/19mVT4VQrVyRYr4g5wF1rYQ

1027
来自专栏土豆专栏

计算机网络基础知识整理--运输层

从IP层来说,通信的两端是两个主机。IP数据报的首部明确地标志了这两个主机的IP地址。我们需要知道,真正进行通信的实体是在主机中的进程,是这个主机中的一个进程和...

60912
来自专栏FreeBuf

深入解析Cookie技术

0×00 引言 在Web技术的发展史上,Cookie技术的出现是一次重大的 变革。但是, Cookie技术又是一项非常有争议的技术,从它诞生之日起就成了广大网络...

18910
来自专栏知晓程序

微信小程序快速开发,两周内从创意到上线

1263
来自专栏程序员互动联盟

如何写一个自己的安卓应用?

现在智能手机占据了大部分人的大部分生活。公交车,地铁,路边,处处都能看到低头族。就连大一军训都能看到拿着手机不放的。 为什么出现这种现象?手机应用,现在的移动应...

3539
来自专栏王亚昌的专栏

linux平台下server运维问题分析与定位

    结合我工作中碰到的运维问题,总结一下linux下server常见的运维问题以及定位方式。这里的server主要指自主开发的逻辑server,web sr...

701
来自专栏FreeBuf

针对近期“博全球眼球的OAuth漏洞”的分析与防范建议

据Cnet报道,新加坡南洋理工大学一位名叫Wang Jing的博士生,发现了OAuth和OpenID开源登录工具的“隐蔽重定向”漏洞(Covert Redire...

17610
来自专栏FreeBuf

我们来“劫持”个GitHub自定义域名玩吧!

作为一个国内外项目都不怎么挖的我,比较喜欢拿自己正在使用的服务入手挖洞,毕竟拥有需求又了解业务才能长期跟进,更好的去发现各种流程上出现的毛病。

973
来自专栏高性能服务器开发

C++ 高性能服务器网络框架设计细节(节选)

这篇文章我们将介绍服务器的开发,并从多个方面探究如何开发一款高性能高并发的服务器程序。需要注意的是一般大型服务器,其复杂程度在于其业务,而不是在于其代码工程的基...

903

扫码关注云+社区