web前端发展历程

总览前端发展史

• • 前言
  • 浏览器的发展史
  • 走进前端
  • • HTML
    • CSS
    • javascript
  • 小前端时代
  • 大前端时代
  • 写在最后

前言

目前在IT公司中前端的岗位越来越成为不可或缺的，前端的地位也愈见明显，很多学校已经体系的传授前端课程，众多培训机构也将前端知识作为了主流课程，也有越来越多的同学加入到前端学习的行列中，作为前端工程师或者前端的学习者我们有必要去了解前端的发展史。那么首先让我们来了解一下浏览器的发展历程。

浏览器的发展史

在中享思途的行业资讯中看到了他对浏览器的发展史总结如下：
1、1991年，WorldWideWeb浏览器发布，这款可以说是祖父级别的，它是全球用户最早注册的WEB浏览器，WorldWideWeb开发始于20世纪80年代末，之后10年间经过MTV的宣传以及Commodore 64的完善，终于在1991年这个有跨时代意义的Web浏览器发布了。WorldWideWeb原理很简单，可以显示基本的样式表。

2、1992年，Erwise发布，他被称为世界上第一个图形网页浏览器，它是由赫尔辛基科技大学的4个芬兰学生开发，主要是针对在Unix上运行 XWindows的需要。ViolaWWW，它是最高老的浏览器之一，在1992年5月份发布，它的开发者是美国加州大学的学生Pei-Yuan Wei，他的目的和Erwise一样是针对在Unix上运行 X Windows的需要。MidasWWW也是1992年发表的，它是由托尼约翰逊在斯坦福线型加速器中心研发的。Lynx首发也是在1992年，它提供了一个语音转换接口为视觉和听觉障碍的人群提供了很好的功能。

3、1993年，Mosaic1.0发布，Mosaic可以说在一定程度上升华了Erwise的图形化，并且将图形化浏览器推向了万维网的主流。Arena浏览器是第一个支持背景图片，表格、文字绕流图片和内嵌数学表达式的浏览器，支持背景图片，表格等。

4、1994年，Cello发布，他支持的就比较多了，WorldWideWeb、Gopher、FTP、CSO/ph/qi、Usenet News retrieval以及其他的一些协议，他当时成为了Windows平台上第一款浏览器。IBM WebExplorer也在同年发布，IBM推出自己的操作系统，WebExplorer也是强行捆绑在了他的系统系统上。Netscape Navigator它是一款独立的浏览器，而其在当时他的市场份额远远超过了微软的Internet Explorer。

5、1995年，IE发布，浏览器之战也就此爆发。微软的Internet Explorer在此年首次推出，为了打造最好的浏览器，微软的源代码从Mosaic上获益匪浅，学习并迅速开始调整自己的浏览器，IE早期并没有捆绑在Window95上，而是作为Window95插件包的一部分进行捆绑，当时他只有1M大小。IE2在同年晚些时间发布，微软当时声称这是一个跨平台的浏览器，支持Window和Mac，IE2也加入了支持Javascript的潮流中，它支持安全套接字层（SSL），cookie和包括英语在内的12种语言。IE3正式捆绑在了Windows 95OSR2中，它是第一个支持CSS的主流浏览器，IE3摆脱了Spyglass源代码的局限，开始支持ActiveX控件，Java小程序，和Internet邮件。

6、1996年，Opera发布，Telenor是挪威最大的通讯公司，他们推出了Opera，并在两年后进军移动市场，推出了Opera的移动版。

7、1997年，IE4伴随着Windows 98操作系统一起发布。在发布Window Xp之前发布了IE6，并且新系统中包括了浏览器的最新升级补丁。随后IE逐渐占据了市场绝大部分份额。其他浏览器败下阵来。

8、1998年，Netscape浏览器走向开源，和IE之争最后以失败告终。

9、2003年，苹果Safari浏览器发布，苹果进入浏览器市场推出了自己的Webkit引擎，该引擎非常优秀，后来被Google，Nokia之类的厂商用于手机浏览器。

10、2004年，Firefox引发了第二场浏览器之争。

11、2006年，IE7发布，IE6发布的第六年，迫于Firefox的压力，微软匆匆推出IE7应战，吸取了Firefox的一些设计思想。

12、2008年，Google的Chrome参战，Google发布了他们自己的浏览器，以轻量级，快，异常的稳固让这款浏览器成为了一个不可轻视的对手。
以上就是浏览器的一个大致发展历程了。接下来看看HTML的一个发展史。

走进前端

首先前端是什么呢？这个好像大家没有对他一个最完美的诠释，记得在上家公司，有一天与我们公司老板做了同一趟电梯，老板问道你是做什么的，我回答在咱们公司做前端开发，能不能跟我说一下什么是前端开发？老板随和的问道，毫无准备的我脑海中飘出很多词汇！你能看到的所有东西都是我们前端来做的。。。后端为我们提供逻辑、数据我们来给用户做展示，老板说能不能用一个词来涵盖，嗯。。。。数据可视化。老板说好，我明白了。其实我也不知道这样表述是否准确，但是在我的理解中是没有问题的哈，94将数据展示出来嘛哈哈！看到一篇文章中他是这样解释的：
前端指的就是浏览器端，后端指的就是为浏览器提供服务和数据的服务器端。这是比较准确的描述，如果往大了讲，你所有看到的一切，网页、移动端网页、小程序、甚至某些APP，都是属于前端的范畴。下面博主就带领大家见证前端是如何发展到今天的！

上个世纪90 年代初，第一个网站便诞生，当时的网页完完全全是由文本所构成，除了一些小图片就是毫无布局可言的标题与段落。但是发展到今天来看我们各种用户操作逻辑的变更，我们各种炫酷样式的迭代，以及各种用户行为的理想化其实这些界面的变革都是我们前端的进步！

下面介绍的三位就是我们前端重中之重，最重要的三门技术，如果我们把前端比喻成一部手机，那么HTML可以说成是我们手机的硬件、CSS他就是我们手机的外观色彩、javascript则是我们手机的功能！即使前端出现更多的高级框架，其实也都是在不同程度的去封装我们这三门基础语言。

HTML

HTML（超文本标记语言——HyperText Markup Language）是构成 Web
世界的基石。HTML是一种基础技术，常与CSS、Javascript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。

1、HTML 1.0 超文本标记语言(第一版) – 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)

2、HTML 2.0 – 1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

3、HTML 3.2 – 1996年1月14日，W3C推荐标准

4、HTML 4.0 – 1997年12月18日，W3C推荐标准

5、HTML 4.0(微小改进) – 1999年12月24日，W3C推荐标准

6、XHTML 1.0 – 发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

7、XHTML 1.1 – 于2001年5月31日发布

8、HTML5.0 2014年10月28日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成

CSS

层叠样式表(英文全称：Cascading StyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1994 年，Hkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。

紧接着，他们在芝加哥的Mosaic and the Web 大会上第一次正式提出了 CSS 的建议，1995 年他们一起再次展示了这个建议。当时 W3C 刚刚建立，W3C 对 CSS 很感兴趣，为此专门组织了一次讨论会。

1996 年 12 月，W3C 推出了 CSS 规范的第一版本。

1997 年，W3C 颁布 CSS1.0 版本 ，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类 / 对象几个部分。

这一规范立即引起了各方的关注，随即微软和网景公司的浏览器均能支持 CSS1.0，这为 CSS 的发展奠定了基础。

1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。

CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。

2005 年 12 月，W3C 开始 CSS3 标准的制定，到目前为止该标准还没有最终定稿。

javascript

Javascript作为赋予网页生命的前端基础技术，它可以实现相应的效果和交互，是前端开发不可或缺的基本配置之一。因此，今天小编就来带家了解一下Javascript的前世今生，具体内容包括Javascript 的诞生、语言版本的更迭以及应用领域等等。让大家在入门开始学习Javascript之前，对Javascript的发展历史有一个大致的了解。

Javascript诞生于1995年，当时，它的主要目的是处理以前由服务器端需要负责的一些没有输入验证操作。在Javascript问世之前，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入了无效的值。Netscape Navigator希望通过Javascript来解决这个问题。在人们普遍使用电话拨号上网的时代，能够在客户端完成一些基本的验证任务绝对是令人兴奋的。毕竟，拨号上网速度之慢，导致了与服务器的每一次数据交换事实上都成了对人们耐心的一次考验。由此诞生了Javascript!

年份	版本	更新内容
1997	ECMAscript1	第一版本
1998	ECMAscript2	版本变更
1999	ECMAscript3	添加正则表达式 try/catch
1997	ECMAscript4	没有正式发布
2009	ECMAscript5	添加‘strict mode‘ 严格添加 JSON支持
2011	ECMAscript5.1	版本变更
2015	ECMAscript6	添加类和模块
2016	ECMAscript7	添加指数运算符（**）Array.prototype.includes
2018	ECMAscript8	添加rest/spread属性、异步迭代、promise.finally()、RegExp

小前端时代

其实在小前端时代之前还有更加惨淡的阶段，甚至都么有前端的概念哈，这里呢就不来给大家大篇幅的来说了，不是因为不想说而是因为博主不太专业哈，就是我们的PHP嵌套前端代码以及JSP搭建网站等等；

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

同时期微软等一些公司也针对自家浏览器开发出了自己的脚本语言。浏览器五花八门，虽然有了比较统一的 ECMA 标准，但是浏览器先于标准在市场上流行开来，成为了事实标准。导致，现在前端工程师还要在做一些政府古老项目的时候，还要去处理浏览器兼容（万恶的IE系列）哈哈 不过现在距离IE还有半个月就退出舞台啦，前端人的噩梦结束了。

随着时代的不断进步，接下来就出现了表格布局，随后是 Flash，最后是基于 css的网页设计。简单来说，前端页面重构技术经历着这样的一个过程：table布局页面DIV+CSS =》HTML5+CSS3， 并且面对众多的浏览器与平合，web 前端己不再是以前那样简单的重复性工作。

不管怎么说，前端开发也算是能写点逻辑代码了，不再是只能画画页面的低端开发了。随着1998年 ajax 的出现，前端开发从 web1.0迈向了web2.0，甚至目前渐渐转向了web3.0；前端从纯内容的静态展示，发展到了动态网页，富交互，前端数据处理的新时期。这一时期，比较知名的两个富交互动态的浏览器产品是：
• Gmail (2004年）
• Google 地图 （2005年）
由于动态交互、数据异步 请求的需求增多，还衍生出了jQuery (2006） 这样优秀的跨浏览器的 js 工具库，主要用于 DOM操作，数据交互。有些古老的项目现在还在使用 jQuery。

大前端时代

前端开发的前身是 “网页制作”，随着移动端的兴起和4G、5G技术的普及，互联网产品业务越来越复杂，在 2011年前后，逐步脱变为前端开发；

在2011之前，前端后端是不分家的，2011后智能手机普及了，场景也越来越丰富复杂了，不得不把前端独立出来，也是目前主流的前后端分离开发模式。2016年前后，前端开发突然迎来了技术井喷期，开发形式突然发生了翻天覆地的变化。

nodejs 突然火了，2009年诞生，2015到2016左右在中国就火起来了，node火了之后带来了连锁反应

2016年前后，以 webpack为代表的 Node.js 工作流工具使前端开发的开发形式产生了翻天覆地的变化，并且，随着 Vue / React 的诞生，使前端开发进入了框架时代，工程化时代；甚至具备了微前端的概念。

写在最后

其实今天跟大家聊的并不是很多，而是大概的来梳理了一下前端发展大的节点，等后面博主会出一期更加细致的前端发展的历程，利用语言出现的使命环环相扣！以及我们的开发模式的MVC、MVP、MVVM的变革我们放到后期来说；

其实我们回首 web 前端开发的过去和现在，对于我们岗位的称呼也相应地不断发生着改变：页面小工、切图小工、美工、页面制作，再到现在的“前端开发”，由于 html 与css入门起点较低，小公司里的“美工们”也许至今还干着这样的工作：出图 （Photoshop/Firework)切图（HTML/CSS)，现在而言前端开发并非如此了，随着越来越多的前端框架的兴起，我们如今的前端PC、APP、H5、xiao cheng xu、公众号、百度、支付宝小程序等多端应用一名前端开发工程师足以，利用不同的技术框架更加专业的编写出不同应用端的代码，以及前端甚至可以利用node脱离后端，我们一些框架甚至直接可以基于云进行开发，在当前云原生火爆之时，云函数、云存储甚至不用任何后端语言皆可进行开发！总结一下就是：Web 前端开发其实是很牛的职位！