咱们来聊聊什么是 Web

左手的ㄟ右手 2023-02-14 07:51 41阅读 0赞

## 1.1 浏览器内核 ##

### 1.1.1 简介 ###

浏览器最重要或者说核心的部分是 Rendering Engine，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

### 1.1.2 主流内核 ###

![在这里插入图片描述][20200601210212366.png_pic_center]

#### Trident ####

说起 Trident，大部分人都会觉得比较陌生，但提起 IE 浏览器基本上是家喻户晓。由于该内核被包含在全世界最高的使用率的操作系统中，即为 Windows 操作系统，所以我们又经常把它称之为 IE 内核。采用用 Trident 内核的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Sleipnir、GOSURF、GreenBrowser 和 KKman 等。  
   Trident(又叫 MSHTML)，是微软开发的一种排版引擎。1997 年 IE 4 诞生时一同出现，之后被不断地更新和完善。它实际上是一款开放的内核，由于其引擎被设计成一个软件模块，所以其他的软件开发人员就能够在他们开发的应用程序中加入网页的浏览功能。Trident 内核接口已经很成熟了，所以有许多采用 IE 内核的产品。但是 IE 内核无法在 windows 操作系统之外的其他操作系统上使用，所以不能跨平台使用。  
   该内核程序在 1997 年的 IE 4 中首次被采用，是微软在 Mosaic 代码的基础之上修改而来的，并沿用到 IE 11，也被普遍称作”IE 内核”。Trident 实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用 IE 内核而非 IE 的浏览器(壳浏览器)涌现。  
   由于 IE 本身的“垄断性”(虽然名义上 IE 并非垄断，但实际上，特别是从 Windows 95 年代一直到 XP 初期，就市场占有率来说 IE 的确借助 Windows 的东风处于“垄断”的地位)而使得 Trident 内核的长期一家独大，微软很长时间都并没有更新 Trident 内核，这导致了两个后果——一是 Trident 内核曾经几乎与 W3C 标准脱节，二是 Trident 内核的大量 Bug 等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为 IE 浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox 和 Opera 就是这个时候兴起的。非 Trident 内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非 IE 浏览器的浏览效果问题。

#### Gecko ####

Gecko(Firefox内核)：Netscape6 开始采用的内核，后来的 Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko 内核的浏览器也很多，这也是 Gecko 内核虽然年轻但市场占有率能够迅速提高的重要原因。  
   事实上，Gecko 引擎的由来跟 IE 不无关系，前面说过 IE 没有使用 W3C 的标准，这导致了微软内部一些开发人员的不满；他们与当时已经停止更新了的 Netscape 的一些员工一起创办了 Mozilla，以当时的 Mosaic 内核为基础重新编写内核，于是开发出了 Gecko。不过事实上，Gecko 内核的浏览器仍然还是 Firefox (火狐)用户最多，所以有时也会被称为 Firefox 内核。此外 Gecko 也是一个跨平台内核，可以在 Windows、Linux和 Mac OS X 中使用。

#### Presto ####

Presto (Opera前内核 已废弃)： Opera 12.17 及更早版本曾经采用的内核，现已停止开发并废弃，该内核在 2003 年的 Opera 7 中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。  
   实际上这是一个动态内核，与前面几个内核的最大的区别就在脚本处理上，Presto 有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行 Javascrīpt 的时候有着最快的速度，根据在同等条件下的测试，Presto 内核执行同等 Javascrīpt 所需的时间仅有 Trident 和 Gecko 内核的约 1/3(Trident内核最慢，不过两者相差没有多大)，只可惜 Presto 是商业引擎，使用 Presto 的除开 Opera 以外，只剩下 NDSBrowser、Wii Internet Channle、Nokia 770 网络浏览器等，这很大程度上限制了 Presto 的发展。  
   Opera 现已改用 Google Chrome 的 Blink 内核。

#### Webkit ####

Webkit(Safari 内核，Chrome 内核原型，开源):它是苹果公司自己的内核，也是苹果的 Safari 浏览器使用的内核。 Webkit 引擎包含 WebCore 排版引擎及 JavaScriptCore 解析引擎，均是从 KDE 的 KHTML 及 KJS 引擎衍生而来，它们都是自由软件，在 GPL 条约下授权，同时支持 BSD 系统的开发。所以 Webkit 也是自由软件，同时开放源代码。在安全方面不受 IE、Firefox 的制约，所以 Safari 浏览器在国内还是很安全的。  
   限于 Mac OS X 的使用不广泛和 Safari 浏览器曾经只是 Mac OS X 的专属浏览器，这个内核本身应该说市场范围并不大；但似乎根据最新的浏览器调查表明，该浏览器的市场甚至已经超过了 Opera 的 Presto，这一方面得益于苹果转到 x86 架构之后的人气暴涨。  
   Google Chrome、360 极速浏览器以及搜狗高速浏览器高速模式也使用 Webkit 作为内核(在脚本理解方面，Chrome 使用自己研发的 V8 引擎)。WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的 iPhone， Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。  
   WebKit 内核常见的浏览器：傲游浏览器3、Apple Safari （Win/Mac/iPhone/iPad）、Symbian手机浏览器、Android 默认浏览器。

#### Blink ####

Blink 是一个由 Google 和 Opera Software 开发的浏览器排版引擎，Google 计划将这个渲染引擎作为 Chromium 计划的一部分，并且在 2013 年 4 月的时候公布了这一消息。这一渲染引擎是开源引擎 WebKit 中 WebCore 组件的一个分支，并且在 Chrome(28及往后版本)、Opera(15 及往后版本)和 Yandex 浏览器中使用。  
   2013 年 4 月 3 日，谷歌在 Chromium Blog 上发表博客，称将与苹果的开源浏览器核心 Webkit 分道扬镳，在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心)，内置于 Chrome 浏览器之中。  
   苹果在 Safari 中采用 Webkit 核心，并于 2005 年将 Webkit 公开为开源软件。谷歌当时采用苹果的 Webkit 核心打造了 Chrome 浏览器。Opera 也宣布称将会转向 Webkit 核心，但是谷歌宣布此举后，Opera 表示将会跟随谷歌采用其 Blink 浏览器核心，同时参与了 Blink 的开发。  
   谷歌转向研发 Blink 浏览器内核意义重大，谷歌此举欲降低 Webkit 即苹果在浏览器市场的影响力。截止 2012 年底，Webkit 浏览器内核占总浏览器市场份额约 40%。谷歌解释称，Chromium 多处理架构系统与其他 Webkit 浏览器很不相同。谷歌工程师 Adam Barth 在博客中表示，随着浏览器的发展，苹果的 Webkit 已经不能满足用户需求，同时也有碍浏览器技术的创新步伐。但是他也表示，谷歌自主研发 Blink 内核绝非易事，但是新内核将会提升整个开源网络生态系统的机能。谷歌做出此举之际， Mozilla 与三星也达成合作协议开发“下一代”浏览器渲染引擎 Servo。

## 1.2 浏览器标准 ##

### 1.2.1 简介 ###

对于浏览器开发商和 Web 程序开发人员在开发新的应用程序时遵守指定的标准更有利于 Web 更好地发展。开发人员按照 Web 标准制作网页，这样对于开发者来说就更加简单了，因为他们可以很容易了解彼此的编码。使用 Web 标准，将确保所有浏览器正确显示您的网站而无需费时重写。遵守标准的 Web 页面可以使得搜索引擎更容易访问并收入网页，也可以更容易转换为其他格式，并更易于访问程序代码。Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

### 1.2.2 分类 ###

#### 结构(Structure) ####

结构用于对网页元素进行整理和分类，主要包括 XML 和 XHTML 两个部分。  
   ♞ HTML 英语意思是：Hypertext Marked Language，即超文本标记语言，使用 HTML 语言描述的文件，需要通过 WWW 浏览器显示出效果。是一种最为基础的语言。所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。所谓标记，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字属性>”来表示。  
   ♞ XHTML 是 HTML 向 XML 的过渡语言，删除了部分表现层的标签，标准要求提高，有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。  
   ♞ XML(eXtensible Markup Language) 即可扩展标记语言，最初设计的目的是弥补 HTML 的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。XML 是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然 XML 占用的空间比二进制数据要占用更多的空间，但 XML 极其简单易于掌握和使用。

#### 表现(Presentation) ####

表现用于设置网页元素的版式、颜色、大小等外观样式，表现标准语言主要包括 CSS(Cascading Style Sheets) 层叠式样式表，通过 CSS 样式表，W3C 创建 CSS 标准的目的是以 CSS 取代 HTML 表格式布局、帧和其他表现的语言，通过 CSS 样式可以使页面的结构标签更具美感、网页外观更加美观。

#### 行为(Behavior) ####

行为是指网页模型的定义及交互的编写，指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要包括 DOM 和 ECMAScript 两个部分。  
   ♞ DOM 是 Document Object Model 文档对象模型的缩写。DOM 是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM 解决了 Netscaped 的 Javascript 和 Microsoft 的 Jscript 之间的冲突，给予 web 设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。  
   ♞ ECMAScript 是 ECMA(EuropeanComputer Manufacturers Association) 制定的标准脚本语言(JAVAScript)

## 1.3 Web ##

### 1.3.1 Java Web ###

Java Web 是用 Java 技术来解决相关 web 互联网领域的技术栈。web 包括：web 服务端和 web 客户端两部分。Java 在客户端的应用有 java applet，不过使用得很少，Java 在服务器端的应用非常的丰富，比如 Servlet，JSP 和第三方框架等等。Java 技术对 Web 领域的发展注入了强大的动力。

### 1.3.2 软件架构 ###

#### B/S 架构 ####

B 是英文单词 Browser 的首字母，即浏览器的意思；S 是英文单词 Server 的首字母，即服务器的意思。 B/S 就是 Browser/Server 的缩写，即“浏览器/服务器”模式。  
   B/S 结构是随着互联网的发展，web 出现后兴起的一种网络结构模式。这种模式统一了客户端，让核心的业务处理在服务端完成。你只需要在自己电脑或手机上安装一个浏览器，就可以通过 web Server 与数据库进行数据交互。

![在这里插入图片描述][20200601210004583.jpg_pic_center]

#### C/S 架构 ####

C 是英文单词 Client 的首字母，即客户端的意思，C/S 就是 Client/Server 的缩写，即“客户端/服务器”模式。  
   C/S 结构是一种软件系统体系结构，也是生活中很常见的。这种结构是将需要处理的业务合理地分配到客户端和服务器端，这样可以大大降低通信成本，但是升级维护相对困难。比如我们手机中安装的微信、qq、王者荣耀等应用程序就是 C/S 结构。

![在这里插入图片描述][20200601210058962.png_pic_center]

--------------------

关注公众号一起学习 Java 开发，跟大家分享我的学习成长过程

![在这里插入图片描述][2020060821282046.jpg_pic_center]

[20200601210212366.png_pic_center]: https://img-blog.csdnimg.cn/20200601210212366.png#pic_center
[20200601210004583.jpg_pic_center]: https://img-blog.csdnimg.cn/20200601210004583.jpg#pic_center
[20200601210058962.png_pic_center]: https://img-blog.csdnimg.cn/20200601210058962.png#pic_center
[2020060821282046.jpg_pic_center]: https://img-blog.csdnimg.cn/2020060821282046.jpg#pic_center