当前位置: 首页 > news >正文

从url输入到页面呈现发生了什么

从url输入到页面呈现发生了什么

1.URL解析

encodeURI / decodeURI

对整个URL的编码:处理空格/中文

let url = "http://https://blog.csdn.net/api/ ?lx=1&name=科比&from=http://www.baidu.com/";
console.log(encodeURI(url));

在这里插入图片描述

encodeURIComponent / decodeURLComponent

主要对传递的参数信息编码

let url = `http://https://blog.csdn.net/api/ ?lx=1&name=${encodeURIComponent("科比"
)}&from=${encodeURIComponent("http://www.baidu.com/")}`;console.log(url);

在这里插入图片描述

2.缓存检查

先检测是否存在强缓存

  • 有且未失效 走强缓存
  • 如果没有 或者失效 检测是否有协商缓存
    • 有 走协商缓存
    • 没有 获取最新数据

缓存位置

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

html页面一般不做强缓存

  • 每一次html的请求都是正常的HTTP请求

在这里插入图片描述
在这里插入图片描述

强制缓存有问题
如果服务器文件更新了 但是本地还有缓存
这样不就拿不到最新的信息了吗

  1. 服务器更新资源后 让资源名称和之前不一样 这样页面导入全新的资源index.aaa.js变为index.bbb.js(webpack的hash name)
  2. 当文件更新后 我们在html导入的时候 设置一个后缀 设置一个(时间戳)
  3. 使用协商缓存

协商缓存

Last-Modified / ETag

Last-Modified 只能精确到秒
如果我们在1秒内 完成了资源的返回 和新资源的更新 这样就识别不出来
所以有了ETag

不管你有没有缓存 浏览器都会携带缓存的标识向服务器发请求 由服务器来校验当前资源有没有更新 没更新 返回304 通知客户端读取缓存信息 之后浏览器从本地中获取内容进行渲染 更新过 返回200及最新资源信息 以及Last-Modified / ETag 之后浏览器直接渲染 并且把最新的结果和标识缓存到本地

协商缓存与强缓存的区别:
协商缓存总会和服务器协商 所以一定要发HTTP请求

第一次向服务器发送请求
协商缓存没有
向服务器发送请求(没有传递任何标识)
服务器收到请求准备内容
Last-Modified:资源文件最后更新的时间
ETag:记录的是一个标识(也是根据资源文件更新生成的 每一次资源更新都会重新生成一个ETag)
客户端拿到信息后渲染
把信息和标识缓存到本地

第二次发请求
If-Modified-Since = Last-Modified值
If-None-Match = ETag值
给服务器
服务器根据标识判断文件是否更新

在这里插入图片描述

数据存储
在这里插入图片描述

3.DNS解析

递归查询
在这里插入图片描述
在这里插入图片描述

每一次DNS解析时间预计在20-120毫秒

  • 减少DNS请求次数 (一个页面中尽可能少用不同的域名:资源都放在相同的服务器上【项目中往往会把不同的资源放到不同的服务器上】)
  • DNS预获取(DNS Prefetch)

DNS预获取实现

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//url1地址"/>
<link rel="dns-prefetch" href="//url2地址"/>
<link rel="dns-prefetch" href="//url3地址"/>

服务器拆分优势

  • 资源的合理利用
  • 抗压能力加强
  • 提高HTTP并发

4. TCP三次握手 建立连接通道

seq序号 用来标识从TCP源端向目的端发送的字节流 发起方发送数据时对此进行标记
ack确认序号 只有ACK标志位为1时 确认序号字段才有效 ack=seq + 1
标志位:

  • ACK:确认序号有效
  • RST:重置连接
  • SYN:发起一个新的连接
  • FIN:释放一个连接
    在这里插入图片描述

三次握手为什么不用两次 或 四次
TCP作为一种可靠传输控制协议 其核心思想:既要保证数据可靠传输(两次不行) 又要提高传输的效率(四次不行)

5.数据传输

6.TCP四次挥手

在这里插入图片描述

为什么是四次挥手

原因 第一次挥手的时候发送了FIN包 服务器接收到以后 表示客户端不在发送数据了 但还能接收数据 这时服务器先向客户端发送确认包 并且确认自己是否还有数据没有发送给客户端 这个确认的阶段是CLOSE-WAIT 所以在终止等待(CLOSE-WAIT)的开始和结束都需要个发送一个包 状态开始时向客户端发送的包是确认收到来自客户端的FIN包 状态结束时向客户端发送过的是确认数据已经完整发送 所以是四次挥手

Connection: keep-alive 保证通道建立完成后 可以不关闭
HTTP1.0 需要自己手动设置
HTTP1.1版本后 规范 默认就是这样的

7.页面渲染

相关文章:

从url输入到页面呈现发生了什么

从url输入到页面呈现发生了什么 1.URL解析 encodeURI / decodeURI 对整个URL的编码&#xff1a;处理空格/中文 let url "http://https://blog.csdn.net/api/ ?lx1&name科比&fromhttp://www.baidu.com/"; console.log(encodeURI(url));encodeURICompone…...

vue之--使用TypeScript

搭配 TypeScript 使用 Vue​ 像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误&#xff0c;也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全&#xff0c;TypeScript 还改善了开发体验和效率。…...

HDFD 回收站【Trash】机制

一、回收站 Trash 机制开启 HDFS本身是一个文件系统&#xff0c;默认情况下HDFS不开启回收站&#xff0c;数据删除后将被永久删除 添加并修改两个属性值可开启Trash功能 - (core-site.xml) <property> <name>fs.trash.interval</name> <value>1440&…...

【Redis】简介

简介 Redis是一个开源的内存数据结构存储系统&#xff0c;它支持多种数据结构&#xff08;如字符串、哈希、列表、集合、有序集合&#xff09;以及多种功能&#xff08;如事务、发布/订阅、Lua脚本执行等&#xff09;。Redis还提供了持久化功能&#xff0c;可以将数据存储到磁…...

【Go进阶】Goroutine 实现原理

目录 1、GMP模型 2、Goroutine调度策略 队列轮转 系统调用 工作量窃取...

TypeScript学习笔记之二(高级类型)

文章目录一、TypeScript高级类型1.1 class类1.2 class继承1.3 class类成员可见性1.4 readonly1.5 类型兼容性1.5.1 对象之间的类型兼容性1.5.2 接口之间类型兼容性1.5.3 函数之间类型兼容性1.6 交叉类型1.7 交叉类型(&)和继承(extends)的对比二、泛型2.1 泛型约束--指定更具…...

如何远程控制电脑?您只需要这样做

案例&#xff1a;在外面怎么远程控制电脑&#xff1f; “我学校教室有电脑&#xff0c;但我每次上课的时候还是需要带自己的电脑&#xff08;好重&#xff01;&#xff09;&#xff0c;只因为有些资料只在自己的电脑上。听说远程控制电脑可以解决这个问题&#xff0c;那如何远…...

【51单片机】:LED任务及汇编解释任务

学习目标&#xff1a; 1、用汇编或者c语言实现D1 D3 D5 D7 为一组 &#xff1b;D2 D4 D6 D8 为一组 &#xff0c;两组实现 1&#xff09;一组亮约一秒 另一组灭一秒&#xff0c;这样的互闪现象五次后 25分 2&#xff09;所有灯灭约一秒后&#xff0c; …...

从生活习惯到肠道微生物,揭秘胃肠道癌症的成因

谷禾健康 编辑​ 癌症一直是全球人类关注的重点&#xff0c;近年来癌症的发病率迅速增加&#xff0c;例如乳腺癌、前列腺癌和肺癌非常普遍。胃肠道癌在发病率和死亡率方面位居首位&#xff0c;并造成重大的社会经济负担。 胃肠道癌症包括胃癌、肝癌、食道癌、胰腺癌和结直肠癌等…...

八十行代码实现开源的 Midjourney、Stable Diffusion “咒语”作图工具

本篇文章聊聊如何通过 Docker 和八十行左右的 Python 代码&#xff0c;实现一款类似 Midjourney 官方图片解析功能 Describe 的 Prompt 工具。 让你在玩 Midjourney、Stable Diffusion 这类模型时&#xff0c;不再为生成 Prompt 描述挠头。 写在前面 本文将提供两个版本的工…...

Redis为什么这么快

RedisRedis为什么这么快基于内存单线程实现&#xff08;Redis 6.0 以前&#xff09;IO多路复用模型高效的数据结构Redis为何选择单线程Redis的应用场景Redis怎么实现消息队列Redis的主从复制原理主从复制的原理过期键的删除策略Redis为什么这么快 基于内存 Redis是使用内存存…...

JayDeBeApi对数据类型的支持

JayDeBeApi对数据类型的支持 常用的数据类型如下&#xff1a; 字符类型 内置字符类型包括&#xff1a;char, nchar, varchar, nvarchar 和lvarchar CHARACTER(n) 和 CHARACTER VARYING(n)这样的别名同样支持 参考代码&#xff1a;test_string_type.py create ""&…...

一文盘点 Zebec 生态几大利好,让 ZBC 近期“狂飙”

近期&#xff0c;ZBC通证迎来了新一轮上涨趋势&#xff0c;我们看到其从3月11日左右的低点$0.0115上涨至$0.0175&#xff0c;这也是近期的最大涨幅之一。我们看到&#xff0c;推动ZBC上涨的主要因素&#xff0c;是Zebec生态近期频繁的布局所带来的系列利好推动。 本文将对近期的…...

【数据结构】栈和队列(笔记总结)

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;数据结构 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&…...

【Java】自定义注解和AOP切面的使用

前言 我们在开发的过程中&#xff0c;一般都需要对方法的入参进行打印&#xff0c;或者Debug调试的时候我们要查看方法入参的参数是否数量和数据正确性。 一般我们需要知道请求的参数、接口路径、请求ip等 但是考虑以后项目上线BUG排查的问题&#xff0c;最好的方式就是使用…...

前后台协议联调拦截器

前后台协议联调&拦截器4&#xff0c;前后台协议联调4.1 环境准备4.2 列表功能4.3 添加功能4.4 添加功能状态处理4.5 修改功能4.6 删除功能5&#xff0c;拦截器5.1 拦截器概念5.2 拦截器入门案例5.2.1 环境准备5.2.2 拦截器开发步骤1:创建拦截器类步骤2:配置拦截器类步骤3:S…...

【还在传统绑骨骼动画?】让AI助力你实现2D游戏角色动画流程

思路&#xff08;让3D模型替代动作&#xff09; 一、利用MJ或者SD生成你需要的游戏角色&#xff08;获取原图像&#xff09; 需要的知识&#xff1a; 会调关键词chatGpt&#xff08;看小红书、抖音、B站、Youtube、Telegrame等等都行&#xff0c;别傻忽忽跑到知识星球被收割…...

动态规划+例题

适用场景 题目链接&#xff1a;数字三角形 /*正推DP&#xff0c;可能数据比较小&#xff0c;这个正推不太麻烦可以AC*/ #include<bits/stdc.h> using namespace std; int r; int a[1005][1005],f[1005][1005];int main(){cin>>r;for(int i1;i<r;i){for(int j1…...

快商通荣获多个政府科技、人才奖项

近日&#xff0c;快商通与快商通首席科学家李海洲教授荣获由厦门市科学技术局、厦门市委人才办等多部门发布的“2022年度厦门市科学技术奖”、“2022厦门十大成长性人才企业”、“2022厦门战略性新兴产业十大创新人才”等多个 政府科技、人才奖项 &#xff0c;并进行全网公示。…...

Linux的基本命令的使用

文章目录一、初识LinuxLinux目录结构二、如何拥有一个Linux环境&#xff1f;三、Linux命名Linux命令基础lscd pwd特殊路径符clearmkdirtouch cat morecp mv rmsuwhich findgrep wc 管道符ehco tail 重定向符psnetstatvi vim一、初识Linux 我们的计算机由硬件和软件两部分组成&…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

【工具教程】多个条形码识别用条码内容对图片重命名,批量PDF条形码识别后用条码内容批量改名,使用教程及注意事项

一、条形码识别改名使用教程 打开软件并选择处理模式&#xff1a;打开软件后&#xff0c;根据要处理的文件类型&#xff0c;选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件&#xff0c;就选择 “PDF 识别模式”&#xff1b;若是处理图片文件&…...

Axure Rp 11 安装、汉化、授权

Axure Rp 11 安装、汉化、授权 1、前言2、汉化2.1、汉化文件下载2.2、windows汉化流程2.3、 macOs汉化流程 3、授权 1、前言 Axure Rp 11官方下载链接&#xff1a;https://www.axure.com/downloadthanks 2、汉化 2.1、汉化文件下载 链接: https://pan.baidu.com/s/18Clf…...

Go 语言中的内置运算符

1. 算术运算符 注意&#xff1a; &#xff08;自增&#xff09;和--&#xff08;自减&#xff09;在 Go 语言中是单独的语句&#xff0c;并不是运算符。 package mainimport "fmt"func main() {fmt.Println("103", 103) // 13fmt.Println("10-3…...

5. TypeScript 类型缩小

在 TypeScript 中&#xff0c;类型缩小&#xff08;Narrowing&#xff09;是指根据特定条件将变量的类型细化为更具体的过程。它帮助开发者编写更精确、更准确的代码&#xff0c;确保变量在运行时只以符合其类型的方式进行处理。 一、instanceof 缩小类型 TypeScript 中的 in…...