专栏首页加菲猫的VFP选择大于努力,你必须了解web1.0到web2.0三段历史

选择大于努力,你必须了解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驱动的框架性能一直比较优秀的原因之一。

本文分享自微信公众号 - 加菲猫的VFP(VFPPLUS),作者:加菲猫的VFP

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-10-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【极客资讯】你了解过“互联网”的发展史吗?

    一川水巷
  • 区块链技术公司 预测区块链以后的生活

    与任何新兴技术一样,Web 3.0 仍在不断完善,它的场景将真实的发生在我们身边,甚至就是我们自己身上,人们将可以通过 DApps,实现和其他服务的交互。涉及的...

    用户3126099
  • scrollHook Vue 滚动监听钩子

    copy_left
  • 3张图让你秒懂Web3.0, 从1.0到3.0你不知道的互联网的演进史!

    Web 3.0可以说是最近最火的词之一。简单说,Web 3.0意味着互联网发展史进入到新阶段,把互联网带到全新的水平。计算机科学家和互联网专家认为,Web 3....

    区块链大本营
  • Web 3.0 大串讲:原来你是这样的区块链!

    我们可以这样说,在如今的时代,想实现你的创业梦,web3.0 是你与巨头对抗的最佳武器,也是你实现创业梦的唯一方式。

    AI研习社
  • 学术大讲堂 | (二)区块链Web3.0与未来网络 演讲实录

    在介绍区块链技术在网络领域的应用之前,我先讲几个非网络领域的故事。看看针对区块链外部行业是怎么做的,再转回我们网络本行业,思路会更加开阔。

    灯塔大数据
  • 个人站长:该怎样提高网站的广告点击率

    很多个人站长做网站还是有一定的理想抱负的,就是因为不愿替公司做死做活的打死工,所以才想通过自己建网站赚钱,但是一个月1000多元的收入明显是不足以养活自己乃至整...

    砸漏
  • Web 2.0下的门户网站建设

    web2.0   博客的出现之所以被称为网络世界的革命,是因为其极大的降低了建站的技术门槛和资金门槛,而使每一个互联网用户都能方便快速的建立属于自己的网上空间。...

    张善友
  • 什么是前端技术与后端技术

    在HTML入门教程学习之前,我们有必要跟大家讲一下网站开发的一些知识。了解这些知识,对你以后网站开发之路如何走、该学习些什么,是非常有用的。同时也避免你走太多的...

    Java深度编程
  • 本周AI要闻 - NO.02

    最近,BuzzFeed对外曝光了一个涉及金额达数百万美元,涉及Play Store上125个APP应用的广告作弊计划。这个计划是通过数十个国家的一系列空壳公司精...

    mixlab
  • 企业级SaaS公司HubSpot:如何在4年内做到获客回报率翻倍?

    ? 来源:栈外  作者: Brain Halligan ---- HubSpot创立于2006年,专注于为企业提供市场营销及销售方面的软件服务。而在成立6年后...

    腾讯SaaS加速器
  • 哪些人适合做前端开发?HTML5前端发展前景怎么样?

    当我们决定学习一个技能的时候,首先会考虑到零基础学不学的会,这个技术的前景怎么样,赚钱多吗?别着急,今天就来为你揭开HTML5前端的神秘面纱,认真看完。

    用户8671053
  • NoSQL概述

    我们现在处理什么年代 2020年 大数据时代 适者生存 学习才是在这个社会生存的唯一法则。

    后端码匠
  • IPFS将构建Web3.0互联网

    应该很多人看到IPFS分布式存储是Web3.0,但是却不是很清楚什么是Web,什么是Web1.0,什么是Web2.0。其实这个就跟我们的电话移动通信技术差不多的...

    用户8812020
  • 快速学习ES6新特性-简介

    现在使用主流的前端框架中,如ReactJS、Vue.js、angularjs等,都会使用到ES6的新特性,作为一名高级工程师而 言,ES6也就成为了必修课,所以...

    cwl_java
  • CommonJS——

    CommonJS(http://www.commonjs.org/)规范为JavaScript制定了一个美好的愿景——希望JavaScript能够在任何地方运...

    奋飛
  • 爆肝怒赞,不会也会了,VFPBS用Form调用webapi和文件上传

    打开HBULIDX,新建一个网页,在HTML的BODY中输出如下代码,保存到框架的wwwroot目录。

    加菲猫的VFP
  • 前端新人参加工作之后的技术短板在哪里?

    这几天我找一些同学聊天,聊一些关于学习、工作的内容,想知道他们现在的境况,想了解他们真正的需求在哪。

    web前端教室
  • 互联网的第一次“失忆”

    今年4月2日,这一社交产品正式关闭。面对这场长达九年试图进军社交领域的持久战,Google 选择了主动放手。

    华章科技

扫码关注云+社区

领取腾讯云代金券