客户端和服务端信息交互模型

2023-09-21 11:34:17

什么是客户端和服务端？ 客户端：可以向服务器发请求，并接收返回的内容进行处理 服务器端：能够接收客户端请求，并且把相关资源信息返回给客户端的

当用户在地址栏中输入网址，到最后看到页面，中间都经历了什么？ 在这里插入图片描述
后面会详细解析每个步骤干的事

一、URL地址解析

A: URI / URL /URN

URI(Uniform Resource ldentifier/统一资源标志符)
URL(Uniform Resource Locator /统一资源定位符 )
URN(Uniform Resource Name /统一资源名称)

B:一个完整URL的组成部分和实际意义

例如：http://www.zhufengpeixun.cn:80/stu/index.html?from=wx&1x=1#zhenyu

  1. 协议(http://): 传输协议就是，能够把客户端和服务器端通信的信息，进行传输的工具(类似于快递小哥)
  • http 超文本传输协议，除了传递文本，还可以传递媒体资源文件(或者流文件)及XML格式数据
  • https 更加安全的http，一般涉及支付的网站都要采用
  • https协议 (s:ssl 加密传输)
  • ftp 文件传输协议 (一般应用于把本地资源上传到服务器端)

2.域名 (www.zhufengpeixun.cn)

3.端口号（:80） : 端口号的取值范围0~65535，用端口号来区分同一台服务器上的不同项目

  • http默认端口号: 80
  • https默认端口号: 443
  • ftp默认端口号: 21
  • 如果项目采用的就是默认端口号，我们在书写地址的时候，不用加端口号，浏览器在发送请求的时候会帮我们默认给加上
  1. 请求资源路径名称 (/stu/index.htm1)
  • 默认的路径或者名称 (xxx.com/stu/ 不指定资源名，服务器会找默认的资源，一般默认资源名是default.htm1、index.html…当然这些可以在服务器端自己配置)
  • 注意伪URL地址的处理 (URL重写技术是为了增加SEO搜索引擎优化的，动态的网址一般不能被搜索引擎收录，所以我们要把动态网址静态化，此时需要的是重写URL)，例如：https://item.jd.hk/2688449.html => https://item.jd.hk/index.php?id=2688449
  1. 问号传参信息 (?from=wx&1x=1)
  • 客户端想把信息传递给服务器，有很多的方式
  • URL地址问号传参
  • 请求报文传输(请求头和请求主体)也可以不同页面之间的信息交互，例如:从列表到详情
  1. HASH值 (#zhenyu)
  • 也能充当信息传输的方式
  • 锚点定位
  • 基于HASH实现路由管控 (不同的HASH值，展示不同的组件和模块)

C:特殊字符加密和解密

encodeURI / decodeURI
encodeURIComponent / decodeURIComponent
escape /unescape

/*
 * 请求的地址中如果出现非有效UNICODE编码内容，现代版浏览器会默认的进行编码
 *    1. 基于encodeURI编码，我们可以基于decodeURI解码，我们一般用encodeURI编码的是整个URL，这样整个URL中的特殊字符都会自动编译
 *    2. encodeURIComponent/decodeURIComponent它相对于encodeURI来说，不用于给整个URL编码，而是给URL部分信息进行编码（一般都是问号传参的值编码）
 *    客户端和服务器端进行信息传输的时候，如果需要把请求的地址和信息编码，我们则基于以上两种方式处理，服务器端也存在这些方法，这样就可以统一编码解码了
 *    3.客户端还存在一种方式，针对于中文的编码方式 escape/unescape，这种方式一般只应用于客户端页面之间自己的处理，例如：从列表跳转到详情，我们可以把传递的中文信息基于这个编码，详情页获取编码后的信息再解码，再比如我们在客户端种的cookie信息，如果信息是中文，我们也基于这种办法编码...
 */

//=>基于JS实现页面跳转
link.onclick = function () {
	//=>获取当前页面的URL地址
	let url = window.location.href;
	//=>跳转页面
	window.location.href = "http://www.zhufengpeixun.cn/stu/?from=" + encodeURIComponent(url);
	// window.open("http://www.zhufengpeixun.cn/");
}

二、DNS域名解析

DNS服务器：域名解析服务器，在服务器上存储着 域名<=>服务器外网IP 的相关记录

  • 而我们发送请求时候所谓的DNS解析，其实就是根据域名，在DNS服务器上查找到对应服务器的外网IP

DNS优化

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

<head>
	<meta charset="UTF-8">
	<!-- DNS预获取 -->
	<!-- <meta http-equiv="x-dns-prefetch-control" content="on">
	<link rel="dns-prefetch" href="//static.360buyimg.com">
	<link rel="dns-prefetch" href="//misc.360buyimg.com">
	<link rel="dns-prefetch" href="//img10.360buyimg.com">
	<link rel="dns-prefetch" href="//img11.360buyimg.com">
	<link rel="dns-prefetch" href="//img12.360buyimg.com"> -->
</head>

<body>
	
</body>

</html>

三、建立TCP连接（三次握手）

在这里插入图片描述

四、发起HTTP请求

  1. HTTP请求报文
    请求报文：所有经过传输协议，客户端传递给服务器的内容，都被成为请求报文
  • 起始行
  • 请求头（请求首部）
  • 请求主体
  1. 强缓存、协商缓存、数据缓存

缓存位置：

  • Memory Cache : 内存缓存

  • Disk Cache：硬盘缓存

打开网页：查找 disk cache 中是否有匹配，如有则使用，如没有则发送网络请求
普通刷新 (F5)：因TAB没关闭，因此memory cache是可用的，会被优先使用，其次才是disk cache
强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有 Cache-control: no-cache，服务器直接返回 200 和最新内容

强缓存【 Expires / Cache-Control】

浏览器对于强缓存的处理：根据第一次请求资源时返回的响应头来确定的

Expires：缓存过期时间，用来指定资源到期的时间（HTTP/1.0）

Cache-Control：cache-control:
max-age=2592000第一次拿到资源后的2592000秒内（30天），再次发送请求，读取缓存中的信息（HTTP/1.1）

两者同时存在的话，Cache-Control优先级高于Expires

在这里插入图片描述
协商缓存【 Last-Modified / ETag】

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
在这里插入图片描述

数据缓存

在这里插入图片描述

五、服务端处理请求并响应

  1. 响应报文和HTTP报文
    响应报文：所有经过传输协议，服务器返回给客户端的内容，都被成为响应报文
  • HTTP状态码
  • 响应头
  • 响应主体

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

  1. HTTP状态码
    1~5开头，三位数字
  • 200 OK：成功
  • 201 CREATED：一般应用于告诉服务器创建一个新文件，最后服务器创建成功后返回的状态码
  • 204 NO CONTENT：对于某些请求（例如：PUT或者DELETE），服务器不想处理，可以返回空内容，并且用204状态码告知
  • 301 Moved Permanently：永久重定向（永久转移）
  • 302 Moved Temporarily：临时转移，很早以前基本上用302来做，但是现在主要用307来处理这个事情，307的意思就是临时重定向Temporary
    Redirect =>主要用于：服务器的负载均衡等
  • 304 Not Modified：设置HTTP的协商缓存
  • 400 Bad Request：传递给服务器的参数错误
  • 401 Unauthorized：无权限访问
  • 404 Not Found：请求地址错误
  • 500 Internal Server Error：未知服务器错误
  • 503 Service Unavailable：服务器超负荷
    在这里插入图片描述

六、客户端接收响应，并进行渲染

一个需要注意的地方：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">  
	<script>
		let link = document.getElementById('link');
		console.log(link);//null=>拿不到
	</script>
		<!-- 遇到link/img/audio/video等是异步去加载资源信息（浏览器分配一个新的线程去加载，主线程继续向下渲染页面）,如果遇到的是script或者@import，则让主线程去加载资源信息（同步），加载完成信息后，再去继续渲染页面 -->
</head>

<body>
	<button id="link">我是按钮</button>
</body>

</html>

1.浏览器渲染页面的步骤
在这里插入图片描述
2.DOM的重绘和回流
重绘（repaint）：元素样式的改变（但宽高、大小、位置等不变）

  • 如color、visibility、outline、background-color等

回流（reflow）：元素的大小或者位置发生了变化（当页面布局和几何信息发生变化的时候），触发了重新布局，导致渲染树重新计算布局和渲染

【注意】：回流一定会触发重绘，而重绘不一定会回流

3.前端性能优化之：避免DOM的回流
1)放弃传统操作DOM的时代，基于vue、react开始数据影响视图模式

  • mvvm / mvc / dom diff …

2)分离读写操作（现代的浏览器都有渲染队列的机制）

  • offsetTop、offsetWidth、clientTop、clientHeight、scrollTop、getComputedStyle、currentStyle …都会刷新渲染队列

3)样式集中改变

  • div.style.cssText = ‘width:20px;height:20px;’
    +div.className = ‘box’;

4)缓存布局信息

  • div.style.left = div.offsetLeft + 1 + ‘px’;
    div.style.top = div.offsetTop + 1 + ‘px’;
    改为：
    var curLeft = div.offsetLeft ;
    var curTop = div.offsetTop ;
    div.style.left = curLeft + 1 + ‘px’;
    div.style.top = curTop + 1 + ‘px’;

5)元素批量修改

  • 文档碎片：creatDocumentFragment
  • 模板字符串拼接

6)动画效果应用到position属性为absolute或fixed的元素上（脱离文档流）

7)CSS3硬件加速（GPU加速）

  • 比起考虑如何减少回流重绘，我们更期望的是，根本不要回流和重绘：transform、opacity、filters…这些属性会触发硬件加速，不会引发回流和重绘
  • 可能引发的坑：过多使用会占用大量内存，性能消耗严重，有时候会导致字体模糊等

8)牺牲平滑度换取速度

9)避免table布局和使用css的JavaScript表达式

减少DOM的回流：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>减少DOM回流-珠峰培训</title>
	<style>
		.box {
			margin: 20px auto;
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>

<body>
	<div id="box">

	</div>

	<script>
		/* for (let i = 0; i < 10; i++) {
			let span = document.createElement('span');
			span.innerHTML = i;
			box.appendChild(span);
		} */
		/* let str = ``;
		for (let i = 0; i < 10; i++) {
			str += `<span>${i}</span>`;
		}
		box.innerHTML = str; */
		//=>文档碎片：存储文档的容器
		/* let frg = document.createDocumentFragment();
		for (let i = 0; i < 10; i++) {
			let span = document.createElement('span');
			span.innerHTML = i;
			frg.appendChild(span);
		}
		box.appendChild(frg);
		frg = null; */
	</script>


	<script>
		/* 批量设置样式 */
		// box.className = 'box';
		// box.style.cssText = "margin: 20px auto;width: 100px;height: 100px;background: red;";
	</script>

	<script>
		/* DOM操作的读写分离 */
		//=>现代版浏览器都有“渲染队列”机制：发现某一行要修改元素的样式，不立即渲染，而是看看下一行，如果下一行也会改变样式，则把修改样式的操作放到“渲染队列中”...一直到不在是修改样式的操作后，整体渲染一次，引发一次回流
		//=>offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeightscrollTop、scrollLeft、scrollWidth、scrollHeight、getComputedStyle、currentStyle....会刷新渲染队列  

		// box.style.width = '100px';
		// box.style.height = '100px';
		// box.style.background = 'red';
		// box.style.margin = '20px auto';

		// box.style.width = '100px';
		// box.style.height = '100px';
		// box.style.background = 'red';
		// box.style.margin = '20px auto';
		// console.log(box.offsetWidth);
		// console.log(box.offsetHeight);
	</script>
</body>

</html>

七、和服务端断开TPC连接(四次挥手)

在这里插入图片描述

更多推荐

蓝牙核心规范（V5.4）10.7-BLE 入门笔记之L2CAP

1.概述ATT属性用于两个设备，一个扮演客户端的角色，另一个扮演服务器的角色。服务器公开一系列称为属性的复合数据项。这些属性由服务器按索引列表组织在称为属性表的列表中。每个属性包含一个句柄、一个通用唯一标识符（UUID）、一个值和一组权限。句柄是一个唯一的索引值，ATT客户端可以使用该值来引用属性表中的特定条目。UUI

四川百幕晟科技：提升店铺质量方法是什么？

抖店是抖音旗下的移动电子商务平台，为商家提供在线销售和促销的机会。在抖店，经验值是商家评价和信誉的重要指标之一。反映了平台上商户的服务质量和用户满意度。那么，如何查看自己在抖店手机上的体验分数呢？1、如何查看抖店手机的体验分？1、打开抖音APP：首先，商户需要打开抖音手机APP，登录抖音账号。2.进入“我的”页面：在抖

李开复：我家的AI是坠吼的

创新工场董事长、鸿海独立董事李开复，近日出席鸿海股东会暨媒体记者会时表示，人工智能（AI）是人类史上即将面临的最伟大技术革命，未来十年的改变将改写人类历史、重构所有产业，其发展大致可分三阶段，并看好鸿海在当中软硬件整合方面的优势，非常有机会成为AI相关领域顶尖领导者。李开复所提到的AI发展三阶段，第一波是纯软件将大数据

SpringMVC之JSON返回&异常处理机制

目录一.JSON1.1.介绍1.2.SpringMVC之JSON数据返回1.2.1.导入依赖1.2.2.配置spring-mvc.xml1.2.3.@ResponseBody注解使用1.2.4.常用注解二.统一异常处理2.1.为什么要全局异常处理2.2.异常处理思路2.2.异常处理方式一2.3.异常处理方式二2.4.异

驱动开发--汇总

一，【驱动相关概念】1，什么是驱动能够驱使硬件实现特定功能的软件代码根据驱动程序是否依赖于系统内核将驱动分为裸机驱动和系统驱动2，逻辑驱动和系统驱动的区别裸机驱动：编写的驱动代码中没有进行任何内核相关API的调用，开发者自己配置寄存器完成了相关硬件控制的代码编写。裸机驱动不依赖于系统内核，由开发者独立即可完成，但是裸机

【Vue】轻松理解数据代理

hello，我是小索奇，精心制作的Vue教程持续更新哈，想要学习&巩固&避坑就一起学习叭~Object定义配置方法代码引出数据代理，先上代码，后加解释<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>回顾Object.defineproperty方法</tit

Python程序设计实例 ｜ 学生管理数据库系统的开发

本文将通过一个学生管理数据库系统的开发过程来展示如何系统地基于Python实现SQLite数据库编程。以下首先提出数据库系统的基本结构，以及如何通过SQLite逐步达到这些要求并进行常规操作。01、数据表结构该学生管理数据库系统包括4张表：专业表、学生表、课程表和成绩表，用于实现对专业信息、学生信息、课程信息和成绩的综

视频监控系统/安防监控/视频AI智能分析网关：持刀检测算法场景汇总

TSINGSEE青犀AI智能分析网关——持刀检测算法，是一种利用计算机AI分析算法技术来检测和辨别视频中是否存在刀具的算法，用来保障群众安全，维护公共治安，还可以与“人员跌倒”、“人员聚集”、“人员跌倒”等算法结合，制定一体化的安全监管体系，可以应用于各种场景，主要包括以下几个方面：1、公共安全在公共场所，如机场、车站

课程29：.Net Core API限流

🚀前言本文是《.NetCore从零学习搭建权限管理系统》教程专栏的课程（点击链接，跳转到专栏主页，欢迎订阅，持续更新…）专栏介绍：以实战为线索，基于.Net7+REST+Vue、前后端分离，不依赖任何第三方框架，从零一步一步讲解权限管理系统搭建。专栏适用于人群：Web后端开发人员本课程内容：本课程内容：1、API限流

setState是同步还是异步的？

您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~以下内容针对Reactv18以下版本。前言setState到底是同步还是异步？很多人可能面试都被问到过，就好比这道代码输出题：constructor(props){super(props);this.state={data:'data'}

使用CFimagehost源码搭建免费的PHP图片托管私人图床，无需数据库支持

文章目录1.前言2.CFImagehost网站搭建2.1CFImagehost下载和安装2.2CFImagehost网页测试2.3cpolar的安装和注册3.本地网页发布3.1Cpolar临时数据隧道3.2Cpolar稳定隧道（云端设置）3.3.Cpolar稳定隧道（本地设置）4.公网访问测试5.结语1.前言图片服务器

热文推荐
  1. 云服务部署：AWS、Azure和GCP比较

    🌷🍁博主猫头虎（🐅🐾）带您GotoNewWorld✨🍁🦄博客首页——🐅🐾猫头虎的博客🎐🐳《面试题大全专栏》🦕文章图文并茂🦖生动形象🐅简单易学！欢迎大家来踩踩~🌺🌊《IDEA开发秘籍专栏》🐾学会IDEA常用操作，工作效率翻倍~💐🌊《100天精通Golang(基础入门篇）》🐅学会Gol

  2. 【腾讯云 Cloud Studio 实战训练营】提升开发效率与协作：探索腾讯云 Cloud Studio 的强大功能与优势

    文章目录一、前言二、认识腾讯云CloudStudio2.1什么是云端开发环境2.2CDE的特点与优点2.2.1提高效率，开发环境一键运行2.2.2提高生产力，可以并行的工作2.2.3开发更加规范2.2.4提供监管，降低资本与资源2.3云端开发环境具备的四大要素2.4腾讯云CloudStudio强大的AI功能2.4.1与

  3. tauri vue vite elemrntui

    tauri+vue+viterust```根据https://www.rust-lang.org/tools/install，安装rust。如果是windows会跳出vs工具的安装器，会自动勾选要安装的，直接点安装即可执行cargo--version检查安装是否完成，可以使用cargo创建一个hello项目验证rust

  4. OpenCV中的HoughLines函数和HoughLinesP函数到底有什么区别？

    一、简述基于OpenCV进行直线检测可以使用HoughLines和HoughLinesP函数完成的。这两个函数之间的唯一区别在于，第一个函数使用标准霍夫变换，第二个函数使用概率霍夫变换（因此名称为P）。概率版本之所以如此，是因为它仅分析点的子集并估计这些点都属于同一条线的概率。此实现是标准霍夫变换的优化版本，在这种情况

  5. Go语言实践案例之简单字典

    一、程序要实现效果：在命令行调用程序的时候，可以在命令行的后面查询一个单词，然后会输出单词的音标和注释。二、思路分析：定义一个结构体DictRequest，用于表示翻译请求的数据结构。其中包含了TransType（翻译类型）、Source（源语言单词）、UserID（用户ID）等字段。定义一个结构体DictRespon

  6. GO编程实践：如何高效使用变量

    GO语言是一种强类型、静态编译的编程语言，它具有简洁的语法和强大的并发支持。在GO语言中，变量的定义和使用是非常重要的基本概念之一。下面是关于如何在GO语言中定义变量的详细说明，使用Markdown格式呈现：GO语言变量定义在GO语言中，变量的定义涉及到两个关键步骤：声明和初始化。首先，我们需要声明变量的类型，然后可以

  7. MyBatis核心配置文件解析: 一步步深入理解mybatis-config.xml

    😀前言在进行MyBatis项目开发时，合理和高效的配置是确保项目顺利进行的基础。其中，mybatis-config.xml配置文件扮演着极其重要的角色，它包含了MyBatis运行时的各种必要配置信息，如数据库连接属性、事务管理器配置、别名配置等。.提供了一份详细的mybatis-config.xml配置文件解析，一步

  8. Go语言开发环境搭建指南：快速上手构建高效的Go开发环境

    Go官网：https://go.dev/dl/Go语言中文网：https://studygolang.com/dl下载Go的语言包进入官方网站Go官网或Go语言中文网：选择下载对应操作系统的安装包：等待下载完成：安装Go的语言包双击运行上一步下载好的Go语言包，点击【Next】：勾选【Iacceptthetermsin

  9. 深入了解接口测试：方法、工具和关键考虑因素（一）

    接口测试是软件测试中的一项重要工作，它涉及到系统与系统之间的交互点。接口可以是外部接口，也可以是内部接口，包括上层服务与下层服务接口以及同级接口。在接口测试中，我们需要确保接口能够按照预期的方式进行通信和交互，并且能够正确处理输入和输出数据。什么是接口？接口是具有特定输入和输出的一套逻辑处理单元，它不需要了解内部的实现