前端需要了解的计算机网络知识

本文涉及的产品
密钥管理服务KMS,1000个密钥,100个凭据,1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 前端需要了解的计算机网络知识

前端需要了解的计算机网络知识.png

概述

  • 七层网路协议

    • 物理层 -> 数据链路层 -> 网络层 -> 传输层 -> 会话层 -> 表示层 -> 应用层
  • http和tcp

    • http是应用层协议,tcp是传输层协议
    • 常见的应用层协议还包括:telnet,ssh,smtp,pop,ssl/tls,mime
      常见传输层协议还有:udp,sctp

Web和HTTP

HTTP概况

  • HTTP服务器并不保存关于客户的任何信息,因此HTTP是一个无状态协议(stateless protocol)

非持续连接和持续连接

  • 采用非持续连接的http是每个tcp最多允许传输一个对象

HTTP报文格式

  • HTTP请求报文

    • 请求行=方法+sp+URL+sp+版本+cr+lf

      • GET /somedir/page.html HTTP/1.1
    • 首部行=首部字段名+sp+值+cr+lf

      • Host:www.someschool.edu
      • Connection:close
      • User-agent:Mozilla/5.0
      • Accept-language:fr
    • 空行=cr+lf
    • 实体主体
  • HTTP响应报文

    • 状态行=版本+sp+状态码+sp+短语+cr+lf

      • HTTP/1.1 200 OK
    • 首部行=首部字段名+sp+值+cr+lf

      • Connection:close
      • Date:Tue,09 Aug 2011 15:44:04 GMT
      • Server:Apache/2.2.3 (CentOS)
      • Last-Modified:Tue,09 Aug 2011 15:11:03 GMT
      • Content-Length:6821
      • Content-Type:text/html
    • 空行=cr+lf
    • 实体主体

http 状态码

  • 101 websocket 双向通信
  • 200 成功
  • 204 没有响应体
  • 206 断点续传
  • 301 永久重定向
  • 302 临时重定向
  • 304 缓存 只能服务端设置
  • 401 没登录没有权限
  • 403 登录后没有权限
  • 404 没有资源
  • 405 请求方法不存在或不支持
  • 502 负载均衡

发送请求的方式

  • 浏览器 默认get请求
  • postman
  • 命令行 mac curl

管线化

  • 管线化不需要等待上一次请求得到响应就可以执行下一次请求,实现并行发送请求。只有GET和HEAD请求可以进行管线化,而POST有所限制

请求方法 RestfulApi 根据不同的动作 做对应的处理

  • get 获取资源
  • post 新增资源
  • put 上传文件 修改(restful)
  • delete 删除资源
  • options 跨域出现 复杂请求时出现 仅是get/post都是简单请求 但加上自定义头header就会变成复杂请求

用户与服务器交互:cookie

  • cookie组件

    • 在http响应报文中的一个cookie首部行
    • 在http请求报文中的一个cookie首部行
    • 在用户端系统中保留有一个cookie文件,并由用户的浏览器进行管理
    • 位于Web站点的一个后端数据库
  • cookie安全性

    • cookie 是存放在浏览器上的 服务器可以设置 每次请求时都会带上cookie
    • cookie 不安全 不能存放敏感信息
    • session 服务端 (基于cookie) 服务器的内存中,存到redis数据库

Web缓存

  • Web缓存器(Web cache)也叫代理服务器(proxy server),它能够代表初始web服务器来满足http请求的网络实体
  • http缓存

    • 强制缓存

      • Cache-Control && Expires
    • 对比缓存

      • Last-Modified & If-Modified-Since
      • ETag & If-None-Match
  • Cache-Control

    - private 客户端可以缓存
    - public 客户端和代理服务器都可以缓存
    - max-age=60 缓存内容将在60s后失效
    - no-cache 需要使用对比缓存验证数据,强制向源服务器再次验证(没有强制缓存)
    - no-store 所有内容都不会缓存,强制缓存和对比缓存都不会触发(不缓存)
    

DNS

  • DNS是域名解析系统 Domain Name System
  • DNS工作原理

    • 分布式层次数据库

      • 根DNS服务器
      • TLD顶级域(DNS)服务器 com org edu
      • 权威DNS服务器
      • 本地DNS服务器与三个服务器的查询关系 从请求主机向本地DNS服务器发出的查询是递归查询,从本地DNS服务器向其他三种服务器查询为迭代查询
    • DNS缓存

      • 在一个请求链中,当DNS服务器缓存了一台主机名/IP地址对,另一个对相同主机名的查询就能够提供所要求的IP地址,本地域名服务器一般会缓存顶级域名服务器的映射
  • DNS记录和报文

    • 资源记录(Resource Record,RR)是一个包含了(Name,Value,Type,TTL)的四元组
    • DNS报文

      • 12字节

        • 标识符
        • 标志
        • 问题数
        • 回答RR数
        • 权威RR数
        • 附加RR数
      • 查询的名字和类型自窜

        • 问题(问题的变量数)
      • 对查询的响应中的RR

        • 回答(资源记录的变量数)
      • 权威服务器的记录

        • 权威(资源记录的变量数)
      • 可被使用的附加"有帮助"的信息

        • 附加信息(资源记录的变量数)
  • DDos攻击

    • 分布式拒绝服务(DDos)带宽洪泛攻击

TCP连接

TCP报文段结构

  • 源端口号+目的端口号
  • 序号
  • 确认号
  • 首部长度+保留未用+URG+ACK+PSH+RST+SYN+FIN+接收窗口
  • 因特网校验和+紧急数据指针
  • 选项
  • 数据

TCP连接管理(三次握手)

  • 第一步:客户端的TCP首先向服务器端的TCP发送一个特殊的TCP报文段
  • 第二步:一旦包含TCP SYN报文段的IP数据报到达服务器主机(假设它的确到达了),服务器会从该数据包中提取出TCP SYN报文段,为该TCP连接分配TCP缓存和变量,并向该客户TCP发送允许连接的报文段
  • 第三步:在收到SYNACK报文段后,客户也要给该连接分配缓存和变量

IP地址

IPv4 vs IPv6

  • IPv4数据报格式

    • 版本(0-4)+首部长度(4-8)+服务类型(8-16)+数据报长度(16-31)
    • 16比特标识(0-16)+标志(16-19)+13比特片偏移(19-31)
    • 寿命TTL(0-8)+上层协议(8-16)+首部检验和(16-31)
    • 32比特源IP地址
    • 32比特目的IP地址
    • 选项(如果有的话)
    • 数据
  • IPv6数据报格式

    • 版本(0-4)+流量类型(4-12)+流标签(12-31)
    • 有效载荷长度(0-16)+下一个首部(16-24)+跳限制(24-31)
    • 源地址(128比特)
    • 目的地址(128比特)
    • 数据

IPV4编址

  • 子网:不跨越路由器的路由器接口和主机接口就形成一个子网
  • 子网掩码:IP地址为某个子网分配的一个223.1.1.0/24的地址,这种/24的记法,称为子网掩码(network mask),指示了32比特中的最左侧24比特定义了子网地址
class NetIDs Blocks
A 10 1
B 172.16-172.31 16
C 192.168.0-192.168.255 256

CDN

  • CDN操作

    • 当用户主机中的一个浏览器指令检索一个特定的视频(由URL标识)时,CDN必须截获该请求,以便能够确定此时是混合用于该客户的CDN服务器集群以及将客户的请求重定向到该集群的某台服务器
  • 集群选择策略

    • 任何CDN部署,其核心是集群选择策略(cluster selection strategy),即动态地将客户定向到CDN中服务器集群或数据中心的机制。
    • 常见策略:

      • 周期性实时测量;IP任播(客户与CDN服务器匹配)

网络安全

密码学基础

  • 对称密钥密码机制

    • 对称密钥系统(symmetric key system) 双方密钥是相同的并且是秘密的
    • 块密码 将要加密的报文处理成k比特的块

      • DES(Data Encrypiton Standard) 数据加密标准
      • AES(Advanced Encryption Standard) 高级加密标准
  • 公开密钥系统

    • 公开密钥系统(public key system) 使用一对密钥:一个密钥为双方都知道,另一个密钥只有一方知道
    • RSA算法(Ron、Adi、Leonard三个人名)

      • 大数分解和素性检测
  • 密码散列函数

    • MD5散列算法

      • 填充->添加->初始化累加器->循环
    • SHA-1(Security Hash Algorithm)
  • SSL

    • SSL(Secure Socket Layer) 安全套接字层
    • SSL握手

      • 1)客户发送它支持的密码算法的列表,连通一个客户的不重数
      • 2)从该列表中服务器选择一种对称算法,一种公钥算法和一种MAC算法,并把选择以及证书和一个服务器不重数返回给客户
      • 3)客户验证该证书,提取服务器公钥,生成一个前主密钥(Pre-Master Secret),用服务器的公钥加密该前主密钥,并将加密的PMS发送给服务器
      • 4)使用相同的密钥导出函数,客户和服务器独立地从PMS和不重数中计算主密钥(Master Secret),将该MS切片申城两个密码和两个MAC密钥
      • 5)客户发送所有握手报文的一个MAC
      • 6)服务器发送所有握手报文的一个MAC
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
6月前
|
缓存 网络协议 前端开发
2023高频前端面试题合集之网络篇
2023高频前端面试题合集之网络篇
179 0
|
6月前
|
XML 存储 前端开发
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(三)
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容
|
6月前
|
XML JSON 前端开发
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(二)
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容
|
12天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
3月前
|
前端开发 算法 网络协议
如何学习计算机基础知识,打好前端和网络安全的基础
如何学习计算机基础知识,打好前端和网络安全的基础
53 4
|
3月前
|
前端开发 安全 网络安全
前端必备网络安全知识
【8月更文挑战第25天】前端必备网络安全知识
60 1
|
3月前
|
数据采集 资源调度 JavaScript
Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
【8月更文挑战第4天】Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
58 5
|
4月前
|
域名解析 缓存 网络协议
前端必备的网络知识 DNS CDN
前端必备的网络知识 DNS CDN
51 0
|
6月前
|
存储 缓存 监控
深入理解前端性能优化:从网络到渲染
网络优化包括减少HTTP请求、使用HTTP/2、开启GZIP压缩和缓存策略。资源加载优化涉及懒加载、预加载和预读取。渲染优化建议使用Critical CSS、减少CSS和JavaScript阻塞以及避免强制同步布局。Service Worker实现离线存储,性能监控使用Lighthouse等工具。动态导入和代码拆分减少初始加载时间,响应式图片适应不同设备。Web Workers处理耗时任务,避免内存泄漏。
89 3
|
6月前
|
存储 XML 前端开发
【Flutter前端技术开发专栏】Flutter中的网络请求与数据处理
【4月更文挑战第30天】本文介绍了Flutter开发中的网络请求和数据处理。 Flutter开发者可选择http(官方库)或dio(功能更强大)进行网络请求。http库简单易用,dio支持更多功能如拦截器。数据处理涉及JSON和XML解析,数据存储可选SharedPreferences或Hive,数据传递推荐使用InheritedWidget或Provider状态管理库。了解这些知识点能提升Flutter开发效率。
161 0
【Flutter前端技术开发专栏】Flutter中的网络请求与数据处理