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

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, ...

2988
来自专栏哲学驱动设计

“秒杀”心得

    本文记录对某网站A的秒杀活动编写秒杀器的经历和技术重点。 故事回顾     某日早上,朋友给我说最近A网站在开展秒杀活动,有IPad、IPhone,让大...

2168
来自专栏程序员八阿哥

年薪20万Python工程师进阶(7):Python资源大全,让你相见恨晚的Python库

用来访问第三方 API的库。 参见: List of Python API Wrappers and Libraries。

1972
来自专栏鹅厂网事

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

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

6478
来自专栏java一日一条

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

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

961
来自专栏Golang语言社区

Goroutine调度器

在了解Go的运行时的scheduler之前,需要先了解为什么需要它,因为我们可能会想,OS内核不是已经有一个线程scheduler了嘛?

822
来自专栏WeaponZhi

使用Python快速获取公众号文章定制电子书(二)

接上篇文章使用Python快速获取公众号文章定制电子书(一)。我们现在已经成功的将公众号历史消息的前十条文章给爬取了出来,使用 content_url 这个关键...

923
来自专栏腾讯Bugly的专栏

Android 内存优化总结&实践

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

4037
来自专栏北京马哥教育

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

1547
来自专栏腾讯Bugly的专栏

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

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

3346

扫码关注云+社区