http笔记

最新推荐文章于 2023-08-09 10:10:10 发布
最新推荐文章于 2023-08-09 10:10:10 发布
阅读量701 收藏
点赞数
文章标签： http 网络 tcp/ip
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46274553/article/details/125774731
版权

tcp的长连接短连接

长连接

TCP连接上可以发送多个数据包，并且在没有数据包发送时，需要双方发送检测包以维持连接。

tcp有保活功能。主要给服务器提供的，如果客户端消失，服务器会保留一个半开放的连接，来等待客户端的数据。

如果2小时内没动作，服务器会向客户端发送一个探测报文段，检测客户端的情况。

1、如果客户端正常，则会在两小时后再检测。

2、客户端崩溃，服务器会发送10个检测，间隔75秒，如果没有收到响应，那就断开连接。

3、客户端崩溃并已经重新启动，服务器收到一个对其保活探测的响应，是一个复位，使得服务器终止这个连接。

4、客户端正常，服务器不可达，与2类似

短连接

数据发送完成后，断开连接。

tcp三次握手 四次挥手

https://www.cnblogs.com/onesea/p/13053697.html

三次握手：
“喂，你听得到吗？”
“我听得到呀，你听得到我吗？”
“我能听到你，今天 balabala……”

三次握手： 就是建立客户端和服务端之间的连接

三次握手的目的是连接服务器指定端口，建立 TCP 连接，并同步连接双方的序列号和确认号，交换 TCP 窗口大小信息。

SYN同步位：发送连接，SYN置1

seq序列号：TCP通信过程中某一个传输方向上的字节流的每个字节的序号，通过这个来确认发送的数据有序，比如现在序列号为1000，发送了1000，下一个序列号就是2000。如果是900，那就会出错。

ACK确认位：对发送过来的信息表示确认

ack确认号：TCP对上一次seq序号做出的确认号，用来响应TCP在这里插入图片描述
报文段，给收到的TCP报文段的序号seq加1。

在这里插入图片描述

  • 第一次握手：
    客户端将TCP报文标志位SYN置为1，随机产生一个序号值seq=J，保存在TCP首部的序列号(Sequence Number)字段里，指明客户端打算连接的服务器的端口，并将该数据包发送给服务器端，发送完毕后，客户端进入SYN_SENT状态，等待服务器端确认。
  • 第二次握手：
    服务器端收到数据包后由标志位SYN=1知道客户端请求建立连接，服务器端将TCP报文标志位SYN和ACK都置为1，ack=J+1，随机产生一个序号值seq=K，并将该数据包发送给客户端以确认连接请求，服务器端进入SYN_RCVD状态。
  • 第三次握手：
    客户端收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给服务器端，服务器端检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，客户端和服务器端进入ESTABLISHED状态，完成三次握手，随后客户端与服务器端之间可以开始传输数据了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3txPFLGb-1657724931953)(%E5%9B%BE%E7%89%87/http%E7%BD%91%E7%BB%9C/close.png)]

挥手请求可以是Client端，也可以是Server端发起的，我们假设是Client端发起：

  • 第一次挥手： Client端发起挥手请求，向Server端发送标志位是FIN报文段，设置序列号seq，此时，Client端进入FIN_WAIT_1状态，这表示Client端没有数据要发送给Server端了。
  • 第二次分手：Server端收到了Client端发送的FIN报文段，向Client端返回一个标志位是ACK的报文段，ack设为seq加1，Client端进入FIN_WAIT_2状态，Server端告诉Client端，我确认并同意你的关闭请求。
  • 第三次分手： Server端向Client端发送标志位是FIN的报文段，请求关闭连接，同时Client端进入LAST_ACK状态。
  • 第四次分手 ： Client端收到Server端发送的FIN报文段，向Server端发送标志位是ACK的报文段，然后Client端进入TIME_WAIT状态。Server端收到Client端的ACK报文段以后，就关闭连接。此时，Client端等待2MSL的时间后依然没有收到回复，则证明Server端已正常关闭，那好，Client端也可以关闭连接了。

HTTP1和2

https://www.cnblogs.com/gxw123/p/13288957.html?utm_source=tuicool

  1. Http1.x
    缺陷：线程阻塞，在同一时间，同一域名的请求有一定数量限制，超过限制数目的请求会被阻塞。

  2. Http1.0(短连接)
    缺陷：浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个TCP连接（TCP连接的新建成本很高，因为需要客户端和服务器三次握手），服务器完成请求处理后立即断开TCP连接，服务器不跟踪每个客户也不记录过去的请求；

最大区别：

1、http1虽然实现了tcp持久连接，但是数据通信是按次序进行的，如果前面请求慢，就会导致‘队头堵塞’； http2则是完全多路复用，而非有序并阻塞的、只需一个连接即可实现并行； 只实现浏览器了线头阻塞，没有解决TCP队头阻塞

2、http2采用二进制格式而非文本格式；

HTTP/1.1 版的头信息肯定是文本（ASCII编码），数据体可以是文本，也可以是二进制。HTTP/2 则是一个彻底的二进制协议，头信息和数据体都是二进制，并且统称为”帧”：头信息帧和数据帧。
二进制协议解析起来更高效、“线上”更紧凑，更重要的是错误更少。

3、报头压缩

对于相同的头部，不必再通过请求发送，只需发送一次；
HTTP/2 对这一点做了优化，引入了头信息压缩机制；
一方面，头信息使用gzip或compress压缩后再发送；
另一方面，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，产生一个索引号，之后就不发送同样字段了，只需发送索引号。

4、服务器推送

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS.

Https

  • HTTPS协议需要到CA申请证书，一般免费证书很少，需要交费。
  • HTTP协议运行在TCP之上，所有传输的内容都是明文，HTTPS运行在SSL/TLS之上，SSL/TLS运行在TCP之上，所有传输的内容都经过加密的。
  • HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
  • HTTPS可以有效的防止运营商劫持，解决了防劫持的一个大问题。

https://zhuanlan.zhihu.com/p/22142170

一：公钥：存钱罐

私钥：存钱罐钥匙

对称密钥：双方共享的钥匙

二、中间人捣乱： 把存钱罐掉包，这样拿到了真的存钱罐，也拿到了客户端还给中间人的有数据的假存钱罐

三、CA数字签名认证：在存钱罐上签名，防止掉包。做法：服务器把存钱罐给CA签个名，然后给客户端，中间人没办法掉包

所以综合以上三点：非对称加密算法（公钥和私钥）交换对称密钥+数字证书验证身份（验证公钥是否是伪造的）+利用对称密钥加解密后续传输的数据=安全

在这里插入图片描述

在这里插入图片描述

对称加密又分为两种模式：流加密和分组加密

HTTP请求码及其作用

HTTP状态码：当用户访问一个网页时，浏览器会向网页所在的服务器出请求，当浏览器接收并显示网页前，此网页所在服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求，HTTP状态码用于描述服务器对请求的处理结果。

HTTP状态码分类：

（1）1**：信息，服务器收到请求，需要请求者继续执行操作

（2）2**：成功，操作被成功接收并处理

（3）3**：重定向，需要进一步的操作以完成请求

（4）4**：客户端错误，请求包含语法错误或者无法完成请求

（5）5**：服务器错误，服务器在处理请求的过程中发生了错误

常见的HTTP状态码：

200——OK，请求成功
301——Moved Permanently，资源（网页等）被永久转移到其他URL
302——Found，307——Temporary Redirect，临时重定向，请求的文档被临时移动到别处
304——Not Modified，未修改，表示客户端缓存的版本是最近的
401——Unauthorized，请求要求用户的身份认证
403——Forbidden，禁止，服务器理解客户端请求，但是拒绝处理此请求，通常是权限设置所致
404——Not Found，请求的资源（网页等）不存在
500——Internal Server Error——内部服务器错误
502——Bad Gateway，充当网关或代理的服务器从远端服务器接收到了一个无效的请求
504——Gateway Time-out，充当网关或代理的服务器，未及时从远端服务器获取请求

HTTP方法

https://blog.csdn.net/vikeyyyy/article/details/80655115

1、get(): 通常用于请求服务器发送某个资源。

2、head(): HEAD方法和GET方法的行为很类似，但是服务器在响应中只返回首部，不会返回实体的主体部分。这就允许客户端在未获取实际资源的情况下，对资源的首部进行检查。

3、put(): 向服务器写入文档,用来改数据

4、post() : 和get一样很常见，向服务器提交资源让服务器处理，比如提交表单、上传文件等，可能导致建立新的资源或者对原有资源的修改。提交的资源放在请求体中。不支持快取。非幂等

5、delete(): 请求服务器删除某资源。和put都具有破坏性，可能被防火墙拦截。如果是https协议，则无需担心

6、connect(): HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。就是把服务器作为跳板，去访问其他网页然后把数据返回回来，连接成功后，就可以正常的get、post了。

7、options(): 获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检等。

8、trace(): 回显服务器收到的请求，主要用于测试或诊断。一般禁用，防止被恶意攻击或盗取信息。

get和post区别

https://www.cnblogs.com/phpper/p/9127553.html

功能不同

参数存放不同

长度不同

安全不同

浏览器回退无害、重新提交表单

数据类型ascll字符、无限制

只能url编码，支持多种编码

产生一个tcp数据包，两个数据包（长的说：

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。）

两次包的TCP在验证数据包完整性上，有非常大的优点。

并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

put和post区别

PUT和POS都有更改指定URI的语义.但PUT被定义为idempotent的方法，POST则不是.idempotent的方法:如果一个方法重复执行

多次，产生的效果是一样的，那就是idempotent的。也就是说：

PUT请求：如果两个请求相同，后一个请求会把第一个请求覆盖掉。（所以PUT用来改资源）

Post请求：后一个请求不会把第一个请求覆盖掉。（所以Post用来增资源）

reflow（重排，回流）和repaint（重绘）

reflow：浏览器要花时间去渲染，当它发现了某个部分发生了变化并且影响了布局，就需要倒回去重新渲染

repaint：如果只是改变了某个元素的背景颜色或文字颜色等，不影响元素周围或内部布局，就只会引起浏览器的repaint，重画其中一部分。

reflow比repaint更花费时间，也就更影响性能，所以在写代码时应尽量避免过多的reflow。

从输入url到页面加载完成发生了什么

1、输入url按下回车

2、浏览器查找当前url是否存在缓存，缓存是否过期，过期则需要向服务器发送请求（请求在后面发起

3、DNS解析url对应的ip

dns解析是一个递归查找的过程。具体步骤如下（以www.google.com为例）：
1）首先在本地域名服务器中查找ip地址
2）没有找到则本地域名服务器向根域名服务器发送请求
3）如果还是没有找到，但判断该域名属于“com”域，则本地域名服务器向com顶级域名服务器发送请求
4）如果com顶级域名服务器没有找到该域名，但判定这个域名属于“google.com”域，则本地域名服务器会向google.com域名服务器发送一个请求，以此类推
5）直到本地域名服务器得到域名对应的ip地址，并将其缓存在本地
6）综上，网址的解析过程为.->.com->google.com->www.google.com.。

4、根据ip建立tcp连接（三次握手

客户端发syn包给服务端，等待服务器确认（syn:同步序列编号（Synchronize Sequence Numbers））
服务端发syn+ack包给客户端
客户端发确认包ack给服务端

5、http发起请求

6、服务器处理请求，浏览器接受http响应

7、浏览器解析HTML代码，并请求HTML代码中的资源

8、渲染页面

9、关闭tcp连接（四次挥手

中断连接端可以是Client端，也可以是Server端。

关闭主动方发送fin包
被动方发送ack包
被动方关闭连接，发送fin包
主动方发送ack包确认

页面渲染全过程

浏览器加载，解析，渲染页面

解析html 构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 ：

在这里插入图片描述

我们知道浏览器为了体验友好，并不是文档全部都解析才绘制到屏幕上，而是从上至下开始解析html，遇到css 会开启线程下载css；

解析：

1、浏览器会将HTML解析成一个DOM树（Document Object Model 文档对象模型），DOM树的构建过程是一个深度遍历过程，当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点，
2、将CSS解析成CSS规则树（或CSSOM树，CSS Object Model CSS对象模型）；
3、构建：根据DOM树和CSS来构造render树，渲染树不等于DOM树，像header和display：none；这种没有具体内容的东西就不在渲染树中；
4、布局：根据render树，浏览器可以计算出网页中有哪些节点，各节点的CSS以及从属关系，然后可以计算出每个节点在屏幕中的位置；
5、绘制：遍历render树进行绘制页面中的各元素。

spa单页面应用/多页面

https://zhuanlan.zhihu.com/p/79409388

单页面

单页应用：用vue写的项目是单页应用，刷新页面会请求一个HTML文件，切换页面的时候，并不会发起新的请求一个HTML文件，只是页面内容发生了变化

vue.js原理：JS感知URL变化，当URL发生变化后，使用JS动态把当前的页面内容清除掉，再把下一个页面的内容挂载到页面上。此时的路由就不是后端来做了，而是前端来做，判断页面到底显示哪一个组件，再把以前的组件清除掉使用新的组件。就不会每一次跳转都请求HTML文件。

多页面

多页面应用：每次页面跳转，后台都会返回一个新的HTML文档，就是多页面应用。

在以往传统开发的应用（网站）大多都是多页面应用，路由由后端来写。

ssr/csr 服务端 客户端渲染

https://zhuanlan.zhihu.com/p/60975107

SSR(Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。有利于seo

CSR(Client Side Rendering)：是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。

localstorage/sessionstorage

https://www.php.cn/js-tutorial-408919.html

https://www.cnblogs.com/zr123/p/8086525.html

cookie

缺点：cookie限制大小

cookie会每次随http请求一起发送，浪费宽带。

localStorage

特点；可以长期储存数据；需要手动删除数据
​ 在同一域下且同一个浏览器不同窗口页面，操作的是同一 个localStorage

优点：可以大量保存浏览器中数据。不会随http请求一起发送。可以长期存储在浏览器中。

缺点：不同窗口下数据；不能独立，相互干扰。例如：删除或添加一个数据，其它的窗口也会同步删除或者添加该。

sessionStorage

优点：可以大量保存浏览器中数据。

不同窗口下的sessionStorage，存储相互独立；互不干扰。

缺点：当页面关闭后，数据会被清空

indisk

用法

都有四个方法

window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式） // 保存数据，以键值对的方式储存信息。
window.localStorage.getItem(key);//获取指定key的数据  // 获取数据，将键值传入，即可获取到对应的value值。
window.localStorage.removeItem(key);//删除指定key的数据  // 删除单个数据，根据键值移除对应的信息。
window.localStorage.clear();//清空所有的存储数据  // 删除所有的数据

字符串形式

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);
        }

跨域问题

https://www.cnblogs.com/sdcs/p/8484905.html

cors：

就是修改响应头：在服务器上的请求中添加响应头

app2.get('/',(req,res) => {
    res.header("Access-Control-Allow-Origin","*") //*表示可访问任意网页
    res.send("你好")
})

jsonp：

script的src是不受同源策略影响的

将自己在客户端定义的回调函数的函数名传给后端，服务端会返回你定义的函数的方法，并将获取的json数据传入该方法完成回调。

//html
<script>
    function f(data) {
    alert(data)
}
</script>
 <script src="http://local:91?callback=f"></script>  
//拿到f("你好")

//node
app2.get('/',(req,res) => {
    let funcname = req.query.callback;
    res.send(funcname+"("你好")")//将f("你好")作为回调函数返回的数据返回到前端
})

nginx：

实际上浏览器并没有跨域功能，是在服务器中实现跨域的，服务器可以访问任意网页，通过nginx来将指定url来配置不同网页，实现前端的访问。

下载openresty（基于Nginx与 Lua 的高性能 Web 平台）

cmd下启动nginx.exe，我的80端口被占了，在nginx.conf里面改成了81端口

启动另一个cmd nginx.exe -s reload,

出现一个问题，就是刷新页面时会出现下载情况，在server下添加default_type text/html;

1、通过location来匹配路径

在这里插入图片描述

2、用proxy_pass 配置不同url，实现反向代理

在这里插入图片描述

3、负载均衡

功能：同一个url，将请求随机分配到指定的多个网页上去，可以通过weight=10，weight=1 来设置权重。

在这里插入图片描述

cookie、token和session，JWT

token：

发生请求后，服务器对信息和用户的key进行加密，形成字符串{token：字符串}，返回给客户端存放local storage，sessionStorage或者cookie中，再次请求是在请求头中添加 认证信息 Authorization = token ，服务器对JWT进行解码，如果token有效，则处理该请求。

特点：后端生成token，需要查库。每个令牌都是独立的，包括检查其有效性所需的所有数据，并通过声明传达用户信息。

服务器唯一的工作就是在成功的登陆请求上签署token，并验证传入的token是否有效。

在这里插入图片描述

session和cookie：前后端联动

session存在服务器中，内容为：所有访问过客户端的用户信息，通过键值对形式存放；

返回给客户端的是“键” key， 赋值给sessionid = key ，通过cookie携带sessionid到服务器验证

劣势：但是服务器重启时，内存会被销毁，存储的用户信息也就消失了。

在这里插入图片描述

token和jwt存在什么区别：

JWT 概念： JWT是json web token缩写。它将用户信息加密到token里，服务器不保存任何用户信息。所以不需要查库。

两者关系：

JWT就是一个加密的字符串，作为验证信息在计算机之间传递，只有可以访问加密密钥的计算机才能对其进行解密，从而验证携带这个令牌（Token）的请求是否合法。

token需要查库。

https://www.cnblogs.com/yibutian/p/9508018.html

编码问题GBK UTF8 unicode

https://www.cnblogs.com/gavin-num1/p/5170247.html

gbk汉字2字节 utf8汉字3，英文1 ，都有繁体和简体

XSS CSRF 网络安全问题

https://blog.csdn.net/qq_34309704/article/details/79861492

xss是获取信息，不需要提前知道其他用户页面的代码和数据包

csrf是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包

1、基于DOM的跨站点脚本编制（XSS）

注入js脚本，使得服务器运行出现响应的错误

2、跨站点请求伪造（CSRF）

用户访问网站A，浏览器保存用户信息。用户点击网站B，当 Bob 访问该网站时，上述 url 就会从 Bob 的浏览器发向银行，而这个请求会附带 Bob 浏览器中的 cookie 一起发向银行服务器。

CSP（内容安全策略）解决xss：CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。

xss攻击

全资料 https://www.cnblogs.com/tugenhua0707/p/10909284.html

B站视频 https://www.bilibili.com/video/BV1g4411q7G2?spm_id_from=333.999.0.0

借用js代码来实现攻击，在服务端没有对<>进行转译显示的时候发生。导致黑客可以在别人的浏览器上运行任意代码。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IPgRKpUt-1657724931959)(http%E7%BD%91%E7%BB%9C.assets/image-20210917142954271.png)]

提交到服务的时会运行代码，所以需要把内容进行转移，将<>转移转译&lt,&gt`

方法：安装escape插件来转译内容

app.get('/Content', (req,res) => {  //服务端获取数据为转译后的内容
    res.send(escape(content))
})

2、 sql注入

//数据库
{username: '张三', password: 123}

password通过拼接后 ： 
’1‘ or '1' = '1'  //逻辑正确登录成功

//所以需要对sql预编译 
数据库插件一般有预编译命令

x-frame-options

是一个响应头，作用是防止我的页面被>标签引用成功。

'x-frame-options','deny'就是不让任何页面>引用我

csp

与上面相反，作用是防止我引用别的资源

'content-security-polity',"script",'self' https:www.baidu.com

意思是：我只引用我的script资源，还有百度网页

csrf

1、验证HTTP referer子段，记录了该http请求的来源地址。

2、在请求地址中添加token并验证，可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。

浏览器缓存

https://www.jianshu.com/p/9c95db596df5

B站视频：https://www.bilibili.com/video/BV11a4y1H7WF?spm_id_from=333.999.0.0

缓存的优点：

  • 减少了不必要的数据传输，节省带宽
  • 减少服务器的负担，提升网站性能
  • 加快了客户端加载网页的速度
  • 用户体验友好

缓存方式

特点：后三种浏览器自带，且每个过程都有强缓存和协商缓存在里面

在这里插入图片描述

Service Worker自定义缓存，在后台开启一个线程来运行代码

Memory Cache快读、预加载，属于内存缓存。

Disk Cache持久 量大， 硬盘存储，将文件放在指定的硬盘空间中，当做一个内存的后备方案。

缓存过程

在这里插入图片描述

强缓存：

概念： 可以设置缓存时间，时间没有过期就读取数据。

特点：

在一定响应时间内没有获取资源，则认为数据无效，进行协商缓存。

强缓存成功，返回200。

不与服务器交互

协商缓存：

发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是否真的过期–>没过期–>返回304状态码–>客户端用缓存的老资源。

发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是否真的过期–>过期–>返回200状态码–>客户端如第一次接收该资源一样，记下它的cache-control中的max-age、etag、last-modified等。

用户行为

F5刷新（memory cache） ：在内存中找已经缓存的资源，强缓存

地址栏刷新（disk cache）： 先强缓存，后协商

ctrl+F5: 强制刷新，直接跳过强缓存

H5缓存机制

H5的缓存，大概有localstorage、sessionstorage、cookie和manifest。

一、LocalStorage

​ LocalStorage是永久性的本地缓存，存储在客户端的浏览器上，除非主动删除，是不会过期的。LocalStorage采用的是键值对的方式进行存储，存储方式只能是字符串。存储内容可以用图片、json、样式、脚本等。

​ API基本使用方法：

​ 1、localStorage.setItem() 存储

​ 2、localStorage.getItem() 获取数据，其中使用localStorage.valueOf()获取全部数据

​ 3、localStorage.removeItem(key) 删除数据

​ 4、localStorage.clear()清空全部数据，localStorage.length 获取本地存储数据数量

​ 5、localStorage.key(N)获取第N个数据的key键值

二、SessionSotrage

​ SessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且会话结束，窗口关闭后，数据就会消失。是一种会话级别的存储。

​ SessionStorage与localStorage 的使用方法相似

三、cookie

​ cookie与sessionStorage、localStorage还是有很大不同的。

​ 1、cookie数据始终在同源的http请求中携带，cookie在浏览器和服务器端来回传递，而localstorage和sessionstorage不会自动把数据传送给服务器端，仅在本地保存。

​ 2、存储大小限制不同，cookie的存储数据大小要求不能超过4k,每次的http请求都会携带cookie,所以保存的数据需要比较小。sessionstorage和localstorage存储数据大小限制比cookie要大，可以达到5M或者更大，不同浏览器设置可能不同。

​ 3、数据生命周期。cookie的生命周期一般在其设置的过期时间之前有效。而sessionstorage仅在关闭窗口前有效，localstorage持久有效，直到手动删除。

​ 4、作用域不同，sessionstorage不在不同浏览器中共享，即使是同一页面也不支持。而localstorage在所有同源窗口中都是共享的，同样，cookie在所有同源窗口中也是可以共享的。

​ 5、cookie的数据还有路径的概念，可以通过设置限制cookie只属于某个路径

​ 6、webstorage 支持事件通知机制，可以将数据更新的通知发送给监听者。

四、webstorage 的好处

​ 1、减少网络流量：使用webstorage将数据保存在本地中，减少不必要的请求。

​ 2、快速显示数据：从本地获取数据比通过网络从服务器获取数据效率更高，因此网页显示也比较快；

​ 3、临时存储：很多时候数据只需在用户浏览一组页面期间使用，关闭窗口后数据就会丢失，使用sessionstorage 比较方便；

​ 4、不影响网络效能：因为webstorage只作用在客户端的浏览器，不会占用频宽。

五、离线存储

​ H5中添加了离线缓存，通过创建cache mainfest文件，创建应用缓存。

缓存头

https://segmentfault.com/a/1190000013854262

在这里插入图片描述

Expires

http1.0推出的，服务器返回文件有效期

Last-Modified

http1.0， 服务器文件最后修改时间

If-Modified-Since

http1.0，请求头， 服务器发过来的文件最后修改时间， 与服务器的Last-Modified对比，时间一致则返回304，拿取本地缓存。 不一致则返回200和新的文件内容，丢弃旧文件。

注意： 第一次请求时，浏览器是没有If-Modified-Since的，还没有请求过呢

Cache-Control

http1.1， 文件缓存有效期，请求头

http1.1推出，指文件缓存的有效期。
1.max-age:单位是s，设置文件最大缓存时间，用得最多。
2.public:缓存可以被多用户共享，例如360浏览器可以登录不同账号，电脑系统可以切换不同账号。
3.private:仅单用户私有，不被多用户共享。
4.no-cache:不会被缓存。
5.no-store:不允许被存储。

ETag

http1.1推出，该版本号是由服务端随机生成的，浏览器会带上If-None-Match向服务器发送请求，与服务器文件修改版本ETag做对比，如果版本号不同，则获取数据返回200，否则返回304后调用浏览器本地硬盘的缓存，这种方式比Last-Modified靠谱。

rel属性prefetch预加载

https://www.cnblogs.com/suyuwen1/p/5506397.html

​ 在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:
利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.

XML/HTML Code

<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->

图像格式

https://www.cnblogs.com/pqjzxq/p/5749304.html

矢量图： 通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。

我目前的知识池就知道一个图标字体，比如 font-awesome

位图：每一个点的颜色、深度、透明度等信息来存储和显示图像。

jpg,png,gif。这些都是位图。

jpg格式时，会有一个品质选项

PNG是我们最常见的一种采用无损压缩的图片格式。

优化项目

雅虎前端优化的35条军规

https://blog.csdn.net/weixin_43849118/article/details/114199276

内容部分：

1、在书写html的时候做到结构语义化。

a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；

c. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

2、css，js文件数量及大小的优化

尽量合并图片、CSS、JS文件，来减少http的请求。

CSS Sprites：SS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

3、减少DNS的查找

DNS查找数等于页面上不同的主机名数，包括页面URL，图片，脚本文件，样式表，Flash对象等等组件中的主机名，减少不同的主机名就可以减少DNS查找。

CSS部分

1、把样式表放在顶部

2、将css和js放外面：因为JavaScript和CSS文件会被缓存在浏览器。HTML文档中的行内JavaScript和CSS在每次请求该HTML文档的时候都会重新下载。这样做减少了所需的HTTP请求数。

3、压缩JavaScript和CSS

压缩具体来说就是从代码中去除不必要的字符以减少大小，从而提升加载速度。代码最小化就是去掉所有注释和不必要的空白字符（空格，换行和tab）。在JavaScript中这样做能够提高响应性能，因为要下载的文件变小了。 两个最常用的JavaScript代码压缩工具是JSMin和YUI Compressor，YUI compressor还可以压缩CSS。

4、使用Gzip组件来压缩响应

web客户端就有了支持压缩的Accept-Encoding HTTP请求头。

Accept-Encoding: gzip, deflate

如果web服务器看到这个请求头，它就会用客户端列出的一种方式来压缩响应。web服务器通过Content-Encoding相应头来通知客户端。

为了避免用户看到长时间的白屏时间，应尽可能的提高CSS的加载速度

（1）使用CDN（Content Delivery Network，内容分发网络），CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，减少加载时间

（2）对css进行压缩

（3）合理的使用缓存（设置cache-control，expires以及E-tag）

（4）减少http请求数，将多个css文件合并，或者干脆直接写成内联样式（但是内联样式的缺点是不能缓存）

预处理

https://www.jianshu.com/p/e9eda98b9fc9

HTTP头

HTTP头文件由请求头和响应头组成

1、Access-Control-Allow-Origin , cors跨域在服务端请求中添加头文件，设置跨域请求

2、Content-Type以什么类型对内容编码，

Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something

3、Accept内容类型

  • text/html ： HTML格式
  • text/plain ：纯文本格式
  • text/xml ： XML格式
  • image/gif ：gif图片格式
  • image/jpeg ：jpg图片格式
  • image/png：png图片格式

4、Authorization ，HTTP授权的授权证书

axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token') || null
  return config
})

5、Cache-Control，指定请求和响应遵循的缓存机制

http协议原理，没有系统化，打牢！太散。

能力面试。

测试。

Morefree、
关注
读书笔记：图解HTTP笔记.zip
07-25
读书笔记：图解HTTP笔记
读书笔记：书籍图解HTTP 笔记.zip
最新发布
07-25
读书笔记：书籍图解HTTP 笔记
X-Frame-Options简介
顺其自然~专栏
09-13 3992
表示该页面可以在相同域名页面的 frame 中展示。在支持旧版浏览器时，页面可以在指定来源的 frame 中展示。，不光在别人的网站 frame 嵌入时会无法加载，在同域名页面中同样会无法加载。表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。表示该页面不允许在frame中展示，即便是在相同域名的页面中嵌套也不允许。这是一个被弃用的指令，不再适用于现代浏览器，请不要使用它。表示该页面可以在相同域名页面的frame中展示。，那么页面就可以在同域名页面的 frame 中嵌套。
解决使用东方通中间件导致移动端打开表单空白
weixin_42874924的博客
03-17 1082
解决使用东方通中间件导致移动端打开表单空白
TongWeb相关http安全头设置方式
web的博客
12-16 7813
一、X-Frame-Options响应头配置 X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 <frame>, </iframe> 或者 <object> 中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌套到别人的网站中去，也从而避免了点击劫持 (clickjacking) 的攻击。在TongWeb bin目录下external.vmoptions中设置该参数： -Dtongweb.X........
设置X-Frame-Options首部防止点击劫持
l741938507的博客
04-23 527
https://blog.csdn.net/dreamjay1997/article/details/90112877
TongWeb及应用系统安全加固
web的博客
03-31 9252
前言 本文档主要面向运维人员说明常见的TongWeb5、TongWeb6、TongWeb7安全加固的配置方法。 TongWeb配置 一、首先建议TongWeb升级到最新版本，早期版本存在一些代码级安全漏洞，无法通过配置解决。截止2021年1月5日TongWeb最新版本号为7.0.4.2。 二、TongWeb禁用不安全的HTTP方法，可登录控制台，进入“http通道管理”进行设置。 TongWeb5禁用不安全的HTTP方法，需在应用的web.xml中增加如下内容，并重........
HTTP笔记-20181116.pdf
05-14
http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单...
tomcat&http笔记.pdf
04-14
Browser/Server 浏览器/服务器 访问服务器资源不需要专门安装客户端软件,而是直接通过浏览器访问服务器资源. 例如: 天猫、京东、知乎网站 开发者通过web服务器可以把本地==资源==发布到互联网 用户就可以通过浏览器...
HTTP笔记鸭(๑•̀ㅂ•́)و✧
09-30
HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。 HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询...
http安全头配置
zxl1990_ok的博客
07-06 1053
X-Frame-Options X-Frame-Options 响应头是用来给浏览器指示允许一个页面 可否在 <frame>,<iframe>,<embed>或者<object>中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免点击劫持攻击。 功能 防御点击劫持。如果恶意的站点将你的网页嵌入iframe标签中，然后诱使用户在该站点上进行操作，此时用户将在不知情的情况下点击透明的iframe页面，从而诱使用户恰好点击在ifram...
360网站安全提示＂X-Frame-Options头未设置＂怎么解决
热门推荐
QC班长的博客
06-10 2万+
X-Frame-Options 响应头 X-Frame-Options HTTP响应头是用来确认是否浏览器可以在frame或iframe标签中渲染一个页面，网站可以用这个头来保证他们的内容不会被嵌入到其它网站中，以来避免点击劫持。 危害： 攻击者可以使用一个透明的、不可见的iframe，覆盖在目标网页上，然后诱使用户在该网页上进行操作，此时用户将在不知情的情况下点击透明的i
通过 Spring Security配置 解决X-Frame-Options deny 造成的页面空白
一个爱搞技术的C.的博客
12-01 1601
springSecurity下，X-Frame-Options默认为DENY,非Spring Security环境下，X-Frame-Options的默认大多也是DENY，这种情况下，浏览器拒绝当前页面加载任何Frame页面，设置含义如下： DENY：浏览器拒绝当前页面加载任何Frame页面 SAMEORIGIN：frame页面的地址只能为同源域名下的页面 ALLOW-FROM：origin...
HTTP状态码大全(200、404、500等)
记录日常开发的小问题备忘
04-10 4491
用户试图通过 HTTP 或文件传输协议 (FTP) 访问一台正在运行 Internet 信息服务 (IIS) 的服务器上的内容时，IIS 返回一个表示该请求的状态的数字代码。例如，如果试图访问的 ASP 页所在的目录权限设为“无”，或者，试图执行的 CGI 脚本所在的目录权限为“只允许脚本”，将出现此错误信息。若要修改执行权限，请在 Microsoft 管理控制台 (MMC) 中右击目录，然后依次单击属性和目录选项卡，确保为试图访问的内容设置适当的执行权限。很多服务器端的错误都可能导致该错误信息。
web漏洞-缺少X-Frame-Options标头
weixin_52630329的博客
08-09 2598
头可以帮助你保护你的网站免受点击劫持攻击。同时，还可以结合其他安全措施，比如 Content Security Policy（CSP），来进一步提高你的网站的安全性。
使用Iframe时针对X-Frame-Options跨域问题的解决方案-Nginx（亲测有效）
weixin_44588243的博客
04-28 1万+
只需一个配置，轻松解决X-Frame-Options跨域问题 效果展示： 1、存在问题： 2、解决问题 对iframe引入的http://com.ityj.frame/xframe/hello项目，通过nginx过滤掉X-Frame-Options的配置 操作如下： location / { #root html; #index index.html index.htm; proxy_pass http://com.ityj.frame; proxy_hide_header X-Fr
http错误码
sdd220的博客
08-07 853
http://en.wikipedia.org/wiki/List_of_HTTP_status_codes响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。 响应码分五种类型，由它们的第一位数字表示： 1.1xx：信息，请求收到，继续处理 2.2xx：成功，行为被成功地接受、理解和采纳 3.3xx：重定向，为了完成请求，必须进一步执行的动作 4.4xx：客户端错误
HTTP协议 - X-frame-options
frag0910的专栏
06-28 2185
防止某些重要网页被其他网站框架（iframe）导入，可以给页面增加X-Frame-Options响应头，这样浏览器会依据X-Frame-Options的值来控制iframe框架的页面是否允许加载显示出来。 修改web服务器配置，添加X-frame-options响应头。赋值有如下三种： （1）DENY：不能被嵌入到任何iframe或frame中。 （2）SAMEORIGIN：页面只能被本站页面嵌入到iframe或者frame中。 （3）ALLOW-FROM uri：只能被嵌入到指定域名的框架中。 如果不
黑马ajax笔记HTTP
07-30
以下是一些关于HTTP和AJAX的常见笔记内容： 1. HTTP请求方法： - GET：从服务器获取资源。 - POST：向服务器提交数据。 - PUT：在服务器上创建或替换资源。 - DELETE：从服务器删除资源。 2. HTTP状态码： - ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值