网络通信——客户端服务器端交互
网络通信
网络通信
前后端数据交互：同源策略请求ajax & fetch；跨域策略请求：jsonp & cors domain；
客户端：发请求的
服务器端：接收请求的。在电脑上建立服务站点，那么你的电脑就是服务器。
URL地址解析：浏览器解析地址，包含特殊符号的处理 =》
DNS域名解析(解析到哪个服务器)，帮你找到你应该连接到哪台服务器 =》
建立tcp连接 =》
连接建立起来之后，HTTP来回传输 =》
URL地址解析
URL和URN是URI的子集。URI，一般泛指URL，URN不常用。
浏览器把完整的URL分成一部分一部分，从而得到我应该基于哪部分该怎么走，这就是URL解析的过程。
URL组成：
-协议
客户端想把信息传给服务器是基于HTTP传输的，服务器想把内容返回给客户端也是基于HTTP传输回来。
+http。超文本传输协议。除了文本还有音视频这些。文件流、二进制编码流、音视频流和xml文档流。比如图片，经常是编译成编码，把编码传输给服务器，服务器接收编码解析成真正的图片，使传输更加快速。
+https。更安全，ssl。通过https传输的都要经过ssl加密。
+ftp。文件大，文件比文本大。把文件上传到服务器就要用到ftp。
服务器：性能配置好的电脑。4g内存=>16g内存，1个cpu=>8个cpu。
-域名
让用户方便记忆
顶级域名 qq.com
一级域名 www.qq.com 点前面是www的就是一级域名
二级域名 sports.qq.com
三级域名 v.sports.qq.com
服务器会有2个ip：外网ip和内网ip
-端口号。默认80
取值范围：0-65535
区分同一台服务器上的不同的项目。
服务器拿到端口号去查找项目。
-请求资源路径
首先通过端口号找到对应的项目，要请求的资源文件路径名称。
不指定会有一个默认的。
存在URL重定向的情况。是为了seo的优化。
-问号传参
其实就是query，目的就是为了传输信息——通信。
-hash值
URL编码
因为事实上，能够直接用于URL的字符是非常有限的。其他字符都需要经过编码才能放到url里面。
"...Only alphanumerics [0-9a-zA-Z], the special characters "$-_.+!*'()," [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL."
"只有字母和数字[0-9a-zA-Z]、一些特殊符号"$-_.+!*'(),"[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。"因此对于Url而言，只有普通英文字符和数字，特殊字符$-_.+!*'()还有保留字符，才能出现在未经编码的Url之中。其他字符均需要经过编码之后才能出现在Url中。
使用基于encodeURI进行编码
浏览器地址栏会默认做的事情
lis珠峰培训
https://www.zhufengpeixun.cn/stu%20list%E7%8F%A0%E5%B3%B0%E5%9F%B9%E8%AE%AD
为什么要进行URL编码 - 降瑞雪 - 博客园
关于URL编码 - 阮一峰的网络日志
HTML URL 编码参考手册 | 菜鸟教程
如果链接中又出现了http，那么使用encodeURIcomponent
ecodeURI是处理特殊字符的，如上述1；
但是又出现了http这些，需要使用encodeURIcomponent；能编码的符号更多；
为什么要进行编码？
不编码会无法识别，会乱码。浏览器自己会编码。
DNS域名解析
添加 域名《=》服务器外网IP 的记录
结果：通过域名到dns服务器上找到服务器的外网IP
性能优化之DNS缓存
dns预处理，缓存时间1分钟左右
在dns服务器上找
在本地dns缓存中找
预获取：所有跟当前网站主域名不一样的其他域名，都要做预获取。
TCP三次握手
tcp
找到外网ip，让客户端和服务器端建立关联，建立tcp连接；
tcp：传输协议，建立网络连接即建立tcp连接；
http：建立连接之后内容的传输就用http/https
tcp握手三次
通俗的讲法：
客户端发起，我要发请求了；
服务器发起，我知道了，你发请求吧；
客户端发起，好的我要发了。
网络通信机制中去发信号，然后服务器接收信号给予回馈，
第一次，客户端向服务器传点东西，传SYN的标识，SYN=1；seq标识值为a，自拟；
第二次，服务器会把之前的SYN返回，然后会多一个ACK，ack的值就是之前seq+SYN，但是同时我又返回了seq=b；好比是，上一次你给我传了一个1和一个a，那我返回1+a给你，并同时返回了一个b；
第三次，返回1+b；
用代码的方式告诉我一切ok。
只有3次才确保连接成功，才确保通信没有任何问题。我真正发请求之前先发点东西试试看有没有通。
1传输速率高；seq传一个标识，浏览器建立起来。
http报文
把客户端要传给服务器的信息通过http协议传输过去，在建立好的tcp连接通道中传输过去
http报文：
请求报文：xxx
相应报文：xxx
在network看到所有客户端和服务器端通信的内容
request URL：http://xxx
method：
get系列：get head delete;
post系列：post put;
status code：304协商缓存；
response header：
connection：keep-alive tcp协议的长链接，保持tcp连接不中断；
date：服务器返回的时间
etag：304弱缓存
request header：
accept-encoding：允许的编码和压缩方式
cache-control：强缓存
cookie:xxx
if-modified-since：刚开始建立缓存的时间
user-agent：所使用的的浏览器的版本信息
都通过请求头传给服务器
connection：keep-alive 保持tcp的长连接
构建web服务器
资源上传到服务器 ftp
构建web服务器
指定项目路径，项目路径是非常重要的
指定端口号，端口号很重要
！！！注意
服务器上什么都不安的。输入法都不安。因为服务器要保证的是绝对安全和端口不被占用。
比如上线后报错。如果已经定位到哪里的问题，直接到服务器上去改。
web服务器：负责接收客户端请求，查找相对应的资源文件，最后返回给客户端的
一台服务器最多可创建65536个服务：0-65535；
首先通过域名找到服务器，找到服务器就能找到你的某个服务；
服务器知识
web服务器：
静态资源服务器：资源文件的请求 /html/css/js
图片服务器：因为图片资源的请求一定是浪费时间的，处理图片时间一般比页面时间要长。web服务器拆成静态资源服务器和图片服务器。
视频服务器：视频流的处理，把音频、视频做成流，客户端发请求都走的流文件。比如，记者直播录像随时把这些信息传到服务器上，服务器将其转换成流文件，客户端向服务器发请求的时候会建立视频流的长链接，随时向客户端推送视频流。直播录像->服务器->客户端页面。
数据服务器：
首先！和web服务器的区别：
客户端向web服务器发请求时，找到资源文件并返回，这个是不需要代码的，工具实现；
但是数据服务器不同，接收到请求，要执行相关的程序处理你的请求，这些程序是拿代码来写的；然后从数据库中读取你所需要的数据；把数据进行二次解析重构；把数据返回给客户端；这是后台开发工程师要干的活
web服务器和数据服务器一起，同源策略；用的是同一台服务器，同一个域名，同一个端口；=》ajax
如果是分2个服务器来做，不在一起，当前向服务器发请求，那就有好多个服务器，那每向一个服务器发请求，都得dns解析，所以性能优化dns预处理；
http状态码
能正常返回和不能正常返回
状态码：
1-5开头，三位数字，
------------------------------------------------------
1xx 处理中，见不到。忽略掉这部分。
------------------------------------------------------
2xx：
200 成功。
201 我向服务器发一个请求，我叫他你给我创建一个文件，服务器创建好了返回了201。
204 No Content。put/post/delete，我没处理这个请求。服务器拒绝对这个请求进行处理。
---------------------------------------------------------
3xx
301 永久重定向。服务器告诉你，我不处理了，交给另外一台服务器去处理。京东之前的域名叫360by，现在叫jd。所以你请求360buy它会去做永久重定向。一般用于服务器迁移、域名迁移。
302 临时转移。主要用于服务器的负载均衡。现在转移了，下次一定转移么不一定。高峰期的时候临时转移到其他服务器帮我处理，这就叫服务器集群。
第一台最多能支持100个并发，那101个就转移到第二台；第二台满了就转移到第三台；……
304 协商缓存。第一次向服务器发请求，建立缓存机制；第二次客户端从缓存中去拿，而不是从服务器去拿的。减少了了请求次数，减轻了服务器压力，请求速度更快，前端性能优化。这是弱缓存。缓存到本地，走的是虚拟内存机制。
------------------------------------------------------------
2-3开头的都代表成功；
4-5开头的都代表失败；
400 bad request。参数错误
401 无权限访问。
404请求地址错误。
---------------------------------------------------------------
500 未知服务器错误。
503 服务器超负荷。
传统的tomcat，四五百。基于nginx，提高一倍。node作为服务器中转层的原因，提高并发数。
1秒几十个亿，几百个亿。除了购买大量服务器，提高单体并发数也是很重要的。
浏览器渲染
URL地址解析=》dns域名解析=》tcp三次握手=》向服务器发http请求=》服务器接收到请求后，由它的web服务器处理请求并返回，最后再通过http返回给客户端
返回给客户端的一定是 资源文件的源代码
我们看一下加载一个html的过程：
首先发的第一个请求肯定是请求一个主页面：
浏览器接收到的就是一堆源代码；
浏览器本身是多线程的，但是渲染代码是单线程；
veiwport：响应视口；dns预处理，以后碰到http://img.zhufengpeixun.cn就不需要dns解析了；
link标签，请求css会分配一个新的线程去加载，渲染页面主线程继续向下渲染；
script标签，默认是同步，……
渲染步骤：
解析html，生成dom树；刚开始是生成dom tree，从头到尾渲染完时dom结构都已经渲染完了，但是没有样式，结构层级已经知道了；样式回来之后生成cssom树；
两者结合生成render tree，有结构也有样式的树；
painting渲染重绘，最后显示在页面上
这是第一次渲染。
但是我通过js在界面第一次渲染完之后，可以继续更改dom的结构和样式；那跟我第一次render tree就不一样了：比如，之前有1个，现在有2个；之前有5个，现在有4个……；或者改变排版布局的位置，之前是左边改到右边；彻底把结构改了，改它的结构样式；
回流&重绘
这里有2个概念：
重绘：
元素的样式改变，但是宽高大小位置不变。
比如只把背景颜色改了
回流(重排)：
页面的布局和几何信息发生改变。
浏览器要重新计算dom树，拿新的dom树和cssom树集合形成新的渲染树……
其实是把第一次渲染页面的事重新干了一遍，只不过不需要重新加载css，不需要解析css；当然也有自己的缓存机制，跟之前一样的就快速过去了；肯定比第一次快，但是额外浪费了很多性能；
所以性能优化：
以数据来驱动视图，而不是传统以jquery直接来操作dom；因为操作dom必然会引发回流，回流是非常耗性能的；每次回流都要把dom tree重新计算，都要重新生成render tree，都要重新painting；
所以前端性能优化☞减少dom操作
数据驱动视图：框架内部实现统一的dom操作；虚拟dom+dom diff，只把有变化的重新处理；
优化措施
自己手动操作dom：
读写操作分离：渲染队列机制，读操作会刷新渲染队列；
样式集中改变：使用className或者cssText批量修改样式；
元素批量修改：
最好的方式：文档碎片
操作dom第一个想到的就是dom的回流和重绘
断开连接TCP四次挥手
4次挥手发生在信息传输过程中，3次握手发生在信息传输之前
那下次再发请求，又需要3次握手，发请求，再挥手……
我希望是不断开不用握手了，保持TCP协议的长连接，通过Connection:Keep-Alive
建立连接的时间：过了这段时间就过期；
在某个阶段让服务器主动断开；
总结
输入一个网址按下enter键，中间经历了几个步骤：7个步骤
URL地址解析：从URL中解析出，协议+域名+端口号+资源路径+问号参数等，需要编码encodeURI；
dns域名解析：解析出外网ip地址；
建立tcp连接通道，3次握手；
基于http协议传输给服务器；
web服务器HTTP响应报文；
浏览器渲染；
断开tcp
网络通信——客户端服务器端交互相关推荐
- 浅析Java web程序之客户端和服务器端交互原理
原文链接: https://www.iteye.com/topic/470019 1. 协议 a. TCP/IP整体构架概述 TCP/IP协议并不完全符合OSI的七层参考模型.传统的开放式系统互连参考 ...
- 封装一个类搞定90%安卓客户端与服务器端交互
本实例封装了一个处理安卓客户端与服务器端交互的几个方法,对于中文乱码问题本实例也找到了解决方案.本例可以处理的场景如下: 1.与服务器端交互json数据. 2.Get方式与服务器端交互数据. 3.Po ...
- java 实现 web 客户端_Java web客户端和服务器端交互的原理
Java web客户端和服务器端交互的原理 其实HTTP客户端和服务器端的交互原理很简单:即先是浏览器和服务器端建立Socket无状态连接,也就是短连接,然后通过IO流进行报文信息(这个报文是严格遵循 ...
- java基于http协议客户端与服务器端的交互,通俗易懂客户端与服务器端交互原理（HTTP数据请求与HTTP响应，包括Servlet部分...
经 常看到HTTP客户端与服务器端交互原理的各种版本的文章,但是专业术语太多,且流程过于复杂,不容易消化.于是就按照在 Servlet 里面的内容大致做了一些穿插.本来 连 Tomcat 容器 和 S ...
- 客户端与服务器端交互原理
客户端与服务器端交互原理 经常看到HTTP客户端与服务器端交互原理的各种版本的文章,但是专业术语太多,且流程过于复杂,不容易消化.于是就按照在 Servlet 里面的内容大致做了一些穿插.本来连 To ...
- ZK5.0和客户端+服务器端相结合的编程方式
译注:我对JSF比较熟悉,最近想研究一些其它的事件驱动的基于组件的WEB层框架,继Wicket和GWT之后,我开始仔细学习了一下ZK,虽然之前说的那几种框架也各有很多的优点,但ZK还是给了我很强的冲击 ...
- 安卓应用开发Socket通信 客户端+服务器端
安卓应用开发Socket通信 客户端+服务器端 1. 添加网络权限 <uses-permission android:name="android.permission.INTERNET ...
- C#+Socket 聊天室（实现公网通信 客户端-服务器端-客户端）
文章目录 简述 功能演示视频(b站) 准备工作 服务器端 服务器端界面 服务器端代码 客户端 客户端界面 客户端代码 总结 简述 关于Socket的原理我就不在这里赘述了,有大佬已经作详细的说明了: ...
- 实现服务器和客户端数据交互，Java Socket有妙招
摘要:在Java SDK中,对于Socket原生提供了支持,它分为ServerSocket和Socket. 本文分享自华为云社区<Java Socket 如何实现服务器和客户端数据交互>, ...
最新文章
- python作图一览
- 服务器的ras性能指标,Unix服务器6大原则深度讲解
- Linux上常用命令整理（二）—— paste
- python求球的表面积_892. 三维形体的表面积（Python）
- 海量数据拆分到nosql系统的一种方案
- 计量科学大数据分级分类
- 我的第一个 RN 项目-趣闻
- 利用阿里云搭建Java Web开发环境
- php和python-PHP和Python性能比较：放弃PHP改用Python
- 面向服务架构（SOA）和企业服务总线（ESB）
- 软件工程——五大模型
- Python函数的输出
- mouseover mouseout和mouseenter mouseleave的区别
- oracle 递归用法,oracle递归用法
- java 之DelayQueue实际运用示例
- 一个记账易app开发
- MAC上VSCode无Git源代码管理的解决办法
- 3个月红酒上千万的营业额：新模式下的营销奥秘
- 使用 Microsoft RDC for Mac 在 Mac 和 Windows 间传文件
- 一文看懂怎么用 Python 做数据分析