输入www.baidu.com之后
www.baidu.com.png
- 整体流程大致如下:
浏览器获取输入的域名www.baidu.com,搜索自身的DNS缓存
搜索浏览器操作系统中的DNS缓存(没有找到或者缓存失效接着向下)
读取本地的HOST文件(C:\Windows\System32\drivers\etc\hosts)
浏览器向DNS(域名系统)请求,将域名解析为外网的IP地址,并缓存起来
客户端的浏览器打开连接,与服务器进行连接(Web服务默认端口号为80),进行TCP的三次握手
TCP握手时,应用层会下发数据给传输层,这里TCP协议会指明两端的端口号等,然后下发给网络层。网络层中的IP协议会确定IP地址,并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中,最后就是物理层面的传输。
- 建立TCP连接后,会进行TLS握手,然后就开始正式的传输数据
- 请求在到达服务端之前,可能会有负载均衡设备来平均分配所有用户的请求,分配到多个操作单元上执行,将资源发送给浏览器
首先浏览器会判断状态是什么,如果是200就继续解析,如果400或500的话就会报错,如果300的话会进行重定向,这里会有个重定向计数器,避免过多次的重定向,超过次数也会报错。
- 浏览器解析服务端发送的资源,并请求响应的图片、CSS、JS资源。看是否是长连接来决定是不是断开TCP连接。
浏览器开始解析文件,如果是gzip格式的话会先解压,然后通过文件的编码格式解码。
文件解码成功后会正式开始渲染流程,先根据HTML构建DOM树,有CSS的话会构建CSSOM树。如果遇到script标签的话,会判断是否存在async或者defer(前者会并行下载并执行JS;后者会先下载文件,然后等待HTML解析完成后顺序执行)
如果以上都没有,就会阻塞渲染流程直到JS执行完毕。遇到文件下载的会去下载文件,这里如果使用
HTTP/2
协议的话会极大地提高多图的下载效率。
- 解析渲染,将Web页面展示给用户。
CSSOM树和DOM树构建完成后会开始生成Render树,这一步就是确定页面元素的布局、样式等
在生成Render树的过程中,浏览器就开始调用GPU绘制,合并图层,将内容显示在屏幕上。