1.URL解析
①地址解析和编码
②HSTS(HTTP严格传输安全协议)
③缓存检查
2.DNS解析
①首先读取浏览器的DNS缓存
②如果没有查询到浏览器缓存,就读取本地hosts文件
③如果还没查询到就读取本地解析器缓存
④如果还没查询到,就读取本地DSN服务器缓存
⑤如果以上都没查询到就用递归搜索域名下的DNS
如网址为:blog.baidu.com
先在.com域名下查找DNS解析
然后再.baidu域名下查找DNS解析
最后在blog下查找DNS解析
假如以上都没查到就会报错,找不到该网址。
3.TCP三次握手
第一次握手:浏览器发起,告诉服务器自己要发送请求
第二次握手:有服务器发起,通知浏览器自己已经准备就绪
第三次握手:有浏览器发起,告诉浏览器自己准备发送请求
seq:序号
ack:确认号
ACK:确认序列号
SYN:发送一个新的连接
FIN:释放一个新的连接
4.发送HTTP请求,服务器处理请求,返回相应结果
5.TCP四次挥手
第一次挥手:由浏览器发起,告诉服务器自己请求发送完毕,浏览器可以关闭
第二次挥手:由服务器发起,通知浏览器,已经接收完毕你的请求,准备关闭了
第三次挥手:由服务器发起,通知浏览器,发送给你的东西已经发送完毕,你可以关闭了
第四次挥手:有浏览器发起,通知服务器,已经接收完毕服务端发送的数据,我要关闭了
6.浏览器渲染
总体渲染步骤:
从服务器获取文件流(进制编码内容)
1.浏览器首先会把16进制的字节信息编译为“代码字符串”
2.按照W3C规则进行字符解析,生成对应的Tokens,最后转换为浏览器内核可以识别渲染的DOM节点
3.按照节点最后解析为对应的DOM树 TREE/CSSOM TREE
浏览器渲染过程:
①构建DOM树:在CSS资源还没有请求回来之前,先生成DOM树(DOM的层级关系/节点关系)
②构建CSSOM树:当所有的CSS请求回来之后,浏览器按照CSS的导入顺序依次进行渲染,最后生成CSSOM树
如果一个CSS资源请求事件过长,浏览器会先把渲染好的呈现出来
③构建RENDER树:把DOM树和CSSOM树结合在一起,生成有样式,有结构的RENDER TREE渲染树
④浏览器按照渲染树,在页面中进行解析,计算元素在设备视口中的大小和位置进行布局或者重排/回流,再根 据渲染树以及回流得到的几何信息,得到节点的绝对像素进行重绘
渲染过程中的问题:
1.在页面渲染时,遇到link,浏览器会派发一个新的线程(HTTP线程)去加载资源文件,与此同时GUI(浏览器渲染线程)会继续向下渲染代码,不论CSS是否请求回来,代码继续(link不会阻碍浏览器渲染)
2.在页面渲染时遇到@import GUI渲染线程会暂时停止渲染,去服务器加载资源文件,资源文件没有回来之前,是不会继续渲染的(@import会阻碍浏览器的渲染)
3.如果是行内样式style GUI直接渲染
4.script标签也会阻碍GUI的渲染,一般可以把js文件放在页面尾部