一、DNS域名解析
先从本地硬盘的hosts文件中查找该域名对应的ip,如果找不到,浏览器就会向本地DNS服务器发送DNS请求,本地DNS服务器先从缓存中查找,如果还找不到,就会发请求给DNS根服务器,如果找到对应ip,会将该ip先返回给本地DNS服务器,再返回给浏览器。如果在DNS根服务器中还找不到的话,DNS根服务器会告诉本地DNS服务器向DNS域服务器发送请求,依次递归下去,直到找到为止。
注意:浏览器只跟本地DNS服务器打交道,DNS根服务器,DNS域服务器不能直接打交道,它们都是和本地DNS服务器打交道,如下图:
二、建立TCP连接
通过域名解析得到ip地址后,浏览器会向该ip对象的web服务器发送连接请求,经历tcp连接的三次握手,第一次:浏览器向服务器发送SYN请求,第二次:服务器发送确认ACK和请求SYN,第三次:浏览器发送确认ACK。三次握手后,连接成功。
三、浏览器向服务器发送http请求
请求主要包含三部分内容
请求方法(get,post)
请求内容
请求头
如下图:
四、服务器处理请求
服务器解析浏览器发来的请求,调度相应的资源,返回给浏览器。
五、关闭TCP连接
当不在有请求和响应时,浏览器和服务器都可以提出关闭连接请求,需经过四次握手,可由任意一方发起请求,这里以浏览器先发起为例:第一次:浏览器发送FIN。 第二次:服务器发送ACK。 第三次:服务器发送FIN。 第四次:浏览器发送ACK。
六、浏览器解析资源
浏览器接收HTML,CSS,JS,图片等资源
生成DOM树,结合CSS规则生成render树,render树中不包含display:none等隐藏或不必显示的元素
在解析CSS的同时,可以继续进行DOM树的解析,但在解析js脚本时,不能继续解析DOM树,会出现阻塞问题。
七、浏览器进行布局渲染
浏览器根据render树对网页进行渲染,这里涉及两个概念:回流,重绘
回流(reflow):节点的尺寸,布局发生变化,比如节点的隐藏,会导致网页布局发生变化,此时就需要重新构建render树。
重绘(repaint):节点的尺寸,布局没有变化。比如改变了元素的背景颜色,元素所占的盒子大小尺寸和布局没有变化,就是重绘。
有些情况下,比如修改了元素的样式,浏览器不会立即reflow或者repaint一次,而是将这样的操作积攒到一起,进行一次reflow或repaint,这叫做异步或增量异步reflow,repaint
有些情况下,比如页面默认的字体样式发生了变化,会立即进行一次repaint或reflow。
由此可见,reflow比repaint更为复杂,reflow一定会发生repaint,repaint不一定发生reflow