前端发展史

1. 洪荒时代(1990~1994)

  • 前端大事件:WWW、浏览器、JavaScript的诞生
  • 1990年,世界上出现了第一个web浏览器(世界上第一张网页: http://info.cern.ch/) ,此时的浏览器页面全是由后端开发的。在后端动态生成页面,但显然,这带来一个明显的缺憾:每次更新都要整页刷新,加上早期的网速情况,这个操作是非常慢的。因此针对这情况,人们从多方面着手改进:编写语言的升级、浏览器的升级、HTML的升级。
    于是出现了JavaScript语言,传闻发明者只用了10天来设计开发出这个语言,工期太短导致许多瑕疵,比如没有包管理机制,也没有像Java与C++那样的打辅助用的SDK,内置的方法也屈指可数。因此一直被程序员嫌弃,所以早期浏览器都配有一个选项,禁止JavaScript语言运行。

2. 前端的统一与分割(1994~1999)

  • 三场战争:IE浏览器vs网景浏览器、IE浏览vs火狐浏览器、IE浏览器vs谷歌浏览器
  • 1996年,css的出现,意味着正式开始出现前端,这个时候前端的html负责页面结构,决定着网页的结构和内容,是整个网页的躯壳,css负责样式部分,他决定了网站看起来是什么样子,属于前端的皮肤吧,js控制网页的行为,决定做什么一般来说,js负责调用一些前端计算与动态加载,应该属于整个网页的灵魂。只有这三个同时具备的,才能算是一个真正的网站前端。
    但这时候前端的问题依旧存在,复用性差,不能局部加载,所以不久,微软推出了iframe标签,实现了异步的局部加载,就是相当于在网页中嵌套一个网页,切换目录只是切换iframe中的网页

3. 动态页面的崛起(1999-2016)

再之后99年W3C发布了第四代HTML标准,同年微软推出用于异步数据传输的ActiveX,意味着ajax的诞生,这在前端史上同样是个里程碑的事件,之前的iframe中部分加载,其实还是直接加载某个完整的html界面(假如网速很慢,还是会出现空白loading的过程)。而ajax则可以让我们实现真正意义上的局部加载,而不用对整个界面重新进行渲染,极大的优化了用户体验。使用ajax技术,也实现了将从数据库查回的数据可以放到客户端浏览器上进行,所以ajax的出现,并不仅仅优化了用户体验,他将很大一部分计算从服务器挪到了前端,使前端能够完成了更多的工作。为日后的前后端分离提供了技术支持。

  • 前jquery时代(2009-2012):然后一直到09年的时候,前端一直稳定发展,没有进行什么大的改变,这段时间市面上主要有两款浏览器,我们称之为IE浏览器和非ie浏览器,所谓神仙打架凡人遭殃,ie浏览器为了抢夺网景公司的市场,开发出了javascript的变种,jscript。虽然两个基本上完全一样,但是语法糖上可能还是有些许的差别,所以,那个时代的前端工程师他们的主要工作就是画页面和踩各种坑,那个时代一个阅历丰富的程序员的一个标志就是熟练掌握两种浏览器之间的差别,且能找到兼容的方法,jquery的出现在一定程度上缓解了这个问题,正如jquery的logo显示的一样,write less do more 。他致力于用更少的代码实现更多的功能。 jquery其实是一个脚本库,jQuery抽象了复杂的代码和浏览器怪异模式,兼容不同的浏览器,用简短的代码实现动效,用链式语法风格减少了程序员的代码量。使我们有时间做重要的事情。jquery的流行降低了前端门槛,让更多人进入这行业,前端工程师的队伍越来越壮大。
  • 后jquery时代(2012-2016):jQuery的发展使前端行业不断涌现出优秀的工程师,他们创造了大量jQuery插件与UI库。但也导致了一个问题:前端工程师通常编写一个页面,会引入十多个乃至几十个jQuery插件,页面上塞满了Script标签。众所周知,浏览器是单线程,Script的加载,会影响到页面的解析与呈现,导致著名的白屏问题(当时前端用力过猛,body中的所有东西都是动态生成的)。还有一个问题使全局变量污染,因此后jQuery时代来了。人们研发前端模块加载、统一异步机制、 打造大型MVC框架(model-view-controller), 甚至伸向后端,接管打包脚本而发明Node.js,来腾出大量时间。

4. 三大框架割据时代(2016~至今)

  • 三大框架:React,Angulat,Vue
  • 从前端走向全栈:MVVM框架(Model-View-ViewModel)是在 MVC 的基础上演进过来的,去掉了 MVC 中的 Controller,增加了数据的双向绑定。对开发者来说,就可以从以前的dom操作中解放出来,想想以前的操作模式,接收到后台的数据,jquery开干,选择dom,拿到数据,拼接字符串,填充到dom中。视图数据变化了,js 每次需要主动重新取值,有了MVVM这都不需要了,做好了双向绑定。只要将数据绑定到MV,V自动更新,V表单或状态发生变化,M自动更新,没有了中间的DOM操作和控制。一切都变得简单。相互之间也没有耦合,对前端性能也是质的提升。

前端发展史
https://appleking10.github.io/2020/05/15/前端发展史/
Author
金依妮
Posted on
May 15, 2020
Licensed under