输入url到加载完页面发生了什么

2018年4月6日20:36:41 1 59

面试前端十有八九会碰到这个问题:输入url到加载完页面发生了什么?看似这个问题很简单,无非就是浏览器发送数据,服务器响应数据,浏览器接收并解析数据,好几次面试我都是这样简单的回答的,但是这个问题不会就这么简单的,这个问题可以细分到很多知识点,下面就简单的描述下这个过程。

  1. DNS解析
  2. TCP连接
  3. 发送HTTP请求
  4. 服务器处理请求并返回HTTP报文
  5. 浏览器解析渲染页面
  6. 连接结束

DNS解析

所有的网站真正的标识不是它的网址,而是它的IP地址,我们输入网址后,最终都会被转换成IP地址,DNS解析就是一个网址到IP地址转换的过程。
输入url到加载完页面发生了什么

TCP连接

浏览器在发送请求之前要和服务器进行一个握手(TLS/SSL握手),在这个握手的过程中确立双方加密传输数据的密码信息,HTTPS相比HTTP而言,更加安全,但是在时间上会多一点损耗,如握手加密等过程。

发送HTTP请求

HTTP请求由请求行, 请求报头和请求正文三个部分组成。

请求行

定义了请求方向,请求的url和http协议

请求报头

常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent等。

请求正文

当使用POST, PUT等方法时,通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。在请求包头中有一些与请求正文相关的信息,例如: 现在的Web应用通常采用Rest架构,请求的数据格式一般为json。这时就需要设置Content-Type: application/json。

服务器处理请求并返回HTTP报文

HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。

状态码
- 1xx:指示信息–表示请求已接收,继续处理。
- 2xx:成功–表示请求已被成功接收、理解、接受。
- 3xx:重定向–要完成请求必须进行更进一步的操作。
- 4xx:客户端错误–请求有语法错误或请求无法实现。
- 5xx:服务器端错误–服务器未能实现合法的请求。
- 平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500

响应报头

常见的响应报头字段有: Server, Connection...。

响应报文

服务器返回给浏览器的文本信息,通常HTML, CSS, JS, 图片等文件就放在这一部分。

浏览器解析渲染页面

浏览器在收到HTML,CSS,JS文件后,会进入一个边解析边渲染的过程。
输入url到加载完页面发生了什么

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 朱曙明博客 来自天朝的朋友 谷歌浏览器 Windows 10 1

      朱曙明博客来访~