【JavaScript】JS基础问题总结大全，简单学习JS，看这个系列就够了！（八）

---

一、浏览器从输入URL到渲染完页面的整个过程

从输入URL到渲染出整个页面的过程包括三个部分：

1、DNS解析URL的过程

2、浏览器发送请求与服务器交互的过程

3、浏览器对接收到的html页面渲染的过程

一、DNS解析URL的过程

DNS解析的过程就是寻找哪个服务器上有请求的资源。因为ip地址不容易记忆，一般会使用URL域名（如www.baidu.com）作为网址。DNS解析就是将域名翻译成IP地址的过程。

具体过程：

1）浏览器缓存：浏览器会按照一定的频率 缓存DNS记录

2）操作系统缓存：如果浏览器缓存中找不到需要的DNS记录，就会取操作系统中找

3）路由缓存：路由器也有DNS缓存

4）ISP的DNS服务器：ISP有专门的DNS服务器应对DNS查询请求

5）根服务器：ISP的DNS服务器找不到之后，就要向根服务器发出请求，进行递归查询

二、浏览器与服务器交互过程

1）首先浏览器利用tcp协议通过三次握手与服务器建立连接

http请求包括header和body。header中包括请求的方式（get和post）、请求的协议 （http、https、ftp）、请求的地址ip、缓存cookie。body中有请求的内容。

2）浏览器根据解析到的IP地址和端口号发起http的get请求.

3）服务器接收到http请求之后，开始搜索html页面，并使用http返回响应报文

4）若状态码为200显示响应成功，浏览器接收到返回的html页面之后，开始进行页面的渲染

三、浏览器页面渲染过程

1）浏览器根据深度遍历的方式把html节点遍历成dom 树

2）将css解析成CSS DOM树

3）将dom树和CSS DOM树构造成render树

4）JS根据得到的render树 计算所有节点在屏幕中的位置，进行布局（回流）

5）遍历render树并调用硬件API绘制所有节点（重绘）

二、同源策略及跨域

同源策略：

1、概念：同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。

2、 源（origin）就是协议、域名和端口号。
若地址里面的协议、域名和端口号均相同则属于同源。

跨域：

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所示：

三、promise

Promise个人理解：

promise给我们提供了一种优雅的方式来解决异步问题，在没有promise的时候，我们用回调函数来解决，但是回调函数就有一个问题，就是回调函数中可能还有回调函数来作为参数，一层一层下去，就会产生回调地狱。而用promise的话，它可以先把第一个异步任务先执行，如果有结果的话把它的结果放入reslove中，在then中将其当作参数传给下一个要执行的函数，不接受参数也可以，纯粹是为了把这个异步放到异步队列执行，如果想继续向下，就要在then中返回一个promise对象，这样递推下去，使代码变得非常清晰。
具体可参考阮一峰大神的promise

四、async

async个人理解：

async 函数是Promise的一种语法糖，如果函数声明前加了async ，则这个函数的返回值自动是一个promise对象，而async 函数内部的await后面如果加的是一个返回值为promise对象的函数，await负责返回他的reslove值，再声明一个变量来接受他，就可以实现同步操作一样的操作异步。

具体可参考阮一峰大神的async

后续请关注作者，经常更新