客户端和服务端通信原理
客户端和服务端
客户端：可以向服务端发起请求的，并且接受返回的内容的进行处理
服务器端：能够接受客户端的请求，并且把相关资源信息返回给客户端的
web 服务站点
详细
- url 地址解析
- DNS 服务器，DNS 域名解析 再向服务器发起请求
- 和服务器建立 TCP 连接
- 把客户端的信息发送给服务器（发送 HTTP 请求）
- 服务器得到并处理请求（http 响应内容）
- 客户端渲染服务器返回的内容
- 和服务器断开 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)
- 服务器接受请求后
- 根据对应的端口号找项目
- 根据请求的资源路径名找到资源文件
- 读取资源文件的内容
- 把内容返回
- 默认的路径或者名称 （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）
- 客户端想把信息传递给服务器
- URL 地址问号传参
- 请求报文传输（请求头 请求体）
- 不同页面进行传参数 列表到详情
HASH 值（#zhufeng）
- 也能传输信息
- 锚点定位
- 基于 hash 实现路由的管控（不同的组件模块展示）
- 锚点定位
- 锚点定位
基于 JS 实现跳转
请求地址中如果出现非有效的 unicode 编码 现在浏览器会进行编码
- window.location.href
- window.open()
- 基于 encodeURI 编码 ，我们可以基于 decodeURI 解码 我们一般用 encodeURI 编码整个 url 这样 URL 中特殊字符就会自动编译
- 网址 encodeURIComponent 和 decodeURIComponent 而是给 URL 部分信息进行编码（一般是？后面的传参值编码）
- 客户端还存在一种编码方式 escape() unescape() 只用在客户端进行处理
DNS 服务器域名解析
DNS 服务器：就是域名解析服务器，在服务器上存储 域名=》外网 ip
而我们发送的请求时候，就是根据域名 ，在 DNS 服务器上查找对应的服务器的服务器
- 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 报文：请求报文+响应报文
如何构建一个网站
- 购买服务器（阿里云 ECS=>独立主机）
- 服务器部署 将项目资源上传服务器
- window 下可以打开 iis
- 购买域名进行 DNS 解析
- 工信部备案
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 开始数据影响视图模式
- mvvm mvc virtual dom /dom diff
- 分离读写操作（现在浏览器都有渲染队列机制:发现某一行代码回流啦，把所有的回流的代码操作放到池子里面，等放完后，再一块执行）
- offset client scroll currentStyle getComputedStyle() 这些属性就会刷新（回流）
- 举例子 box.style.width=‘100px’ box.style.height=‘100px’
box.offsetWidth
box.offsetHeight
- 样式集中处理
- div.className=“box” div.style.cssText=“”
div.classList.add=“box, warper”
- div.className=“box” div.style.cssText=“”
- 动画效果应用到position 属性absolute或者fixed的元素上（脱离文档流）
- css3 硬件加速属性（transform、opacity、filters）
- 牺牲平滑度换取速度
1.每次1px移动一个动画，但是如果 动画一像素太浪费CPU 每次走10不那么平滑但是跑的快啊也不浪费GPU啊 - 避免table布局和使用css的javascript表达式
TCP断开链接 四次挥手
- 第一次挥手：由浏览器发起，告诉给服务器，我请求报文发送完毕，你准备关闭吧
- 第二次挥手：有服务器发起，告诉浏览器，我接收完请求报文，我准备关闭，你也准备吧
- 第三次挥手：有服务器发起，告诉浏览器，我响应报文发送完毕，你准备关闭吧；
- 第四次挥手：有浏览器发起，告诉服务器，我响应报文接收完毕，你准备关闭啦，
A：Connection：Keep-Alive 保持TCP不中断
前端性能优化汇总
1. 减少http请求次数和请求的大小
- 文件的合并压缩
- 雪碧图 css sprite
- 图片base64
- 尽量使用字体图标
- 图片懒加载
- 音/视频 取消预加载 （preload=‘none’）
- 取消预加载 这样可以增加第一次渲染的速度，啥时候播放再加载 - 在客户端和服务端进行信息交互的时候，对于多数据我们传输我们尽可能使用json进行传输
- xml要比json要大 - 开启服务器的gzip压缩
- 使用http2协议
- 可以多条TCP通道共存=>管道化链接
- 数据的分批加载
2. 建立缓存机制
- DNS缓存
- 数据缓存（本地存储）
- 强缓存和协商缓存（304或者ETAG）
- 把不经常更改的静态资源做缓存处理（一般是304或者ETAG等协商缓存）
- 离线缓存
- 做CDN加速（地域分布服务器）
- Connection：Keep-Alive 保持TCP不中断 长链接
3. 代码上的优化
- 减少DOM的重绘和回流
- 在js中尽力减少必包的使用
- 对于动画，能css的就不用js（能够transform处理
就不用其他的，因为transform 开启硬加速，不会引发回流）能用requestAnimationFrame当页面处于休眠状态动画就会暂停 ,就不用定时器 - 也可以使用webp格式图片，这种格式就会小一些（但是需要服务器端支持处理）
- 减少直接对于DOM操作
- 尽可能使用事件委托
- 项目中尽可能使用异步编程
- 手动回收堆栈内存（赋值为null）
全局刷新和局部刷新
客户端和服务端通信原理相关推荐
- 浅议C#客户端和服务端通信的几种方法：Rest和GRPC和其他
本文来自:https://michaelscodingspot.com/rest-vs-grpc-for-asp-net/ 浅议C#客户端和服务端通信的几种方法:Rest和GRPC 在C#客户端和C# ...
- socket java 客户端_Java基于socket实现的客户端和服务端通信功能完整实例
本文实例讲述了Java基于socket实现的客户端和服务端通信功能.分享给大家供大家参考,具体如下: 以下代码参考马士兵的聊天项目,先运行ChatServer.java实现端口监听,然后再运行Chat ...
- Java中Socket实现客户端和服务端通信(多线程实现全双工通信)
效果图 目录结构 服务端Server package server;import thread.SocketReader; import thread.SocketWrite;import java. ...
- Java--Socket客户端，服务端通信
1.客户端接受服务端的消息并打印: 客户端: import java.io.BufferedReader; import java.io.IOException; import java.io.Inp ...
- redis源码客户端和服务端通信过程
最近想学习一下redis源码,先看一下redis通信流程.由于功力有限,不足之处望大家指正.服务端和客户端通信,一般都是服务端先启动,那先从服务端的源码看起. 首先启动服务端会做一些初始化动作,初始化 ...
- gPRC简介以及Java中使用gPRC实现客户端与服务端通信(附代码下载)
场景 ProtoBuf的介绍以及在Java中使用protobuf将对象进行序列化与反序列化: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...
- ssl客户端与服务端通信的demo
服务端程序流程 1 #include <stdio.h> 2 #include <stdlib.h> 3 #include <errno.h> 4 #include ...
- python客户端和服务端通信
1.客户端 `import socket client=socket.socket(type=socket.SOCK_DGRAM) ip_port=('10.10.42.68',9000) while ...
- Netty4 学习笔记之一:客户端与服务端通信 demo
前言 因为以前在项目中使用过Mina框架,感受到了该框架的强大之处.于是在业余时间也学习了一下Netty.因为Netty的主要版本是Netty3和Netty4(Netty5已经被取消了),所以我就直接 ...
最新文章
- 漫画：什么是红黑树？
- 物体三维识别论文介绍——基于霍夫投票
- 第一集 企业IT体系结构
- 11-17的学习总结(DOMfirstday)
- MATLAB无穷大上的反常积分
- Matlab图像处理创新实践-实验2【图像滤波基础（2）】
- c语言浮点乘法 溢出,浮点加减乘除运算各在什么情况下会发生溢出?
- c++ 如何给 “运行中“ 的线程传递数据；
- c语言随机读写信息fetch,北京大学信息科学技术学院考试试卷-计算机系统导论-期中-2015（16页）-原创力文档...
- Android系统运行库分为,Android系统架构
- Dreamweaver插入Flash参数
- 20210803：AXI-Stream协议源码分析初探
- MySQL内核月报 2014.09-MySQL· 捉虫动态·auto_increment
- Azure Linux 虚机上配置 RAID 的常见问题及解决方案
- HiveQL学习笔记（三）：Hive表连接
- Kali WiFi嗅探破解与字典生成
- linux装完系统需要输入密码,在安装Linux系统的过程中,一定要设置root用户的密码 (5.0分)...
- 航空模型手工制作_小学生简易航空模型的制作
- Django官方中文文档
- vs2019 无法打开包括文件:“SDKDDKVer.h”: No such file or directory的另外一种解决思路