引子
大家都用过京东,可以感受到商品详情页的页面加载速度非常快,明明那么大的数据量,渲染到模板里边,怎么会这么快的,再怎么着也得100~200ms吧。
原因是京东用了页面静态化技术,那么何为页面静态化呢?
提前将页面加载好,放到静态资源服务器里,当用户访问的时候,直接访问静态页,你们猜速度是多少,50ms?不存在的。1ms足矣!
有人问,你怎么知道京东用了页面静态化技术啊,京东又不是你开发的,上图:
这个路径后边100016034380.html,What is html?
效率提升证据
共分为三次测试
未使用页面静态化技术
项目启动,第一次访问详情页:1.59s
第二次访问详情页:123ms
使用页面静态化技术
第三次访问详情页:4ms
结果分析
第一次1.59s
第一次也太快了吧,一秒钟。因为项目刚启动,Feign组件加载方式为懒加载,远程调用商品微服务接口时,才会动起来,1.59s的时间里,不止有渲染页面的时间,还有组件启动的时间,所以第一次比较慢。
用一个形象的例子来形容一下:
汽车,第一个百米需要13s,第二个百米和第三个百米只需要7s。由于第一个百米有一个启动的过程,所以时间会比较长,启动完成后,进入匀速状态,就会非常平均。
第二次123ms
第二次,服了服了,更快了。正常的实时渲染模板时间,调用接口,获取商品信息,渲染到商品详情页模板。
第三次4ms
第三次,行吧,你是真的快!用了页面静态化,就是好。
总结
页面静态化技术,在用户体验上,就是好(没文化,一句卧槽行天下)。