.

前端开发20年变迁史

年,第一个Web浏览器诞生,而WWW的诞生直接拉开前端史的序幕。

从静态页面到JavaScript,从依赖后端到自主开发,前端开发者从不被重视的“页面仔”逆袭为如今很多前端工程师的薪资比后端还高,从前端技术由国外开发者主导到如今国内自主产生的小程序技术,我们走了20年。

作者

司徒正美

责编

伍杏玲

年,第一个Web浏览器的诞生;年,WWW诞生,这标志着前端技术的开始。

在这将近20年的前端发展史中,我们经历了从最早的纯静态页面,到JavaScript跨时代的诞生;从PC端到移动端;从依赖后端到前端可自由打包开发;从早期的网景Navigator浏览器到现在各家浏览器百花齐放……

我们经历了前端的洪荒时代、Prototype时代、jQuery时代、后jQuery时期、三大框架割据时代,这其中均是由国外开发者主导,直到如今的小程序时代,才是中国开发者独创的。

这是漫长的技术储备下的成果,最终促成了良好的技术成长收获。期间的前端发展之路,崎岖艰难:

洪荒时代(~年)

在~年期间,前端界发生的大事有:WWW(WorldWideWeb)的诞生、浏览器的诞生、JavaScript的诞生,没有专业的前端,页面全是由后端开发的。

年,万维网之父蒂姆·伯纳斯-李(TimBerners-Lee)在NeXT电脑上发明了第一个Web浏览器。

年8月6日,Tim在alt.hypertext新闻组贴出了一份关于WorldWideWeb的简单摘要,这标志了Web页面在Internet上的首次登场。

最早的Web主要被一帮科学家们用来共享和传递信息,全世界的Web服务器也就几十台。由于仅是用来传递信息,从可视化方式或从传递数量上看,仅比电报强一点点。

当时还没有JavaScript,用的是纯静态的页面。

年,CGI(CommonGatewayInterface)出现了,人们可以在后端动态生成页面。

Perl由于跨操作系统和易于修改的特性成为CGI的主要编写语言。当然,CGI也支持其他支持标准输入输出和环境变量的语言编写,比如Shell脚本、C/C++语言,只要符合接口标准即可。

但显然,页面的内容更新完全由后端生成,这带来一个明显的缺憾:每次更新都要整页刷新,加上早期的网速情况,这个操作是非常慢的。因此针对这情况,人们从多方面着手改进:编写语言的升级、浏览器的升级、HTML的升级。

年,网景公司成立,发布了第一款商业浏览器Navigator。自从这款浏览器面世后,微软推出IE浏览器。虽说有竞争才有发展,但这也埋下了JavaScript分裂的种子。

(年,网景浏览器的截图)

同年,PHP诞生。PHP能将动态的内容嵌入到HTML中,提升了编写页面的效率与可读性,其性能也比一般的CGI高。PHP的界定符、循环语句等的发明,深刻影响了后来的ASP、JSP,乃致后来的JavaScript前端模板引擎。

年10月,W3C小组也成立了,他们负责HTML的发展路径,其宗旨是通过促进通用协议的发展。

待这一切就绪后,JavaScript于年诞生了。

传闻,网景工程师布兰登·艾克(BrendanEich)只花了10天时间设计出JavaScript语言,近乎上帝七日创造世界那么高效。但也因为工期太短的缘故,导致许多瑕疵,因此一直被正统传序员所嫌弃,直到Ajax的出世,才让人们找到理由忍受它的畸形。早期的浏览器都配有一个选项,用来禁止JavaScript语言运行。

JavaScript主要语言特征[1]:

借鉴C语言的基本语法;借鉴Java语言的数据类型和内存管理;借鉴Scheme语言,将函数提升到第一等公民(first-classcitizen)的地位;借鉴Self语言,使用基于原型(Prototype)的继承机制。时下,静态语言大行其道,类与接口被证明是构建大工程的最佳实践,人们想不出没有类的语言如何编写业务。因此当时的微软也打造了另一门运行于浏览器的语言——VBScript。

如果继续细探JavaScript的能力,你会发现它早期真的非常空洞,一门没有灵魂的语言,没有包管理机制,也没有像Java与C++那样的打辅助用的SDK,内置的方法也屈指可数。比如说数组方法,早期只有push、pop、shift、unshift、splice、slice、sort、reverse、concat、join等操作。动态调用方面,Function的apply、call操作还没有出现!

早年的偷懒,导致后来不得不补课:到了年,数组上的原型方法,是原来3倍。

除了方法缺乏,还有性能问题,大家讨论用eval还是Function,用哪种循环方式,用parseInit还是~~,就是为了那一点点的性能提升。例如jsperf.


转载请注明:http://www.abachildren.com/jbzs/3771.html