Jack肖解读 Web 实时化(iWeb峰会 PPT内容)

web-hosting-timeline-1991_1x
本来说好的周日更新,但一直没时间。周一又是一周最忙的一天,所以长话短说,尽量简单阐述观点

以下正文:

非实时的web

Word wide web (以下简称web)是1989年 由 TimBL在 CERN发明的。web现在已经是一个内容平台,应用平台。但是想要了解web为什么是现在的这种工作机制就必须回到本源,web其实只是被设计成为一个信息管理系统(information management system)。因为是一个信息关系系统,所以文档才是核心,所以dom里面最重要的对象之一是ducument。如果不回顾历史,新一代的开发者不会明白为什么这个对象叫做document 而不是 app 或者 canvas,或者 world。

最初的web也只保留与信息管理相关的功能,只有HTML,内容按照标题段落

等标签组织起来,那个时候css还没有出现(CSS和JS出现在1995年前后,由网景公司引进),样式是靠html标签来控制的。

对于一个信息管理系统而言,不需要持续的交互,只需要一次性下载文档就可以,所以http协议的特点是:

  • 单向访问,只支持客户端主动访问服务端,而服务端不能把消息主动推送给客户端
  • 无连接,一次请求就建立一个连接,一次连接只服务一个请求
  • 无状态,连接本身不带有上下文信息,服务端也不保存

对于历史的部分感兴趣的话可以wikipedia: https://en.wikipedia.org/wiki/Tim_Berners-Lee

需求催生新技术的产生,一直如此,人们需要更好的排版,CSS产生。需要更好的交互,JS产生…

可以说web一直在进化,我个人总结一张图
ppt-realtime-2

最开始的时候,web是完全静态的,内容使用链接组织在一起,同样的请求在任何时候都产生同样的内容,代表技术是HTML和HTTP。产品形态是门户网站。

后来出现动态网页技术,使得相同的URL根据不同的上下文信息(参数,cookie等)产生不同的内容成为可能,代表技术是(Jsp,Php 等动态网页技术),这种能力让搜索引擎成为可能。

Ajax的出现很重要,document的内容可以被替换了,前后端的交互摆脱了 document -> http request -> new document 的单一模式。社交网络在这一历史条件下产生。

现在是HTML5的时代,HTML5 = Web APP。HTML5并不是HTML的简单升级,其重要意义在于重新定义了Web和浏览器。Web就是应用,浏览器就是应用平台(或叫做操作系统都可以)。HTML5是一系列新技术,包括语义化,CSS3,设备访问能力,存储能力等等。但我认为最重要的一点是连接能力。WebSocket 让浏览器与后端直接双向长连。所谓风水轮流转,以前被B/S模式战胜的C/S模式借着浏览器的东风又回来了。

总结一下这段历史,有两条线索非常明显

  • web的发展是从后端到前端的
  • web的发展是从静态到实时的

 

从后端到前端与后端云服务化

ppt-realtime-3

先看第一个线索,从后端到前端。

当初,浏览器不够强大,尽管有标准化组织,但是浏览器的世界依然非常ugly,ie又非常buggy。人们在前端使用新技术是谨慎的,那个时候能够在后端做的事情一定不在前端做,后端可控,但前端不可控。

后端做了从数据到页面路由,到渲染一系列的工作,而前端只做页面展示相关的一点点逻辑。那个时候MVC是个后端概念,模板引擎也只是应用在后端。输出到前端的时候是 data 与view 打包好的完整html。

现在,已经越来越多的企业和开发者重视到了前后端分离:

  • 后端只提供数据,不接触任何html或模板。
  • 剩下的所有事情都交给前端去做。

这样做的好处显而易见,从工程上,前端开发页面直接打包后扔到cdn,而不需要像以前一样交给后端套页面。

另外,这是一个更合理的架构,把静态资源与动态内容区分,静态资源可以走更便宜的cdn流量,动态内容走更贵的自建机房或vps流量。动态的越少越好,把静态内容和动态内容糅合在一起产生的是更多的动态内容。

另外,我们注意到一件是:前端的计算能力其实是过剩的,为何不多加利用?把这些本来由服务端做的事情交给前端去做,甚至你可以把大多数业务相关的逻辑放到前端去做。

What Next?

当后端变得越来越薄,越来越业务无关,我们就可以把后端抽象出来,抽象成云服务。最终你会发现,后端就是一个数据库 + 加权限系统。

这就是我说的后端云服务化。

 

Websocket 与实时web

再看第二个线索,从静态到实时。
ppt-realtime-4

最初,前后端交互只能依赖于文档的切换这一种单一的模式,后来出现了一种新技术 XmlHttpRequest 也就是 Ajax。Ajax 让我们在不切换document就可以更新内容。

因为实时一直是强需求,聪明的开发者想到可以利用 Ajax的特性来模拟实时。就是定期发送请求,到服务端拉取最新的数据。但polling的方式只能做到准实时,而且实时性与性能要做trade off。这也是为何实时需求如此强烈,但真正实现实时的web厂商如此之少。使用Ajax 模拟实时是一条看起来很美但是走不通的路。

websocket的出现解决了最重要的难题–性能。无论是延迟性,还是吞吐量,websocket相比传统的polling方式性能提升都是革命性的。

poll-ws-compare (1)

一般情况下几百倍的性能提升是很easy的。为什么websocket的性能如此强劲要从原理说起。

websocket 在传输的时候并不依赖http,只有在建立连接握手的时候使用http,这就是关键所在。
ppt-realtime-5

websocket是二进制协议,协议头只有几个byte大小,其他的都是payload! 而http协议是文本协议,协议头动辄上k。再加上重复建立连接,几千倍的性能提升都是有可能的。

What next?
ppt-realtime-6

有了Websocket这把神器,我们要好好利用。当静态资源都被cdn缓存,动态内容何去何从?通过大量的http请求后端不如在前后端之间搭建一个websocket连接,当前后端之间必然要建立一个websocket的时候,你会发现常规的http请求似乎都没有存在的必要,通过websocket来发送岂不是更好?所有的动态数据都走同一个连接才是最优化的方式。

所以,websocket才是实现实时web的正确技术。

先更到这里吧。。。
ppt-realtime-7

ppt-realtime-8

 

 

-END-

知识共享许可协议

本站内容采用知识共享署名 4.0 国际许可协议进行许可。

发表评论

电子邮件地址不会被公开。