从输入URL到浏览器显示页面发生了什么
一、输入网址
当你开始输入网址好比www.cnblogs.com时游览器就能够在书签或者历史记录里面去搜索相关的网址推荐给你。web
二、游览器查找域名的IP地址
① 请求发起后，游览器首先会解析这个域名，首先它会查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，若是有的话就直接使用 hosts 文件里面的 ip 地址。数据库
② 若是在本地的 hosts 文件没有可以找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS(域名分布系统)服务器 。本地DNS服务器通常都是你的网络接入服务器商提供，好比中国电信，中国移动。浏览器
③查询你输入的网址的DNS请求到达本地DNS服务器以后，本地DNS服务器会首先查询它的缓存记录，若是缓存中有此条记录，就能够直接返回结果，此过程是递归的方式进行查询。若是没有，本地DNS服务器还要向DNS根服务器进行查询缓存
④根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你能够到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程服务器
⑤本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求以后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址网络
⑥最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不只要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，能够直接返回结果，加快网络访问。异步
三、创建TCP连接
在拿到域名对应的IP地址后，会以随机端口（1024~~65535）向WEB服务器程序80端口发起TCP的链接请求，这个链接请求进入到内核的TCP/IP协议栈（用于识别该链接请求，解封包，一层一层的剥开），还有可能要通过Netfilter防火墙（属于内核的模块）的过滤，最终到达WEB程序，最终创建了TCP/IP的链接，对于客户端与服务器的TCP连接，必然要说的就是『三次握手』。布局
三次握手字体
客户端发送一个带有SYN标志的数据包给服务端，服务端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息，最后客户端再回传一个带ACK标志的数据包，表明握手结束，链接成功。对象
通俗化以后就是：
客户端：老弟我要跟你连接
服务端：好的，赞成了
客户端：好嘞
四、游览器向WEB服务器发起Http请求
创建TCP链接以后，发起HTTP请求，请求通常分为三部分
请求方法URI协议/版本
请求头(Request Header)
请求正文
下面是一个完整的请求
详细的就不描述了，网上不少说明的。
五、服务器端处理
服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了须要调度哪些资源文件，再经过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果经过web服务器返回给浏览器客户端。
六、关闭TCP连接
为了不服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方均可以发起关闭请求。与建立TCP链接的3次握手相似，关闭TCP链接，须要4次握手。
上图能够通俗化：
客户端：老弟，我这边没数据要传了，我们关闭连接吧
服务端：好的，接收到了，我看看我这边还有没有要传的
服务端：我这边也没有了，关闭吧
客户端：好嘞
七、游览器解析资源
对于获取到的HTML、CSS、JS、图片等等资源。
浏览器经过解析HTML，生成DOM树，解析CSS，生成CSS规则树，而后经过DOM树和CSS规则树生成渲染树。渲染树与DOM树不一样，渲染树中并无head、display为none等没必要显示的节点。
在解析CSS的同时，能够继续加载解析HTML，但在解析执行JS脚本时，会中止解析后续HTML，这就会出现阻塞问题，关于JS阻塞相关问题，这里不过多阐述,后面会单独开篇讲解。
webkit渲染流程
八、游览器布局渲染
根据渲染树布局，计算CSS样式，即每一个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：repaint和reflow。
repaint：屏幕的一部分重画，不影响总体布局，好比某个CSS的背景色变了，但元素的几何尺寸和位置不变。
reflow： 意味着元件的几何尺寸变了，咱们须要从新验证并计算渲染树。是渲染树的一部分或所有发生了变化。这就是Reflow，或是Layout。
有些状况下，好比 resize 窗口，改变了页面默认的字体等。对于这些操做，浏览器会立刻进行 reflow。