林夕梦木子李

# 常见网络题目

# 前端发送表单到后端的报文结构

# HTTP请求报文结构

一个HTTP请求报文由四个部分组成：

  • 请求行： 由请求方法字段、URL字段和HTTP协议版本字段3个字段组成，用空格分隔。比如 GET /data/info.html HTTP/1.1
  • 请求头： 指明请求类型(一般是GET或者 POST)。如有必要，客户程序还可以选择发送其他的请求头。大多数请求头并不是必需的，但Content-Length除外。对于POST请求来说 Content-Length必须出现。
  • 空行： 它的作用是通过一个空行，告诉服务器请求头部到此为止
  • 请求体： 若方法字段是GET，则此项为空，没有数据；若方法字段是POST,则通常来说此处放置的就是要提交的数据

示例：

An image

参考文章: http请求/响应报文结构 (opens new window)

# 用户输入url到页面呈现的过程

URL

统一资源定位符，用于互联网上不同的资源的标识，就像不同的人有不同的身份证一样
URL组成：
An image

  1. 用户输入url
  2. 浏览器查找域名的IP地址 域名解析(DNS解析)
  3. 找到IP地址后，建立TCP三次握手 (opens new window) ,与目标服务器建立连接
  4. 握手成功后，通过规定的协议（http），浏览器向目标主机发送http请求，请求数据包
  5. 服务器处理收到的请求，将数据返回至浏览器
  6. 浏览器收到HTTP响应报文
  7. 关闭连接 浏览器解析文档
  8. 读取页面内容，浏览器渲染，解析html源码
  9. 生成Dom树、解析css样式、js交互

【简略版】

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

# 域名解析（DNS解析）

浏览器会把输入的域名解析成对应的ip，解析分为几部分进行。

  1. 查看浏览器内部缓存，如果查到域名对应的ip，就发送和接受参数和数据
  2. 查看本机的host文件，浏览器会在本机的hosts文件查看是否有对应的ip服务器地址。
  3. 查看本地路由器的DNS缓存，找到对应的ip
  4. 查看网络服务商中DNS服务器
  5. 查询根域名下是否存在。 上述5步找到对应的ip地址后
  6. 询到目标IP地址后,则开始建立TCP三次握手 (opens new window) ,与目标服务器建立连接。
  7. 通过规定的协议（http）向目标主机发送请求

# 浏览器如何渲染页面

# 主要过程

  1. 用户输入网址（假设是个 HTML 页面，第一次访问，无缓存情况），浏览器向服务器发出HTTP请求，服务器返回 HTML 文件； （善用缓存，减少HTTP请求，减轻服务器压力）

  2. 浏览器载入 HTML 代码，发现 <head> 内有一个<link>引用外部 CSS 文件,则浏览器立即发送CSS文件请求，获取浏览器返回的CSS文件； （CSS文件合并，减少HTTP请求）

  3. 浏览器继续载入 HTML 中<body> 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了； （CSS文件需要放置最上面，避免网页重新渲染）

  4. 浏览器在代码中发现一个 <img> 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；（图片文件合并，减少HTTP请求）

  5. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；（最好图片都设置尺寸，避免重新渲染）

  6. 浏览器发现了一个包含一行 JavaScript 代码的 <script> 标签，会立即运行该js代码；（script最好放置页面最下面）

  7. js脚本执行了语句，它令浏览器隐藏掉代码中的某个 <div>,突然就少了一个元素，浏览器不得不重新渲染这部分代码；（页面初始化样式不要使用js控制）

  8. 终于等到了 </html> 的到来，浏览器泪流满面……

  9. 等等，还没完，用户点了一下界面中的“换肤”按钮，JavaScript 让浏览器换了一下<link> 标签的 CSS 路径；

  10. 浏览器召集了在座的各位 <div><span><ul><li> 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

# 影响页面渲染速度的因素： Repaint(重绘)和Reflow(回流)

Repaint(重绘)

只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性

Reflow(回流)

元件的几何尺寸变化，比如页面上某些元素的占位面积、定位方式、边距等属性的变化

# GET和POST的区别

GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的

GET和POST的实质上是没有区别的，只是报文格式不同，我们常说的是区别是指在浏览器实现上的区别

# 浏览器实现的区别：

GET POST
从服务器获取资源 提交资源到服务器
在url上传参，长度受限制 在body里传参，长度不受限制
能被缓存 不能被缓存
安全性较差，因为url可见参数 比较安全

注意

  • GET 方法的长度限制大多是浏览器和服务器的原因，HTTP 协议没有 Body 和 URL 的长度限制，
  • 从传输的角度来说，POST 和 GET 都是不安全的，因为 HTTP在网络上是明文传输的，要想安全传输，可以加密使用HTTPS

# 报文上的区别：

  • 不带参数时，最大区别就是第一行的方法名不同:

GET方法请求报文第一行：

GET /uri HTTP/1.1
1

POST方法请求报文第一行：

POST /uri HTTP/1.1
1
  • 带参数时报文的区别:

GET 方法简约版报文是这样的

GET /index.html?name=fanmy&age=24 HTTP/1.1
Host: localhost
1
2

POST 方法简约版报文是这样的

POST /index.html HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded

name=fanmy&age=24
1
2
3
4
5

← HTTP请求/响应报文结构 →