选择大于努力，你必须了解web1.0到web2.0三段历史

HTML语言发展史

因为BS技术发展太快了，我们多了解一下历史，防止自己走上了错误的道路。

1982年，Tim Berners-Lee 建立 HTML

1993年，大学生的 Marc Andreessen 在他的 Mosaic 浏览器加入 标记，从此可以在Web页面上浏览图片

1993年6月，HTML 由 IETF 工作小組发布草案

1994年10月，W3C 成立， 网络应用发展的标准规范交由 W3C 协会制定及推广

1995年11月，HTML 2.0，2000年6月被宣布已经过时

1996年1月 ，HTML 3.2 由 W3C 推荐为标准规范

1997年11月，HTML 4.0

1999年12月，HTML 4.01 以 XML 语法重新构建，较为严格，W3C推荐标准

2000年1月，XHTML 1.0，W3C推荐标准

2001年5月，XHTML 1.1，W3C推荐标准

2004年，WHATWG小组成立，由各大浏览器开发商组成，重拾HTML 4规格，开发 HTML 5规格

2006年，W3C认输，承认 XHTML 2.0不会成功

2007年，W3C重新成立 HTML工作小组，参考 WHATWG 的规格发展期HTML规格

2009年，XHTML 2.0被放弃，全面投入 HTML 5 规格的发展

2011年6月，Google宣布全面采用 HTML 5 技术

2012年， HTML 5被选为候选标准

2014年10月28日，HTML 5.0，W3C正式发布HTML 5.0推荐标准

也就是说现在最新的标准是HTML5，再看以前的老书都是很有可能走偏了，比如HTML4.01与HTML5就有一些不同。

动态网页发展史

HTML只是链接了万事万物，你可以从这个页面随便跳到另一个页面，也可以从这个网站跳到那个网站。

整个90年代，受限于网速，网页都是静态页，显示非常单一，前端的工作大部分都只是让美工来切切图和写写HTML+CSS。也因此，在90年代，前端还处在一种萌发期的状态，前端工程师这一工种也没有明确出现。

HTML它们大都是静态的，有人就想，这些页面有些都是结构相似的，那能不能不变的地方就放在HTML页面的，动的内容放在数据库里。

于是WEB1.0技术出现了，将程序与页面混合在一起，用特殊的标记分开，并且把页面的名字由HTML变成了ASP,PHP,JSP等等，这样web服务器就会识别为需动态加载的页面，从而调用ASP等对应的CGI程序来解释它，这也是极简VFPBS入门开发讲的内容。

代码语言：javascript

复制

  
  
  
  
  
  
  它的名字叫
  
  

后端的工作越来越多，后端程序就开始分层。就像在小公司里，大家啥都干，但公司规模大了之后，就要分部门，职责明确，代码也从揉在一起发展到Model，View和Controller，分别负责不同的功能。

这就是后端MVC模式的盛行，让我们可以在模板里写上要展现的数据。以前的代码都是所有内容写在一起，现在就会用Model负责数据。

后端渲染页面之前，会把数据库的数据显示在前端。动态页面使得前端本身的丰富程度大大提升。这一下子迎来了整个互联网开发的繁荣时期，但这种模式下的任何数据更新，都需要刷新整个页面，并且在带宽不足的年代，这样做会耗费不少加载网页的时间。

所以这个时代的网页主要还是以显示数据和简单的特效为主，比如当时众多的门户网站，也都没有太多的用户交互，主要就是显示后端存储的新闻。

WEB2.0的发展

WEB1.0前面提前了加载慢，它有一个天生弊端，一个是加载页屏白屏，无论现在浏览器障眼法多少，只要网页一卡，白屏必然出现。比如你公众号打开一个网页，刚开始加载的时候，是不是白屏。第二每交互一次，都要把整个页面提交给后端，这样的效率极低。

VFP开发平台群里面有一位PHP的人，牛皮吹得震天响，说自己的PHP用得多好多好，顺利截图发群里，你们研究学习的BS，PHP早就都咋样咋样。后来我们聊到了AJAX技术，他竟然不知道，他的页面也没有用到这个。在VFP开发平台群里面，装大师可是要被嘲笑的，当然我们也没有怎么回击，但可能自觉丢脸了吧，从此再也没有群里露面发言过了，唉，甚是可惜。

AJAX(异步JavaScript和XML)只是微软无心插柳的作品，XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口。

2004年，Google发布了Gmail，用户可以在不刷新页面的情况下进行复杂的交互，之后，Ajax逐渐成为网页开发的技术标准，也不断地被应用于各种网站。Ajax这个技术让我们可以异步的获取数据并且刷新页面，从此前端不再受限于后端的模板，这也宣告了Web2.0时代正式到来。至此，前端工程师也正式作为一个独立工种出现。

在Gmail诞生后，大家意识到前端也可以做出复杂应用。但这个这时候，浏览器有ie6.0-8.0,还有其它公司的浏览器，支持的标准和特性都不一样，这个是战国时代，浏览器的混战和兼容性问题很大，比如绑定事件不同的浏览器就要写不同的代码，但而jQuery的出现迅速风靡全球，一个$走天下，学会jQuery就等同于学会了前端，在这之后，前端的具体开发不再被JavaScript的兼容性问题所困扰。大家前端开发就是jQuery+Bootstrap一把梭，成为了前端开发领域的主流技术，前端代码内嵌在后端的项目中，写完直接发布，通篇都是如下的代码：

代码语言：javascript

复制

$('#alert-btn').on('click',function(){
  $('#app .input').val('hi')
})

那个时候写代码，就是找到某个标签，然后进行操作，特别像铁器时代的拼刺刀，随着前端项目规模的逐渐提升，前端也需要规模化的时候，在2009年AngularJS和Node.js的诞生，也宣告前端工业革命的到来。

前端三大框架

现代前端框架都是是利用数据驱动页面，但是怎么处理数据的变化，各个框架走出了不同的路线。

这些框架要回答的核心问题就是，数据发生变化后，我们怎么去通知页面更新。

各大框架在这个步骤上，各显神通：

Angular1就是最老套的脏检查。所谓的脏检查，指的是Angular1在对数据变化的检查上，遵循每次用户交互时都检查一次数据是否变化，有变化就去更新DOM这一方法。这个方法看似简单粗暴，但算是数据驱动页面早期的实现，所以一经推出，就迅速占领了前端市场。

后面Angular团队自断双臂，完全抛弃Angular1，搞了一个全新的框架还叫Angular，引入了TypeScript、RxJS等新内容，虽然这些设计很优秀，但是不支持向前兼容，抛弃了老用户。这样做也伤了一大批Angular1用户的心，微软搞WP8，抛弃了WP7开发者，至此WP平台玩完。这大概也是也是Angular这个优秀的框架现在在国内没有大面积推广的原因。

而Vue的解决方案，就是使用响应式，初始化的时候，Watcher监听了数据的每个属性，这样数据发生变化的时候，我们就能精确地知道数据的哪个key变了，去针对性修改对应的DOM即可，这一过程可以按如下方式解构：

在上图中，左边是实际的网页内容，我们在网页中使用{{}}渲染一个变量，Vue1就会在内容里保存一个监听器监控这个变量，我们称之为Watcher，数据有变化，watcher会收到通知去更新网页。

数据变，页面变。

Facebook的React团队提出了不同于上面的Angular、Vue的的解决方案，他们设计了React框架，他们在浏览器数据结构之上，搞了一个叫虚拟DOM的东西，也就是用一个JavaScript对象来描述整个浏览器的数据结构－DOM树。修改只改虚拟DOM的结构，然后根据通过虚拟DOM计算出变化的数据，去进行精确的修改实际浏览器的结构。

这种形式不仅让性能有个很好的保障，我们还多了一个用JSON来描述网页的工具，并且让虚拟DOM这个技术脱离了Web的限制。因为积累了这么多优势，虚拟Dom在小程序，客户端等跨端领域大放异彩。

虚拟Dom在运行的时候就是这么一个JS对象：

代码语言：javascript

复制

{
  tag: "div",
  attrs: {
    id: "app"
  },
  children: [
    {
      tag: "p",
      attrs: { className: "item" },
      children: ["Item1"]
    },
    {
      tag: "div",
      attrs: { className: "item" },
      children: ["Item2"]
    }
  ]
}

原来是JQuery是直接改浏览器的标签，现在是直接改这样的JS对象，再由框架更新到相应的标签位置。

由于浏览器操作DOM一直都是非常慢的，虚拟DOM的计算数据Diff的方式，能够确保尽可能少的操作DOM，这也是虚拟DOM驱动的框架性能一直比较优秀的原因之一。