Skip to main content

· 2 min read
Lvxl

防抖

连续触发事件但是在设定的一段时间内中 只执行最后一次 场景:

  • 搜索框输入
  • 文本编辑器实时保存
function debounce(fn,wait = 2000, open=true) {
let timer;
let isUse = false;
return function(...arg) {
if (timer) {
clearInterval(timer)
}
if (open && !isUse) {
fn.call(this,...arg)
isUse = true
}
timer = setTimeout(() => {
fn.call(this,...arg)
}, wait);
}
}

节流

连续触发事件但是在设定的一段时间内 只执行一次 场景:

  • 高频事件 快速点击, 鼠标滑动, resize事件, scroll事件
  • 下拉加载
function throttle(fn, wait=200) {
let now = Date.now()
return function(...arg) {
let curtime = Date.now()
if(curtime - now > wait) {
fn.call(this,...arg)
now = Date.now()
}
}
}

call,apply,bind

改变this指向

// call
// obj.say._call(a, 'xxx')
// this谁调用指向谁 => target[symbolkey] = this
// this = f() say
Function.prototype._call = function(target, ...args) {
target = target || window
const symbolKey = Symbol()
target[symbolKey] = this
const res = target[symbolKey](...args)
delete target[symbolKey]
return res
}

Function.prototype._apply = function(target, args) {
target = target || window
let symbolkey = Symbol()
target[symbolkey] = this
const res = target[symbolkey](...args)
delete target[symbolkey]
return res
}

Function.prototype._bind = function(target, ...args) {
target = target || {}
const symbolkey = Symbol()
target[symbolkey] = this
return function (...outerArgs) {
const res = target[symbolkey](...args,...outerArgs)
return res
}
}

· 16 min read
Lvxl

超文本传输协议(Hyper Text Transfer Protocol,HTTP)是一个简单的请求-响应协议,它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出;而消息内容则具有一个类似MIME的格式

http1.0

HTTP1.0最早在网页中使用是在1996年,那个时候只是使用一些较为简单的网页上和网络请求上,是一种无状态、无连接的应用层协议,几年后被HTTP1.1代替并广泛使用

http1.1

  1. http1.1基于文本解析,把所有请求和响应作为纯文本
  2. http1.1加入了缓存处理 (强缓存和协商缓存)
  3. http1.1拥有长连接,并支持请求管道化(pipelining),(允许客户端不用等到服务器的响应就能发送下一个请求)
  4. http1.1流控制基于tcp连接。当连接建立时,两端通过系统默认机制建立缓冲区。并通过ack报文来通知对方接收窗口大小,因为http1.1 依靠传输层来避免流溢出,每个tcp连接需要一个独立的流控制机制

缺点: HTTP队头阻塞 HTTP1.1增加了管线化技术,允许客户端不用等到服务器的响应就能发送下一个请求。目的为了在一次TCP连接上可以并行发送多个请求,来提高网络利用率。但是它有一个很大的缺点,服务器必须按照请求的顺序来响应。即后续请求的响应必须等到第一个响应发送之后才能发送,即使后续响应已经完成。这就是HTTP队头阻塞的来由。

http2的新特性

  1. 头部压缩
    • http.1.1 之前 请求体 一般会有响应的压缩编码过程, 通过Content-Encoding 头部字段来指定, 但是有没有想过头部字段本身的压缩呢?
    • http2 针对头部字段也采用了对应的压缩算法 HPACK, 对请求头进行压缩
    • hpack 首先在服务器与客户端之间建立哈希表, 将要用的字段存放在这张表中,那么在传输的时候对于之前出现过的值,只需要把索引(比如0,1,2,...)传给对方即可,对方拿到索引查表就行了。这种传索引的方式,可以说让请求头字段得到极大程度的精简和复用
  2. 多路复用
    • 先了解http1.1队头阻塞
    • HTTP/2 复用TCP连接,在一个连接里,客户端和浏览器都可以同时发送多个请求或回应,而且不用按照顺序一一对应,这样就避免出现阻塞现象。
  3. 二进制分帧
    • http2采用二进制格式传输数据, 帧是HTTP2通信中最小单位信息
    • 每个数据流都以消息的形式发送,而消息又由一个或多个帧组成。多个帧之间可以乱序发送,根据帧首部的流标识可以重新组装,这也是多路复用同时发送数据的实现条件

http2快在哪里? 哪个阶段快了?

快在了多路复用阶段, http1 同域名下对多并发6条, 而且每个都是阻塞的(前面的处理完了, 才会处理后面的) http2只需要一个tcp连接, 没有阻塞, 可以并发100个请求 (可能是浏览器限制 ,并不是无限的)

https 与 http 区别

http缓存

浏览器缓存能优化性能,而浏览器缓存分为强缓存和协商缓存,都是从客户端读取缓存

强缓存:

状态码: 200
  • cache-control: 响应头表示资源是否可以被缓存, 以及缓存有效期,可以通过 max-age 字段设置过期时间,cache-control: max-age=7776000 另外 cache-control 还可以设置private/no-cache 等字段

    • public:资源客户端和服务器都可以缓存。
    • privite:资源只有客户端可以缓存。
    • no-cache:客户端缓存资源,但是是否缓存需要经过协商缓存来验证。
    • no-store:不使用缓存。
    • max-age:缓存保质期。
  • expires: 过期时间 expires: Tue, 18 Apr 2023 06:29:41 GMT 表示缓存将在这个时 间后过期, 如果服务器时间与本地日期不一致, 缓存时间就会出错

协商缓存:

状态码: 304

协商缓存就是强缓存失效后,浏览器携带缓存标识向服务器发送请求,由服务器根据缓存标识来决定是否使用缓存的过程

  • Last-Modified是服务器响应请求时,返回该资源文件在服务器最后被修改的时间。
  • If-Modified-Since: 则是客户端再次发起该请求时,携带上次请求返回的Last-Modified值,通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求,发现请求头含有If-Modified-Since字段,则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比,若服务器的资源最后被修改时间大于If-Modified-Since的字段值,则重新返回资源,状态码为200;否则则返回304,代表资源无更新,可继续使用缓存文件。
  • Etag是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成)。
  • If-None-Match是客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后,发现该请求头中含有If-None-Match,则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200。
  • Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since,同时存在则只有Etag / If-None-Match生效。

get & post 区别

  • 最直观的区别就是get把参数包含在url中, post通过request body传递参数
  • get在浏览器回退时是无害的, 而post会再次提交请求
  • get请求会被浏览器主动缓存, 而post不会, 除非手动设置
  • get请求只能进行url编码, 而post支持多种编码方式
  • get请求在url中传递的参数长度是有限制的, 而post没有
  • 对参数的数据类型, get只接受ASCII(阿斯克码)字符, 而post没有限制
  • get对比post更不安全, 因为参数直接暴露在url上, 所以不能用来传递敏感信息

本质区别 get产生一个tcp数据包, post产生两个tcp数据包

get: 浏览器会把http header和data一并发送出去, 服务器响应200 (返回数据)

post: 浏览器先发送header, 服务器响应100 continue, 浏览器再发送data, 服务器响应200

Http状态码

  1. 1** 信表示临时响应并需要请求者继续执行操作的状态代码。
    • 100 (继续) 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。
    • 101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。
  2. 2** 表示成功处理了请求的状态代码。
    • 200 (成功) 服务器已成功处理了请求。通常,这表示服务器提供了请求的网页。
    • 201 (已创建) 请求成功并且服务器创建了新的资源。
    • 202 (已接受) 服务器已接受请求,但尚未处理。
    • 203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。
    • 204 (无内容) 服务器成功处理了请求,但没有返回任何内容。
    • 205 (重置内容) 服务器成功处理了请求,但没有返回任何内容。
    • 206 (部分内容) 服务器成功处理了部分 GET 请求。
  3. 3** 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。
    • 300 (多种选择) 针对请求,服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。
    • 301 (永久移动) 请求的网页已永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。
    • 302 (临时移动) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
    • 303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
    • 304 (未修改) 自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。
    • 305 (使用代理) 请求者只能使用代理访问请求的网页。如果服务器返回此响应,还表示请求者应使用代理。
    • 307 (临时重定向) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
  4. 4** 客户端错误, 请求包含语法错误或无法完成请求
    • 400 (错误请求) 服务器不理解请求的语法。
    • 401 (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。
    • 403 (禁止) 服务器拒绝请求。
    • 404 (未找到) 服务器找不到请求的网页。
    • 405 (方法禁用) 禁用请求中指定的方法。
    • 406 (不接受) 无法使用请求的内容特性响应请求的网页。
    • 407 (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。
    • 408 (请求超时) 服务器等候请求时发生超时。
    • 409 (冲突) 服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
    • 410 (已删除) 如果请求的资源已永久删除,服务器就会返回此响应。
    • 411 (需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。
    • 412 (未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。
    • 413 (请求实体过大) 服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。
    • 414 (请求的 URI 过长) 请求的 URI(通常为网址)过长,服务器无法处理。
    • 415 (不支持的媒体类型) 请求的格式不受请求页面的支持。
    • 416 (请求范围不符合要求) 如果页面无法提供请求的范围,则服务器会返回此状态代码。
    • 417 (未满足期望值) 服务器未满足"期望"请求标头字段的要求。
  5. 5** 服务器错误, 服务器再处理请求的过程中发生了错误
    • 500 (服务器内部错误) 服务器遇到错误,无法完成请求。
    • 501 (尚未实施) 服务器不具备完成请求的功能。例如,服务器无法识别请求方法时可能会返回此代码。
    • 502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
    • 503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。通常,这只是暂时状态。
    • 504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。
    • 505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。