从浏览器输入 url 到页面渲染

浏览器中输入 url 到 页面渲染:

　　1. 解析url，拿到域名

　　2. DNS 解析，域名解析。DNS 就是 域名和IP对应的数据库，域名和IP之间是一一对应的关系，域名解析有专门的域名解析服务器。整个过程是自动完成的。

　　　　DNS 解析会经过以下几个步骤：

　　　　　　1）查询浏览器缓存 

　　　　　　2) 如果在浏览器中没有找到缓存，会查询系统缓存，这一步当中，是查询 host 文件，这个文件是保存了以前访问网址的域名和IP 数据，就相当于本地的IP 数据库，如果找到了，就直接获取目标主机的IP 地址；如果没有找到，就会进入第三步 

　　　　　　3) 查询路由缓存。路由器有自己的 DNS 缓存，可能有相关的内容，如果还是没有，就进入下一步

　　　　　　4) 递归查询， 从根域名服务器到顶级域名服务器，再到极限域名服务器依次搜索对应目标域名的IP

　　　　通过以上查找，就能找到对应域名的 IP 

　　3. TCP 三次握手

　　     第一次握手：客户端向服务器发送请求，等待服务器的确认

　　　 第二次握手：服务器收到请求并确认，回复一个指令

　　　 第三次握手：客户端收到服务器的指令之后，并返回一个指令。

　　4. 请求和传输数据

　　　　比如通过 get 请求访问一个网址，通过抓包可以看到，请求网址，请求方法，远程地址以及状态码，http 版本等，也包括请求头，响应头等内容。

　　　　响应头中有个 setCookie 的信息，这就说明浏览器当中没有关于这个网址的 cookie 信息，当我们下一次访问同样的网站的时候，就可以看到在请求头中包含了这个 cookie信息。

　　　　cookie 可以用来保存一些有用的信息，cookie 如果是首次访问，会提示服务器建立用户缓存信息，如果不是，可以利用 cookie 对应键值找到相应缓存。缓存中放着用户名，密码和一些用户设置等，通过这种 get 请求和响应，可以将目标服务器上的目标文件传输到浏览器进行渲染。

　　5. 浏览器渲染页面

　　　　客户端拿到服务器传输过来的文件后，找到 html 和 ml，me 文件，通过 ml 和 me 文件，浏览器就知道要用页面渲染引擎来处理 html 文件，

　　　　1) 浏览器解析html 源码，创建一个 dom 树。

　　　　　　　在 dom 树中，每一个 html 标签都是一个节点，每一个文本，也会有一个对应的文本节点。

　　　　2) 浏览器解析 css 代码，计算出最终的样式数据，形成 css 结构树。  (其中 dom 树 和 css 结构树是并行构建)

　　　　　　首先会忽略非法的 css 代码，之后按照浏览器默认设置，用户设置，外联样式，内联样式，html 中的style 样式顺序进行渲染

　　　　3) 利用 dom 树 和  css 结构树  构建  一个渲染树

　　　　　　渲染树和 dom 有点像，但是也有区别，dom 树完全和 html 标签一一对应，而渲染树会忽略掉不需要渲染的元素，比如，hide，display:none 的元素，而且一大段的文本在渲染树中都是一个独立的节点。渲染树中的每一个节点都存储有对应的css 属性

　　　　4)浏览器根据渲染树直接把页面绘制到屏幕上。