Web前端发展史

时间: 2019-09-01阅读: 2056标签: 前端

前端到底是个啥

前端其实是个很大的范畴。我这里只针对 web 开发的前端而言(下文统称前端)。简单点说,针对浏览器的开发,浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成:html(超文本标记语言)、css(级联样式表)、JavaScript


前端发展历程

前端也算是经历了一个比较漫长的发展过程,大致历程可以分为以下几个阶段:

上古时代:

这个节点不得不说以下,世界上第一款浏览器 NCSAMosaic ,是网景公司(Netscape)在1994年开发出来的,它的初衷是为了方便科研人员查阅资料、文档(这个时候的文档大多是图片形式的)。那个时代的每一个交互,按钮点击、表单提交,都需要等待浏览器响应很长时间,然后重新下载一个新页面给你看,大概是这样:


同年 [php](超文本预处理器)[5] 脚本语言被开发出来,开启了数据嵌入模板的 MVC 模式,同时期比较类似的做法有以下几种:

  • php 直接将数据内嵌到 html 中。
  • ASP 的 ASPX,在 HTML 中嵌入 C# 代码。
  • Java 的 jsP 直接将数据嵌入到网页中。

这个时期,浏览器的开发者,以后台开发人员居多,大部分前后端开发是一体的,大致开发流程是:后端收到浏览器的请求 ---> 发送静态页面 ---> 发送到浏览器。即使是有专门的前端开发,也只是用 HTML 写写页面模板、css 给页面排个好看点的版式(要不是我堂堂程序员看不上这点活,你们这些个切图仔就得要饭去~)。


铁器时代(小前端时代)

1995年,这是个好年份,又是这个搞事的网景公司,拜托一位叫布兰登·艾奇的大佬,希望开发出一个类似 Java 的脚本语言,用来提升浏览器的展示效果,增强动态交互能力。结果大佬喝着啤酒抽着烟,十来天就把这个脚本语言写出来了,功能很强大,就是语法一点都不像 Java。这样就渐渐形成了前端的雏形:HTML 为骨架,CSS 为外貌,JavaScript 为交互。

同时期微软等一些公司也针对自家浏览器开发出了自己的脚本语言。浏览器五花八门,虽然有了比较统一的 ECMA 标准,但是浏览器先于标准在市场上流行开来,成为了事实标准。导致,现在前端工程师还要在做一些政府古老项目的时候,还要去处理浏览器兼容(万恶的 IE 系列)。

不管怎么说,前端开发也算是能写点逻辑代码了,不再是只能画画页面的低端开发了。随着1998年 AJax 的出现,前端开发从 web1.0迈向了web2.0,前端从纯内容的静态展示,发展到了动态网页,富交互,前端数据处理的新时期。这一时期,比较知名的两个富交互动态的浏览器产品是:

  • Gmail(2004年)
  • Google 地图(2005年)

由于动态交互、数据异步请求的需求增多,还衍生出了jQuery(2006) 这样优秀的跨浏览器的 js 工具库,主要用于 DOM 操作,数据交互。有些古老的项目现在还在使用 jQuery。


信息时代(大前端时代)

自 2003 以后,前端发展渡过了一段比较平稳的时期,各大浏览器厂商除了按部就班的更新自己的浏览器产品之外,没有再作妖搞点其他事情。但是我们程序员们耐不住寂寞啊,工业化推动了信息化的快速到来,浏览器呈现的数据量越来越大,网页动态交互的需求越来越多,JavaScript 通过操作 DOM 的弊端和瓶颈越来越明显(大交互,页面会变得很卡),仅仅从代码层面去提升页面性能,变得越来越难。于是优秀的大佬们又干了点惊天动地的小事儿:

  • 2008 年,谷歌 V8 引擎发布,终结微软 IE 时代。
  • 2009 年 AngularJS 诞生、Node诞生。
  • 2011 年 react 诞生。
  • 2014 年 vue.js 诞生。

其中,V8 和 node 的出现,使前端开发人员可以用熟悉的语法糖编写后台系统,为前端提供了一个同一语言的实现全栈开发的机会。react、Angular、vue 等 MVVM 前端框架的出现,使前端实现了前端项目真正的应用化(SPA单页面应用),不再依赖后台开发人员处理页面路由 Controller,实现页面跳转的自我管理。同时也推动了前后端的彻底分离(前端项目独立部署,不再依赖类似的 template 文件目录)。在这里解释下 MVVM 模式:

  • Model:提供/保存数据
  • View:视图
  • View-Model:简化的 Controller,唯一的作用就是为 View 提供处理好的数据,不含其它逻辑

至于为啥 MVVM 框架能提升前端的渲染性能,这里简单的总结下原理,因为大量的 DOM 操作是性能瓶颈的罪魁祸首,那通过一点的算法,比较,实现同等效果下的最小 DOM 开销是可行的。React、Vue 这类框架大都是通过这类思想实现的,具体实现,大家感兴趣的可以去翻下源码哈,这里不做展开。前端分离也导致前端的分工发生了变化:


后端更加关注数据服务,前端完全控制自己的各种行为,可玩性更高。当然相应的学习成本也越来越大,node的出现也使得前端前后端一起开发成为可能,好多大公司在 2015 年前后就进行了尝试,用 node 作为中间数据转接层,让后端更加专注于数据服务。


全能前端时代

2009年开始,大屏智能手机开始陆续出现,到后来 4g 的普及,使得前端从 PC 浏览器,走向了手机,HTML,CSS,JavaScript 也陆续推出了自己的新标准。前端对于跨端浏览的需求越来越大,前端不再仅仅是 PC web 方面的开发,手机配置,与 app 进行 hybird 开发,变成了常态。甚至于 Facebook 推出了 React-Native,国内微信、支付宝推出小程序,试图以前端来一统 web、native 开发。为什么会有这样的情形发生呢,网速越来越快,硬件性能越来越小,js 在各个终端的运行能力与 native 开发(IOS、Android)的差距越来越小,就让我们搞事儿(喜欢偷懒)的程序员们想着能不能写一套代码,然后四处运行呢。

能的,这个可以有,React-Native,小程序,以至于后来出现的 Electron,使得用 JavaScript 开发桌面应用都成为了可能(VSCode)。谷歌近两年也推出了 Flutter 的开发语言,可以实现一套代码,多处运行(web、app)。前端真的不再是只能切图,开发静态页面的前端。后端可以搞、爬虫可以搞(node),app 可以写(weex、RN、Flutter),桌面应用可以开发(Electron),算法和语言的严谨性还有点短板,但是 TypeScript 的出现,以及后续 ECMA 标准的近一步完善,会使得前端更加的全能化,也可能会出现更多的细分工作领域。

最后,告诉大家“Any application that can be written in JavaScript, will eventually be written in JavaScript.”这是个生态圈的概念(最早见于谷歌教父 在《黑客与画家》中对于浏览器生态的想法),包括浏览器,包括微信、支付宝都已经早早走在了这条“不归路”上。

原文:https://segmentfault.com/a/1190000020281750

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5130

关闭

前端迷茫怎么办?

从业这么多年,时不时就有前端同行咨询我关于职业发展的事情,其中比较常见的一个就是对前端的迷茫。具体表现为,团队没什么前端,就自己一个人,感觉上面的人也不太重视前端

关于前端数据&逻辑的思考

这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要做以下几步:拆分组件,逻辑处理,抽象、聚合数据

一篇文章了解大前端

大前端不仅会成为移动开发与Web前端的发展趋势,也将会是未来的显示设备终端的开发技术趋势。大前端将做更多的终端开发、工程化等工作,而不仅仅只是开发Web页面。大前端工程师将能搞定所有端上的开发。与充满争议的全栈工程师相比,它更具可操作性。

web前端的一些不为人知的冷知识点_Js篇整理

Js篇整理:生成随机字符串、整数的操作、重写原生浏览器方法以实现新功能、关于console的恶作剧、万物皆对象、If语句的变形、禁止别人以iframe加载你的页面、console.table

前后端分离的优缺点

前后端分离已经成为互联网项目开发的业界标准使用方式,通过 nginx + Tomcat 的方式(也可以中间加一个 nodejs) 有效的进行解耦,并且前后端分离会为以后的大型分布式架构,弹性计算架构,微服务架构

一份超全的 web 前端技术进阶指南

优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力。前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识

自学WEB前端的详细路线

学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理。没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间、精力、金钱。废话不多说直接上干货

前端程序员需要具备的几个软实力

有很多关于前端程序员的调侃,比如:智商很高情商却很感人,思维缜密,极客,加班严重,没有对象只能new一个……虽然不是所有前端程序员都是这样

web前端的一些不为人知的冷知识点_CSS篇整理

CSS篇整理:关于CSS的恶作剧、简单的文字模糊效果、垂直居中、多重边框、实时编辑CSS、创建长宽比固定的元素、CSS中也可以做简单运算

如何识别牛逼的前端工程师

有软件工程方面的研究说,对于开发者个体而言,最优秀的开发者的生产效率约为平均值的2倍,而优秀的开发者会吸引其它优秀的人,或者激励与帮助团队中的其它成员,最终使团队之间的生产效率差异达到10倍之多。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!