1、DNS将域名解析ip地址
输入网址以后,浏览器会先去缓存中查找这个域名有没有对应的ip地址的关系,如果有的话,直接向ip地址发送请求,进行下一步。如果没有,再去找DNS服务器解析域名
2、建立TCP连接
拿到相应的ip地址以后,向该服务器发送请求。TCP三次握手就是一个问询的过程。客户端问询是否可以发送-服务器确认可以发送-客户端知道了可以发送。
例:
客户端:我可以做你男朋友吗?
服务器:可以哦
客户端:好的(在一起了牵手手了巴拉巴拉...)
3、发送HTTP请求
建立连接后,可以发送请求了。-http请求一般包含四个部分-请求头、空行、请求内容、请求行。
请求方法:post/delete/put/patch/get/head/trace/option
4、服务器处理请求
web服务器收到请求后知道了需要调度哪些资源来解析http请求的参数和信息,然后将请求的结果返回给客户端。
5、返回相应的结果
就是http的响应信息。http响应信息的结构分为状态码,响应内容。
状态码一般分为以下几种类型:
2-成功 200
3-重定向 304
4-客户端问题 404
5-服务器端问题 500
6、关闭TCP连接
四次挥手,问询关闭的过程。
例:
客户端:我想分手。
服务器端:我思考下我分不分...分吧
客户端:那我们分手吧。
服务器端:好的,滚犊子吧。
7、浏览器解析html+css+js+以及一些媒体资源
解析生成html的dom树,解析css生成cssom规则树,然后合成-生成渲染树
8、布局
遍历渲染树生成布局,计算每个节点的大小和位置信息。绘制,显示。
7和8浏览器解析过程:
解析html-生成dom树
解析css-生成规则树
合成-生成渲染树
遍历渲染树开始布局-计算每个节点的大小和位置
绘制-显示
需要注意的是:
html渲染规则-先解析css,后js,js和css的解析都会阻碍dom的解析,
渲染树的生成是左右形势渲染的,先生成dom,然后根据dom查找相应的css进行渲染。
这里还需要提到两个词:重绘和重排。
重绘:部分改变,整体布局不变。repaint
重排:渲染树变了,需要重新计算渲染树。reflow
重绘不一定重排,重排一定重绘