导航

HTTP 请求方式有哪些

序号	方法	描述
1	GET	请求指定的页面信息，并返回实体主体。
2	HEAD	类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
3	POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
4	PUT	从客户端向服务器传送的数据取代指定的文档的内容。
5	DELETE	请求服务器删除指定的页面。
6	CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
7	OPTIONS	返回服务器针对特定资源所支持的HTTP请求方法
8	TRACE	回显服务器收到的请求，主要用于测试或诊断。

说说HTTP 常见的状态码有哪些，适用场景？

Untitled

一、是什么

HTTP状态码（英语：HTTP Status Code），用以表示网页服务器超文本传输协议响应状态的3位数字代码

它由 RFC 2616规范定义的，并得到 RFC 2518、RFC 2817、RFC 2295、RFC 2774与 RFC 4918等规范扩展

简单来讲，http状态码的作用是服务器告诉客户端当前请求响应的状态，通过状态码就能判断和分析服务器的运行状态

二、分类

状态码第一位数字决定了不同的响应状态，有如下：

1 表示消息
2 表示成功
3 表示重定向
4 表示请求错误
5 表示服务器错误

1xx

代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束

常见的有：

100（客户端继续发送请求，这是临时响应）：这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应
101：服务器根据客户端的请求切换协议，主要用于websocket或http2升级

2xx

代表请求已成功被服务器接收、理解、并接受

常见的有：

200（成功）：请求已成功，请求所希望的响应头或数据体将随此响应返回
201（已创建）：请求成功并且服务器创建了新的资源
202（已创建）：服务器已经接收请求，但尚未处理
203（非授权信息）：服务器已成功处理请求，但返回的信息可能来自另一来源
204（无内容）：服务器成功处理请求，但没有返回任何内容
205（重置内容）：服务器成功处理请求，但没有返回任何内容
206（部分内容）：服务器成功处理了部分请求

3xx

表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向

常见的有：

300（多种选择）：针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择
301（永久移动）：请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置
302（临时移动）：服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求
303（查看其他位置）：请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码
304（协商缓存）：查看浏览器的 if-none-match 和 if-modified-since 和服务器 ETag 和 last-modified 是否一直，一致就返回 304 响应头告知浏览器使用本地缓存
305 （使用代理）：请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理
307 （临时重定向）：服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求

4xx

代表了客户端看起来可能发生了错误，妨碍了服务器的处理

常见的有：

400（错误请求）：服务器不理解请求的语法
401（未授权）：请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403（禁止）：服务器拒绝请求
404（未找到）：服务器找不到请求的网页
405（方法禁用）：禁用请求中指定的方法
406（不接受）：无法使用请求的内容特性响应请求的网页
407（需要代理授权）：此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理
408（请求超时）：服务器等候请求时发生超时

5xx

表示服务器无法完成明显有效的请求。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生

常见的有：

500（服务器内部错误）：服务器遇到错误，无法完成请求
501（尚未实施）：服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码
502（错误网关）：服务器作为网关或代理，从上游服务器收到无效响应
503（服务不可用）：服务器目前无法使用（由于超载或停机维护）
504（网关超时）：服务器作为网关或代理，但是没有及时从上游服务器收到请求
505（HTTP 版本不受支持）：服务器不支持请求中所用的 HTTP 协议版本

三、适用场景

下面给出一些状态码的适用场景：

100：客户端在发送POST数据给服务器前，征询服务器情况，看服务器是否处理POST的数据，如果不处理，客户端则不上传POST数据，如果处理，则POST上传数据。常用于POST大数据传输
206：一般用来做断点续传，或者是视频文件等大文件的加载
301：永久重定向会缓存。新域名替换旧域名，旧的域名不再使用时，用户访问旧域名时用301就重定向到新的域名
302：临时重定向不会缓存，常用于未登陆的用户访问用户中心重定向到登录页面，又或者首页临时跳转到活动页
304：协商缓存，告诉客户端有缓存，直接使用缓存中的数据，返回页面的只有头部信息，是没有内容部分
400：参数有误，请求无法被服务器识别
403：告诉客户端进制访问该站点或者资源，如在外网环境下，然后访问只有内网IP才能访问的时候则返回
404：服务器找不到资源时，或者服务器拒绝请求又不想说明理由时
503：服务器停机维护时，主动用503响应请求或 nginx 设置限速，超过限速，会返回503
504：网关超时

参考文献

⭐ JS 延迟加载的方法有哪些？

<script async src="script.js"></script>：给script标签加async属性，则加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）
<script defer src="script.js"></script>：给script标签加defer属性，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成
动态创建script标签：等到DOMContentLoaded 事件触发时，生成一个script标签，渲染到页面上上
setTimeout 定时器延迟代码执行

⭐ 懒加载与预加载区别

1. 懒加载

什么是懒加载？当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。
为什么要使用懒加载？
- 提升用户体验如果一个长网页,一次性把图片全部加载出来,图片密集度非常之高,数目较大,等待时间之久
- 减少无效资源加载按需要去加载数据,没有进入视口的不需要加载
- 防止并发加载的资源过多,阻塞js的加载影响网站的正常使用
懒加载的原理：
- 页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
- 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；
懒加载的实现步骤：
- 首先，不要将图片地址放到 src 属性中，而是放到自定义属性(data-original)中。
- 页面加载完成后，根据 scrollTop 判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中
- 在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。
懒加载的优点：

2. 预加载

什么是预加载？提前加载图片，当用户需要查看时可直接从本地缓存中渲染
为什么要使用预加载？
实现预加载：

3. 懒加载和预加载的区别

概念：
区别：二者都是提高页面性能的有效方法
意义：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>预加载</title>
  <style>
    .container {
      width: 300px;
    }
  </style>
</head>
<body>
  <div class="container"></div>
  <script>
    let oDiv = document.querySelector('.container'),
        imgArr = [
          "<https://placekitten.com/200/100>",
          "<https://placekitten.com/300/200>",
          "<https://placekitten.com/400/300>",
          "<https://placekitten.com/500/400>",
        ];

    imgArr.forEach(imgSrc => {
      let img = new Image(); 
      img.style.width = "100%";
      img.src = imgSrc;
      img.onload = function() { // 图片加载完后再添加到页面中去
        oDiv.appendChild(img);
      }
    });
  </script>
</body>
</html>

⭐ 监听 ajax 上传进度

//【上传进度调用方法实现】
xhr.upload.onprogress = progressFunction

HTTP 请求方式有哪些

说说HTTP 常见的状态码有哪些，适用场景？

一、是什么

二、分类

1xx

2xx

3xx

4xx

5xx

三、适用场景

参考文献

⭐ JS 延迟加载的方法有哪些？

⭐ 懒加载与预加载区别

1. 懒加载

2. 预加载

3. 懒加载和预加载的区别

⭐ 监听 ajax 上传进度

⭐ 浏览器多标签页之间的通信