https传输流程和js知识

最新推荐文章于 2024-03-16 14:43:12 发布

昨日正晴

最新推荐文章于 2024-03-16 14:43:12 发布

阅读量494

点赞数

文章标签： https javascript 网络协议

本文链接：https://blog.csdn.net/xk2844600795/article/details/132011579

版权

https的传输过程

HTTPS（Hypertext Transfer Protocol Secure）是一个用于在计算机之间传输超文本数据的安全协议。它在 HTTP 的基础上添加了安全性措施，通过使用 SSL（Secure Socket Layer）或 TLS（Transport Layer Security）协议来对数据进行加密和保护。

https工作流程

在这里插入图片描述

CA证书工作流程

在这里插入图片描述

TLS/SSL 握手过程：

一旦服务器证书验证通过，客户端和服务器开始进行 TLS/SSL 握手过程。
a. 客户端发送 “ClientHello”：
客户端发送一个 “ClientHello” 消息，其中包含支持的加密套件列表、随机数和其他参数。
b. 服务器发送 “ServerHello”：
服务器选择一个与客户端相匹配的加密套件，并返回 “ServerHello” 消息，包含服务器的数字证书、服务器的随机数以及用于加密通信的密钥信息。
c. 客户端验证服务器证书：
客户端使用服务器的公钥（来自证书）来验证服务器的身份，并确保证书的有效性。如果验证失败，客户端会发出警告，连接可能会终止。
d. 客户端生成对称密钥：
客户端生成一个随机的对称密钥，用于在后续的数据传输中进行加密和解密。
e. 客户端使用服务器公钥加密对称密钥：
客户端使用服务器的公钥（来自证书）加密生成的对称密钥，并发送给服务器。
f. 服务器使用私钥解密对称密钥：
服务器使用其私钥（仅服务器知道）来解密客户端发送的对称密钥。
g. 加密通信：
现在，客户端和服务器都有了共享的对称密钥，它们将使用该密钥来加密和解密数据。加密的 TLS/SSL 连接已建立。

浏览器的解析流

解析流程为HTML----->RULCODE----->JS

HTML解析

一个HTML解析器作为一个状态机，它从输入流中获取字符并按照转换规则转换到另一种状态。在解析过程中，任何时候它只要遇到一个’<‘符号（后面没有跟’/'符号）就会进入“标签开始状态(Tag open state)”。

<div>&lt<p>我是帅哥</p>&lt</div>

这一条就不会解析，因为解析了<之后他又继续解析，它会将 &lt 视为字符实体编码，而不是标签的一部分。由于缺少正确的标签闭合，HTML 解析器会尝试修复错误，但最终无法正确解析该代码。
在HTML中有五类元素：

空元素(Void elements)，如,
,等等
原始文本元素(Raw text elements)，有

五类元素的区别如下：

空元素，不能容纳任何内容（因为它们没有闭合标签，没有内容能够放在开始标签和闭合标签中间）。
原始文本元素，可以容纳文本。
RCDATA元素，可以容纳文本和字符引用。
外部元素，可以容纳文本、字符引用、CDATA段、其他元素和注释
基本元素，可以容纳文本、字符引用、其他元素和注释

URL解析

URL解析器也是一个状态机模型，从输入流中进来的字符可以引导URL解析器转换到不同的状态。
URL资源类型必须是ASCII字母（U+0041-U+005A || U+0061-U+007A），不然就会进入“无类型”状态。例如，你不能对协议类型进行任何的编码操作，不然URL解析器会认为它无类型。

JavaScript 解析

JavaScript 解析是浏览器将 JavaScript 代码转换为可执行指令，并执行这些指令以实现网页交互和动态功能的过程。它使得网页变得更加生动和富有交互性。

正则表达式：

^ 表示字符串的开始位置

$ 表示字符串的结束位置

竖线符号（|）在正则表达式中表示“或关系”（OR）

正则表达式中，需要反斜杠转义的，一共有12个字符：^、.、[、$、(、)、|、*、+、?、{和\

\d 匹配0-9之间的任一数字，相当于[0-9]。

\D 匹配所有0-9以外的字符，相当于[^0-9]。

\w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]。

\W 除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]。

\s 匹配空格（包括换行符、制表符、空格符等），相等于[ \t\r\n\v\f]。

\S 匹配非空格的字符，相当于[^ \t\r\n\v\f]。

\b 匹配词的边界。

\B 匹配非词边界，即在词的内部

? 问号表示某个模式出现0次或1次，等同于{0, 1}。

星号表示某个模式出现0次或多次，等同于{0,}。

加号表示某个模式出现1次或多次，等同于{1,}。

点字符（.）匹配除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）

对象是什么

（1）对象是单个实物的抽象。
一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个远程服务器连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。
（2）对象是一个容器，封装了属性（property）和方法（method）。
属性是对象的状态，方法是对象的行为（完成某种任务）。比如，我们可以把动物抽象为animal对象，使用“属性”记录具体是哪一种动物，使用“方法”表示动物的某种行为（奔跑、捕猎、休息等等）。

JS-new 命令

new命令的作用，就是执行构造函数，返回一个实例对象。

var Vehicle = function () {
  this.price = 1000;
};

var v = new Vehicle();
v.price // 1000

其中也可以加参数

var v = new Vehicle(500);//在其中加参数也是可以接受的。

JS-new 命令的原理

使用new命令时，它后面的函数依次执行下面的步骤。

创建一个空对象，作为将要返回的对象实例。
将这个空对象的原型，指向构造函数的prototype属性。
将这个空对象赋值给函数内部的this关键字。
开始执行构造函数内部的代码。

也就是说，构造函数内部，this指的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的目的，就是操作一个空对象（即this对象），将其“构造”为需要的样子。
如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。

var Vehicle = function () {
  this.price = 1000;
  return 1000;
};

(new Vehicle()) === 1000
// false

构造函数Vehicle的return语句返回一个数值。这时，new命令就会忽略这个return语句，返回“构造”后的this对象。

JS-this关键字

this关键字是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。this可以用在构造函数之中，表示实例对象。除此之外，this还可以用在别的场合。但不管是什么场合，this都有一个共同点：它总是返回一个对象。
简单说，this就是属性或方法“当前”所在的对象。

this的基本使用场景

全局上下文

console.log(this);//输出：Window

在上面代码中，this是全局上下文中的，将在全局范围内调用，this指向全局对象，在浏览器中返回window。
构造函数
构造函数中的this，指的是实例对象。

var Obj = function (p) {
  this.p = p;
};

对象的方法
如果直接调用函数（不作为对象的方法），在非严格模式下，this指向全局对象。在严格模式下，this将是undefined。

function sayHello() {
  console.log(this);
}
sayHello(); // 在非严格模式下，this指向全局对象（浏览器中为window）

使用注意

避免多层嵌套
由于this的指向是不确定的，所以切勿在函数中包含多层的this。

var o = {
  f1: function () {
    console.log(this);
    var f2 = function () {
      console.log(this);
    }();
  }
}
o.f1()
// Object
// Window

上述代码中出现了两层this，第一层this指向对象O，输出object，而第二层this指向对象却是全局对象，也就是说会输出window。为了避免这种情况的出现，可以将第二层的this通过改写成一个对外的this

var o = {
  f1: function() {
    console.log(this);
    var that = this;
    var f2 = function() {
      console.log(that);
    }();
  }
}
o.f1()
// Object
// Object

如上述代码就是定义了一个变量that，用来固定对外的this，然后在内部使用that替换this，就能够解决多层this的问题。
避免数组处理方法中的 this
数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    });
  }
}
o.f()
// undefined a1
// undefined a2

上面代码中，foreach方法的回调函数中的this，其实是指向window对象，因此取不到o.v的值。原因跟上一段的多层this是一样的，就是内层的this不指向外部，而指向顶层对象。
解决这个问题的一种方法，就是前面提到的，使用中间变量固定this。
另一种方法是将this当作foreach方法的第二个参数，固定它的运行环境。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    }, this);
  }
}
o.f()
// hello a1
// hello a2

避免回调函数中的 this
回调函数中的this往往会改变指向，最好避免使用。

var o = new Object();
o.f = function () {
  console.log(this === o);
}
// jQuery 的写法
$('#button').on('click', o.f);

上面代码中，点击按钮以后，控制台会显示false。原因是此时this不再指向o对象，而是指向按钮的 DOM 对象，因为f方法是在按钮对象的环境中被调用的。这种细微的差别，很容易在编程中忽视，导致难以察觉的错误。
为了解决这个问题，可以采用下面的一些方法对this进行绑定，也就是使得this固定指向某个对象，减少不确定性。

对象的继承

JS-prototype 属性的作用

JavaScript 规定，每个函数都有一个prototype属性，指向一个对象。

function f() {}
typeof f.prototype // "object"

上面代码中，函数f默认具有prototype属性，指向一个对象。
对于普通函数来说，该属性基本无用。但是，对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';

var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');

cat1.color // 'white'
cat2.color // 'white'

上面代码中，构造函数Animal的prototype属性，就是实例对象cat1和cat2的原型对象。原型对象上添加一个color属性，结果，实例对象都共享了该属性。
原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。

原型链

每个 JavaScript 对象都有一个指向其原型（prototype）对象的链接，这个链接就是原型链。
在 JavaScript 中，对象是通过构造函数（Constructor）创建的。每个构造函数都有一个原型对象（prototype object）。原型对象是一个普通的对象，它包含了一些共享的属性和方法。当使用构造函数创建一个新对象时，这个新对象会继承构造函数的原型对象上的属性和方法。

constructor 属性

prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。

function P() {}
P.prototype.constructor === P // true

由于constructor属性定义在prototype对象上面，意味着可以被所有实例对象继承。

function P() {}
var p = new P();
p.constructor === P // true
p.constructor === P.prototype.constructor // true
p.hasOwnProperty('constructor') // false

上面代码中，p是构造函数P的实例对象，但是p自身没有constructor属性，该属性其实是读取原型链上面的P.prototype.constructor属性。

instanceof 运算符

instanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例。

var v = new Vehicle();
v instanceof Vehicle // true

上面代码中，对象v是构造函数Vehicle的实例，所以返回true。

instanceof运算符的左边是实例对象，右边是构造函数。它会检查右边构造函数的原型对象（prototype），是否在左边对象的原型链上。因此，下面两种写法是等价的。

v instanceof Vehicle
// 等同于
Vehicle.prototype.isPrototypeOf(v)

Vehicle是对象v的构造函数，它的原型对象是Vehicle.prototype，isPrototypeOf()方法是 JavaScript 提供的原生方法，用于检查某个对象是否为另一个对象的原型。

instanceof的原理是检查右边构造函数的prototype属性，是否在左边对象的原型链上。有一种特殊情况，就是左边对象的原型链上，只有null对象。这时，instanceof判断会失真。

var obj = Object.create(null);
typeof obj // "object"
obj instanceof Object // false

上面代码中，Object.create(null)返回一个新对象obj，它的原型是null（Object.create()的详细介绍见后文）。右边的构造函数Object的prototype属性，不在左边的原型链上，因此instanceof就认为obj不是Object的实例。这是唯一的instanceof运算符判断会失真的情况（一个对象的原型是null），对于undefined和null，instanceof运算符总是返回`false。

JS-宏任务和微任务

在 JavaScript 中，宏任务（Macro Task）和微任务（Micro Task）是用于管理异步操作的机制，它们可以帮助我们处理非阻塞（非同步）的代码。
宏任务（Macro Task）：
宏任务代表的是一组异步任务的执行，通常包括从浏览器或 Node.js 提供的异步 API 调用（如 setTimeout、setInterval、XMLHttpRequest 等）、事件监听器回调、用户交互事件（如点击、输入等）等。每个宏任务之间都会有一个明确的顺序，它们会在主线程空闲时执行。宏任务的执行可能是异步的，当主线程空闲时，下一个宏任务才会被调度执行。

微任务（Micro Task）：
微任务是一组在当前任务执行结束后立即执行的异步任务。它的优先级高于宏任务，即使在主线程忙于执行宏任务时，也会优先执行微任务队列中的任务。典型的微任务包括 Promise 的 then 和 catch 回调、MutationObserver 的回调等。
下面是宏任务和微任务执行顺序的一个简单示例：

console.log('Start');

setTimeout(() => {
  console.log('setTimeout (Macro Task)');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise (Micro Task)');
});

console.log('End');

以下是输出顺序

Start
End
Promise (Micro Task)
setTimeout (Macro Task)

首先，同步代码中的 “Start” 和 “End” 会立即输出。接着，微任务队列中的 Promise.resolve().then() 会被执行，输出 “Promise (Micro Task)”。最后，宏任务队列中的 setTimeout 会被执行，输出 “setTimeout (Macro Task)”。
请注意，在一个宏任务执行完毕后，会检查微任务队列中是否有待执行的微任务，如果有则依次执行，直到微任务队列为空，然后再执行下一个宏任务。这个过程一直循环，直到所有任务都被执行完毕。因此，微任务的执行优先级较高，它们会在下一个宏任务之前执行