从输入 URL 到页面加载完的过程中都发生了什么事情

整理了关于输入url后的发生事件,未完待续,现在主要整理了dns还有解析html部分

##一、当在浏览器中输入一个网址的时候,首先会对输入的url进行判断,看他是否是一个标准的ip地址或者是域名;##
把URL分割成几个部分:协议、网络地址、资源路径。其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP地址,可以包括端口号;协议是从该计算机获取资源的方式,常见的是HTTP、FTP,不同协议有不同的通讯内容格式;资源路径指示从服务器上获取哪一项资源。
例如:http://www.guokr.com/question/554991/
协议部分:http
网络地址:www.guokr.com
资源路径:/question/554991/

(1)如果输入的是域名,那么就要发生dns的查询
首先会查询浏览器中的缓存,然后再查看系统的缓存,接着还会查看路由器的缓存,关于dns的查找,请看博文DNS原理及其解析过程精彩剖析
大致先查找本地host文件,再查找本地DNS解析器缓存,再查找首选DNS服务器

(迭代查询方式:查考自王道的网络书籍)
a.客户机向本地域名服务器发出DNS请求报文,
b.本地域名服务器受到请求后,查询本地缓存,若没该记录,以nds客户的身份向根域名服务器发出解析请求
c.根域名服务器受到请求后,判断是否属于.com域,将对应的顶级域名服务器的地址返回给本地域名服务器
d.本地域名服务器向顶级域名服务器dns.com发起解析请求报文
e.顶级域名服务器收到请求后,判断是否属于abc.com域,固将对应的授权域名服务器的地址返回给本地域名服务器
f.本地域名服务器向授权域名服务器发起解析请求报文
g.授权域名服务器受到请求后,将查询结果返回给本地域名服务
h.本地域名服务器将查询的结果保存到本地的缓存中,同时返回给客户机

##二、浏览器向web服务器发起一个http的请求##
在这里有建立tcp链接的过程

##三、服务器的永久重定向响应##
(从 http://example.comhttp://www.example.com)

##四、浏览器跟踪重定向地址 浏览器向这个重定向的地址发起请求##

##五、服务器处理请求##

##六、服务器返回一个 HTTP 响应##

##七、浏览器显示 HTML##

###1 解析HTML以构建dom树###
解析html,将标签转化为内容树中的dom结点

###2 构建render树###
render树是由一些含有颜色和大小等属性的矩阵组成

(1) DOM树创建完成后DOMContentLoaded事件即触发,这时候可以用过script来操作DOM节点。在这里会涉及到css属性的重叠计算,就是计算出优先级的顺序;
(2)css样式应用到DOM节点上,呈现树的每一个节点即为与其相对应的DOM节点的CSS框,框的类型与DOM节点的display属性有关,block元素生成block框,inline元素生成inline框。每一个呈现树节点都有与之相对应的DOM节点,但DOM节点不一定有与之相对应的呈现树节点,比如display属性为none的DOM节点,而且呈现树节点在呈现树中的位置与他们在DOM树中的位置不一定相同,比如float与绝对定位元素。

###3 布局render树###
看了一个博文中的介绍提到了在这一步中,貌似布局这点第二步确实是把css附着到了节点上去,不过有些布局是需要通过浏览器的窗口来进行计算的,比如那种设定好width && margin: 0 auto居中的元素,这一步做的应该都是把这些布局处理好,这一步是计算了具体的位置

注:当窗口在onresize的时候,会触发重绘

###4 绘制render树###
绘制应该就是把这些节点最后绘制在浏览中,包括了
(1) 背景颜色
(2) 背景图片
(3) 边框
(4) 子呈现树节点
(5) 轮廓

##8.浏览器发送请求获取嵌入在HTML中的资源(如图片、音频、视频、CSS、JS等等)##

##9.浏览器发送异步请求##