从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的天下，那也必定是属于开放的、最终用户优先的、能够下降开发成本的一种技术形态。