前端激荡三十年(一本最详细的编年史册)

3,238 阅读12分钟

前端,由浏览器诞生的那一刻便随之而生,经过不断的探索如何将复杂晦涩的底层数据以人能更好理解的形式展示出去,从开始时的能用到好用,从单调到炫彩,用户体验越来越被重视,前端作为计算机层面与用户最近的一层必须去变革与发展。


接下来从三十年前,HTML提出的那一天开始看起,看看这三十年前端经历了哪些变革与发展才走到了今天这样一个丰富多彩的样子。


  1. 1989年,伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统,并且记录到在1990年底写出浏览器和服务器软件。同年,伯纳斯-李与CERN的数据系统工程师罗伯特·卡里奥联合为项目申请资助,但未被CERN(欧洲核子研究中心)正式批准,可见伟大的第一步并没有那么一帆风顺。

  2. 1990年发明了首个以超文本语言 HTML 为基础在 NeXT 电脑上发明了最原始的 Web 浏览器网页浏览器WorldWideWeb,也称之为“所见即所得”浏览器。

  3. 1991年底,HTML这一词的首个公开描述出现于一个名为“HTML标签”的文件中,由伯纳斯-李于提及,这时候的HTML一共有18个元素,设计的相对比较简单。

  4. 1992年6月,HTML DTD的首个非正式草案被提出, 后续有七个修订版(7月15日,8月6日,8月18日,11月17日,11月19日,11月20日,11月22日),其中在11月HTML DTD 1.1被定为初步草案,但是并非正式草案。

  5. 1993年中期互联网工程任务组(IETF)发布首个HTML规范的提案:“超文本标记语言(HTML)”互联网草案。美国国家超算应用中心(National Center for Supercomputer Applications)以HTML为基础开发了名为 Mosaic 的浏览器,于 1993 年 4 月发布。



  6. 1994年7月 HTML 2.0 规范发布,9 月,因特网工程任务组(Internet Engineering Task Force)设立了 HTML 工作组。11 月,Mosaic 浏览器的开发人员发布了 Mosaic Netscape 1.0 beta 浏览器,后改名为 Navigator。年底,由 Tim 牵头的万维网联盟(W3C)成立,这标志着万维网的正式诞生。 此时的网页以 HTML 为主,是纯静态的网页,网页是“只读”的,信息流只能通过服务器到客户端单向流通,由此世界进入了 Web 1.0 时代。并且CSS也开始走进人们,CSS的最初建议由哈坤·利在芝加哥的一次会议上第一次提出了CSS的建议。同在今年“世界上最好的语言”PHP也出现了,起初一个叫Rasmus Lerdorf的加拿大人为了维护个人网站而创建了PHP。PHP原意是Personal Home Page,宣传语是Hypertext Preprocessor(超文本处理者)。这时PHP实现了与数据库的交互以及用于生产动态页面的模板引擎,是Web领域中最主流的服务端语言。

  7. 1995年,是前端技术发展最迅猛的一年,从CSS到javascript都涌向出来。

网景推出了一直被延续至今的JavaScript,实现了客户端具备了计算的能力。起初这种脚本语言叫做 Mocha,后改名 LiveScript,后来为了借助 Java 语言创造良好的营销效果最终改名为 JavaScript。网景公司把这种脚本语言嵌入到了 Navigator 2.0 之中,使其能在浏览器中运行。

今年在W3C会议上CSS又一次被提出,CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨,哈坤、波斯和其他一些人是这个项目的主要技术负责人。

HTML 3.0被提议作为IETF的标准,但直到提案在五个月过期后仍没有进一步的行动。它包含许多拉格特HTML+提案的功能,如对表格的支持、围绕数据的文本流和复杂的数学公式的显示。W3C开始开发自己的Arena浏览器作为HTML 3和层叠样式表的试验台,但HTML 3.0并没有获得成功。

  1. 1996年3月,Navigator 2.0内置了JavaScript 1.0,微软也发布了 VBScript 和 JScript。JScript 是对 JavaScript 进行逆向工程的实现,并内置于 Internet Explorer 3 中。但是 JavaScript 与 JScript 两种语言的实现存在差别,这导致了程序员开发的网页不能同时兼容 Navigator 和 Internet Explorer 浏览器。Internet Explorer 开始抢夺 Netscape 的市场份额,这导致了第一次浏览器战争。12月, W3C 推出了 CSS 1.0 规范,CSS(层叠样式表)的第一份正式标准(

    Cascading style Sheets Level 1
    )完成,成为w3c的推荐标准。

  2. 1997 年 6 月,ECMA 以 JavaScript 语言为基础制定了 ECMAScript 标准规范 ECMA-262。JavaScript 是 ECMAScript 规范最著名的实现之一,除此之外,ActionScript 和 JScript 也都是 ECMAScript 规范的实现语言。自此,浏览器厂商都开始逐步实现 ECMAScript 规范。HTML 4.0作为W3C推荐标准发布。

  3. 1998年5月,CSS推出了第二版规范。6 月,ECMAScript 2 规范发布,并通过 ISO 生成了正式的国际标准 ISO/IEC 16262 。



  4. 1999 年 12 月,ECMAScript 3 规范发布,在此后的十年间,ECMAScript 规范基本没有发生变动。 ECMAScript 3 成为当今主流浏览器最广泛使用和实现的语言规范基础。同年AJAX开始进入失业,微软推出用于异步数据传输的 ActiveX,随即各大浏览器厂商模仿实现了 XMLHttpRequest。动态网页技术JSP由 Sun 公司倡导和许多公司参与,旨在创建一种使软件开发者可以响应客户端请求,从而动态生成 HTML、XML 或其他格式文档的 Web 网页的技术标准,此时的JSP 技术是以 Java 后端语言为基础的。

  5. 2000年 W3C 采用了一个大胆的计划,把 XML 引入 HTML,XHTML1.0 作为 W3C 推荐标准发布,开始定义了JSON格式数据,至此前后端的数据交换可以不再使用冗余信息较多而且还需要来回解析的XML,转而使用JavaScript原生就支持的JSON格式数据。

  6. 2001年,W3C 推出了 CSS 3.0 规范草案。

  7. 2002年,Mozilla项目发布了它的浏览器的第一版,后来起名为Firefox,也就是我们现在使用的获取浏览器。

  8. 2003年,苹果公司也立即进入浏览器市场,快速研发并发布了Safari浏览器的第一版。



  9. 2005年初,Ajax(异步JSON和XML)技术开始被大量的使用起来,网站局部数据操作得到实现,Web世界又往前迈进了一大步。

  10. 2006年,一代王者JQuery诞生了,John Resig发布了JQuery工具库的第一个版本,这个工具库一经出世就风靡全球,一直持续到现在,是前端史上最成功的JS库。与2000被W3C标准提出的 XHTML 2.0 最终放弃了,看起来权威机构的标准也不是那么有力。

  11. 2007年10月,ECMAScript 4.0版草案发布,对3.0版做了大幅升级,预计次年8月发布正式版本。草案发布后,由于4.0版的目标过于激进,各方对于是否通过这个标准,发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司,反对JavaScript的大幅升级,主张小幅改动;以JavaScript创造者Brendan Eich为首的Mozilla公司,则坚持当前的草案。

  12. 2008年1月HTML5由W3C作为工作草案发布。虽然HTML5的语法非常类似于SGML,但它已经放弃任何成为SGML应用程序的尝试,除了一种替代的基于XML的HTML5序列,它已明确定义自己的“HTML”序列。7月,由于对于下一个版本应该包括哪些功能,各方分歧太大,争论过于激进,ECMA开会决定,中止ECMAScript 4.0的开发(即废除了这个版本),将其中涉及现有功能改善的一小部分,发布为ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为Harmony(和谐)。会后不久,ECMAScript 3.1就改名为ECMAScript 5。看来大佬们为了坚持自己的观点,也会毫不犹豫打破和谐,这才是技术进步的要素。同年12月,Chrome浏览器发布了,JavaScript 执行引擎 V8 编译器也在此时诞生,这是Google公司为Chrome浏览器而开发的,它的特点是让JavaScript的运行变得非常快。它提高了JavaScript的性能,推动了语法的改进和标准化,改变外界对JavaScript的不佳印象。而且V8是开源的,任何人想要一种快速的嵌入式脚本语言,都可以采用V8,这拓展了JavaScript的应用领域。

  13. 2009 年,W3C正式宣布了 XHTML2.0 不再继续,宣告死亡。大名鼎鼎的Node.js开始被瑞安·达尔(Ryan Dahl)编写出来,12月,ECMAScript 5.0版正式发布。AngularJS也于2009年诞生,由Misko Hevery 等人创建,后为Google所收购,已经被用于Google的多款产品当中。同在该年,样式层的变革也开始出现, Alexis Sellier发明的Less 被提了出来。



  14. 2010年1月,一款名为“npm”的软件包管理系统诞生。还有BackboneJS和RequireJS,这都标志着JavaScript进入模块化开发的时代。在可视化的方向也开始着落,第一版three.js发布。

  15. 2011年5月,工作小组将HTML5推进至“最终征求”(Last Call)阶段,6月,ECMAscript 5.1版发布,并且成为ISO国际标准(ISO/IEC 16262:2011),风靡一时的的Bootstrap由在今年中被twitter开源。

  16. 2012年10月,微软发布 TypeScript 公开版,2012年12月,W3C指定HTML5作为候选推荐阶段。开源的前端打包工具Webpack发布了第一个阶段。在今年Bootstrap 2也被发布,这一版增加了十二列网格布局和响应式组件,并且对许多组件进行了修改。样式方面Less开始正式被发布使用。可视化方向由国内IT巨头百度的开源Echarts 1.0正式开源发布,一直风靡至今,年底,所有主要浏览器都支持ECMAScript 5.1版的全部功能。

  17. 2013年3月,ECMAScript 6草案冻结,不再添加新功能,新的功能设想将被放到ECMAScript 7。5月,Facebook发布UI框架库React,引入了新的JSX语法,使得UI层可以用组件开发。6月,TypeScript 0.9 正式版被发布。Bootstrap 3于8月19日发布,开始将移动设备优先作为方针,并且开始使用扁平化设计。12月,ECMAScript 6草案发布。百度的开源Echarts 2.0发布完成。

  18. 2014年2月, Vuejs发布,作者尤雨溪在Hacker News、Echo JS与Reddit的

    /r/javascript
    版块发布了最早的版本。10月28 日,W3C 正式发布 HTML 5.0 推荐标准。React Developer Tools 成为 Chrome Developer Tools 的一个扩展。



  19. 2015年4月23日,Mark Otto宣布正在开发Bootstrap 4。6月,ECMAScript 6正式发布,并且更名为“ECMAScript 2015”。这是因为TC39委员会计划,以后每年发布一个ECMAScirpt的版本,下一个版本在2016年发布,称为“ECMAScript 2016”。同在今年,在 React.js 大会上,Facebook 发布了 第一版 React Native。阿里巴巴的以React研发的样式库antDesign的第一个版本发布。一直风靡的Redux在今年被Dan Abramov 和 Andrew Clark 发布。10月27日,Vuejs正式发布1.0.0。Flutter第一个版本支持Android操作系统,被称作“天空”,在Flutter开发者会议上被公布。语法转换工具babel 5.0和6.0相继发布。

  20. 2016年,1月百度的可视化库Echarts 3.0发布在公众视野,得到了一致好评。6月,阿里巴巴的移动端基于Preact / React / React Native 的 UI 组件库mobile.ant.design正式发布。10月份Vue 2.0 发布完成。

  21. 2017年,ECMAScript2017正式发布。11月,所有主流浏览器全部支持 WebAssembly,这意味着任何语言都可以编译成 JavaScript,在浏览器运行。

  22. 2018年,1月,百度EFE团队正式发布了旗下知名开源产品ECharts 的最新大版本4.0正式发布。2月,Webpack 继续推动简单和更快的构建,声称改进了 98%,Webpack 4正式发布,它选择了合理的默认值,在没有插件的情况下处理更多的开箱即用的功能,并且不再需要开始使用配置文件。8月,Babel 官方博客在经历了4000 次提交,发布了50 多个预览版本后宣布正式推出Babel 7.0。

  23. 2019年,2月,React 16.8 带这稳定版的 hooks发布。8月份,Angular8.0正式发布。Vue3.0已经在开发中,预计于今年发布。


三十年,前端从上古时期的静态网页时代,发展到以后端作为载体的MVC时代,再到AJAX兴起后的单页应用时代,一直到到现在的最流行的MVVM时代,令人感慨。

时间还在继续,技术从未停止发展,前端从无到有,从单一到炫彩,越来越丰富,对于前端的未来发展也越来越让人充满兴奋与美好憧憬。


如果有漏掉一些你所知道的前端技术,请在留言区留言哦,一起努力补充一个完整前端史册!


参考资料:
https://zh.wikipedia.org/wiki/HTML
https://javascript.ruanyifeng.com/introduction/history.html


如果对你有帮助不要忘了分享给你的朋友或者点个赞哦!也可以关注作者,查看历史文章并且关注最新动态,助你早日成为一名全栈工程师!