选择大于努力,你必须了解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入门开发讲的内容。


<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>smarty test1</title>
  </head>
  <body>
  它的名字叫<%=name %>
  </body>
  </html>

后端的工作越来越多,后端程序就开始分层。就像在小公司里,大家啥都干,但公司规模大了之后,就要分部门,职责明确,代码也从揉在一起发展到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一把梭,成为了前端开发领域的主流技术,前端代码内嵌在后端的项目中,写完直接发布,通篇都是如下的代码:


$('#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对象:


{
  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驱动的框架性能一直比较优秀的原因之一。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

加菲猫的VFP

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值