前端发展史

原文转自https://www.cnblogs.com/kidney/p/6079530.html

从静态走向动态

1994年可以看做前端历史的起点,

这一年10月13日网景推出了第一版Navigator;

这一年,Tim Berners-Lee创建了W3C;

这一年,Tim的基友发布了CSS。

还是这一年,为动态web网页设计的服务端脚本PHP以及笔者本人诞生。

万维网(WWW)是欧洲核子研究组织的一帮科学家为了方便看文档、传论文而创造的,这就是为什么Web网页都基于Document。Document就是用标记语言+超链接写成的由文字和图片构成的HTML页面,这样的功能已经完全满足学术交流的需要,所以网页的早期形态和Document一样,完全基于HTML页面,并且所有内容都是静态的。

随着网页从学术机构走向公众社会,网页承载的功能便超出了学术范围而变得愈加丰富,因此早期网页的局限性也逐渐显露出来。

第一,所有的网页都基于HTML页面,因为没有任何手段可以控制局部内容的显示和隐藏,因此任何局部的变化哪怕只多出一个标点符号,都只能重新下载一个新的页面。

第二,计算任务只能在服务端实现。由于网速限制,与服务器通信的过程是非常缓慢的,并且此过程是同步阻塞的,于是会出现这样的场景:用户提交一个表单,然后整个页面消失,浏览器呈现白屏,经过漫长的等待,浏览器渲染出一个和之前一模一样的页面,只不过输入框旁边多了一排红色小字:用户名错误。

第三,所有页面都是静态的,这意味着一个电商网站有一千种商品,哪怕页面布局一模一样,也必须写一千个单独的页面。

早期网页形态低下的效率是无法仅仅通过提高网速解决的。

1994年一个叫Rasmus Lerdorf的加拿大人为了维护个人网站而创建了PHP。PHP原意是Personal Home Page,宣传语是Hypertext Preprocessor(超文本处理者)。PHP实现了与数据库的交互以及用于生产动态页面的模板引擎,是Web领域中最主流的服务端语言。

1995年网景推出了JavaScript,实现了客户端的计算任务(如表单验证)。

1996年微软推出了iframe标签,实现了异步的局部加载。

1999年W3C发布第四代HTML标准,同年微软推出用于异步数据传输的ActiveX,随即各大浏览器厂商模仿实现了XMLHttpRequest。这标识着Ajax的诞生,但是Ajax这个词是在六年后问世的,特别是在谷歌使用Ajax技术打造了Gmail和谷歌地图之后,Ajax获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术,它标识着Web2.0时代的到来。

2006年,XMLHttpRequest被W3C正式纳入标准。

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

从后端走向前端

早期的网页开发是由后端主导的,前端能做的也就是操作一下DOM。2006年 John Resig发布了jQuery,jQuery主要用于操作DOM,其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手,因此很快风靡全球,大量基于jQuery的插件构成了一个庞大的生态系统,更加稳固了jQuery作为JS库一哥的地位。

jQuery最早的版本在这里:

http://genius.it/ejohn.org/files/jquery-original.html

起初制约Web开发从后到前的因素很简单,就是前端很多事干不了或干不好,当时的浏览器性能弱,标准化程度低。特别是占据大量市场份额的IE,不仅ugly,并且buggy。

于2008年问世的谷歌V8引擎改变了这一局面。现代浏览器的崛起终结了微软的垄断时代,前端的计算能力一下子变得过剩了。标准组织也非常配合的在2009年发布了第五代JavaScript,前端的装备得到了整体性的提高,前端界如同改革开放走进了一个令人目不暇接的新时代。

2009年AngularJS诞生,随后被谷歌收购。2010年backbone.js诞生。2011年React和Ember诞生。2014年Vue.js诞生……前后端分离可谓大势所趋。

后端只负责数据,前端负责其余工作,这种分工模式一定是更清晰也更高效的。随着基础设置的不断完善以及代码封装层级的不断提高,使得前端一个人能够完成的事越来越多,这是技术积累的必然结果。就好像今天高中生的知识水平,可能远远超过五百年前的科学家,今天要成为Web全栈工程师,门槛也只会越来越低。

2014年,第五代HTML标准发布。H5是由浏览器厂商主导,与W3C合作制定的一整套Web应用规范,至今仍在不断补充新的草案。我们可以清晰的感受到这一系列规范背后隐含的领导者的勃勃雄心:占领所有屏幕。

从前端走向全端

2009年Ryan Dahl发布了node,node是一个基于V8引擎的服务端JavaScript运行环境,类似于一个虚拟机,也就是说js在服务端语言中有了一席之地。如果说ajax是前端的第一次飞跃,那么node可算作前端的第二次飞跃。它意味着JavaScript走出了浏览器的藩篱,迈出了全端化的第一步。

一种流行的组合就是利用Express和Mongo搭建服务端程序。

Web开疆拓土的步伐并不止于此。

2007年第一代iphone发布,2008年第一台安卓手机发布。悄然间互联网进入了移动时代。移动端的发展进程和PC的历史如出一辙,一开始都是Native App的天下。但浏览器试图取代操作系统的篡位之心从未消减。相比原生应用,Web APP有太多好处:无须开发两套系统版本、无须安装、无须手动升级、无须审核……我认为最大的好处以及驱动软件形态转向的主要原因在于降低成本,记得13年的时候韩寒说做一个APP大概需要五十万,今天网上比较靠谱的分析评估半年时间从零做出一个稍微像样的APP至少100万,而开发Web App花的钱一定少得多。

制约Web App的因素有很多,但我们可以看到Web App一直在不断修复缺陷、突破局限。你说网页有tab bar,好吧,给你个fullpage API,你说网页不能调取系统功能,好吧,Geolocation API、Vibration API、Luminosity API、Orientation API、Camera API……你说网页不像APP有图标,IOS早就支持在桌面上添加网页链接的快捷图标,还得是乔帮主远见;你说网页必须联网,现在离线的方案也很多啊;你说Web App性能差,这个……你说得对,也就是这个原因,Native App还能作为主流存在一段时间,可是如果Web App的性能逐渐赶上Native了呢?目前的Hybrid、nw.js、Electron、react native、weex等都可以看做Web App在性能方面向Native靠近的尝试。更何况半路又杀出个微信小程序。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容

  • 这是一个演讲稿,mark一下 1、前端的发展史 1、前端 这是从维基百科上找到的关于前端的定义,一般来说,计算机程...
    白璞1024阅读 1,719评论 0 51
  • 前端演进史# 引言:前不久开始写技术分享文章的时候,一直想从写一篇关于前端简史相关的文章开始。所以,一直在准备着,...
    迷缘火叶阅读 10,933评论 0 8
  • “我可以划船不用浆, 我可以扬帆没有方向, 但是朋友啊,当你离我远去, 我却不能不感伤” 一直很喜欢无印良品,...
    木笔琼叶阅读 299评论 0 0
  • 去年看朱光潜的《慢慢走,欣赏啊!》里面有一句话一直还记得,他说“你如果向我埋怨天公说,人生是多么苦恼啊!我说,人们...
    亦如是阅读 666评论 0 0
  • 再见曲然已是三年后,我坐飞机从北京飞往南京。南京我的家乡,这座充满古色古香的城市承载了我太多的回忆,我拉着行...
    郑一冉阅读 850评论 8 6