前端 输入URL到页面加载完成的过程

总所周知,一个页面从无到有的变化就是前端的基本知识架构,具体有URL结构,DNS解析,DNS缓存,三次tcp握手,http请求,http响应,浏览器渲染,前后端交互,四次挥手等知识

• URL结构 (协议,域名,路径,参数,哈希)

  • http:// 协议
  • www.baidu.com:80 // 域名+端口
  • get_data // 路径
  • parduct=1 // 参数
  • (#)title // 哈希(锚点)

• DNS解析和缓存 (以google.com为例)

  • 根据google.com查找对应的IP地址,在查找过程中,浏览器先搜索自己的DNS缓存,其次搜索操作系统中的DNS缓存,在搜索操作系统中hosts文件,看有没有映射地址,在发送给LDNS(本地区域名服务器),LDNS将得到的IP地址返回给操作系统,同时自己将IP地址缓存起来,操作系统将IP地址返回给浏览器,同时自己也将IP地址缓存起来,自此,浏览器已经得到了域名对应的IP地址

• 三次TCP握手 (建立连接通信)

  • 第一次握手,请求建立连接,客户端发送syn包到服务器,并进入SYN_SENT状态,等待服务器确认(您好,我想认识您)
  • 第二次握手,服务器收到syn包,必须确认客户的SYN,同时自己也发送一个SYN包,即SYN+ACK,服务器进入SYN_RECV状态 (好的,很高兴认识您)
  • 第三次握手,客户端收到服务器的SYN+SCK包,向服务器发送确认包ACK,自此,客户端和服务器进入ESTABLISHED(TCP连接成功),完成三次握手 (我也很高兴认识您)

• http请求

  • 完整的HTTP请求消息包含了: 一个请求行,请求消息报头以及请求正文
  • 具体的请求方法主要有GET,POST,PUT,DELETE,HEAD,OPTIONS,TRACE

• http响应

  • 完整的HTTP响应包含了: 状态行,响应消息报头以及响应正文
  • 其中常用的状态代码有,200,201,301,401,404,409,500等

• 浏览器渲染

  • 浏览器会根据http响应来生成DOM树和CSSDOM树,这里就涉及到了两个主要知识点回流(Reflow)和重绘(Repaint)
  • 回流: 指元素的内容,结构,位置或尺寸发生了变化,需要重新计算样式和渲染树
  • 重绘: 指元素发生的改变只是影响了元素的一些外观之类的时候(背景色,边框颜色,文字颜色)

• 四次挥手

  • 第一次挥手,浏览器发完数据后,发送FIN请求断开连接 (不早了,我该走了)
  • 第二次挥手,服务器发送ACK表示同意 (知道了)
  • 第三次挥手,服务器发送FIN (我也该走了)
  • 第四次挥手,浏览器需要返回ACK表示同意 (恩,好的)

• 总结
  1. 提问中的简单的一句网页输入地址到页面呈现所展现的知识点,基本都是前端必考的,其中URL,DNS解析,DNS缓存检查基本的网络知识,其中三次握手四次挥手,检查tcp协议,其中http请求,http响应检查http协议,其中前后端交互检查ajax(前后台数据交互),其中页面绘制检查重绘和回流,好了,下期再见!