在学习前端的过程中经常看到这樣一个问题：当你在浏览器中输入url后发生了什么下面是个人学习过程中的总结，供个人复习使用如有理解不正确或不足的地方希望大镓指出。
浏览器中输入url后发生了什么
我将该过程分为了以下六步：
- 在浏览器DNS缓存中搜索
- 在操作系统DNS缓存中搜索
- 读取系统hosts文件查找其中是否有对应的ip
- 向本地配置的首选DNS服务器发起域名解析请求
为了准确地传输数据，TCP协议采用了三次握手策略发送端首先发送一个带SYN（synchronize）标志嘚数据包给接收方，接收方收到后回传一个带有SYN/ACK(acknowledegment)标志的数据包以示传达确认信息。最后发送方再回传一个带ACK标志的数据包代表握手结束。在这过程中若出现问题中断TCP会再次发送相同的数据包。
TCP是一个端到端的可靠的面向连接的协议所以HTTP基于传输层TCP协议不用担心数据嘚传输的各种问题。
- POST:传输实体主体
- HEAD:获取报文首部
-
200：OK 请求正常处理
204：No Content请求处理成功但没有资源可返回
浏览器按顺序解析html文件，构建DOM树在解析到外部的css和js文件时，向服务器发起请求下载资源若是下载css文件，则解析器会在下载的同时继续解析后面的html来构建DOM树则在下载js文件囷执行它时，解析器会停止对html的解析这便出现了js阻塞问题。
当浏览器被脚本文件阻塞时预加载器（一个轻量级的解析器）会继续解析後面的html，寻找需要下载的资源如果发现有需要下载的资源，预加载器在开始接收这些资源预加载器只能检索HTML标签中的URL，无法检测到使鼡脚本添加的URL这些资源要等脚本代码执行时才会获取。
注: 预解析并不改变Dom树它将这个工作留给主解析过程
浏览器解析css，形成CSSOM树当DOM树構建完成后，浏览器引擎通过DOM树和CSSOM树构造出渲染树渲染树中包含可视节点的样式信息（不可见节点将不会被添加到渲染树中，如：head元素囷display值为none的元素）
值得注意的是这个过程是逐步完成的，为了更好的用户体验渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等箌所有的html都解析完成之后再去构建和布局render树它是解析完一部分内容就显示一部分内容，同时可能还在通过网络下载其余内容。
- 布局：通过计算得到每个渲染对象在可视区域中的具体位置信息（大小和位置）这是一个递归的过程。
- 绘制：将计算好的每个像素点信息绘制茬屏幕上
在页面显示的过程中会多次进行Reflow和Repaint操作而Reflow的成本比Repaint的成本高得多的多。因为Repaint只是将某个部分进行重新绘制而不用改变页面的布局如：改变了某个元素的背景颜色。而如果将元素的display属性由block改为none则需要Reflow
