WEB 技术概述(2)|学习笔记

简介: 快速学习 WEB 技术概述

开发者学堂课程【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。虽然叫静态,主要指的是它这个文本文件已经写好在。基本上不会变,除了改动它,不会变。直接去资源请求,这个资源找到之后,将内容读取出来,变成响应报文,到了浏览器端,浏览器端进行反应

静态内容从来没变过,一旦图片产生好了,这个内容就不用动了。

相关文章
|
3月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
416 1
|
5月前
|
Java 应用服务中间件 Docker
java-web部署模式概述
本文总结了现代 Web 开发中 Spring Boot HTTP 接口服务的常见部署模式,包括 Servlet 与 Reactive 模型、内置与外置容器、物理机 / 容器 / 云环境部署及单体与微服务架构,帮助开发者根据实际场景选择合适的方案。
217 25
|
6月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
201 1
|
7月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
288 7
|
人工智能 安全 物联网
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
285 6
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
308 3
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
417 1
|
负载均衡 监控 算法
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
390 2
|
缓存 安全 前端开发
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。