专栏首页TSW这个框架的官网居然放了这种照片......

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

2860元腾讯云代金券免费领取,付款直接抵现金,立即领取>>>

腾讯云服务器1折限时抢购,2核4G云主机899元/3年,立即抢购>>>

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),作者:muyan

原文出处及转载信息见文内详细说明,如有侵权,请联系 [email protected] 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 让产品改host你的良心不会痛吗!!!!

    TSW
  • 【开源公告】腾讯Node.js基础设施TSW正式开源

    TSW是面向WEB前端开发者,以提升问题定位效率为初衷,提供云抓包、全息日志和异常发现的Node.js基础设施。

    TSW
  • 5201314对程序员意味着什么?

    作为年轻人的潮流聚集地,Qzone在每个特殊的日子总会迎来一波猛烈的流量冲击。比如刚过去的520,下图是今年5月20号的流量情况:

    TSW
  • 谈谈HTTP状态保持

    HTTP协议本身是无状态的,无状态的意思是浏览器发起的每个HTTP请求,对于服务端而言都是彼此独立的,即服务端无法直接通过HTTP协议将用户的多次HTTP请求联...

    黄泽杰
  • DRBD概念基础

    Distributed Replicated Block Device(DRBD)是一个用软件实现的、无共享的、服务器之间镜像块设备内容的存储复制解决方案。

    院长技术
  • MySQL的死锁系列- 锁的类型以及加锁原理

    疫情期间在家工作时,同事使用了 insert into on duplicate key update 语句进行插入去重,但是在测试过程中发现了死锁现象:

    remcarpediem
  • MySQL的死锁系列- 锁的类型以及加锁原理

    疫情期间在家工作时,同事使用了 insert into on duplicate key update 语句进行插入去重,但是在测试过程中发生了死锁现象:

    remcarpediem
  • C#设计模式之策略模式

      策略模式是针对一组算法,将每个算法封装到具有公共接口的独立的类中,   从而使它们可以相互替换。策略模式使得算法可以在不影响到客户端的情况下发生变化。

    小小许
  • 算法帝国里的牛人们:欧拉

    大数据文摘
  • AS3实用小知识

    3.TextInput实例名.displayAsPassword=true;定义输入文本框的显示内容为“*”‘

    py3study

扫码关注云+社区

领取腾讯云代金券

http://www.vxiaotou.com