开发者学堂课程【Tomcat 服务器入门详解:WEB 技术概述】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/654/detail/10843
五、浏览器
1980年代,Tim Berners-Lee 为 CERN (欧洲核子研究中心,当时欧洲最大的互联网节点)设计基于超文本思想的 ENQUIRE 项目,以促进科研人员之间的信息共享和更新。1989年3月他编写了
《Information Management: A Proposal》一文, 并构建基于 Internet 的Hypertext 系统, 并在 CERN 开发了 World Wide Web 项目,打造了世界上第一个网站,于1991年8月6日正式上线。2019年是www的第三十年。
Tim Berners-Lee 于1990年发明了第一个浏览器,还发明了 HTTP 协议。1994年MIT他创建了 W3C.W3C 万维网联盟,负责万维网持续发展。他提出 W3C 的标准应该基于无专利权无版税。
Marc Andreessen 于1993年发明了 MosaiC 浏览器。
并看到了这个技术的前景,不久后他成立自己的公司——网景 Netscape. 1994发布 了 Netscape
Navigator 浏览器,席卷全球。1995年微软发布IE, 开启第一次浏览器大战,最终后来居上。
1999年网景被 AOL 收购,收购后不久,Netscape 公开了浏览器代码,并创建了Mozilla 组织。Moilla 组织使用 Gecko 引擎重写浏览器。
Moila 组织使用 Gecko 引擎发布了几款浏览器,最终于2004年更名为 Firefox 浏览器。第二次浏览器大战开始了。
2003年5月,网景被解散。
AOL 于2007年12月宣布停止支持 Netscape 浏览器。
Apple 的 Safari 于2003发布第一个测试版。
2008年 Google 的 Chrome 浏览器带着V8引擎横空出世。
2008年 IE 占据浏览器市场份额的75%,FF 占近20%, 如今2019年 Chrome 占据市场份额近70%。浏览器内两大核心:渲染引擎和 IS 引擎
微软操作系统差点要倒闭了,微软要不是转向云生态的话,早就倒闭了。浏览器已经萎缩了。
微软甚至连操作系统说 Windows10 是最后一代,因为已经不在乎什么操作系统了,甚至连PC的 Windows 都不太用了,一个手机就搞定了,而手机上 Windows phone 失败,宣告失败,因为性能最差,又不开源,人们是不敢用的,当然使用安卓也得小心,然后,1991年浏览器诞生之后,因为这个协议它是无版税,它是开放的,马克安德森在1993年,自己根据当时的项目就开发了一个浏览器,这个浏览器叫马赛克浏览器。这个浏览器,其实已经是五脏俱全了,在他之前 Tim Bern ers-lee 的发明,这个浏览器其实样子也差不多。
他能发明第一个浏览器,说明当时技术水平还是不错的,但他是个商人,他看到的更多是商机,与 Tim Bern ers-lee 看到的不一样,他更多的是应该如何发展物联网,而不收版权。但不是说挣钱有罪,因为有了商业,有的赚了钱,才会有人想把它发展的更好,这个实际上是对的。如果个个都用盗版的话,世界上就没有人贡献什么力量。
马克安德森,看到了浏览器的未来,他直接就甩下这个公司,立刻就成立了自己的公司,这个公司叫 netscape。就是大名鼎鼎的网景公司,1994年的 netscape 发明了 navigator 这个浏览器,整个席卷全球,大家都在用。但是,微软看到了,说这才是下一代应该争夺的地方,微软的 ie 是捆绑不同版本的 Windows 的,它在它自己的操作系统当中直接捆绑,Windows5已经发布了,比 Windows3来讲的话,那是成功太多了。
到后来更有影响力的 Windows98,都是硬件IE的。
1995年随着IE的搅局,第一次互联网大战正式拉开帷幕。
两家相斗于是在1999年的时候,就只能卖给 AOL——美国在线了,美国在线,还继续在发展的 netscape。
但是在他收购后不久,Netscape 就陆陆续续将自己的 leadership 的源码全部公开,并且成立了 Mozilla 组织。然后,Mozilla 组织就用代码重写了一个引擎,渲染引擎,这个引擎就是 Gecko 引擎。那么有了 Gecko 引擎之后,他们就开始发布自己的开源版本的浏览器。
开源版本浏览器,中间起了好多名字,起初叫 Phoenix。后来发现 Phoenix 被人占了,浴火重生,就改名叫火鸟,也被人占了,随便起个名叫火狐狸,结果发现没人使用。
2004年的时候,火狐狸诞生了,2003年5月的时候,网景已经被解散,2004年的firefox,在 Mozilla 组织发布的开源浏览器。这是第二次浏览器大战,第一次浏览器大战我们也知道了,网景失败了。
第二次浏览器大战,以 firefox 进来了,延续着 netscape 精神,和微软的IE作斗争,因为微软 IE 一家独大。Firefox 慢慢的蚕食着这个市场,但是蚕食的速度很慢,在这期间,Apple 进来了。Apple 在零三年时候发布了第一个测试版,也就是说 Apple 在自己的小环境当中,在苹果这一面,用的是它的这个 Suffering ,就让微软最觉得害怕的,零八年谷歌自己开发了浏览器,因为谷歌看到了互联网的未来,尤其是移动互联网要到来了,谷歌说安卓布局,就布局浏览器了,用浏览器代替所有的操作系统,这是谷歌的胃口,但是他到今天都没做到。那么谷歌他直接发布了 Chrome 浏览器,Chrome 浏览器里面带了个引擎,这个引擎叫 V8引擎。
V8 引擎,谷歌的 Chrome 市场,而且有众多的开发者围绕它来做,其实当时firefox 在这之前做的也不错,零四年发作,Firefox 里面也有众多的插件,比微软调试起来方便多了,写前端非常方便,而且自由开放,插件也非常多。
但是后来这一批人,就开始转向 Chrome了。所以 Chrome 就发展得很厉害。第二次浏览器大战如果到今天还不算结束的话,看看战绩如何,零八年 firefox 占了20%,在 Chrome 市场很小,到一九年的时候,应该是70%,微软几乎快被忘记了,要调的是 Windows 的这个浏览器的时候,这个时候才会弹出ie。
所以 Chrome,还是比较厉害的科目,到目前为止的话,应该说是最主要的,包括看到的国产所谓的问题,其实包装的全是 Chrome,甚至有人骗国家项目,都是拿人家那个过来用的。浏览器就两大核心。一个核心最早用来渲染 HTML,称为叫渲染引擎,到目前为止没有一个国产的引擎。
第二个因为网景公司发明了这个 JS 引擎,那也就是说 JS 是浏览器广泛的支持,所以说浏览器当中最核心的两个东西,不是漂亮的界面,是应该有渲染引擎和 JS 引擎,这两个是最重要的。
六、JavaScript
Javascript 简称 JS, 是一种动态的弱类型脚本解释性语言,和 HTML、 CSS 并称三大 WEB 核心技术,得到了几乎主流浏览器支持。
1994年,网景 Netscape 公司成立并发布了 Netscape Navigator 浏览器,占据了很大的市场份额,网景意识到 WEB 需要动态,需要一种技术来实现。
1995年9月网景浏览器2发布测试版本发布了 LiveScript, 随即在12月的测试版就更名为 JavaScript. 同时期,微软推出IE并支持 ]Script. VBScript, 与之抗衡。
1997年,网景、微软、SUN, Borland 公司和其他组织在 ECMA 确定 了ECMAScript 语言标准。JS 就成为 ECMAScript 标准的实现之一。
2008年后随着 chrome 浏览器的 V8 引擎发布。
V8 JS 引擎不是解释执行,而是本地编译,在V8引擎做了很多优化,JS 程序在其上运行堪比本地二进制程序。
V8 引擎使用 C++ 开发,可以嵌入到任何 C++ 程序中。基于它,2009年 Nodejs 诞生, 提供了大量的库供程序员使用。从此,使可以在服务器端真正大规模使用JavaScript 编程了。也就是说 JavaScript 也真正称为了服务器端编程语言了。
代码如下:
test
alert('abc');
//JS 引擎解释 javascript 写的代码,注意,这个代码是放在服务器端的,如同HTML 一样,是一个静态的文本文件,需要发请求我们要发请求的,一般可以在任何地方去写标签,一个标签,其实都叫 script。这个 script 标签按道理可以放在本HTML 的任何地方。但是,习惯上一般建议要么放在上面的 head 的部分。要么就放在 body 部分,或者说放在后面,其实放在任何部分都行。
有时候建议,JS 应该往后放。然后会有样式表,有样式表是用来控制样式,里面还可以用 Style 来写,这也是样式表,称为叫当前网业内样式表,样式表写各种样式,叫外链,这是外部的。链接到另一个文件了。script 里面写脚本,比如说弹框,就是 javascript,就属于当前 HTML 的。还有一种写法,还是 script 里,但是里面叫 SRC 等于比如说 index.js,注意这是一个新的连接,补全,要知道这个 web的工作原理。
首先浏览器右边是地址栏,写了个 url,然后 url 被浏览器拿到之后,浏览器要将它封装成 HTTP 并请求报文。有 get 请求、post 请求、delete 请求等等。如果跨越还有一些预检请求等等。这些请求发到 server 端,这就是打通到 Socket 编程,通过应用层的话发请求,这个请求 HTTP。要协商协议版本,请求到了 server 端,注意一个请求,一个响应。
发起的请求虽然是一个根,但实际上这个根都有欢迎页,实际上发起的是对一个页面资源的请求,但这个资源究竟是静态还是动态,要看情况,假设他访问的是静态的,这样便于理解,就是著名的 index.html,注意这是逻辑的 Url 地址是某网站的根下的 index 不写时默认配置的,然后通过 server 做路径映射我们找到的物理文件index.html,总之能映射到,能找到,找到之后,就得靠文件 io,打开此文件,读取文件内容,内容是纯字符串,将这个纯字符串这些内容一字不落的全部读取出来,并且交到 server,如果 server 具有 HTTP 的解析能力,兼具有 HTP 的封装能力。就会将它封装成 HTTP 响应报文,在响应报文的正文部分将内容填入。
直接就是字符流,也是字节流。因为如果写了一个 meta 里面有个 UTTF-8 是会传给浏览器的,注意是正文部分传给浏览器。当然在 response 报文的头里面,也可以告诉下面要发回的 HTML,它的内容使用什么编码。
这样,浏览器收到响应报文之后,先读取 response 的 head 的部分。然后知道了协议,知道了状态码,然后,再来去解析响应报文的正文。将正文部分的 HTML通过渲染引擎解析成 dom 数。然后把 dom 按照程序将 dom 渲染出来,这就是看到的网页的内容。在这个过程当中,发现这是一个新的url,只不过这个相对路径。
注意刚才试一次请求,回来的一个内容,回来的一个响应,然后如果当在解释这个HTML 的时候,发现路过这一句的时候,由上向下解释,发现这是一个外部的文件,它会再次发起对这个 CSS 的 HTTP 请求,问 server 去找到它所对应的物理文件,将这个物理文件封装成HTTP响应报文,然后回来,回来之后就会作用在刚才的HTTP 界面上,这个样式就变漂亮了,但是有时候因为网络出故障,这个样式表没回来,会发现,网页怎么突然错乱了。
注意样式表示刚才 HTML 的一部分,它不需要单独发起 HttP 请求,
SRC 就是另外一个请求了,会再次发起一个新的 server,然后对这个 server 甚至可以不是同一个 server,要看这前面写不写域名,可以跨域访问。
总之还得发请求,注意这些请求都是 get 的对 JS 的发起的请求,JS 到了 server端,Server 又要去映射路径找到物理文件,找到物理文件这个 JS 之后,将这个 JS 的封装成响应报文,又交给浏览器,浏览器拿到 JS 之后,当然就可以运行里面的代码了。
不管怎么说,这都是发起 get 请求就回来了。Img 标签里面也有个属性,就是 SRC里面也可以写,这就是图片。当扫到图片这个标签的时候,也会发起一个对server,再发起一个 HTTP 的 get 请求。然后在这边 server 依然是对这个图片的url 进行解析,并且找到物理对应文件,并且将字节流发回来,然后,浏览器拿到这个图片,并且在相应的位置,按照指定的大小以及位置把它渲染出来,发现有时候图片图片把那个浏览器撑大了。
注意,这些都是新的请求,发起的在地址栏里面就敲了一个 url,这个 url 只能是一次请求。然后回来的内容被解析了,才会发起新的请求。当然这里面还可以发起一些其他的请求,比如说异步请求,注意,先得把内容拿回来,拿回来之后,比如说网页上有个按钮,这个按钮一点击之后,它就会掉一个 javascript 的函数,在这个函数内部,就可以调相应的组件,这个简称就是 XHR。它可以发起一个异步请求。
发异步请求,现在用的技术也很多,注意都是 HTTP 协议的,所以你一定发的是HTTP 的请求。只不过可以设定为 get 请求,post 请求,等等,但是常用的,如果要用的是 restful 的风格的话,常用的就是包括 delete
前后端分离之后,能看到那个东西叫 rest field 风格的接口。甚至你后面给他部署这样一个服务,这个服务提供 rest 风格的接口调用。
一定要知道网页的交互过程,发的是一个请求,但这个请求回来,这个网页内还有其他的外部文件的引用,然后再发起新的请求,甚至有的时候用脚本还会在发起其他的请求,这是请求过程。
Javascript 可以写在页内,也可以发起新的请求,总之这个脚本是拿到手之后,就可以去运行它了。那这个脚本,当初是网景弄的,网景之后,然后微软说得弄一套。但是因为 ie 的强大,把 netscape 挤掉了,也就是说 javascript 实际上名存实亡。其实现在用的是跟 javascript 兼容的 jsscript。
宝兰公司主要的研发人员,大神去了微软,他在微软主导研发了 particle 解析器。当年横扫微软的产品。用微软的 VC 来写界面。用 vc 写底层编程有效率,VC 没问题,c++ 有效率,但是微软的东西,写界面太难了,VC 那个框架叫 MFC,然后可以搞个简单的,来用 VB 写,结果宝蓝公司随便打开界面,拖拖拽拽搞定数据库,配置连上了,很方便。
所以它这个产品当时,整个主要是CSS编程带界面的诠释它。而且对底层编程也特别方便,出了很多工具,包括 jbuilder,就是 Java 变形工具,都是非常好的,但是jbuilder 一出以后,也说不准用。没办法,他也不搞了,后来他又去了微软公司,也去搞了一个为 Java 做的编写,结果 Java 说不准做,后来就都不能做了。所以说Java 这块,后来也没什么特别好的工具,到目前为止,当时把 VB 挤得没有市场。
艾克玛——欧洲的计算机制造业协会,在欧洲的这个组织这儿开了个会,然后确定了一个标准,这个标准就后来成为 javascript 的标准。这个标准称为叫 echo a script 简称 es。所以 JS 就变成标准实现了。
Javascript 是标准的实现,当然微软也有自己的实现。微软发现他的浏览器市场快丢了,所以,它提供了另一种在 JS 的基础之上,也就是说JS是真子节,完全包含javascript,完全兼容标准。但是发现这个市场已经不可逆转了,所以他也拥抱开源,甚至包括到奈特,真正实现了跨平台了。
其实想的就是跨平台,但是就是不做,发现市场丢了才干这事。零八年的时候,这个 Chrome 的 V8 引擎诞生了,V8 引擎特别不一样。不走寻常路,谷歌不走寻常路受到了欢迎,谷歌将一个解释性脚本,不按解释性脚本套路。做本地变异,然后用解释器来运行。所以他本地编译,那就相当于没有解释器,没有像 Java 这样的虚拟机。所以它的性能是非常好,而且做了大量的优化,性能非常好。所以它的性能堪比本地运行二进制数据,所以受到了广泛的欢迎。
那么由于是 C++编写,而且把这个东西还开源出来。性能当然好,就有人发现这是个好商机,然后将 v8 引擎包在其中,为 V8 引擎周边提供了丰富的基础类库就可以操作当前操作系统。那这个技术内控包装完之后,就发布一个产品,在工作中有可能碰到,可能要部署那个JS的东西。JS,那么 node JS 一定是 Java javascript,它需要这个 note JS 里面包的是 V8 引擎。用 V8 引擎来去就地编译 JS,并且直接去运行它,加上这个基础就变成了后端的 JS 编程。所以到目前为止,只有一个语言可以前后端通吃,那就是 JS。就是前端在浏览器中去使用,后端就在服务器端使用JS,
JS 发展的版本也很快, V8 引擎更新速度也很快。所以现在功能越来越强大。尤其是javascript 的 Emma script 的标准 ES6 诞生了。
ES6 是在2015年,很快就获得了广泛的欢迎,从而导致了整个前端编程的颠覆性的变化。
后端编程也可以用,它多了一个东西,虽然它本质上不是类,但是他自己实现的类,这样就可以用面向对象思想来变成,整个前后端变成发生了非常大的变化。现在像 will 框架,像 react 框架,其实写起来并不容易,它的里面的原理还是比较难。
七、静态网页技术
早期的 HTML 设计之初,只能 HTML,里面可以显示文字、图片,使用 CSS 来控制颜色、字体大小等。草后来引入了 JavaScript 就可以是网页可以人机交互、可以让元素动起来。但这都不是内容的动态变化。
静态网页技术,主要指的是 TML,CSS 还有 JS。虽然叫静态,主要指的是它这个文本文件已经写好在。基本上不会变,除了改动它,不会变。直接去资源请求,这个资源找到之后,将内容读取出来,变成响应报文,到了浏览器端,浏览器端进行反应。
静态内容从来没变过,一旦图片产生好了,这个内容就不用动了。