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

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 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

Python渗透测试工具都有哪些?

如果你热爱漏洞研究、逆向工程或者渗透测试,我强烈推荐你使用 Python 作为编程语言。它包含大量实用的库和工具,本文会列举其中部分精华。 网络 Scapy, ...

3898
来自专栏SDNLAB

SDNLAB技术分享(五):浅谈Open vSwitch移植

好了我们开始今天的主题吧!! 前一段时间自己私下一直学习Open vSwitch。起初学习Open vSwitch的目的,只是为了更好的学习OpenFlow协议...

36715
来自专栏北京马哥教育

性能调优攻略

关于性能优化这是一个比较大的话题,在《由12306.cn谈谈网站性能技术》中我从业务和设计上说过一些可用的技术以及那些技术的优缺点,今天,想从一些技术细节上谈...

3274
来自专栏java一日一条

如何分分钟成为Java嵌入式开发人员

在我10年的Java布道师生涯里,没有哪次Java新版本发布能让我如此兴奋。Java 8的发布不仅在语言本身加入了些不错的新特性,还在嵌入式开发上加入了很棒的功...

1621
来自专栏腾讯Bugly的专栏

Android 内存优化总结&实践

导语 智能手机发展到今天已经有十几个年头,手机的软硬件都已经发生了翻天覆地的变化,特别是Android阵营,从一开始的一两百M到今天动辄4G,6G内存。然而大部...

4537
来自专栏Python中文社区

Python开发微信公众号后台(系列二)

專 欄 ❈ 段晓晨,写过一点爬虫,写过几篇文章。能力虽有限,会尽量把想说的东西讲清楚。 知乎ID:段小草 知乎专栏:小段同学的杂记, https://zhua...

3677
来自专栏腾讯Bugly的专栏

【Dev Club分享】iOS黑客技术大揭秘

Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师。每周都会举行嘉宾分享,话题讨论等活动。 本期,我们邀请了腾...

3536
来自专栏北京马哥教育

Linux 新手必会的21条命令合集

1797
来自专栏鹅厂网事

高性能网关设备及服务实践

针对海量的网络流量,转发性能是我们最关键的一个方面,那构建高性能的后台服务器有哪些关键的技术和需要注意的地方。

7178
来自专栏Java帮帮-微信公众号-技术文章全总结

java中调用web service接口

1.首先要把AXIS包里的jar文件放到java项目的lib目录下,这里用的是AXIS1_4版本

1502

扫码关注云+社区