技术分享
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)

刘誉

总有人要赢,为什么不能是我
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)
  • js基础
  • vue入门
  • react基础入门
  • http协议
    • http 协议是什么?
    • 特点:
    • 作用
    • 版本
    • 报文(请求报文、响应报文)的组成
    • POST 和 GET
    • http 状态码
      • 作用
      • http 状态码的分类
      • 常见的几个状态码
    • 从用户输入 URL 按下回车,一直到用户能看到界面,期间经历了什么?
      • DNS 解析(缓存)
      • 进行 TCP(协议)连接,三次握手(根据上一步请求回来的 ip 地址,去联系服务器)
      • 发送请求(请求报文)
      • 得到响应(响应报文)
      • 浏览器开始解析 html
      • 断开 TCP 连接,四次挥手(确保数据的完整性)
  • cookie和session
  • 跨域问题总结
  • 构造函数和原型
  • Object.create(null)和{}
  • TypeScript配置
  • Vue-Router
  • typescript入门到进阶
  • 前端
coderly
2020-01-01

http协议

# http 协议

# http 协议是什么?

超文本传输协议(属于应用层协议)

# 特点:

无状态,现在 cookie 解决了无状态的问题(早起网页开发时,用 cookie 解决,现在是 cookie 和 session 配合使用)

# 作用

规定了服务器和客户端传递信息的规则(统称为报文,分为:请求报文、响应报文)

# 版本

  1. http 1.0(老版本):不支持长连接
  2. http 1.1(主流版本):优点:支持长连接;弊端:同时发送资源的数量过小。
  3. http 2.0(最新版):同时发送资源的数量稍有提升

# 报文(请求报文、响应报文)的组成

  1. 报文首行
  2. 报文头
  3. 空行(仅仅作为一个分割)
  4. 报文体
图片

# POST 和 GET

图片

# http 状态码

服务器给客户端的

# 作用

告诉客户端,当前服务器处理请求的结果

# http 状态码的分类

  1. 1XX:服务器已经收到了本次请求,但是还需要进一步的处理才可以。
  2. 2XX:服务器已经收到了本次请求,且已经分析、处理等...最终处理完毕
  3. 3XX:服务器已经接收到了请求,还需要其它的资源,或者重定向到其它位置,甚至交给其它服务器处理
  4. 4XX:一般指请求的参数或者地址有错误,出现了服务器无法理解的请求(一般是前端的锅)
  5. 5XX:服务器内部错误(不是因为请求地址或者请求参数不当造成的),无法响应用户请求(一般是后盾人员的锅)

# 常见的几个状态码

  1. 200:成功(最理想状态)
  2. 301:重定向,被请求的旧资源永久移除了(不可以访问了),将会跳转到一个新资源,搜索引擎在抓取新内容的同时也将旧的网址替换为重定向之后的网址。
  3. 302:重定向,被请求的旧资源还在(仍然可以访问),但会临时跳转到一个新资源,搜索引擎会抓取新的内容而保存旧的网址。
  4. 404:资源未找到,一般是客户端请求了不存在的资源。
  5. 500:服务器收到了请求,但是服务器内部产生了错误。
  6. 502:连接服务器失败(服务器在处理一个请求的时候,或许需要其他服务器配合,但是联系不上其他的服务器了)

# 从用户输入 URL 按下回车,一直到用户能看到界面,期间经历了什么?

# DNS 解析(缓存)

  1. 找浏览器 DNS 缓存解析域名
  2. 找本机 DNS 缓存
  3. 找路由器 DNS 缓存
  4. 找运营商 DNS 缓存(百分之 80 的 DNS 查找,到这一步就结束)
  5. 递归查询(最不愿意看到的事,查询的是全球 13 台 DNS 根服务器中的一个)

# 进行 TCP(协议)连接,三次握手(根据上一步请求回来的 ip 地址,去联系服务器)

  1. 第一次握手:由浏览器发送给服务器,我想和你说话,你能听见嘛?
  2. 第二次握手,由服务器发送给浏览器,我能听见,你说吧
  3. 第三次握手,由浏览器发送给服务器,好,那我就开始说话

# 发送请求(请求报文)

# 得到响应(响应报文)

# 浏览器开始解析 html

  1. 预解析:将所有外部的 资源,发请求出去
  2. 解析 html:生成 DOM 树
  3. 解析 css:生成 CSSOM 树
  4. 合并成一个 render 树
  5. js 是否操作了 DOM 或样式
    • 有:进行重绘重排(不好,1. 尽量避免;2. 最小化重绘重排)
  6. 最终展示界面

# 断开 TCP 连接,四次挥手(确保数据的完整性)

  1. 第一次挥手:由浏览器发送给服务器,我的东西接受完了,你关闭吧
  2. 第二次挥手:由服务器发给浏览器,我还有一些东西没接收完,你等一会,我接收好了告诉你
  3. 第三次挥手:由服务器告诉浏览器,我接收完了,你断开吧
  4. 第四次挥手:由浏览器告诉服务器,好的,那我断开了
#Http
上次更新: 2021/03/25, 12:42:28
react基础入门
cookie和session

← react基础入门 cookie和session→

最近更新
01
代码片段
04-22
02
koa全家桶
03-29
03
mocks项目复盘
03-29
更多文章>
Theme by Vdoing | Copyright © 2021-2022 coderly | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式