摘要:自互联网行业发展以来,web前端不断发展变化着。在前人的基础上,后人有幸能够站在前人的肩膀上行走。前端的发展变化不仅是继承式的迭代,同时也是不断的变革和创造。

一、前端到底是个什么?

简单点说,浏览器呈现出来的页面,给用户看的、操作的就是前端(客户端);你看不到的,类似一些游戏数据、应用数据之类的就是后端(服务端)。

那么再简单点就可以说,前端指的就是浏览器端,后端指的就是为浏览器提供服务和数据的服务器端。

这是比较准确的描述,如果往大了讲,你所有看到的一切,网页、移动端网页、小程序、甚至某些APP,都是属于前端的范畴。

二、前端的起源

世界上第一台计算机

背景:二战时期,美国军方为了计算炮弹弹道,让一些科学家造出了这世界上的第一台计算机“ENIAC”。

1946年2月14日,世界上第一台计算机“ENIAC”(埃尼阿克)在美国宾夕法尼亚大学诞生。这是一群科研人员共同努力的成果,但是起到最关键作用的是其数学家冯 · 诺依曼的设计思想,所以其被称为“现代计算机之父”。

意义:标志着电脑时代的开始。

想不到吧!!This Big Boy就是我们现在电脑的祖先!!↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

(图源来自:百度图片)

互联网的前身

背景:二战时期,美国军方为了防止部分网络被摧毁后失去通信。

1969年,美国国防部的高级研究计划局(ARPA)建立了军用网叫“阿帕网”(ARPnet)。阿帕网就是互联网的前身。

1983年,APRA和美国国防部通信局研制了用于异构网络(本文不做讲解)的TCP/IP协议,后该协议在社会上流行起来,因此诞生了真正的Internet。

Internet和计算机的诞生,为前端技术的开始奠定了基础。

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

三、洪荒时代(1990~1995年)

这个时代最重大的几件事有:WWW的诞生(1990)、浏览器的诞生(1992)、W3C理事会成立(1994)、JavaScript的诞生(1995);

  1. 1990年,WWW(万维网)诞生。全称:World Wide Web。
  2. 1992年,NCSA研发了第一个浏览器:Mosaic,可以窗口浏览网页。随后新一代浏览器:Netscape Navigator(网景浏览器),于1994年诞生;隶属于Netscape(网景)公司,下文统称为网景公司。
  3. 1994年,Tim Berners - Lee创建了W3C理事会。蒂姆 · 伯纳斯 · 李被称为”万维网之父“,南安普顿大学、麻省理工大学教授。W3C理事会主要负责HTML的发展路径,其宗旨是通过促进通用协议的发展;成员机构:美国麻省理工大学、欧洲数学与信息学研究联盟、日本庆应大学、中国北京航空航天大学。
  4. 1995年,待这一切就绪后,JavaScript应运而生!发明者是Brendan Eich(布兰登 · 艾奇)。
  5. JavaScript主要语言特征:借鉴了C语言的基本语法;借鉴了Java语言的数据类型和内存管理;借鉴了Scheme语言;借鉴了Self语言,使用基于原型的继承机制;

(1994年,Netscape Navigator网景浏览器截图,图源来自百度图片)

四、铁器时代(1995~2005年)

这个时期的浏览器五花八门,互相竞争激烈。IE浏览器、网景浏览器、火狐浏览器、谷歌浏览器是这个时期的主角!

虽然当时已经有了比较统一的ECMA(JavaScript规范文档)标准和W3C(HTML、CSS规范文档),但是浏览器先于标准在市场上流行,成为了事实标准。所以这就导致了我们现在在开发项目的时候还要去处理一些浏览器兼容性问题(大家最遇到的IE兼容问题)。

随着1998年,AJax的出现,前端开发从Web1.0升级到了Web2.0,从纯内容的静态页面,发展到了动态网页,富交互、前端数据处理的新时期。在这一时期,比较知名的两个富交互动态的浏览器产品是:Gmail(2004年)、Google地图(2005年)。

由于动态交互、数据交互的需求增多,还衍生出了JQuery(2006年)这种跨浏览器的JS工具库,主要用于DOM操作,数据交互。

2005~2009年的前端发展历程就涉及到小作者的知识盲区啦~~还请有意的大佬们补充,给小白们科普科普嘻嘻!

五、JQuery时代(2009~2016年)

2006年,jQuery发布,它当时的竞争对手很多,也很激烈基本持平。直到2009年,Sizzle选择器引擎研发成功,jQuery才取得了压倒性的优势。

这个时期,前端面对的主要是浏览器的兼容性问题,而jQuery在处理DOM兼容性问题上有这大量的解决方案。

jQuery的流行间接带来以下的发展:

  1. 促使人们对CSS1~CSS3选择器的学习
  2. 促进了浏览器原生选择器引擎document.querySelectorAll、Element.matches的诞生
  3. 提高人们对domReady的认识
  4. 促进了Promise与requestAnimateFrame 的诞生
  5. 降低前端门槛,前端工程师的队伍越来越壮大。

这个时期涌现了大量jQuery-like的库,其中最著名的是Zepto.js。Zepto的出现也标志着我们进入移动互联网时代。

JQuery时代以RequireJS的诞生为起点,以RN的出现结束。JQuery的出现让前端开发更加轻松,假如工程师想实现一个功能,现搜索出一个jQuery插件来实现。

下一篇将为大家继续带来三大框架时代的发展史,还有前端现状以及未来的发展趋势哈~敬请期待啦!

本文在创作过程中有几处参考了网络资料,如CSDN、微信公众号等,感谢各位大神的内容贡献~

点击关注,第一时间了解华为云新鲜技术~

一文带你了解Web前端发展历程的更多相关文章

  1. Web前端发展简史

    Web前端发展简史 有人说“前端开发”是IT界最容易被误解的岗位,这不是空穴来风.如果你还认为前端只是从美工那里拿到切图, JS和CSS一番乱炖,难搞的功能就去网上信手拈来,CtrlC + Ctrl ...

  2. web技术发展历程--读《大型网站技术架构_核心原理与案例分析》

    1 早期的web服务 2 CGI程序的出现.发展.凋零到MVC的兴起 CGI:通用网关接口技术. 随着CGI技术的出现,web服务端可以通过不同的用户请求产生动态页面内容. web服务器将请求数据交给 ...

  3. web 系统发展历程

    文章目录 web系统的发展历程 ------- **单机`mysql`的美好年代** ------ **Memcached(缓存)+Mysql+垂直拆分** ------ **mysql 主从读写分离 ...

  4. web服务发展历程

    PhP发展历史1.php: 开始名字含义:personal home page 个人网页 现在名字含义:HyperText Perprocessor 超文本预处理语言 预处理: 说明PHP是在服务器预 ...

  5. 十年WEB技术发展历程

    一个小分享,知识有限,抛砖引玉. ajax 03年的时候我上六年级,那时候网吧刚在小县城的角落萌生.传奇,大话西游第一代网游一时风靡.我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩,然后接下来的一 ...

  6. web开发发展历程

    cs架构:(软件主要运行在桌面上,数据库软件运行在服务器端) 缺点:如果web应用修改或升级,需要每个客户端逐个升级桌面App,因此Browser/server模式开始流行. bs架构:应用程序的逻辑 ...

  7. web前端学习历程--跨域问题

    一.同源策略 一个页面的ajax只能获取这个页面相同源(协议.域名.端口号都必须相同)的数据. 二.jsonp方法 1.json和jsonp JSON(JavaScript Object Notati ...

  8. web前端学习历程--排序

    一.js排序方法 1.按字母顺序排列: arr.sort() 2.按数值从小到大: function sortNumber(a,b)//排序函数 { return a - b } var arr = ...

  9. Web前端小白入门指迷

    前注:这篇文章首发于我自己创办的服务于校园的技术分享 [西邮 Upper -- 004]Web前端小白入门指迷,写得很用心也就发在这里. 大前端之旅 大前端有很多种,Shell 前端,客户端前端,Ap ...

  10. Web前端开发的前景与用处

    随着时代的发展,现在从事IT方向的人有很多,所以励志要成为前端开发工程师的人有很多.当然也有很多人在犹豫不知道该从事哪个方向,我今天就是来给大家分析一下Web前端开发的前景.包括工作内容,发展前景和薪 ...

随机推荐

  1. 小白也能看懂的 AUC 曲线详解

    小白也能看懂的 AUC 曲线详解 简介 上篇文章 小白也能看懂的 ROC 曲线详解 介绍了 ROC 曲线.本文介绍 AUC.AUC 的全名为Area Under the ROC Curve,即 ROC ...

  2. java 创建对象的5种方式

    1.创建对象的5种方式 1.通过 new 关键字 这是最常用的一种方式,通过 new 关键字调用类的有参或无参构造方法来创建对象.比如 Object obj = new Object(); 2.通过 ...

  3. idea java项目启动后访问html页面乱码

    最近在做一个较久的项目,用的还是servlet+html(jsp),代码拉到本地后运行,访问登录页login.html既然乱码,先看个乱码的效果 怎么样,是不是很经典的乱码,别着急,我们一点点来分析乱 ...

  4. JUC并发编程学习笔记(十二)Stream流式计算

    Stream流式计算 什么是Stream流式计算 大数据:存储+计算 集合.MySql这些的本质都是存储东西的: 计算都应该交给流来操作! 一个案例说明:函数式接口.lambda表达式.链式编程.St ...

  5. go 中如何实现定时任务

    定时任务简介 定时任务是指按照预定的时间间隔或特定时间点自动执行的计划任务或操作.这些任务通常用于自动化重复性的工作,以减轻人工操作的负担,提高效率.在计算机编程和应用程序开发中,定时任务是一种常见的 ...

  6. postgresql 标量子查询改写的各种姿势

    同事提供一条SQL,原执行时间需要 3.6S ,反馈比较慢需要优化一下,废话不说贴SQL: 原SQL: select ((select count(1) FROM AAAAAAAAA wf join ...

  7. Redis 哨兵模式的原理及其搭建

    1.Redis哨兵 Redis提供了哨兵(Sentinel)机制来实现主从集群的自动故障恢复. 1.1.哨兵原理 1.1.1.集群结构和作用 哨兵的结构如图: 哨兵的作用如下: 监控:Sentinel ...

  8. 万字解析XML配置映射为BeanDefinition的源码

    本文分享自华为云社区<Spring高手之路16--解析XML配置映射为BeanDefinition的源码>,作者:砖业洋__. 1. BeanDefinition阶段的分析 Spring框 ...

  9. 【Android】如何去掉默认标题栏

    1.在AndroidManifest.xml文件中修改并添加以下代码 android:theme="@style/Theme.AppCompat.NoActionBar" 2.在你 ...

  10. MySQL笔记01: MySQL入门_1.2 MySQL下载安装与配置

    2.2 MySQL下载安装与配置 2.2.1 MySQL下载 MySQL中文官网:https://www.mysql.com/cn/ MySQL英文官网:https://www.mysql.com/ ...