31、 浏览器输入url会，发生了什么？

履行次序

  • URL解析
  • DNS 解析：缓存判别 + 查询IP地址
  • TCP 衔接：TCP 三次握手（树立衔接）
  • SSL/TLS四次握手（只要https才有这一步）
  • 浏览器发送恳求
  • 服务器响应恳求并回来数据
  • 浏览器解析烘托页面
  • 断开衔接：TCP 四次挥手

1、URL解析

浏览器先会判别输入的字符是不是一个合法的URL结构，如果不是，浏览器会运用查找引擎对这个字符串进行查找

2、DNS解析

DNS解析实际上就是寻找你所需求的资源的过程。例如：输入www.google.com网址后，首先在本地的域名服务器中查找，没找到去根域名服务器查找，没有再去com尖端域名服务器查找，如此的类推下去，直到找到IP地址，然后把它记录在本地，供下次运用。
大致过程就是. -> .com -> google.com. -> www.google.com.。 (你或许觉得我多写 .，并木有，这个.对应的就是根域名服务器，默许情况下一切的网址的最终一位都是.，既然是默许情况下，为了方便用户，一般都会省略，浏览器在恳求DNS的时候会自动加上)

3、TCP 衔接

TCP提供一种可靠的传输，这个过程涉及到三次握手，四次挥手。

第一次握手：

客户端发送syn包(Seq=x)到服务器，并进入SYN_SEND状况，等待服务器承认；

第二次握手：

服务器收到syn包，必须承认客户的SYN（ack=x+1），同时自己也发送一个SYN包（Seq=y），即SYN+ACK包，此刻服务器进入SYN_RECV状况；

第三次握手：

客户端收到服务器的SYN＋ACK包，向服务器发送承认包ACK(ack=y+1)，此包发送结束，客户端和服务器进入ESTABLISHED状况，完成三次握手。

握手过程中传送的包里不包括数据，三次握手结束后，客户端与服务器才正式开始传送数据。抱负状况下，TCP衔接一旦树立，在通信双方中的任何一方主动关闭衔接之前，TCP 衔接都将被一向坚持下去。

4、浏览器发送恳求

发送HTTP恳求的过程就是构建HTTP恳求报文并经过TCP协议中发送到服务器指定端口 恳求报文由恳求行，恳求捧首，恳求正文组成。

5、服务器响应恳求并回来数据

对TCP衔接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request目标，回来数据。

6、浏览器解析烘托页面

浏览器反复进行回流和重绘，将数据烘托到页面。

7、断开衔接

数据传输结束后，双方都可释放衔接。

32、 Promise.all、Promise.race、Promise.any的差异

all： 成功的时候回来的是一个成果数组，而失利的时候则回来最早被reject失利状况的值。

race： 哪个成果取得的快，就回来那个成果，不管成果自身是成功状况还是失利状况。

any： 回来最快的成功成果，如果全部失利就回来失利成果。

async/await语法

await 等待的是一个表达式，而不仅仅用于等 Promise 目标，它能够等恣意表达式的成果，所以await 后面实际是能够接一般函数调用或许直接量的。

await 表达式的运算成果取决于它等的是什么。

  • 如果它比及的不是一个 Promise 目标，那 await 表达式的运算成果就是它比及的东西。
  • 如果它比及的是一个 Promise 目标，await 就忙起来了，它会阻塞后面的代码，等着 Promise 目标 resolve，然后得到 resolve 的值，作为 await 表达式的运算成果。

await 表达式 必须在异步函数中运转，即用async，将函数变成异步的。

注意：如果await指令后面的Promise目标，最好把await指令放在try...catch代码块中，因为 Promise的过错不会暴露在外面，所以用try...catch捕获反常。

33、 了解ES6的Set，WeakSet，Map和WeakMap吗？

Set

Set自身是一个结构函数，用来生成Set数据结构。Set函数能够承受一个数组（或许具有 iterable 接口的其他数据结构）作为参数，用来初始化。Set目标允许存储任何类型的值，无论是原始值或许是目标引证。它相似于数组，可是成员的值都是仅有的，没有重复的值。

Set 目标存储的值总是仅有的，所以需求判别两个值是否恒等。有几个特别值需求特别对待：

  • +0 与 -0 在存储判别仅有性的时候是恒等的，所以不重复
  • undefined 与 undefined 是恒等的，所以不重复
  • NaN 与 NaN 是不恒等的，可是在 Set 中认为 NaN 与 NaN 相等，一切只能存在一个，不重复。

weakSet

WeakSet结构与Set相似，也是不重复的值的集合。

  • 成员都是数组和相似数组的目标，若调用 add() 办法时传入了非数组和相似数组的目标的参数，就会抛出过错。
仿制代码
const b = [1, 2, [1, 2]]
new WeakSet(b) // Uncaught TypeError: Invalid value used in weak set
  • 成员都是弱引证，能够被垃圾收回机制收回，能够用来保存 DOM 节点，不容易造成内存泄漏。
  • WeakSet 不行迭代，因而不能被用在 for-of 等循环中。
  • WeakSet 没有 size 属性。

Map

ap中存储的是key-value方法的键值对, 其中的key和value能够是任何类型的, 即目标也能够作为key。Map的呈现，就是让各种类型的值都能够当作键。

WeakMap

WeakMap结构与Map结构相似，也是用于生成键值对的集合。

  • 只承受目标作为键名（null除外），不承受其他类型的值作为键名
  • 键名是弱引证，键值能够是恣意的，键名所指向的目标能够被垃圾收回，此刻键名是无效的
  • 不能遍历，办法有get、set、has、delete

34、 观察者形式与发布订阅形式的差异

观察者形式

观察者形式定义了目标间的一种一对多的依赖联系，当一个目标的状况发生改动时，一切依赖于它的目标都将得到通知，并自动更新

观察者形式归于行为型形式，行为型形式重视的是目标之间的通讯，观察者形式就是观察者和被观察者之间的通讯

例如在中，你重视了一位博主，这位博主每次更新文章，你都会接纳到提醒音讯。有多人重视了博主，每个人都会收到音讯，博主和重视者就形成了一对多的依赖联系。

发布订阅形式

发布-订阅是一种音讯范式，音讯的发送者（称为发布者）不会将音讯直接发送给特定的接纳者（称为订阅者）。而是将发布的音讯分为不同的类别，无需了解哪些订阅者（如果有的话）或许存在。订阅者能够表达对一个或多个类别的爱好，只接纳感爱好的音讯，无需了解哪些发布者存在。

例如在中，一位博主发布了文章，而博主不会知道有哪些读者会看到文章；读者想了解某类型常识，在查找相关文章，而不会知道有那些博主发布了这类型的文章。

35、 如何判别当时的Js代码是否在浏览器环境中运转

如果Javascript在浏览器环境中运转，则会有一个大局目标：window。因而，能够经过以下方法判别环境：

 typeof window.self ！== "undefined";
 // 在web worker或许sevice worker下是无法获取到windows大局变量， 所以需求经过self变量判别