摘要:自互联网行业发展以来,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. Go流程控制与快乐路径原则

    Go流程控制与快乐路径原则 目录 Go流程控制与快乐路径原则 一.流程控制基本介绍 二.if 语句 2.1 if 语句介绍 2.2 单分支结构的 if 语句形式 2.3 Go 的 if 语句的特点 2 ...

  2. undefined reference to vtable for问题解决(QT)

    主要在运行时出现 原因是在自定义类使用信号与槽,在创建文件时,未继承QObject类并且没有添加Q_OBJECT: 解决: 在需要的类中,添加Q_OBJECT,继承QObject类. 然后使用QTCr ...

  3. 大一下c语言课程设计

    // // main.c // 高级语言课程设计图书管理系统 // // Created by 蔡星旖 on 2022/8/1. // #include <iostream> #inclu ...

  4. P3214 [HNOI2011] 卡农 题解

    感觉不是很麻烦,可能就组合排列转化绕一点... 抽象化题意 给定 \(n\) 个元素,从中选出 \(m\) 个集合,要求: 集合不为空,集合里不能有相同的元素 \(m\) 个集合都互不相同 所有元素被 ...

  5. QT(3)-QTableView

    @ 目录 0 相关文章 1 说明 2 常用函数 2.1 clearSpans 2.2 setSpan 2.3 columnAt 2.4 rowAt 2.5 columnSpan 2.6 rowSpan ...

  6. PC电脑端如何多开Skype,一步搞定!

    由于工作原因,本人经常会用到Skype来联系客户,目前有两个账号需要同时登录. 但是,Skype默认只能登录一个账号,而且安装的时候也不能自定义安装地址,所以没办法同时登录两个. 有的朋友可能会想到直 ...

  7. 神经网络入门篇:详解计算一个神经网络的输出(Computing a Neural Network's output)

    一个神经网络的输出 首先,回顾下只有一个隐藏层的简单两层神经网络结构: 图1.3.1 其中,\(x\)表示输入特征,\(a\)表示每个神经元的输出,\(W\)表示特征的权重,上标表示神经网络的层数(隐 ...

  8. Java -- Stream流用法

    1. 前言 流是Java 8 API添加的一个新的抽象,称为流Stream,以一种声明性方式处理数据集合,侧重对于源数据计算能力的封装,并且支持序列与并行两种操作方式. Stream流是从支持数据处理 ...

  9. Bean常用的属性

    Bean常用的属性介绍 <bean name="xxx" class="指定的bean类" scope="singleton"> ...

  10. 新手VSCode配置C++20

    最近买了本C++20的书,想要自己配置下在VScode的环境 例子代码: #include <iostream> #include <format> int main() { ...