前端发展史

从静态走向动态

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年Angular.js诞生,随后被谷歌收购。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等都可以看做Web App在性能方面向Native靠近的尝试。更何况半路又杀出个微信小程序。

   阮一峰说:

参考:

Jack肖解读 Web 实时化https://blog.wilddog.com/?p=1772

玉伯:Web 开发模式演变历史和趋势http://www.cnblogs.com/lhb25/p/web-development-mode-evolve.html

Web开发的发展史http://blog.jobbole.com/45169/

时间: 2024-10-24 13:44:49

前端发展史的相关文章

Vue.js 实战教程 V2.x(1)前端发展史

1.1 Web 1.0时代 1989年,英国科学家蒂姆·伯纳斯-李在欧洲核子研究中心工作时发明了万维网(WWW). 第一个网站的截图(图片来源:CERN) 1990年,HTML(Hyper Text Markup Language)1.0发布. 1993年,CGI(Common Gateway Interface)诞生. 1994年,HTML 2.0发布. 1994年,Netscape公司成立,发布了第一款商业浏览器Navigator. 第一款商业浏览器的截图 1995年,Netscape推出了

Web前端行业的了解

即将从事Web前端的工作的 先对即将从事的行业有个了解. Web前端发展史: 第一个网页诞生于90年代初,早期的网页除了一些小图片和毫无布局可言的标题段落,其全由文字构成.然而随着时代的进步,互联网的 不断发展,接下来出现了表格布局,此次是flash,最后是基于CSS的网页设计.不可否认,前端页面重构技术也经历着这样的一个过程:首先是Table布局-->Html-->Div+css-->Html5+Css3,面对众多的浏览器与平台,Web前端不再是以往那样简单的重复性工作. Web前端开

前端的“前世今生”

引言: 本人自2017年5月29日决定入"前端坑"以来,到现在突然想了解一下前端的"前世今生",看看她到底是如何修炼成神,被大家所崇拜并有无数人跟随的.我这个草根到15年的时候才了解到"大神",真是相见恨晚啊! 我虽比"大神"早出生,但是没有您成长的快啊!我对您的成长史也是借鉴别人的.大家参考参考....    前端发展里程碑    从静态走向动态 1994年可以看做前端历史的起点,这一年10月13日网景推出了第一版Navig

2020年前端学习体系与前端概述

前端学习目标 基础课程:HTML + CSS javaScript DOM BOM AJAX HTML5 + CSS3 应用课程:jQuery easyUI 移动端开发 响应式开发 PHP基础 H5UI bootstrap less/stylus 模板引擎 swiper iscroll select2 工程课程:ES5/6/7 git&GitHub nodeJS mongoDB mySQL webpack gulp babel VUE 微信小程序 REACT 学习前端所需要用到的工具 欲善其事必

Web的认识《源于博客园》

即将从事Web前端的工作的 先对即将从事的行业有个了解. Web前端发展史: 第一个网页诞生于90年代初,早期的网页除了一些小图片和毫无布局可言的标题段落,其全由文字构成.然而随着时代的进步,互联网的不断发展,接下来出现了表格布局,此次是flash,最后是基于CSS的网页设计.不可否认,前端页面重构技术也经历着这样的一个过程:首先是Table布局-->Html-->Div+css-->Html5+Css3,面对众多的浏览器与平台,Web前端不再是以往那样简单的重复性工作. Web前端开发

JS基础知识-01

01-浅谈前端发展史 第一阶段:C/S(client server)->B/S(browser server) 网页制作 技术栈:PhotoShop.HTML.CSS 第二阶段:从静态到动态,从后端到前端 前端开发工程师 前后端分离 后台:完成数据的分析和业务逻辑编写(包含API接口编写) 前端:网页制作.JS交互效果.数据的交互和绑定 技术栈:JavaScript.Ajax(跨域技巧).jQuery... 第三阶段:从前端到全端(从PC端到移动端) H5.CSS3.响应式布局开发.Zepto.

热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!

课程简介 课程地址:https://ke.qq.com/course/432961 机构名称:大华软件学院 授课讲师:大强老师 课程名称:Vue.js 实战教程 V2.x(一)基础篇 课程简介:包括前端发展史.Vue.js简介.第一个Vue.js程序.安装环境和Vue.Vue实例.模板语法.计算属性和侦听器.Class与Style绑定.条件渲染.列表渲染.事件处理.表单输入绑定.组件基础等等. 适合人群: 1.初出茅庐,想学习前端开发的同学: 2.没用过Vue.js,想学习更多框架的同学: 3.

互联网前端的发展史

互联网的前端的发展史,也是不断解决问题的历史,从初期如何构建更好的页面,产生了HTML.CSS.JavaScript:到后面如何产生更好的用户体验,出现了Ajax.jQuery等:到后面互联网应用越来越丰富就开始面对如何更快的产生了更多的应用,然后又出现了前后端分离框架,如AngularJS. ReactJS .VueJS 等. 一.互联网的初期,围绕着如何能构建更好的页面展开 互联网伊始以HTML-超文本标记语言为基础的网页开发开始引起了每个普通人的注意,当网景公司开创了最早的图文浏览器时,全

聊聊前端技术的发展史

web的起源 给大家讲一个故事,在很久以前,互联网还没有出现,电脑虽然可以与另一台电脑通信,但是也就只能做一些发发邮件或者是用FTP传输一些文件的事情. 有个喜欢每天捣鼓新技术的程序员,名字我们暂且叫他小强吧.小强是一个球迷,每天都要看一些关于NBA球赛的新闻,而且搜集了很多有关球队介绍的资料保存在电脑的硬盘上.硬盘上的球队资料大概就是下图的效果. 这样的文件有成百上千个,小强每天都要打开这些文件来欣赏各个球队的风采.有一天晚上,小强打开了"洛杉矶湖人队.txt",文件中在介绍球队的时