客户端和服务器端的一些事情？

zwt菇凉
283 阅读12分钟

首先来看看什么是客户端和服务器端？

  • 客户端：

可以向服务器发请求并接受返回的内容进行处理

  • 服务器端：

能够接受接收客户端请求，并且把相关资源信息返回给客户端的

1.输入URL地址，看到页面发生了什么呢？

当用户在地址栏中输入地址，到最后看到页面，中间发生了什么？ 客户端有个地址：（即浏览器的一个地址）

1.URL地址解析（浏览器把地址解析）

2.DNS域名解析（DNS服务器解析知道是找哪个服务器）

3.和服务器建立TCP链接 （TCP协议）

4.把客户端信息传递给服务器 发送HTTP请求 客户端资源（发送HTTP请求把内容给--->服务器）

5.服务器得到请求并且进行处理（HTTP响应内容）把信息返回给客户端（服务器--->客户端）

6.客户端渲染服务器返回的内容

7.和服务器断开TCP链接

请求阶段（request）：客户端向服务器发请求是请求阶段 响应阶段（response）：服务器向客户端返回是响应阶段

URI / URL / URN

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

根据这个地址能找到对应的资源

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

一般是国际上通用的（标准的）一些名字（例如：国际统一发版的编号）

  • URI (Uniform Resource Identifier) : 统一资源标识符

URL和URN是URI的子集

一个完成的URL所包含的内容

http://www.qianxun.cn:80/stu/index.html?from=wx&lx=1#wenting

  • 协议（http://）
  • 域名（www.qianxun.cn）
  • 端口号（:80）
  • 请求资源路径名称（stu/index.html）
  • 问号传参信息（?from=wx&lx=1）
  • HASH值（#wenting）

详解：

1.协议（http://）

传输协议就是，能够把客户端通用的信息进行传输的工具 (类似以相快递小哥)

  • http 超文本传输协议 除了传递文本，还可以传递媒体资源文件（或者流文件）及XML格式数据

  • https 更加安全的http ，一般涉及的网站都要采用https协议（s:ssl （ Secure Socket Layer ）加密传输）

  • ftp 文件传输协议 （类似德邦物流） 一般应用于把本地资源上传到服务器

FileZilla:FTP上传工具,通过这工具，通过FTP传输协议，我们可以把本地的文件上传到服务器上

2.域名（www.qianxun.cn）

一个让用户方便记忆的名字（不通过域名，直接用服务器的外网IP也能访问到服务器，但是外网IP太难记了）

  • 顶级域名 qq.com
  • 一级域名 www.qq.com
  • 二级域名 sports.qq.com
  • 三级域名 kbs.sports.qq.com
  • .com 国际域名
  • .cn 中文域名
  • .com.cn
  • .edu 教育域名
  • .gov 政府域名
  • .io 博客
  • .org 官方组织
  • .net 系统类（例如：OA系统）

给服务器通网之后,会有两个IP地址

  • 内网IP: 局域网内访问
  • 外网IP：外部用户可以基于外网IP访问到服务器的资源 例如： 125.39.174.202
3.端口号 :80 （取值范围：0~655355）

端口号的取值范围：0~655355 作用：用端口号来区分同一台服务器上的不同项目

  • http 默认端口号是：80
  • https 默认端口号：443
  • ftp 默认的端口号：21

如果项目采用的就是默认端口号，我们在书写地址的时候，不用加端口号，浏览器在发送请求的时候会帮我们默认给加上

4.请求资源路径名称（stu/index.html）
  • 默认路径名称

（xxx.com/stu/ 不指定资源名，服务器会找默认的资源，一般的默认资源名是default.html、index.html......当然这些可以在服务器端自己配置）

  • ! 注意伪URL地址的处理（URL重写是为了增加SEO搜索引擎优化的，动态的网址一般不能被搜索引擎收录，所以我们要把动态网址静态化，此时需要的是重写URL）

例如：https://item. jd. hk/ 2688449. html => https:/ /item. jd. hk/ index. php?id=2688449

服务器接收到请求后：

1）根据端口号找到对应的项目

2）根据请求资源的路径名称找到资源文件

3）读取资源文件中的内容

4）把内容返回

5.问号传参信息（?from=wx&lx=1）

客户端想把信息传递给服务器，有很多种方式

  • URL地址问号传参
  • 通过请求报文传输（请求头和请求主体）

也可以不同页面之间的信息交互，例如：从列表到详情

6.HASH值（#wenting）
  • 也能充当信息传输方式
  • 锚点定位
  • 基于HASH实现路由管控（不同的HASH值，展示不同的组件和模块）
unicode编码/解码

请求的地址中如果出现非有效UNICODE编码内容，现代版浏览器会默认的进行编码，

  1. 基于encodeURI编码，我们可以基于decodeURI解码，我们一般用encodeURI编码的是整个URL，这个整个URL中的特殊字符都会自动编译!

    encodeURI('千寻') => "%E5%8D%83%E5%AF%BB"

  2. encodeURIComponent / decodeURIComponent它相对于encodeURI来说，不用于给整个URL编码，而是给URL部分信息进行编码（一般都是问号传参的值编码）

客户端和服务器端进行信息传输的时候，需要把请求的地址和信息编码，我们则基于以上两种方式处理，服务器端也会存在这些方法，这样就可以统一编码解码了

  1. 客户端还存在一种方式，针对于中文的编码方式，escape（中文变编码） / unescape（编码变中文） ，这种方式一般只应用于客户端页面之间自己的处理，例如：从列表跳转到详情，我们可以把传递的中文信息基于这个编码，详情页获取编码后的信息再解码，再比如我们在客户端中的cookie 信息，如果信息是中文，我们也基于这种办法编码!
//=>基于JS实现页面跳转
link.onclick = function () {
//=>获取当前页面的URL地址
let url = window.location. href;
//=>跳转页面
window. location.href = "http: //www.baidu . cn/stu list/百度";
// window. open("http://www. baidu.cn/");
//=>http://www. baidu. cn/stu%20list/
%E7%8F%A0%E5%B3%B0%E5%9F%B9%E8%AE%ADI
}
默认条件下当发地址请求时，默认的进行编码

2.DNS服务器域名解析

DNS服务器：域名解析服务器，在服务器上存储着 域名<=>服务器外网IP的相关记录 而我们发送请求时候所谓的DNS解析，其实就是根据域名在DNS服务器上查找到对应服务器的外网IP

DNS优化

  • DNS缓存（一般浏览器会在解析后，默认建立缓存，时间很短，只有一分钟左右）
  • 减少DNS解析次数（一个网站中我们需要发送请求的域名和服务器尽可能少即可）
  • DNS预获取 （dns-prefetch）：在页面加载开始的时候，就把当前页面中需要访问其他域名（服务器）的信息进行提前DNS解析，以后加载到具体内容部分可以不用解析了 <meta http-equiv='x-dns-prefetch-control' content='on'>

prefetch：预获取

3.TCP连接（三次握手）

seq是序号，ack是确认号，大小均为4字节。

  • 第一次握手：由浏览器发起，告诉服务器我要发送请求了
  • 第二次握手：由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧
  • 第三次握手：由浏览器发送，告诉服务器，我马上就发了，准备接受吧

###4. HTTP报文

  • 请求报文：所有经过传输协议，客户端传递给服务器的内容，都被称为请求报文

    • 起始行
    • 请求头（请求首部）
    • 请求主体

  • 响应报文：所有经过传输协议，服务器返回给客户端的内容，都被称为响应报文

    • http状态码
    • 响应头
    • 响应主体

  • HTTP报文：请求报文+响应报文

谷歌浏览器F12=>Network（所有客户端和服务端的交互信息在这里都可以看到）=> 点击某一条信息，在右侧可以看到所有的http报文信息

5.服务器得到并处理请求

  1. 网站的前端和后端都开发好了
  2. 购买服务器（阿里云->(建议独立主机)）
  3. 服务器部署
  1. 把项目资源上传到服务器 FTP
  2. 构建WEB服务器 ( tomcat / appache / iis / nginx / node )

`指定了项目目录;

指定了端口号（我们一般端口号用80/443）=>服务器上除项目需要的环境之外，

其余所有的东西都不要安装（保证绝对安全和端口不被占用等）；

还可以指定默认页，指定错误页、指定支持的资源文件类型等`

相当于创建了一个服务，后期客户端请求过来后，由这个服务负责接收请求，查找对应的资源文件，最后把信息返回给客户端==>‘WEB服务器’

服务器上改东西只能是记事本

  1. 购买域名，并且进行DNS域名解析
  2. 到工信部备案 （基于第三方平台可代理备案）

一般来说： web服务器和数据服务器在同一台服务器的相同服务下（协议、域名、端口都一致），这种是同源策略请求=>AJAX； 但是真实项目中往往两台服务器是分开的，此时是非同源策略请求=>跨域

http状态码

1~5开头，三位数字 1开头：处理中；基本不会见

2开头 ：都是成功

  • 200 ok： 成功
  • 201 Created ：一般应用于告诉服务器创建一个新文件，最后服务器创建成功后的状态码
  • 204 No Content : 对于某些请求（例如：PUT或者DELETE）,服务器不想处理，可以返回空内容，并且用204状态码告知

3开头：常见的

  • 301 Moved Permanently :永久重定向（永久转移）
  • 302 Moved Temporarily :临时转移,很早以前基本上用302来做，但是现在主要是用307来处理这个事情，
  • 307 Temporary Redirection ：临时重定向=> 主要用于：服务器的负载均衡、视频防盗
  • 304 Not Modified ：设置HTTP的协商缓存 （也叫弱缓存）

4开头:(客户端错误)

  • 400 Bad Request ：传递给服务器的参数错误
  • 401 Unauthorized: 无权限访问
  • 402 Not Found:请求地址错误

5开头：服务器错误

  • 500 Internal Server Error:未知的服务器错误 （不知道什么错误，反正就是服务器的错误）
  • 503 Service Unavaianle: 服务器超负荷

6.客户端渲染页面

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

A:浏览器渲染页面的步骤

  • 解析HTML，生成DOM树，解析CSS，生成CSS树
  • 将DOM树和CSS树结合 ，生成渲染树(Render Tree)
  • Layout(回流): 根据生成的渲染树，计算它们在设备视口(viewport)内的确切位置和大小，这个阶段是回流
  • Painting(重绘): 根据渲染树以及回流得到的几何信息，得到节点的绝对像素
  • Display:将像素发送给GPU，展示在页面上

B:DOM的重绘和回流

  • 重绘Repaint ：元素样式的改变（但宽高、大小、位置等不变）

现代版浏览器都有“渲染队列”机制:

发现某一行要修改元素的样式，不立即渲染，而是看看 下一行，如果下一行也会改变样式，则把修改样式的操作放到“渲染队列中”...一直到不再是修改样式的操作后，整体渲染一次，引发一次回流

  • 回流 Reflow：元素的大小或者位置发生了改变（当页面布局和几何信息发生变化的时候），触发了重新布局，导致渲染数重新计算布局和渲染(非常耗性能)
  • 注意：回流一定会触发重绘，而重绘不一定会回流

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

  • 放弃传统操作DOM的时代，基于vue/react开始数据影响视图模式
  • 分离读写操作（现在的浏览器都有渲染队列的机制）把改变的样式下写获取的用来阻断

防止回流

文档碎片：存储文档的容器

  • 样式集中改变
  • 缓存布局信息
  • 元素批量修改
  • 动画效果应用到position属性为absolute或fixed的元素上（脱离分档流）
  • css3硬件加速（GPU加速） 比起考虑如何减少回流重绘,我们更期望的是,根本不要回流重绘; transform\ opacity \ fiters .. 这些属性会触发硬件加速,不会引发回流和重绘. ..
  • 牺牲平滑渡换取速度
  • 避免table布局和使用css的javascript表达式

7.断开连接（四次挥手）

  • 第一次挥手：由浏览器发起，发送给服务器，我请求报文发送完了，你准备关闭吧；
  • 第二次挥手：由服务器发起，告诉浏览器，我接收完请求报文，我准备关闭，你也准备吧；
  • 第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完毕，你准备关闭吧；
  • 第四次挥手：由浏览器发起，告诉服务器，我响应报文接收完毕，我准备关闭，你也准备吧；

avatar
文章
阅读
粉丝