一文带你了解Web前端发展历程
摘要:自互联网行业发展以来,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);
- 1990年,WWW(万维网)诞生。全称:World Wide Web。
- 1992年,NCSA研发了第一个浏览器:Mosaic,可以窗口浏览网页。随后新一代浏览器:Netscape Navigator(网景浏览器),于1994年诞生;隶属于Netscape(网景)公司,下文统称为网景公司。
- 1994年,Tim Berners - Lee创建了W3C理事会。蒂姆 · 伯纳斯 · 李被称为”万维网之父“,南安普顿大学、麻省理工大学教授。W3C理事会主要负责HTML的发展路径,其宗旨是通过促进通用协议的发展;成员机构:美国麻省理工大学、欧洲数学与信息学研究联盟、日本庆应大学、中国北京航空航天大学。
- 1995年,待这一切就绪后,JavaScript应运而生!发明者是Brendan Eich(布兰登 · 艾奇)。
- 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的流行间接带来以下的发展:
- 促使人们对CSS1~CSS3选择器的学习
- 促进了浏览器原生选择器引擎document.querySelectorAll、Element.matches的诞生
- 提高人们对domReady的认识
- 促进了Promise与requestAnimateFrame 的诞生
- 降低前端门槛,前端工程师的队伍越来越壮大。
这个时期涌现了大量jQuery-like的库,其中最著名的是Zepto.js。Zepto的出现也标志着我们进入移动互联网时代。
JQuery时代以RequireJS的诞生为起点,以RN的出现结束。JQuery的出现让前端开发更加轻松,假如工程师想实现一个功能,现搜索出一个jQuery插件来实现。
下一篇将为大家继续带来三大框架时代的发展史,还有前端现状以及未来的发展趋势哈~敬请期待啦!
本文在创作过程中有几处参考了网络资料,如CSDN、微信公众号等,感谢各位大神的内容贡献~
一文带你了解Web前端发展历程的更多相关文章
- Web前端发展简史
Web前端发展简史 有人说“前端开发”是IT界最容易被误解的岗位,这不是空穴来风.如果你还认为前端只是从美工那里拿到切图, JS和CSS一番乱炖,难搞的功能就去网上信手拈来,CtrlC + Ctrl ...
- web技术发展历程--读《大型网站技术架构_核心原理与案例分析》
1 早期的web服务 2 CGI程序的出现.发展.凋零到MVC的兴起 CGI:通用网关接口技术. 随着CGI技术的出现,web服务端可以通过不同的用户请求产生动态页面内容. web服务器将请求数据交给 ...
- web 系统发展历程
文章目录 web系统的发展历程 ------- **单机`mysql`的美好年代** ------ **Memcached(缓存)+Mysql+垂直拆分** ------ **mysql 主从读写分离 ...
- web服务发展历程
PhP发展历史1.php: 开始名字含义:personal home page 个人网页 现在名字含义:HyperText Perprocessor 超文本预处理语言 预处理: 说明PHP是在服务器预 ...
- 十年WEB技术发展历程
一个小分享,知识有限,抛砖引玉. ajax 03年的时候我上六年级,那时候网吧刚在小县城的角落萌生.传奇,大话西游第一代网游一时风靡.我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩,然后接下来的一 ...
- web开发发展历程
cs架构:(软件主要运行在桌面上,数据库软件运行在服务器端) 缺点:如果web应用修改或升级,需要每个客户端逐个升级桌面App,因此Browser/server模式开始流行. bs架构:应用程序的逻辑 ...
- web前端学习历程--跨域问题
一.同源策略 一个页面的ajax只能获取这个页面相同源(协议.域名.端口号都必须相同)的数据. 二.jsonp方法 1.json和jsonp JSON(JavaScript Object Notati ...
- web前端学习历程--排序
一.js排序方法 1.按字母顺序排列: arr.sort() 2.按数值从小到大: function sortNumber(a,b)//排序函数 { return a - b } var arr = ...
- Web前端小白入门指迷
前注:这篇文章首发于我自己创办的服务于校园的技术分享 [西邮 Upper -- 004]Web前端小白入门指迷,写得很用心也就发在这里. 大前端之旅 大前端有很多种,Shell 前端,客户端前端,Ap ...
- Web前端开发的前景与用处
随着时代的发展,现在从事IT方向的人有很多,所以励志要成为前端开发工程师的人有很多.当然也有很多人在犹豫不知道该从事哪个方向,我今天就是来给大家分析一下Web前端开发的前景.包括工作内容,发展前景和薪 ...
随机推荐
- 每天5分钟复习OpenStack(四) virsh 常用命令
在上一章节中,我们拉起了第一台虚拟机,但是执行virsh shutdown 关机是无法关机的,需要使用virsh destroy 强制断电的命令来关机.为什么会这样了? 这里我们介绍下 QGA的概念 ...
- AI图形算法的应用之一:仪表识别
目前AI智能算法如火如荼,各大型厂商对此趋之若鹜般加大开发力度,比如大华.海康这些视频处理类,以及百度.腾讯这些IT软件厂商,因为业务开展需要,我也把研发方向转向于此,小有成绩,在此展示一下. 最近研 ...
- 入手react的 第一坑
npm verb cli /usr/local/bin/node /usr/local/bin/npm npm info using npm@9.8.1 npm info using node@v18 ...
- spring-boot集成hikari多数据源
maven依赖 <dependency> <groupId>com.zaxxer</groupId> <artifactId>HikariCP</ ...
- 解决IDEA中.properties文件中文变问号(???)的问题(已解决)
问题背景 构建SpringBoot项目时,项目结构中有一个application.properties文件.这个项目是Spring Boot一个特有的配置文件.内容如下(我写了一些日志的配置): 写到 ...
- 文心一言 VS 讯飞星火 VS chatgpt (135)-- 算法导论11.3 1题
一.用go语言,假设我们希望查找一个长度为 n 的链表,其中每一个元素都包含一个关键字k并具有散列值h(k).每一个关键字都是长字符串.那么在表中查找具有给定关键字的元素时,如何利用各元素的散列值呢? ...
- 一个.Net开源的协作办公套件,包括文档、表格、演示文稿和表单
推荐一个开源的文档协作办公套件,可以很好的满足团队对方便.高效.安全的方式来处理文档工作,促进团队协作和信息共享. 项目简介 ONLYOFFICE 是一个开源的办公套件,包括文档.表格.演示文稿和表单 ...
- GPTs大受欢迎但问题多,企服软件厂商的AI Agent更被B端客户器重
GPTs大受欢迎但问题多,企服软件厂商的AI Agent更被B端客户器重 比尔盖茨预言智能体是下个平台,超自动化平台的AI Agent更靠谱? 以GPTs为代表的AI Agent只是玩具?揭秘真实可用 ...
- ubuntu20 安装 mysql5.7.31 , 卸载mysql 8.0, Mysql只能本地登录,无法远程登录
ubuntu 18 可以直接命令安装:# 安装mysql服务sudo apt-get install mysql-server# 安装客户端sudo apt install mysql-client# ...
- 主界面(零基础适合小白)基础javaweb前端项目实战【包含增删改查,mysql】三
首先编写sp文件(index.jsp) <%@ page contentType="text/html;charset=UTF-8" language="java& ...