美文网首页
前端知识:网络相关

前端知识:网络相关

作者: 隔壁桌的郑先生 | 来源:发表于2019-07-30 23:04 被阅读0次

OSI 七层模型与 TCP/IP 五层模型

  • OSI 七层模型:物理层、数据链路层、网络层、传输层、会话层、展示层、应用层
  • TCP/IP 五层模型:物理层、数据链路层、网络层、传输层、应用层

HTTP/ HTTPS 协议

HTTP 0.9

  • 只有GET命令
  • 响应后就马上关闭连接

HTTP 1.0

  • 增加了HEADPOST方法
  • 增加了HTTP Headers和响应状态码

HTTP 1.1(普遍使用)

  • 持久连接(Keep-Alive),通道复用
  • 增加了PUTDELETEOPTIONS 等方法
  • 新增断点续传,身份认证,状态管理,缓存等特性

HTTP 2.0

  • 数据以二进制分帧进行传输
  • 头信息压缩
  • 服务端推送

HTTPS

  • 使用SSL加密传输的HTTP安全版本

URL 和 URI 的区别

  • URI = URL + URN
  • URI:统一资源标识符,用来唯一标识互联网上的信息资源,就像身份证号可以独一无二的标识出来
  • URL:统一资源定位符,通过资源位置来标识资源,就像是身份证上的地址

常见状态码

  • 1xx:请求正在处理
  • 200 OK:请求成功
  • 201 Created:已创建,POSTPUT请求成功的响应
  • 202 Accepted:已接受,但未响应
  • 204 No Content:请求成功,但无内容
  • 206 Partial Content:请求部分内容,如断点续传
  • 301 Moved Permanently:永久性重定向,比如请求路径忘记添加最后的斜杠
  • 302 Found:临时性重定向
  • 304 Not Modified:资源未修改,使用缓存
  • 400 Bad Request:请求语法错误
  • 401 Unauthorized:要求身份认证
  • 403 Forbidden:请求资源被拒绝
  • 404 Not Found:资源不存在
  • 405 Method Not Allowed:请求的方法不支持
  • 500 Internal Server Error:服务器错误
  • 502 Bad Gateway:代理服务器错误
  • 504 Gateway Timeout:请求超时

GET 和 POST

GET:语义上是指请求获取指定的资源,使用URL进行传参,数据长度有限制,资源可以被缓存
POST:语义上是指对请求资源做出处理,请求数据放在body中,数据长度无限制,相对GET更安全,支持更多的编码类型,不能被缓存

本质区别:GET是幂等的,而POST不是幂等的。就是说对于相同的请求,GET请求返回相同的结果,而POST会有副作用。所以不应该使用GET请求做增删改操作,也不应该使用POST请求做查询操作

常用请求/相应头

通用头

  • Cache-Control:控制缓存行为
    • no-cache:向服务器验证后,再决定缓存获取或还是请求
    • no-store:不进行缓存,直接从服务器获取
    • max-age:设置缓存最大有效时间,单位是秒
  • Connection:连接管理
    • keep-alive:持久连接
    • close:每次请求都会重新创建TCP连接
  • Date:服务端发送资源时的时间
  • Via:代理服务器相关信息

请求头

  • Accept:可接受的响应内容类型
  • Accept-Language:可接受的响应内容语言列表
  • Cookie:客户端存储的Cookie字符串
  • Host:请求资源所在的服务器
  • If-Modified-Since:上次访问时的更改时间,资源未修改的情况下返回304 Not Modified
  • If-None-Match:此次访问使用的E-Tag
  • Range:请求实体的字节范围,用于断点续传
  • Referer:请求资源的原始URI
  • User-Agent:客户端相关信息

响应头

  • Content-Type:资源资源的内容类型
  • Etag:资源标识信息,标识资源是否更新,用于缓存验证
  • Last-Modified:资源最后修改日期
  • Server:服务器软件信息
  • Set-Cookie:设置Cookie
  • Access-Control-Allow-Origin:跨域设置

TCP三次握手和四次挥手

三次握手

  • 客户端发送SYN标志,等待服务器确认
  • 服务器确认SYN标志后,发送SYN+ACK包给客户端
  • 客户端接收到SYN+ACK包后,发送ACK包,双方建立连接

三次握手

四次挥手

  • 客户端 -- FIN --> 服务端,关闭数据传送,客户端进入FIN_WAIT_1状态
  • 服务端 -- ACK -> 客户端,服务端进入CLOSE_WAIT状态
  • 服务端 -- ACK + FIN --> 客户端,服务端进入LAST_ACK状态
  • 客户端 -- ACK -> 服务端,服务端进入CLOSED状态

四次挥手

跨域

同源策略限制:如果两个URL的协议,域名和端口相同则表示它们同源,否则被当做跨域

同源策略

跨域解决方法:

  • JSONP:利用<script>标签不受跨域限制,缺点是只支持GET请求
  • CORS:设置Access-Control-Allow-Origin头允许跨域

HTTP 缓存策略

强缓存

根据Cache-ControlExpires头来判断是否强缓存,如果命中强缓存,则直接从缓存读取资源,不会发请求到服务器,在Chrome浏览器下如下所示:

强缓存

协商缓存

通过Last-ModifiedEtag来验证资源是否命中协商缓存,如果命中则服务器会返回这个请求,但不会返回这个资源的数据,依然是从缓存中读取数据,在Chrome浏览器下如下所示:

image

缓存策略

缓存策略

安全

  • XSS:跨站脚本攻击,浏览器内运行非法的HTML标签或JS进行的一种攻击
    • Cookie设置为HttpOnly
    • 转义页面上的输入内容和输出内容
  • CSRF:跨域请求伪造,攻击者盗用了你的身份,以你的名义发送恶意请求

RESTful

URL 设计

  • 动词(HTTP Methods) + 宾语,注意方法要语义明确
  • 宾语必须是名词,如/articles,而不是/getArticles
  • 复数URL,如GET /articles/2,而不是GET /article/2
  • 避免多级URL,除了第一级其余级别都用查询字符串,如GET /authors/12?categories=2,而不是GET /authors/12/categories/2

状态码

按照不同的场景,返回对应合适的状态码

服务器响应

  • API返回的数据格式应该是一个JSON对象,而不是纯文本,需要将服务器的响应头Content-Type设置为application/json

相关文章

  • 前端知识:网络相关

    OSI 七层模型与 TCP/IP 五层模型 OSI 七层模型:物理层、数据链路层、网络层、传输层、会话层、展示层、...

  • 后端开发工程师面试题汇总 | 网络知识

    无论做前端开发还是后端开发,网络知识是必备的知识。这部分知识是基础中的基础,是我们必须掌握的内容。网络相关的问题也...

  • 前端入门你该知道这些---前端基础之网络,一站到底

    网络相关的知识是每个前端工程师都应该具备的。很多从事前端的朋友们都没系统学习过计算机网络和http相关内容。在没有...

  • 前端网络相关

    传输控制协议-TCP (Transmisson Control Protocol) 用户数据协议-UDP (Use...

  • 2018前端面试总结

    前端目录 HTML相关 CSS相关 JAVASCRIPT相关 DOM相关 HTTP相关 VUE相关 算法相关 网络...

  • 最全的前端相关公众号整理

    前端公众号大全 这里汇集专注前端知识分享的相关公众号,帮助大家了解前端知识发展趋势和业界相关动态。相信所有的公众号...

  • 网络相关知识

    前言 主要是参考其他人写的文章,做一个手抄记录,加深印象,后面都会附上原文链接。 1、 DNS介绍篇(原文(htt...

  • 网络相关知识

    计算机基础知识掌握TCP和HTTP相关知识即可。 这是一份详细 & 清晰的计算机网络基础 学习指南计算机网络:这是...

  • 网络相关知识

    一,常用协议与端口 FTP 文件传输协议,20传输数据,21控制telnet 远程控制协议 23smtp 简单...

  • 网络相关知识

    虽然一直在做开发,但对于网络知识了解还不是太深,做下笔记方便以后查阅 一、http的介绍 http 超文本传输协议...

网友评论

      本文标题:前端知识:网络相关

      本文链接:https://www.haomeiwen.com/subject/kwqalctx.html