从Web到未来

本文是对我在某次公司部门分享的演讲稿整理。

文章会以时间轴为主线，从介绍我们最为熟悉的一种承载互联网技术形态（浏览器）的历史开始，通过对一些重大节点的还原，以史为鉴，从历史的沿革总结具有启发性的准则，来指导我们一起去看未来技术的发展走向。

web诞生

在1989年3月，供职于欧洲粒子物理研究所Tim Berners Lee写下了他关于万维网（World Wide Web简称Web）的最初构想。提出了Web作为全球超链接信息共享空间的想法，它是一个抽象的（假想的）信息空间，作为Internet上的一种应用架构，是之于Internet的。web的首要任务就是向人们提供信息和信息服务。在一开始，它就开放给所有人，欢迎所有人的贡献和参与，在Web上创建并分享内容，所有的人都可以分发、获取和利用信息。

从技术层面看，Web架构的精华有三处：

• 用超文本技术（HTML）实现信息与信息的连接；
• 用统一资源定位技术（URI）实现全球信息的精确定位；
• 用新的应用层协议（HTTP）实现分布式的信息共享。

这三个特点无一不与信息的分发、获取和利用有关。

既然web是一个抽象假想的空间，自然需要一个工具去访问这个空间，于是1990年，Berners Lee编写了世界上第一个web浏览器诞生。

1990--世界上第一个web浏览器

万维网（WWW）是欧洲粒子物理研究所的一帮科学家为了方便看文档、传论文而创造的，就是用标记语言+超链接写成的由文字和图片构成的HTML页面，随着网页从学术机构走向公众社会，网页承载的功能便超出了学术范围而变得愈加丰富，因此早期网页的局限性也逐渐显露出来。

1. 所有的网页都基于HTML页面。因为没有任何手段可以控制局部内容的显示和隐藏，因此任何局部的变化哪怕只多出一个标点符号，都只能重新下载一个新的页面。
2. 计算任务只能在服务端实现。由于网速限制，与服务器通信的过程是非常缓慢的，并且此过程是同步阻塞的，于是会出现这样的场景：（表单验证）用户提交一个表单，然后整个页面消失，浏览器呈现白屏，经过漫长的等待，浏览器渲染出一个和之前一模一样的页面，只不过输入框旁边多了一排红色小字：用户名错误。
3. 所有页面都是静态的。这意味着一个电商网站有一千种商品，哪怕页面布局一模一样，也必须写一千个单独的页面。

P.S.
1994年 PHP 实现了与数据库的交互以及用于生产动态页面的模板引擎，是Web领域中最主流的服务端语言。
1995年网景推出了JavaScript，实现了客户端的计算任务（如表单验证）。
1999年微软推出用于异步数据传输的ActiveX，衍生出了后来的Web网页迈向Web应用的关键技术Ajax，特别是在谷歌使用Ajax技术打造了Gmail（04年）和谷歌地图（05年）之后，Ajax获得了巨大的关注。它标识着Web2.0时代的到来。（Web1.0：静态网页，纯内容展示 Web 2.0：动态网页，富交互，前端数据处理）
2006年，XMLHttpRequest被W3C正式纳入标准。

至此，早期的Document终于进化为了Web page，上述三个局限都得到了妥善的解决

不平凡的1994

1994年可以看做前端历史的起点，这一年10月13日网景推出了第一版Navigator；

这一年，Tim Berners-Lee创建了W3C；目前，与Web相关的各种技术标准都由著名的W3C组织（World Wide Web Consortium）管理和维护。

这一年，Tim的基友发布了CSS。还是这一年，为动态web网页设计的服务端脚本PHP

这里提到了一家重要的公司--Netscape（网景），网景的历史可以映射出web前期发展的历史。

硅谷传奇-网景

除了 JavaScript 以外，网景还催化了JAVA，Netscape Navigtor还定义了现代浏览器的其它功能，比如说 Cookies、HTML Frames、自动代理等等。95年之前网景是浏览器的标准制定者。在当时拥有如此之多先进的特性，Netcape Navigator 曾是世界上最流行的浏览器，一时风光无限。

但是网景寿命不长，94年成立，1998年11月，网景被美国在线（AOL）收购，03年被解散。这与其所经历的两次波折有关。一次是互联网泡沫，一次是浏览器大战。

互联网泡沫

2000年的互联网泡沫从网景的发行上市说起。因为正是这次IPO的超预期成功极大地刺激了市场的投资热情。1995 年 8 月，网景公司在纳斯达克市当天最高涨幅达154%，以上涨86%报收。网景公司股价的惊人表现掀起了美国20世纪90年代后半期波澜壮阔的风险投资热潮。大多数资本争相流向了互联网产业。其中亚马逊（Amazon）、eBay等热门股上涨了数十倍，2000年1月起，原本被追捧的互联网股票突然被 大量抛售，并最终引发了整个纳斯达克市场的崩溃。

浏览器大战

Netvigator 开拓了民用浏览器市场，当他们正在大展拳脚之际，电脑平台上的霸主微软，突然以 Internet Explorer (IE) 向 Netscape 狂攻，开始了“第一次浏览器大战”（95到99），因为，1995 年的 8 月推出了 IE 1.0，结果 IE 在 Windows 的捆绑优势下，将 Netscape 击得溃不成军，当时市占率90%。对普通人来说，浏览器就是桌面上那个蓝色的“e”，多年来微软的 IE 浏览器几乎成了浏览器的代名词。

Netscape 后来把 Navigator 浏览器开源，创造了Mozilla，衍生出 Firefox 浏览器。05 年到 07 年的第二轮浏览器大战，IE的份额被蚕食。这次大战后 Firefox 在北美，欧洲等地区的占有率接近甚至超过了 20%，微软全球范围内的份额也从 IE 6 高峰时的 96% 先是下降到 85%，最后 07 年末的时候稳定在 60% 左右，不再是“唯一的浏览器”了。但尽管当时 Firefox 的性能远胜不思进取的 IE，但 Windows 的捆绑优势太强横，使 Firefox 一直没机会从后赶上。

直至 2008 年 Google 推出 Chrome 浏览器，其卓越的性能、简洁的介面以及捆绑 Google 搜索的优势，快速攻城掠地，除了侵蚀原有属于 Firefox 的市场之外，也同时痛殴老旧的微软 IE。2012年市占率第一。

移动互联网时代

2007年第一代iPhone发布；

2008年第一台Android发布；

2014年第五代HTML标准发布；

H5是由浏览器厂商（opera、苹果）主导，与W3C合作制定的一整套Web应用规范，至今仍在不断补充新的草案。我们可以清晰的感受到这一系列规范背后隐含的领导者的勃勃雄心：占领所有屏幕。

Google Chrome 的最大对手不再是其它品牌浏览器，而是浏览器之外的对手──本地应用（Native App）。

如此，衍生出了Web App与Native App之争，在这之前有必要介绍H5的历史，因为从其中可以窥见决定技术发展取向的基本准则。

从H5的发展探知技术发展准则

开放

从H5发展的历史进程得到的启发：HTML从早些年出现的2.0以后的版本都是又W3C来制定并维护。从97年到99年，HTML的版本从3.2快速迭代到了4.01。问题是到了4.01的时候W3C的认识发生了倒退，W3C没有停止开发这门语言，只不过他们对HTML不再感兴趣了。提出了XHMTL的概念，必须把文档标记为XML，XML与HTML都是一种文档标记语言，区别是XML的语法更加严格，（理论完美）比如属性必须小写，值要加引号。致命的是XML的错误处理模型：如果解析器遇到错误，就停止解析。结果是只要有一处错误，浏览器就会死掉，用户将看不到任何网页内容。

违反了重要的设计原理，就是著名的伯斯塔尔法则：发送时要保守，接受时要开放。接受时要开放，真是Web得以构建的基础。开发浏览器的人，必须敞开胸怀去接受所有发送给浏览器的东西，包括之前不够标准、规范的东西，这正是Web的发展动力。从某种角度讲，Web走的正是一条混沌发展之路，虽然混沌，却非常美丽诱人。作为专业人士，在发送文档的时候要应该保守一些，尽量采用最佳实践，尽量确保文档格式良好，但从浏览器的角度说，他们必须以开放的姿态去接受任何文档。所以过于苛刻的错误处理模型，使得不符合“接受开放”的法则，与伯斯塔尔法则是对立的。

用户优先

因为理念上的不一致，导致04年以Opera为代表的厂商脱离W3C成立WHATWG，重新回到HTML的发展中。之后W3C包括Lee都意识到了方向性的错误，结束了不切实际的XHTML标准，也回到了HTML的标准建设中。现在二者同心同德，主要原因是对于H5的设计思想保持统一，其中最具有启发性也是最重要的一条是：最终用户优先。这个原理本质上是一种解决冲突的机制。换句话说，当面临一个要解决的问题时，如果W3C和WHATWG给出了不同的解决方案，一旦遇到冲突，最终用户优先，然后是作者，其次是实现者，再次是标准制定者，最后才是理论上的完美。理论上的完美，理解为创建出最完美的格式。标准制定者是WHATWG、W3C，实现者是浏览器厂商，作者是开发人员，用户是第一位。

根据以上开发者在链条中的位置高于实现者，有更高的权重。它最重要，因为承认了用户的权力，无论是设计一种格式，还是设计软件，这条原理保证了用户的发言权。而这条原理也正道出了事物运行的本质，用户的权力大于作者，作者的权力大于实现者，实现者的权力大于标准制定者。然而，反观其他规范，如XHTML2，就会发现完全相反的做法，把追求理论的完美放在第一位，而把用户放在了链条的最低端，需要严格错误处理带来的各种麻烦。这是一种完全不同的思维方式。

开放和用户优先，是每一个人，无论设计一种格式，还是设计软件，都要遵循的基础准则。

Web VS Native

这一节我们来讲移动互联网下的Native App、Web App之争。

Native App的优点：

• Native的原生控件有更好的体验，比如消息推送，弱网离线使用；
• Native有更好的手势识别；
• Native有更合适的线程模型，尽管Web Worker可以解决一部分问题，但如图像解码、文本渲染仍无法多线程渲染，这影响了Web的流畅性。
• Native能实现更丰富细腻的动画效果，归根结底是现阶段Native具有更好的人机交互体验。

Web App的优点：

• 搜索引擎入口。如果一个产品是内容主导的，可能很多流量是来自搜索引擎，这也可能是mobile web访问量更多的原因之一。
• 即时更新。如果做native app的话，每次版本更新从审核、上架到用户更新是有一个时间间隔的，很有可能用户懒得更新，就一直运行着一个很久很久以前的版本，接触不到新版本里的功能。如果ship的版本有问题的话，大量用户可能直接就流失了，不像mobile web，有比较快的补救的可能。所以一般来说，mobile native ship的标准会更高。
• 设计和开发成本。Native app要为不同的平台进行设计和开发，有不同的规范和语言，mobile web在这方面的工作量会小很多。

综上，Web优势是可以reach到更多用户，而native是优于用户体验，黏性更强。

所以事实上的表现是，移动 Web 可以触达的用户是 App 的三倍之多，但用户的留存时间却明显少于在 App 上的留存时间，Native app用户每个月花的时间是mobile web用户的18倍。

对于 Native App 来说，其最大的痛点正是web App的优点，由于其天生封闭的基因，内容无法被索引，而这条似乎又无法突破，这会导致后续一系列的问题。例如，用户想知道红烧肉的做法，还需要先知道App的名字，下载App后才能获取内容，这个流程是十分不合理的。而随着移动互联网的发展，用户下载App的热情也逐渐减弱，再加上用户80%的时间被Top3的超级App占据，所以也要考虑自己的产品有没有潜力进入Top3，还是会是在长尾里，去跟许许多多的app竞争那剩下的那几十分钟，对于站点来说，应用分发成本也因此越来越高了。

移动端的发展进程和PC的历史如出一辙，一开始都是Native的天下。但浏览器试图取代操作系统的篡位之心从未消减。相比原生应用，Web有太多好处：无须开发两套或者多套系统版本、无须安装、无须手动升级、无须审核……而最大的好处以及驱动软件形态转向的主要原因是在于降低成本。

出路 & 现状

据此，众多的技术公司使出了各种各样的奇门遁甲之术，归纳为两条路。

一条路是整合各native。目前的Hybrid、react native、weex等都可以看做Web App在性能方面向Native靠近的尝试。其中一个最重要的节点是，Facebook在2015.3.26 F8大会上开源了React Native。既拥有Native的用户体验、又保留React的开发效率。这个理念似乎迎合了业界普遍存在的痛点，尽管Native开发成本更高，但现阶段Native仍然是必须的，因为Web的用户体验仍无法超越Native。但也有缺点，比如强依赖于Facebook，有政策风险等等。

P.S.
React实际是思想上的一次胜出。
现在编译器制作越来越简单，从语言到语言的翻译器成本下降，将来javascript（es5）可能会成为一门中间语言，在这之上比如说reason，typescript，es6，java，oc都可以写。
虽然js未必会一统天下，但翻译器节省了跨语言的成本。

另一条路是拥抱web。比如小程序（易从Web迁移），PWA。相对于 Native App 的封闭，PWA 却是完全开放的——PWA 现有的所有技术都是遵循W3C的标准，完全开放，因此能够快速被站点接受、被浏览器快速支持。

2015--PWA

对于前期的失利，Web 显然是不甘心的。想要继续前进，就必须打造解开枷锁的钥匙——Progressive Web App（ PWA ） 以及支撑 PWA 的一系列关键技术应运而生。其中，Servece Worker是至关重要的一项技术。早在 2014 年， W3C 公布就公布过 Service Worker 的相关草案，但是其在生产环境被 Chrome 支持是在 2015 年。因此，如果我们把 PWA 的关键技术之一 Service Worker 的出现作为 PWA 的诞生时间，那就应该是 2015 年。

PWA 不是特指某一项技术，而是应用了多项技术的 Web App。其核心技术包括 App Manifest、Service Worker、Web Push、Credential Management API ，等等。其核心目标就是提升 Web App 的性能，改善 Web App 的用户体验。

在用户体验和用户留存两方面都提供了非常好的解决方案。PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。

其中，App Manifest 让 Web 站点能被添加到手机桌面，解决了用户到达站点链条太长的问题；Service Worker 让 Web 站点能够离线状态下正常使用，还有能让用户离线接受站点消息推送的 Web Push，这两点非常值得关注。

PWA 刚推出时，就获得了很多大型站点的支持，比如被腾讯战略投资的印度最大的电商网站 Flipcart，它是第一个大规模应用 PWA 的站点，也取得了非常好的收益，用户停留时长增长了 3 倍。

未来是web的天下

Native携带着天生封闭的基因，一种顽固而不可逆的特点。

而制约Web App的因素也有很多，但我们可以看到Web App一直在不断修复缺陷、突破局限。网页调取系统功能，Geolocation API、Camera API……你说网页不像APP有图标，safari早就支持在桌面上添加网页链接的快捷图标；你说网页必须联网，现在离线的方案也很多啊；你说Web App性能差，这个……你说得对，也就是这个原因，Native App还能作为主流存在一段时间，可是如果Web App的性能逐渐赶上Native了呢？

未来即使不是web的天下，那也一定是属于开放的、最终用户优先的、可以降低开发成本的一种技术形态。