前端科普系列（1）：前端简史

时间 2020-12-01

标签 javascript php html 前端 java webpack 程序员 web 面试数据库栏目 JavaScript 繁體版

原文原文链接

本文首发于 vivo互联网技术微信公众号
连接： https://mp.weixin.qq.com/s/VRSl5_yn5BZcqtRxWkXU-Q
做者：孔垂亮

1、什么是前端

回答这个问题以前，我想起了一道很是经典的前端面试题：“从输入URL到页面呈如今你面前到底发生了什么？”这个题目能够回答的很简单，但仔细思考，也能够回答的很深，这个过程涉及的东西不少。先看一张图：javascript

简单说就是php

DNS (Domain Name System) 解析
TCP (Transmission Control Protocol) 连接
HTTP (HyperText Transfer Protocol) 请求
HTTP 响应
HTML解析 & CSS渲染
JS 解析执行

为何提这个呢，由于这是一整个web服务生命周期的全过程，而在最先的时候是根本没有前端或者后端的概念的。当时就是用 Dreamweaver 写 html 静态页面，而后部署到一台电脑的 IIS (Internet Information Services) 上。当请求这个页面时，返回这个 html 文件。html

再后面一点，服务端变得复杂了一些，html 页面开始使用各类模板来写，譬如 Java 系列的 FreeMarker，还有 ASP 、 PHP 等等。此时，先后端开发是一体的，最多也就是模板的编写算是最初的前端范畴，但那个时候，这个活儿每每都是如今的后端开发去干的。前端

下面是一个比较典型的 PHP 的模板：java

<html>
  <head><title>Car {{ $car->id }}</title></head>
  <body>
    <h1>Car {{ $car->id }}</h1>
    <ul>
      <li>Make: {{ $car->make }}</li>
      <li>Model: {{ $car->model }}</li>
      <li>Produced on: {{ $car->produced_on }}</li>
    </ul>
  </body>
</html>

随着 2005年 Ajax (Asynchronous JavaScript and XML) 的诞生，完全得改变了这一切。JS 脚本能够独立向服务器请求数据，拿到数据后，进行处理并更新网页，这个过程当中，后端只负责提供数据，其余事情都由前端来作。就是从这个时期开始，前端逐渐变得复杂，也是从在这个时期开始，设计师和后端开发已经开始放弃前端了，开发的岗位角色悄悄地发生了变化：webpack

聊到如今，什么是前端的问题应该呼之欲出了:程序员

前端：针对浏览器的开发，代码在浏览器中运行
后端：针对服务器的开发，代码在服务器中运行

能够说 Ajax 的出现是前端岗位出现的转折点，但并非前端的起点，前端的起点，咱们稍后聊 JavaScript 的历史会聊到。web

既然前端是针对浏览器的开发，那一个页面呈现出来，在浏览器里作了什么呢？面试

浏览器收到服务器响应的 HTTP 报文后，边解析边渲染。首先浏览器解析 html 文件构建 DOM 树，而后解析 CSS 文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。除了表现以外，咱们还须要与页面交互，因此离不开 JS，而 JS 的解析和运行是由浏览器中的 JS 引擎来完成，最有名的就是2008年由 Google 发布的 V8。数据库

因此，跑在浏览器的代码无外乎这三种：HTML + CSS + JS。

HTML(HyperText Markup Language) 全称是超文本标记语言，它不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。它由一系列的元素（elements）组成，这些元素能够用来包围不一样部分的内容，使其以某种方式呈现或者工做。

咱们在浏览器中任意打开一个页面的源码，都会看到相似以下的内容：

CSS(Cascading Style Sheets) 全称是层叠样式表，它是用来样式化和排版网页的 —— 例如更改网页内容的字体、颜色、大小和间距，将内容分割成多列或者加入动画以及别的装饰型效果。它经过选择器选中上面提到的 HTML 元素，而后为选中的元素添加颜色，间距等样式。以下所示：

每个有追求有品味的页面，都在借 CSS 给浏览者说一句话："我怎么这么好看！"

JS(JavaScript) 是一种具备函数优先的轻量级、解释型编程语言。它因互联网而生，紧跟着浏览器的出现而问世。它是一门计算机语言，随着前端的迅猛发展，它已经不像刚开始出现时那样，只是为了作了一些页面的校验，已经成了构建企业级应用的重要语言之一，目前在全球范围的使用状况排名第三。

若是用一我的来做比喻网页的话，HTML 就是一我的的骨骼， CSS 就是一我的的血肉，而 JS 则是一我的的灵魂！

前端开发工程师是近十年随着前端发展才真正开始受到重视的一个新兴职业。刚才咱们提到前端的三个组成部分：HTML + CSS + JS，这三个部分看起来听起来都感受很简单，也正由于如此，前端开发领域有不少自学成“才”的同行，我甚至在校招面试时听到候选人说是由于以为后端太难，其它岗位面试通不过才选择前端的。

确实，前端开发的入门门槛低，与后端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢，后面的学习曲线愈来愈陡峭，每前进一步都很难，致使大多数前端开发都停留在初级阶段。

2、JavaScript 语言的历史

JS 做为网页的灵魂，它是前端开发中最重要的一部分，因此接下来咱们来看看 JavaScript 做为一门计算机语言是怎么诞生的，又经历了怎么样的发展。

1990年12月，欧洲核子研究中心（CERN）的科学家 Tim Berners-Lee 发明了万维网（World Wide Web），2019年的3月12日，欧洲核子研究中心还举办了系列活动，庆祝万维网发明三十周年。当时的网页还只能在操做系统的终端里浏览，也就是说只能使用命令行操做，网页内容都是在字符窗口中显示，这固然很是不方便。

1994年5月中科院高能物理研究所计算中心的许榕生研究员去 CERN 参加了由380人参加的第一届国际 WWW 大会。会后，他带领一批年轻人很快在高能所计算中心的一台 PC 机上用 Linux 建立了中国第一个 WWW 服务器，并推出第一个网站 www.ihep.ac.cn (这个域名如今还在使用) 和英文网页（IHEP/China Home Page），该网站成为当时亚洲少数几个网站之一。

1992年末，美国国家超级电脑应用中心（NCSA）开始开发一个独立的浏览器，叫作 Mosaic。这是人类历史上第一个浏览器，今后网页能够在图形界面的窗口浏览。Mosaic 是后来你们耳熟能详的网景浏览器（Netscape Navigator）的前身。

那时候尚未 Ajax，因此用户每次操做，都会从新加载整个页面。因而 Netscape 公司很快就发现一个问题，若是用户尚未输入内容，就点了“发送”摁钮，服务器发现后把整个页面从新返回给客户端，仅仅只是在页面中添加了一个错误提示。

那个时代网速很慢上网很贵，到服务器才发现这一点很明显太晚了，最好能在用户发出数据以前，就告诉用户“请填写内容”。这就须要在网页中嵌入小程序，让浏览器检查每一栏是否都填写了。

1995年4月，Netscape 公司雇佣了程序员 Brendan Eich 开发这种网页脚本语言，Brendan Eich 只用了10天，就设计完成了这种语言的初版，最初名字叫作 Mocha，1995年9月改成 LiveScript。12月，Netscape 公司与 Sun 公司（Java 语言的发明者和全部者）达成协议，后者容许将这种语言叫作 JavaScript。

这样一来，Netscape 公司能够借助 Java 语言的声势，而 Sun 公司则将本身的影响力扩展到了浏览器。实际上 JavaScript 与 Java 没啥太大关系！

1996年8月，微软模仿 JavaScript 开发了一种相近的语言，取名为JScript（JavaScript 是 Netscape 的注册商标，微软不能用），首先内置于IE 3.0。Netscape 公司面临丧失浏览器脚本语言的主导权的局面。

因而，Netscape 公司在1996年11月决定将 JavaScript 提交给国际标准化组织 ECMA (European Computer Manufacturers Association), 但愿 JavaScript 可以成为国际标准，以此抵抗微软。

1997年7月，ECMA 组织发布262号标准文件（ECMA-262）的初版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript。

之因此不叫 JavaScript，一方面是因为商标的关系，Java 是 Sun 公司的商标，根据一份受权协议，只有 Netscape 公司能够合法地使用 JavaScript 这个名字，且 JavaScript 已经被 Netscape 公司注册为商标，另外一方面也是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

所以，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。在平常场合，这两个词是能够互换的。

接下来的两年，连续发布了 ECMAScript 2.0（1998 年 6 月）和 ECMAScript 3.0（1999 年 12 月）。3.0 版是一个巨大的成功，在业界获得普遍支持，成为通行标准，奠基了 JavaScript 语言的基本语法，之后的版本彻底继承。直到今天，初学者一开始学习 JavaScript，其实就是在学 3.0 版的语法。

2000年，ECMAScript 4.0 开始酝酿。这个版本最后没有经过，可是它的大部份内容被 ES6 继承了。所以，ES6 制定的起点实际上是 2000 年。为何 ES4 没有经过呢？由于这个版本太激进了，对 ES3 作了完全升级（也就是如今的ES6），引来了以 Yahoo、Microsoft、Google 为首的大公司的强烈反对，ECMA 开会决定，停止 ECMAScript 4.0 的开发。

只有 JavaScript 的创造者 Brendan Eich 所在的 Mozilla 公司坚持ES4的草案，有时候要创点新真得不容易！

2015年6月，ECMAScript 6 正式发布，而且改名为“ECMAScript 2015”。虽然从ES3以后，陆续发了 ES5 以及 ES5.1，但都是涉及现有功能改善的一小部分。

对于前端开发来讲，接受并熟悉 ES6 是比较困难的，毕竟当年 Google 就接受不了，况且 ES6 是集过去15年的精华于一身。

3、Web开发技术演进

聊完 JavaScript 的历史，咱们能够看到，它并不随前端的发展呈正相关，由于它在很长一段时间，并无什么变化。因此接下来聊聊前端技术演进的历史，看看这些年前端都发生了什么。

1.Web 2.0

前面提到的 2005 年诞生的 Ajax，促进了先后端的分离。

实际上是在这一年谷歌发布了测试版本的谷歌地图，并在这个项目大量运用让网页透过 Javascript 以 XML 格式来回传数据、达到异步更新网页内容的技术。

这在当时是一个跨时代的壮举，让用户终于有机会看到不须要刷新整个页面就能够更新状态的地图，咱们也看到了异步操做是如何给网站用户带来良好体验的。

不夸张的说，这一年算得上是 Web 开发技术发展的元年。Web也从 1.0 的时代，步入 2.0 的时代。

2.MVC (model-view-controller)

前端能够经过 Ajax 获取数据，所以也就有了处理数据的需求，因而就促使了前端 MVC 的诞生。

我第一个前端项目就是使用 MVC 模式作的，使用的是 ExtJs，它曾经是一个很好的企业级 Web 富客户端应用开发平台，它作出来的页面效果特别酷炫。以下图所示：

而我在作这个项目时就应用了 MVC 的模式。

视图（View）：用户界面
控制器（Controller）：业务逻辑
模型（Model）：数据模型

View 做为用户界面，发送指令给 Controller，Controller 要求 Model 改变状态，同时 Model 把更新过的数据发送给 View 反馈给用户。

MVC 模型最核心的一点就是全部通讯都是单向的。

其实生活当中，MVC 的设计思想不少地方都有所体现，以家用微波炉为例，能够将它也理解成三层结构。微波炉的外观以及上面的操做摁钮就是"视图层"（view），而其内部的微波产生装置磁控管则是"数据层"（Model），这里的"数据"能够理解成"核心功能"。把操做摁钮的指令转化为对磁控管的操做则是由“控制器层”的电路板来实现的。

若是如今要给微波炉更换一个新潮的外壳，或者更换一个更大功率的磁控管，彻底能够在不更改其余层的状况下实现。每一层都是独立的，这就是 MVC 模式的最大优点。

在这个阶段的后期，前端逐渐开始有了一点工程化的影子，而且开始受 CommonJS 的影响，有了模块化编程的概念，诞生了相应的 CMD 和 AMD 的规范。开始有了构建工具 Grunt/Gulp，开始有了编码的规范 JsLint。

3.MVVM (Model-View-ViewModel)

MVVM 一样是一种软件架构模式，它是在 MVC 的基础上演进过来的，去掉了 MVC 中的 Controller，增长了数据的双向绑定。

最有表明性的框架就是 Google 公司推出的 Angular，它的风格属于 HTML 语言的加强，核心概念就是数据双向绑定。

Vue也能够算是 MVVM 模型，虽然它没有彻底遵照 MVVM 的设计，但受到了 MVVM 的启发，在最开始的时候也是双向数据绑定，而且一直使用 vm 表示 View-Model。就以 Vue为例，简单看下 MVVM 的思想。

4.SPA (single-page application)

SPA 是单页应用的意思，它是区分传统模式而言的。咱们一开始就探讨过从输入URL到页面呈如今咱们面前的过程，也熟悉了 HTML 、 CSS 和 JS。如今换个角度来看这个过程：

当客户端发起页面请求后，后端收到请求，而后取出数据库中的数据，组装好 HTML，而后返回 HTML 、 CSS 和 JS。有了 Ajax 后，咱们在当前页面能够从新获取数据，并更新页面内容。但当咱们切换页面，也就是有页面跳转时，整个过程会从头再来一次。

精益求精的前端开发者们这个时候就在考虑，既然 Ajax 能够在当前页面获取数据并随时更新当前页面，那是否是能够作到切换页面时也只经过 Ajax 获取数据更新页面，而不所有从新加载呢？

答案固然是能够！以下图所示，用户第一次发起页面请求时，后端收到请求，而后取出数据库中的数据，返回 CSS 和 JS文件。

JS 文件包括了页面切换逻辑的处理，这是单页应用实现的关键，它利用 Hash 或者 History 的技术，实现了当切换页面时，首先经过 Ajax 获取到新页面须要的数据，而后由 JS 根据要切换到的网址，使用获取到的数据来拼接出要展现页面的 HTML。

整个切换页面的动做所有由前端来完成了。这就是单页应用，全部的资源只在第一次页面请求时被加载，后面都只会发起 Ajax 请求获取数据而已。

5.SSR (server side render)

SPA 让 web 变成了应用的形态，它是客户端渲染（client side render）。客户端渲染有它的弊端，譬如无法作 SEO(Search Engine Optimization)，因为全部的 JS 和 CSS会在首次访问时被所有加载，而且 HTML 是在前端组装的，就势必致使首屏加载以及渲染的时间会增长，影响用户体验。

因而，如今又争先恐后的回到服务端渲染，想一想真得挺好笑的，十年前为了搭上 Ajax 的班车纷纷作SPA，作客户端渲染，如今反而又想着法儿的要从新作服务端渲染。

其实本质是同样的，因此这里实际上是有历史包袱的，在项目开始以前，先想一想清楚到底有没有必要作成 SPA 比较重要，而不是一味的趋之若鹜。

固然如今的服务端渲染和以前的服务端渲染在形式上仍是有区别的：

以前的服务端渲染基本是围绕页面为中心的开发模式，只须要处理模板-> html字符串的转换，性能要优于如今的服务端渲染。

如今的服务端渲染基本是围绕组件为中心的开发模式，开发效率和可维护性固然更高，组件也能够统一经过模块构建工具如webpack一并处理。

有一些 web 应用若是就应该使用 SPA 模式，但又想要 SEO 怎么解决呢？

当搜索引擎的网络爬虫过来的时候，实际上是能够经过头信息判断的，因而有一种创新的解决方案，能够在中间层写个服务，对请求进行拦截。

譬如 Rendora 就是解决这个问题的，以前写好的项目一句不用改，只需新起 Rendora 服务，对于爬虫的请求额外增长服务端渲染，返回生成好的 html 就行了，对于非爬虫，以前该怎么玩儿就怎么玩儿。

6.Node & 全栈

2009年，Node 项目诞生，它是服务器上的 JavaScript 运行环境。Node的出现令前端开发拥有了控制服务器的能力：Node = JavaScript + 操做系统 API

下一节聊聊 Node，敬请期待。

4、参考文献

更多内容敬请关注 vivo 互联网技术 微信公众号

注：转载文章请先与微信号：labs2020 联系。