简单概括:
加载过程:
* 浏览器根据DNS服务器解析得到域名的IP地址
* 向这个IP发送HTTP请求
* 服务器收到、处理、返回HTTP请求
* 浏览器得到返回的内容
渲染过程:
* 根据HTML结构生成DOM树
* 根据CSS生成CSSOM
* 将DOM和CSSOM结合形成RenderTree
* 根据RenderTree开始渲染和展示
* 遇到script时,会执行并阻塞渲染
详细分析:
一、浏览器通过DNS解析得到url的ip地址
1、输入一个url地址
2、浏览器查找域名的ip地址(浏览器缓存–>系统缓存–>路由器缓存–>ISP DNS–>跟域名服务器递归搜索 直至拿到ip)
3、浏览器向服务器发送HTTP请求
二、浏览器拿到服务器ip地址后,与服务器建立TCP连接
通过三次握手建立连接:
1、客户端向服务器发送连接请求的报文;
2、服务器收到请求后,同意建立连接,向客户端发送确认报文;
3、客户端收到服务器确认报文后,再次向服务器发出报文,确认已收到确认报文。
三、建立TCP连接后,浏览器向服务器发送http请求
浏览器发出取文件指令GET
四、服务器响应http请求,将请求的指定资源发送给浏览器
五、浏览器释放TCP连接
通过四次挥手:
1、浏览器向服务器发送释放连接报文;
2、服务器收到释放报文后,发出确认报文,然后将服务器上为传完的数据发送完;
3、服务器数据传输完成后,向浏览器发送释放连接请求;
4、浏览器收到报文后,发出确认,然后等待一段时间后,释放TCP连接;
六、浏览器将完整的html代码进行解析渲染,如果遇到外部应用的css,图片等资源 同样发送一个http请求。
渲染过程:
* 根据HTML结构生成DOM树
* 根据CSS生成CSSOM
* 将DOM和CSSOM结合形成RenderTree
* 根据RenderTree开始渲染和展示
* 遇到script时,会执行并阻塞渲染
七、至至渲染至完整页面出来。