本系列文章状态:未完结 ...,更新中 ...,目录尚不完整,但提前发布请大家参考并提出意见,如果属实我会修改,谢谢!

---

前言:

-1).什么是编程之路核心技术卷•Web技术内幕?:

编程之路核心技术卷•Web技术内幕是一个系列文章,主要涉及
-1).浏览器渲染机制(以 Webkit 内核为例)。
-2).TCP/IP/HTTP/HTTPS 技术详解。
-3).Web 安全
-4).Web 性能优化
等领域。所以本篇文章也就分为四大板块与其下的若干小版块组合而成。

-2).为什么要写编程之路核心技术卷•Web技术内幕?

历史上的重大事件与一些积极向上的事物出现究其原因无不是其内部矛盾运动的结果,是把人逼到一定分上忍无可忍。本篇文章也不例外,当我打算重学前端的时候,发现自己上网查阅的资料(例如浏览器的渲染引擎的渲染机制等 … )就发现铺天盖地的都是模棱两可,当然也不乏有些文章让你赏心悦目,技术点论述的准确性与精准度拿捏得恰到好处。但是更多的还是彼此抄袭,譬如博客之间的文章移植、从某某书上的文章移植等 …。这是让人绝对受不了的,我们去网上查阅知识难道就是为了看这些模棱两可、这些彼此抄袭的结果吗?这绝对是让人难以忍受的!于是笔者决定由本人牵头写一篇系统阐述关于脱离代码以后的代码运行环境的运转机制及其相关技术的博文,来弥补自己在 Web 知识方面的不足,也为需要这篇文章的朋友提供一盏明灯!

-3).怎样写编程之路核心技术卷•Web技术内幕这个系列?

笔者打算通过以已经出版的书籍为引(因为这些书籍往往已经经过校验,可信度较高)结合以其他资源与实践结果来论述每一个知识点并且会对内容做适当的扩充。会将一些专业术语做最直白的解释以此来方便理解,在创作期间真诚的希望大家可以多给笔者提些意见与建议,笔者深深知道一篇正确的、专业的、能被大家广泛接受的文章的出现离不开群众的意见与支持,在前言末尾笔者会给出笔者的联系方式!一句话。这个系列由衷希望您来参与,一起将它完善来帮助更多的人!!!

-4).声明

-1).本系列文章版权归本书作者及其协作者所有,原创作品不易,未经作者允许擅自传播、占有等具有违法性质的行为的,应当承担相应的侵权责任!
-2).本系列文章由作者希望大家共同创建,欢迎来稿、意见与建议。作者会将每一节采纳的意见与建议者名字署在上面,对本系列文章贡献巨大者在本书封面会署上诸位的名字!
-3).本系列文章以 **** 平台首发。

-5).联系我们

笔者 QQ: 1848661762
笔者 weChat: LJ521JJJ
笔者的技术群:

一.浏览器渲染机制(以 Webkit 为例)

-1).浏览器的概述:

①.什么是浏览器?

浏览器(Web Browser) 是用来检索并展示万维网信息资源的应用程序。这些信息资源可以是网页、影音、图像等其他内容,他们由统一资源标识符标志,信息资源中的超链接可以使方便的浏览器相关信息。(那这个万维网是什么呢?)
一句话就是我们都知道当你在一个页面提交了一个表单或者是点击了某个按钮之后,就会向服务器发送一个请求,服务器接收请求后会返回资源比如网页、影音、图像等,但是返回的形式绝对不是直接返回的页面或是图片,而是一些数据与指令,尽管这样理解不是特别严谨,但是不妨暂且先这样理解者,后面章节我们会详细讲述。

浏览器主要具备形式:
界面:
-1).具有"上一页"、"下一页"按钮。
-2).“刷新按钮”
-3).“主页按钮”
-4).“地址栏”
-5).“可显示源码的控制台”
其他:
-1).支持 Cookie
-2).支持 HTTPS 等超文本传输协议
-3).支持扩展开发
-4).支持调试
-5).支持解析与渲染 DOM 的机制
…

万维网(World wide web)

万维网就是由许多相互链接的超文本组成的系统,并且万维网与互联网不是同等的概念,万维网只是靠着互联网运行的一项服务,是由统一资源标识符(URI)连接的文件和其他资源的全球集合(我们可以通过 URI 来互相访问对方或其他人的资源这样就将散落的资源整合了起来构成一张动态的资源网,这就是万维网的真谛)。而互联网则是全球相互连接的计算机网络系统。(那什么又是超文本标记语言、统一资源标识符(URI)、超文本传输协议呢?)

超文本标记语言

我们想要理解什么是超文本标记语言就必须要先理解什么是超文本。
所谓超文本就是指一种可以显示在计算机或者其他电子设备上的文本,但是其中的文字、图片等可以链接到其他的字段或者文档,允许从当前阅读位置直接切换到链接的所指位置。(借用一下 维基百科 中的图)理解的会更加形象:

文本的某一段、某一部分可以链接到其他的文档或其他资源,这样这个文本本身就超出了其作为一个普通文本的意义,所以称之为:超文本。典型的就是 HTML文本
接下来再来简述一下超文本标记语言(HyperText Markup Language):相信我们都已经习惯称其为 HTML了吧!

HTML 描述的是一个网站的语义结构,通过HTML标记来描述着一个页面的元素,通过浏览器的解析(这一编我们的重点)与渲染最终呈现出来我们日常见到的图形化界面,但是仅仅有 HTML 还是不够的,因为此时仅仅有了框架,没有 样式(借指 CSS) 与 功能(借指 JavaScript),其还只是一堆(可能带有超链接)的文字。所以 HTML 是房子结构、CSS 是房子的装饰、JavaScript 就是房子内部各个模块的功能的实现了。但是 HTML 仅仅作为标记语言却绝不是一门编程语言这一点要切记!虽然 HTML 通过 < ... >标签里面包裹着 HTML 元素来诠释网页内容,但浏览器不会将他们直接显示在页面上而是要经过解析等一些列工作 …。
HTML 的发行版本:
-1).1995 年 11月 24 日(HTML 2.0)
-2).1997 年 1月 4 日(HTML 3.2)
-3).1997 年 12月 18 日(HTML 4.0)
-4).1999 年 12月 24 日(HTML 4.01)
-5).2014 年 10月_28 日(HTML 5)
H5 logo:

统一资源标识符(Uniform Resource Identifier : URI)

=> URI 是一个用来标识某一互联网资源名称的字符串。该种标识允许用户对网络中的资源通过特定的协议进行交互操作。
=> URI 有三种表现形式:一种表现为统一资源定位符(Uniform Resource Locator : URL)
另一种表现为统一资源名称(Uniform Resource Name : URN)
还有就是既是 URL 同时也是 URN。
=> URI 具有相对于绝对之分。

• 绝对 URI : 通常是指通过HTTP等协议访问的网络资源绝对路径,像我们日常见到的就属于绝对 URI => https://edition.cnn.com/
• 相对 URI : 通常分为两种情况:
  -1).链接同台机器中的资源(例如上层路径"…/") =><img src="../icons/logo.png" alt="logo">
  -2).或者链接本文本内的某部分 => 例如瞄点链接(书签链接) =>

<a href="#bottom">返回页尾</a> <a name="top"> 
...
<a name="bottom"><a href="#top">返回顶部</a>

-1).统一资源定位符(URL)

实际上我们说这个我们日常最熟悉的 URL ,就是我们将要获取的网络资源所在的地址。言外之意就是我们是通过网络地址来定位我们具体想要的资源。

-2).统一资源名称(URN)

URN 定义的比较模糊,但实际上其就是为可能的事物添加一个全球独一无二标识。例如每本书后面的 ISBN(国际标准书号)

或者ISSN(国际标准连续出版物号)

再或是 UUID 相信学过 Java 的朋友都会经常用到这个吧!
=> UUID是由一组32位数的16进制数字所构成，故UUID理论上的总数为16³²=2¹²⁸，约等于3.4 x 10³⁸。也就是说若每纳秒产生1兆个UUID，要花100亿年才会将所有UUID用完。UUID具有唯一性,重复UUID码概率接近零，可以忽略不计。
实际上与 URL 不同的就是无需通过路径等条件通过这个唯一标识也精准的定位到了这个目标资源。值得注意的是:
-1).URN 标识的资源并不一定是可用的,但是保持全局唯一和持久性,即使资源已经不存在或者变得不可用其标识仍然不能被取消,名义上依然有效!
-2).这个 URN 还有一个作用就是便于记录,倘若你需要的目标资源不仅仅在这台服务器上有,在其他服务器上也有甚至存在于更多的服务器当中,如果我们通过 URL 的方式来访问的话就会有多种 URL 不便于记录,仔细想想我们要获取的目标资源本质上都是一样的如果给其一个 URN 是不是就什么都解决了呢?我们只需记住这个通过 URN 标识的标志即可。
-3).同一个事物其版本/形态的不同其 URN 也不同,以书为例。
（平装本、精装本、电子书各自具有不同的ISBN)。
=> URN 特性:
-1).全局性:URN 是在全球范围内有意义而不是仅仅在某些国家或者某个地区有意义。
-2).唯一性:永远不会将一个 URN 分配给两个不同的资源。
-3).持久性:无论被标识资源存在与否,其都一直存在,这是从纵向、历史的角度而言的。
-4).可扩展性:URN 分配给任何可能分配的资源。随着时间的推移,其在网络中发挥的作用越来越重要了,但也不仅仅限于互联网领域,譬如:ISBN、ISSN 就可见一斑了。

URI:
URI组成 : schema://host(服务器地址):port(端口)/path/fileName(资源路径)#fargment
在这里:
https://是协议,
localhost 是服务器地址
63342是端口
/Browser%20Exploration/html/TestURI.html 是路径
?_ijt=mvt1vbkadlkl164jmg0m50oaad是查询的参数
#apple代表资源
为什么说#apple代表资源呢?
请看下图:




#apple直接定位到具体的内容,如果结尾不加#apple则效果与第三幅图一样,当加上了#apple则直接定位到具体内容。

---

URL:
URL组成 : schema://host(服务器地址):port(端口)/path/fileName(资源路径)
或
计算机中的地址。


https://是协议,
www.runoob.com是域名,可以解析出目标 IP 地址(具体怎么解析的我们放在后面的章节来详述)
/jsp/jsp-tutorial.html是地址,由于其后面没有# ...所以不能定位到具体资源的具体内容,只能锁定具体资源。

---

URN:
URN组成:urn:<NID>:<NSS>

三者的关系:

-1).URL 与 URN 是 URI 的子类,所以 URI 可以表现为 URL 也可以表现为 URN 甚至可以表现为二者的交集。
-2).URI 用来主要强调访问的资源本身而 URL 主要强调资源的路径URN 则是强调资源的名称(唯一标识)。三者都可以定位到资源。
-3).在无法弄清当前使用的到底是哪一种就请统称为 URI 因为这也是官方的判定是未来的趋势--[联合W3C / IETF URI规划兴趣小组的报告]!

超文本传输协议

②.浏览器的简史!

③.浏览器如今的状态

-2).初窥浏览器的渲染机制

二.TCP/IP/HTTP/HTTPS 技术详解

• 待更新 …

三.Web 安全

• 待更新 …

四.Web 性能优化

• 待更新 …

五.参考文献:

1.HTML标记语言 - 维基百科
2.超文本 - 维基百科
3.万维网 - 维基百科
4.网页浏览器 - 维基百科
5.统一资源标识符 - 维基百科
6.统一资源定位符 - 维基百科
7.统一资源名称 - 维基百科
8.通用唯一识别吗(UUID) - 维基百科
9.国际标准书号 - 维基百科
10.国际标准连续出版物号 - 维基百科
11.关于HTTP的一点总结（二）—— URI、URL和URN - 简书
12.你知道URL、URI和URN三者之间的区别吗？- 伯乐在线
13.URI、URL和URN - 程序园
14.URI、URL 和 URN - 程序园
15.URI与URL、URN区别 - 程序园
16.URI、URL、URN的区别 - 程序园
17.URI、URL和URN的区别 - 程序园
18.URL、URI、URN区别 - 程序园
19.URI,URL,URN区别 - 程序园
20.URL、URN、URI区别
21.URL中“#” “？” &“”号的作用 - 博客园
22.Functional Requirements for Uniform Resource Names
23.Uniform Resource Identifier (URI): Generic Syntax
24.锚点链接 - 百度百科