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

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

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

一、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连接(四次挥手)

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/138264.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

配置OSPFv3基本功能 华为笔记

配置OSPFv3基本功能 华为笔记

1.1 实验介绍 1.1.1 关于本实验 OSPF协议是为IP协议提供路由功能的路由协议。OSPFv2&#xff08;OSPF版本2&#xff09;是支持IPv4的路由协议&#xff0c;为了让OSPF协议支持IPv6&#xff0c;技术人员开发了OSPFv3&#xff08;OSPF版本3&#xff09;。 无论是OSPFv2还是OSPFv…
阅读更多...
服务器新建FTP文件备份的地址

服务器新建FTP文件备份的地址

步骤1&#xff1a;远程桌面连接 步骤2&#xff1a;输入服务器地址&#xff0c;账号&#xff0c;密码 服务器地址&#xff1a;IP地址 账号&#xff1a;Administrator 密码&#xff1a;123456 步骤3&#xff1a;点击这个一个小人的图标 步骤4&#xff1a;General–>Add–&g…
阅读更多...
R语言进行孟德尔随机化+meta分析（1）---meta分析基础

R语言进行孟德尔随机化+meta分析（1）---meta分析基础

目前不少文章用到了孟德尔随机化meta分析&#xff0c;今天咱们也来介绍一下&#xff0c;孟德尔随机化meta其实主要就是meta分析的过程&#xff0c;提取了孟德尔随机化文章的结果&#xff0c;实质上就是个meta分析&#xff0c;不过多个孟德尔随机化随机化的结果合并更加加强了结…
阅读更多...
【数据链路层】网络基础 -- MAC帧协议与ARP协议

【数据链路层】网络基础 -- MAC帧协议与ARP协议

数据链路层认识以太网以太网帧格式(MAC帧)认识MAC地址对比理解MAC地址和IP地址认识MTUMTU对IP协议的影响MTU对UDP协议的影响MTU对于TCP协议的影响 再谈局域网转发原理&#xff08;基于协议&#xff09;ARP协议ARP协议的作用ARP协议的工作流程ARP数据报的格式 数据链路层 用于两…
阅读更多...
《DevOps实践指南》- 读书笔记（九）

《DevOps实践指南》- 读书笔记（九）

DevOps实践指南 25. 附录附录 1 DevOps 的大融合精益运动敏捷运动Velocity 大会运动敏捷基础设施运动持续交付运动丰田套路运动精益创业运动精益用户体验运动Rugged Computing 运动 附录 2 约束理论和核心的长期冲突附录 3 恶性循环列表附录 4 交接和队列的危害附录 5 工业安全…
阅读更多...
【Java 基础篇】Java并发包详解

【Java 基础篇】Java并发包详解

多线程编程是Java开发中一个重要的方面&#xff0c;它能够提高程序的性能和响应能力。然而&#xff0c;多线程编程也伴随着一系列的挑战&#xff0c;如线程安全、死锁、性能问题等。为了解决这些问题&#xff0c;Java提供了一套强大的并发包。本文将详细介绍Java并发包的各个组…
阅读更多...
基于SpringBoot的在线商城系统设计与实现

基于SpringBoot的在线商城系统设计与实现

目录 前言 一、技术栈 二、系统功能介绍 用户信息管理 商品分类管理 商品信息管理 轮播图管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff…
阅读更多...
http的网站进行访问时候自动跳转至https

http的网站进行访问时候自动跳转至https

通常情况下我们是用的都是http的路径&#xff0c;对于https的使用也很少&#xff0c;但是随着https的普及越来越多的域名访问需要用到https的&#xff0c;这个我们就演示怎么设置在我们对一个http的网站进行访问时候自动跳转至https下。 用到的工具及软件: 系统&#xff1a;wi…
阅读更多...
构建自动化测试环境：使用Docker和Selenium！

构建自动化测试环境：使用Docker和Selenium！

随着软件开发的日益复杂和迭代速度的加快&#xff0c;自动化测试被越来越广泛地应用于软件开发流程中。它能够提高测试效率、减少测试成本&#xff0c;并保证软件质量的稳定性。在构建自动化测试环境方面&#xff0c;Docker 和 Selenium 是两个非常有用的工具。下面将介绍如何使…
阅读更多...
asp.net网站的建立及运行

asp.net网站的建立及运行

点击创建新项目 在输入框中输入asp.net&#xff0c;并选择图中的 点击下一步 点击创建 然后&#xff0c;右键&#xff0c;添加&#xff0c;新建项 选择web窗体 点击添加 点击视图&#xff0c;工具箱 选择一个label&#xff0c;记住这个id 空白处右键&#xff0c;查看代码 添…
阅读更多...
CIIS 2023丨聚焦文档图像处理前沿领域，合合信息AI助力图像处理与内容安全保障

CIIS 2023丨聚焦文档图像处理前沿领域，合合信息AI助力图像处理与内容安全保障

近日&#xff0c;2023第十二届中国智能产业高峰论坛&#xff08;CIIS 2023&#xff09;在江西南昌顺利举行。大会由中国人工智能学会、江西省科学技术厅、南昌市人民政府主办&#xff0c;南昌市科学技术局、中国工程科技发展战略江西研究院承办。本次大会重点关注AI大模型、生成…
阅读更多...
第七天：gec6818开发板QT和Ubuntu中QT安装连接sqlite3数据库驱动环境保姆教程

第七天：gec6818开发板QT和Ubuntu中QT安装连接sqlite3数据库驱动环境保姆教程

sqlite3数据库简介 帮助文档 SQL Programming 大多数关系型数的操作步骤&#xff1a;1&#xff09;连接数据库 多数关系型数据库都是C/S模型 (Client/Server)sqlite3是一个本地的单文件关系型数据库&#xff0c;同样也有“连接”的过程 2&#xff09;操作数据库 作为程序员&am…
阅读更多...
大数据(九)：数据可视化(一)

大数据(九)：数据可视化(一)

专栏介绍 结合自身经验和内部资料总结的Python教程&#xff0c;每天3-5章&#xff0c;最短1个月就能全方位的完成Python的学习并进行实战开发&#xff0c;学完了定能成为大佬&#xff01;加油吧&#xff01;卷起来&#xff01; 全部文章请访问专栏&#xff1a;《Python全栈教…
阅读更多...
Vue之vue-cli搭建SPA项目

Vue之vue-cli搭建SPA项目

目录 ​编辑 前言 一、vue-cli简介 1. 什么是vue-cli 2. vue-cli的重要性 3. vue-cli的应用场景 二、Vue-cli搭建SPA项目 1. 构建前提&#xff08;node.js安装完成&#xff09; 2. 安装vue-cli 3. 使用脚手架vue-cli(2.X版)来构建项目 4. 分析创建spa项目的八个问题 …
阅读更多...
Android：创建jniLibs的步骤

Android：创建jniLibs的步骤

一、前言&#xff1a; android libs&#xff0c;jniLibs库的基本使用 libs&#xff0c;jniLibs用来存放各种.so库文件。如果没有jniLibs目录需要自己手动创建&#xff0c;并且库名称也不能随便更改。 二、解决方案&#xff1a; 我之前弄了好久也弄不出来&#xff0c;之前有说…
阅读更多...
学习记忆——宫殿篇——记忆宫殿——记忆桩——工人宿舍

学习记忆——宫殿篇——记忆宫殿——记忆桩——工人宿舍

脸盆铁盒白色泡沫绳子电热炉 6. 椅子 7. 门帘 8. 塑料 9. 书 10.安全帽 11. 凳子 暖壶烟灰缸计算器水杯刷子
阅读更多...
selenium+python实现基本自动化测试

selenium+python实现基本自动化测试

安装selenium 打开命令控制符输入&#xff1a;pip install -U selenium 火狐浏览器安装firebug&#xff1a;www.firebug.com&#xff0c;调试所有网站语言&#xff0c;调试功能 Selenium IDE 是嵌入到Firefox 浏览器中的一个插件&#xff0c;实现简单的浏览器操 作的录制与回…
阅读更多...
会C++还需要再去学Python吗？

会C++还需要再去学Python吗？

提到的C、数据结构与算法、操作系统、计算机网络和数据库技术等确实是计算机科学中非常重要的基础知识领域&#xff0c;对于软件开发和计算机工程师来说&#xff0c;它们是必备的核心知识。掌握这些知识对于开发高性能、可靠和安全的应用程序非常重要。Python作为一种脚本语言&…
阅读更多...
【每日一题】74. 搜索二维矩阵

【每日一题】74. 搜索二维矩阵

74. 搜索二维矩阵 - 力扣&#xff08;LeetCode&#xff09; 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非递减顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返…
阅读更多...
格式工厂多个图片合并成一个PDF的报错

格式工厂多个图片合并成一个PDF的报错

使用图片合并PDF功能时 当图片数量超过50会报错 找到imgconv.py文件&#xff0c;将50改为500&#xff0c;保存 现在可以支持100张图合并成一个PDF文件了&#xff01; 但是超过150张程序会直接闪退&#xff0c;正在解决中。。 【补充说明】 1.如何设置PDF压缩比&#xff1f;…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023