客户端和服务端通信原理

客户端和服务端

客户端：可以向服务端发起请求的，并且接受返回的内容的进行处理
服务器端：能够接受客户端的请求，并且把相关资源信息返回给客户端的
web 服务站点
详细

1. url 地址解析
2. DNS 服务器，DNS 域名解析 再向服务器发起请求
3. 和服务器建立 TCP 连接
4. 把客户端的信息发送给服务器（发送 HTTP 请求）
5. 服务器得到并处理请求（http 响应内容）
6. 客户端渲染服务器返回的内容
7. 和服务器断开 TCP 连接

url 地址解析

• URL：(Uniform Resource Locator) 统一资源定位符

• URN：(Uniform Resource Name)：统一资源名称

• URi：(Uniform Resource Name)：统一资源标识符

• URL 是子集 URN 和 URi

一个完整的 URL 所要包含的内容

http://www.zhufengpeixun.cn:80/stu/index.html?from=wx&k=1

• 协议（http://）:传输协议就是能够把客户端和服务器端通信信息，进行传输的工具（类似于快递小哥）

  • http 超文本传输协议（除了传递文本，还可以传递媒体资源文件（或者流文件以及 XML 格式数据））
  • https 更加安全的 http 协议，设计支付的都要采用 https 协议 (s:ssl 加密传输)
  • ftp 文件上传协议（一般应用于把本地资源上传到服务器）例如： FileZilla

• 域名 （www.zhufengpeixun.cn）:一个让用户的记得住的名字（ 外网 IP 也可以访问到：只是比较难记住的）

  • 顶级域名 qq.com
  • 一级域名 www.qq.com
  • 二级域名 sports.qq.com
  • 三级级域名 kbs.sports.qq.com
  • .com 国际域名
  • .cn 中文域名
  • .edu 教育
  • .gov 政府
  • .org 组织
  • .net 系统类的
    网络 :给服务器通网后，就会出现两个 IP 地址

• 内网 IP：局域网内网访问

• 外网 IP：外部用户可以基于外网 IP 访问到服务器

• 端口号 （:80）端口号的范围是 0 ～ 65535 用端口号区分服务之间的项目

  • http 默认端口号 80
  • https 默认端口号 443
  • ftp 默认端口号 21
  • 如果项目采用的就是默认端口号：如果我们不写端口号的话，浏览器就会默认给我们加上

• 请求资源路径名称 (/stu/index.html)

  • 服务器接受请求后
    1. 根据对应的端口号找项目
    2. 根据请求的资源路径名找到资源文件
    3. 读取资源文件的内容
    4. 把内容返回
  • 默认的路径或者名称 （xxx.com/stu/ 不指定资源名 服务器会找默认的资源，一般默认的资源名是 default.html index.html）
  • 注意伪 URL 地址处理（URL 重写技术是为了增加 SEO 搜索引擎优化的，动态的网址一般不能被搜索引擎搜录的，所以我们要把动态网址静态化，此时重写 url）
  • https://jd.hk/67876.html=>https://jd.hk/index.php?id=67876

• 问号传参信息（?from=wx&k=1）

  • 客户端想把信息传递给服务器
  1. URL 地址问号传参
  2. 请求报文传输（请求头 请求体）
  3. 不同页面进行传参数 列表到详情

• HASH 值（#zhufeng）

  • 也能传输信息
  • 锚点定位
  • 基于 hash 实现路由的管控（不同的组件模块展示）
  • 锚点定位
  • 锚点定位

基于 JS 实现跳转

请求地址中如果出现非有效的 unicode 编码 现在浏览器会进行编码

• window.location.href
• window.open()
  1. 基于 encodeURI 编码 ，我们可以基于 decodeURI 解码 我们一般用 encodeURI 编码整个 url 这样 URL 中特殊字符就会自动编译
  2. 网址 encodeURIComponent 和 decodeURIComponent 而是给 URL 部分信息进行编码（一般是？后面的传参值编码）
  3. 客户端还存在一种编码方式 escape() unescape() 只用在客户端进行处理

DNS 服务器域名解析

DNS 服务器：就是域名解析服务器，在服务器上存储 域名=》外网 ip
而我们发送的请求时候，就是根据域名 ，在 DNS 服务器上查找对应的服务器的服务器

1. DNS 优化
   • DNS 缓存 （一般浏览器会在第一次解析后，默认建立缓存，时间很短默认时间是一分钟左右的）
   • 减少 DNS 的解析次数
   • DNS 预获取（dns-prefetch）：在页面加载的时候，就把当前页面中需要的访问的域名（服务器）的信息进行 DNS 解析，以后加载到的就不用解析了

建立 TCP 链接(三次握手)

• 第一次握手：浏览器发起，告诉服务器我要发请求了

  • SYN=1 seq=J

• 第二次握手：服务发起，告诉浏览器我准备好

  • SYN=1 seq=k ACK=1 ack=J+1

• 第三次握手：浏览器发送，告诉服务器我马上发，你准备接受吧

  • ACK=1 ack=K+1

http 报文

http 报文

• 请求报文：所有经过传输协议的，客户端给服务端的内容，都被称为请求报文
  • 起始行
  • 请求头 （请求首部）
  • 请求主体
• 响应报文：所有经过传输协议的，服务器返回给客户端的 内 容，都被称为响应报文
  • http 状态码
  • 响应头
  • 响应主体
• HTTP 报文：请求报文+响应报文

如何构建一个网站

1. 购买服务器（阿里云 ECS=>独立主机）
2. 服务器部署 将项目资源上传服务器
3. window 下可以打开 iis
4. 购买域名进行 DNS 解析
5. 工信部备案

http 状态码

1~5 开头， 三位数字

DOM 回流重绘

• 浏览器多线程
  遇到 link/img/audio/video 等是异步去加载资源信息（浏览器再分配一个新的线程去加载，主线程继续向下渲染，如果遇到是 script 和@import,则让主线程去加载资源信息（同步）,加载完成信息后再去渲染页面）

link 标签 需要分配新的线程
script 默认是同步的
写到 head 里拿不到 dom 结构的
@import 同步

• A ：浏览器渲染页面的步骤

• 解析 HTML，生成 DOM 树，解析 CSS 生成 CSSOM 树
• 将 DOM 树和 CSSOM 树进行结合，生成渲染树（RenderTree）
• Layout（回流）：根据生成的渲染树，计算他们的在视口里面的确切位置和大小，这个阶段是回流
• Painting（重绘）：根据渲染树和回流得到几何信息，得到节点的绝对像素
• Display： 将像素发给 GPU，展示到页面上

• B ：DOM 的重绘和回流

• 重绘（RePaint）：元素的样式发生改变（但是宽高，大小，位置等不变）
• 回流（Reflow）：元素大小位置发生改变（页面布局和几何信息发生变化），就会重新布局，导致渲染树会重新计算布局和渲染
• 注意：回流一定重绘、重绘不一定会回流

• C：前端性能优化：：避免 DOM 的回流

• 放弃传统的 DOM 的时代，基于 vue/react 开始数据影响视图模式
  1. mvvm mvc virtual dom /dom diff
• 分离读写操作（现在浏览器都有渲染队列机制:发现某一行代码回流啦，把所有的回流的代码操作放到池子里面，等放完后，再一块执行）
  1. offset client scroll currentStyle getComputedStyle() 这些属性就会刷新（回流）
  2. 举例子 box.style.width=‘100px’ box.style.height=‘100px’
     box.offsetWidth
     box.offsetHeight
• 样式集中处理
  1. div.className=“box” div.style.cssText=“”
     div.classList.add=“box, warper”
• 动画效果应用到position 属性absolute或者fixed的元素上（脱离文档流）
• css3 硬件加速属性（transform、opacity、filters）
• 牺牲平滑度换取速度
  1.每次1px移动一个动画，但是如果 动画一像素太浪费CPU 每次走10不那么平滑但是跑的快啊也不浪费GPU啊
• 避免table布局和使用css的javascript表达式

TCP断开链接 四次挥手

1. 第一次挥手：由浏览器发起，告诉给服务器，我请求报文发送完毕，你准备关闭吧
2. 第二次挥手：有服务器发起，告诉浏览器，我接收完请求报文，我准备关闭，你也准备吧
3. 第三次挥手：有服务器发起，告诉浏览器，我响应报文发送完毕，你准备关闭吧；
4. 第四次挥手：有浏览器发起，告诉服务器，我响应报文接收完毕，你准备关闭啦，
   A：Connection：Keep-Alive 保持TCP不中断

前端性能优化汇总

1. 减少http请求次数和请求的大小

• 文件的合并压缩
• 雪碧图 css sprite
• 图片base64
• 尽量使用字体图标
• 图片懒加载
• 音/视频 取消预加载 （preload=‘none’）
  - 取消预加载 这样可以增加第一次渲染的速度，啥时候播放再加载
• 在客户端和服务端进行信息交互的时候，对于多数据我们传输我们尽可能使用json进行传输
  - xml要比json要大
• 开启服务器的gzip压缩
• 使用http2协议
  • 可以多条TCP通道共存=>管道化链接
• 数据的分批加载

2. 建立缓存机制

• DNS缓存
• 数据缓存（本地存储）
• 强缓存和协商缓存（304或者ETAG）
  1. 把不经常更改的静态资源做缓存处理（一般是304或者ETAG等协商缓存）
• 离线缓存
• 做CDN加速（地域分布服务器）
• Connection：Keep-Alive 保持TCP不中断 长链接

3. 代码上的优化

• 减少DOM的重绘和回流
• 在js中尽力减少必包的使用
• 对于动画，能css的就不用js（能够transform处理
  就不用其他的，因为transform 开启硬加速，不会引发回流）能用requestAnimationFrame当页面处于休眠状态动画就会暂停 ,就不用定时器
• 也可以使用webp格式图片，这种格式就会小一些（但是需要服务器端支持处理）
• 减少直接对于DOM操作
• 尽可能使用事件委托
• 项目中尽可能使用异步编程
• 手动回收堆栈内存（赋值为null）

全局刷新和局部刷新