你必需要知道的前台那些事儿—入门级必读

“ 作为一个入门级的前台小白，前台的发展历史，是你必需要理解的。由于这可以让你更好的了解前台、了解整个前台的行业状态。”

原始社会

早期的前台可以说是原始社会。

long time ago~~

1990 年，Tim Berners-Lee 以超文本语言 HTML 为基础在 NeXT 电脑上发明了最原始的 Web 浏览器。

1994 年 11 月，Mosaic 浏览器的开发人员创立了网景公司（Netscape Communications Corp.），并发布了 Mosaic Netscape 1.0 beta 浏览器，后改名为 Navigator。但是它只有少数的幸运儿才能使用，由于它此时，只是为了方便科学家们查看文档，传阅论文用的。

所以你可以把1994年看做是前台的起点。

image

NCSAMosaic浏览器1-1

image

NCSAMosaic浏览器1-2

此时的网页还是很笨拙的！

你的页面假如有新的内容要刷新展现，那它会重新加载一个新的网页。而这个过程是漫长的。

你假如提交了一个数据请求，那你可能要白屏等待很久，最后返回给你个数据请求错误。。。

假如此时，你想做一个电商网站，那体验的酸爽，可想而知~

此时的互联网，它的开发者统称为程序猿。

由于前后台开发是一体的，前台代码是后端代码的一部分：后端收到浏览器的请求 ===> 发送静态页面 ===> 发送到浏览器。(这跟我们现在的前后台分离开发方式，完全不一样)

此时的网页以 HTML 为主，是纯静态的网页，网页是“只读”的，信息流只能通过服务器到用户端单向流通，由此世界进入了 Web 1.0 时代。

石器时期

1995 年，网景工程师 Brendan Eich 花了10几天时间设计了 JavaScript 语言。起初这种脚本语言叫做 LiveScript，后来为了借助 Java 语言创造良好的营销效果最终改名为 JavaScript。网景公司把这种脚本语言嵌入到了 Navigator 2.0 之中，使其能在浏览器中运行。

1996 年，微软发布了 VBScript 和 JScript。JScript 是对 JavaScript 进行逆向工程的实现，并内置于 Internet Explorer 3 中。但是 JavaScript 与 JScript 两种语言的实现存在差别，这导致了程序员开发的网页不能同时兼容 Navigator 和 Internet Explorer 浏览器。Internet Explorer 开始抢夺 Netscape 的市场份额，这导致了第一次浏览器战争（有兴趣的同学可以找度娘哦~）。

JavaScript 诞生之后，可以用来更改前台 DOM 的样式，

(ps: DOM [Document Object Model] ,我们说了，前台最早出现，是科学家为了方便查阅文档用的，所以一直到现在，我们也把前台页面称之为文档[document]，而DOM 提供了我们可以操作文档的方法)

实现少量相似于页面内容显示隐藏的小功能。那时候的JavaScript 仅限于此，大部分的前台界面还很简单，显示的都是纯静态的文本和图片。这种静态页面不能读取后端数据库中的数据，为了使得 Web 更加充满活力，以 PHP、JSP、ASP.NET 为代表的动态页面技术相继诞生。

PHP 直接将数据内嵌到 HTML 中。

ASP 的 ASPX，在 HTML 中嵌入 C# 代码。

Java 的 JSP 直接将数据嵌入到网页中。

铁器时期

1995 年，网景推出了 Java，形成了前台的雏形：HTML 为骨架，CSS 为外貌，Java 为交互。

1998 年，Ajax（Asynchronous Java And XML：异步的 Java 和 XML）横空出世。此时的前台，已不在是后端的模板。而是可以独立获取各种数据，而ajax也被用在各种页面上（目前还在使用中）。

从而促进了 Web 从 1.0 迈向2.0 。

从静态网页、纯内容展现向动态网页，多交互、前后台逐渐分离的模式发展。

image

HTML5新时代

在迎来HTML5新时期之前，前台经历了浏览器世界第二次大战，激烈程度不亚于第四次忍者世界大战。

IE 在第一次浏览器大战中击败 Netscape 博得胜利，垄断了浏览器市场。但是，IE 并不遵循 W3C 的标准，IE 成了事实标准。

1998 年 Netscape 被 收购前创立了 Mozilla 社区，Firefox 于 2004 年 11 月初次发布，并且 9 个月内下载量超过 6000 万，获取了巨大的成功，IE 的主导地位初次受到了挑战， Firefox 被认为是 Netscape 的精神续作。

之后 Firefox 浏览器一路奋起直追，逐步蚕食 IE 市场份额，这引发了第二次浏览器战争。在 2008 年底时，Firefox 的市场份额达到了 25% 以上，IE 则跌至 65% 以下。

第二次浏览器战争中，随着以 Firefox 和 Opera 为首的 W3C 阵营与 IE 对抗程度的加剧，浏览器碎片化问题越来越严重，不同的浏览器执行不同的标准，对于开发人员来说这是一个恶梦。

2008 年 1 月 22 日，HTML5第一份正式草案发布。

同年12月，Google发布Chrome浏览器，加入第二次浏览器世界大战，并研制出高效的javascript V8 引擎。

但是！HTML5 成为话题王，确是由于已故的乔布斯姥爷发表的一篇文章“对 Flash 的思考”指出随着 HTML5 的发展，观看视频或者其它内容时，Adobe Flash 将不再是必需的。这引发了开发人员间的争论，其主要问题还是浏览器对HTML5新添加功能的兼容问题。

在第二次浏览器世界大战中，Chrome 攻城略地，抢夺 IE 市场份额。

2016 年，Chrome 占据了浏览器市场的半壁江山。

2008 年以来，浏览器中不断支持的 HTML5 新特性让开发者颇为心动：WebWorker 可以让 JavaScript 实现多线程

WebSocket 可以实现前后台的双工通信，做即时通讯溜的起飞

WebGL 可以让你搞3D 网页游戏

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比方 article、footer、header、nav、section

新的表单控件，比方 calendar、date、time、email、url、search

当然随着时间的流逝，前台已不在是无知的少年。

我们有node.js ,可以实现后端代码的编写，前后台语言统一，node.js催生的衍生框架，可以使用JavaScript开发跨平台桌面应用。

我们有webpack、guip 等构建工具，高效实现前台工程化。

我们有vue/react/angule等mvc、mvvm 框架，能够让你高效实现复杂大型项目

我们有ES6、webApp

我们有…….

我们有数不清的框架、插件、技术栈、不再说明。（怕你看完这个就还没入门就放弃了）

总之，前台已是近几年最火爆的技术。有一统天下之趋势！

多年编程经验，今年1月整理了一批2019年最新WEB前台教学视频，不管是零基础想要学习前台还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前台的同学，学习规划、学习路线、学习资料、问题解答。只需加入WEB前台学习交流qun：296，212，562，就可免费获取，学习不怕从零开始，就怕从不开始。