从在地址栏输入网址到看到页面的过程&&AJAX基础｜脑图梳理

时间 2020-05-30

标签地址输入网址看到页面过程 ajax 基础梳理栏目 Ajax 繁體版

原文原文链接

“不畏惧，不讲究，将来的日子好好努力” ；你们好，我是小芝麻😄javascript

本文脑图较多，方便梳理，适合：前端小白php

今天小芝麻主要想阐述的就是一个问题：css

当用户在地址栏输入了网址，到看到页面中间都经历了什么？

request请求阶段html

一、URL 地址解析

二、DNS 域名解析

三、和服务器创建 TCP 链接

四、发送 HTTP 请求

response 响应阶段前端

五、服务器获得并处理请求

断开链接java

六、和服务器断开 TCP 链接

渲染页面编程

七、客户端渲染服务器返回的内容

下面咱们会详细阐述以上几个方面具体都是啥;json

客户端/服务器端

在开始正题以前，咱们先了解如下，这两个概念；后端

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

具体交互如图：跨域

好的下面进入正题

1、URL 地址解析

前面的文章里写过关于 URL参数处理的问题，那到底什么是URL呢？

一、URL/URN/URI概念区分

URL：全称：Uniform Resource Locator（统一资源定位）
- 定义：统一资源定位符，根据这个地址能找到对应的资源
URN：全称：Uniform Resource Name（统一资源名称）
- 定义：统一资源名称，通常指国际上通用的（标准的）一些名字（例如：国际统一发版的编号）
URI：全称：Uniform Resource Identifier（统一资源标识）
- 定义：统一资源标识符，URL 和 URN 是 URI 的子集

二、URL 地址解析

一个完整的URL所包含的内容

以 www.baidu.cn:80/stu/index.h… 为例

-1）协议：（http://）

定义：传输协议就是，可以把客户端和服务器端通讯的信息，进行传输的工具（相似于快递小哥）
经常使用的传输协议：
- http 超文本传输协议：除了传递文本，还能够传递媒体资源文件（或者流文件）及XML格式数据
- https 更加安全的http：通常涉及支付的网站都要采用https协议（s:ssl 加密传输）
- ftp 文件传输协议：通常应用于把本地资源上传到服务器端

-2）域名：（www.baidu.cn）

给服务器通网后，会有两个 IP 地址：

内网IP：局域网内访问

外网IP：外部用户基于外网IP访问到服务器(例如:125.39.174.200)

定义：就是一个让用户方便记忆的名字（不经过域名，直接用服务器的外网IP也能访问到服务器，可是外网IP很难被记住）
种类：
- 顶级域名：例如 qq.com
- 一级域名: 例如 www.qq.com
- 二级域名: 例如 sports.qq.com
- 三级域名: 例如 kbs.sports.qq.com
- .com 国际域名
- .cn 中文域名
- .com.cn
- .edu 教育
- .gov 政府(千万不要在这种域名下干什么事情哦😄)
- .io 博客
- .org 官方组织
- .net 系统类
- ......

一级、二级、三级...域名都是由顶级域名衍生出来的,因此，公司在注册域名的时候，只要买下顶级域名就能够了，就例如 qq.com ，只须要买下 qq.com 就能够用 www.qq.com、sports.qq.com、kbs.sports.qq.com...等域名了。

-3）端口号：（:80）

定义：用端口号来区分同一台服务器上的不一样项目（端口号的取值范围0~65535）
默认端口号：
- http默认端口号：80
- https默认端口号：443
- ftp默认端口号：21

若是项目采用的就是默认端口号，咱们在书写地址的时候，不用加端口号，浏览器在发送请求的时候会帮咱们默认给加上

-4）请求资源路径名称：（/stu/index.html）

默认的路径或者名称：xxx.com/stu/ 不指定资源名，服务器会找默认的资源，通常默认资源名是default.html、index.html... 固然这些能够在服务器端本身配置
注意伪URL地址的处理：
- 例如：item.jd.hk/2688449.htm… 是一个假的 URL地址
- 浏览器在处理上述地址时，可能会识别为=> item.jd.hk/index.php?i…
伪 URL 的目的：URL重写技术是为了增长SEO搜索引擎优化的，动态的网址通常不能被搜索引擎收录（因此咱们要把动态网址静态化，此时须要的是重写URL）

-5）问号传参信息：（?from=wx&lx=1）

做用：
- 客户端想把信息传递给服务器，有不少的方式（URL地址问号传参）和（请求报文传输（请求头和请求主体））
- 也能够不一样页面之间的信息交互
最主要的目的：通讯 => 信息传输
- 用于客户端和服务端的信息通讯；页面于页面之间的信息通讯

-6）HASH值：（#zhenyu）

做用：
- 也能充当信息传输的方式
- 锚点定位
- 基于HASH实现路由管控（不一样的HASH值，展现不一样的组件和模块）

三、URL 编码

请求的地址中若是出现非有效 UNICODE 编码内容，现代版浏览器会默认的进行编码

编码方式：

一、encodeURI/decodeURI
- 基于encodeURI编码，咱们能够基于decodeURI解码，
- 咱们通常用encodeURI编码的是整个URL，这样整个URL中的特殊字符都会自动编译
二、encodeURIComponent/decodeURIComponent
- 它相对于encodeURI来讲，不用于给整个URL编码，而是给URL部分信息进行编码
- 通常都是问号传参的值编码

客户端和服务器端进行信息传输的时候，若是须要把请求的地址和信息编码，咱们则基于以上两种方式处理，服务器端也存在这些方法，这样就能够统一编码解码了

三、escape/unescape
- 客户端存在的一种方式，针对于中文的编码方式 escape/unescape
- 通常只应用于客户端页面之间本身的处理
例如：从列表跳转到详情，咱们能够把传递的中文信息基于这个编码，详情页获取编码后的信息再解码，再好比咱们在客户端种的cookie信息，若是信息是中文，咱们也基于这种办法编码...

2、DNS 域名解析

DNS服务器：又叫作域名解析服务器，
在这个服务器上存储着域名<=>服务器外网IP 的相关记录

而咱们发送请求时候所谓的DNS解析，其实就是根据域名，在DNS服务器上查找到对应服务器的外网IP

本地解析查找过程：
非本地解析：
DNS优化：

DNS缓存：通常浏览器会在第一次解析后，默认创建缓存，时间很短，只有一分钟左右

减小DNS解析次数：一个网站中咱们须要发送请求的域名和服务器尽量少便可
DNS预获取(dns-prefetch)：在页面加载开始的时候，就把当前页面中须要访问其余域名(服务器)的信息进行提早DNS解析，之后加载到具体内容部分能够不用解析了

3、创建 TCP 链接（TCP的三次握手）

目的：三次握手以后，就能保证前端后端可以正常交流（至关于修路通道打通，数据才能正常交互）

第一次握手：
- 创建链接时，客户端发送syn包（seq=x）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。
第二次握手：
- 服务器收到syn包，必须确认客户的SYN（ack=x+1），同时本身也发送一个SYN包（seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态。
第三次握手：
- 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=y+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP链接成功）状态，完成三次握手。

以上是说的太过正式，下面说个白话版的👇：其实就相似于两我的打招呼的过程；

第一次握手：
- 由浏览器发起：告诉服务器我要发送请求了
- 传 SYN = 1 seq = x ;(先出个题考考服务器)
第二次握手：
- 由服务器发起：告诉浏览器我准备接受了，你赶忙发送吧
- 传 SYN = 1，ACK = 1 ack = x + 1，seq = y ;(看到浏览器出的题，解答完成，而且也给浏览器出了个题，一块儿返回给浏览器)
第三次握手：
- 由浏览器发送：告诉服务器，我立刻要发了，准备接收吧
- 传 ACK = 1 ack = y + 1；（作完服务器给出得题，返回给服务器）

到此双方试探成功，创建友好的关系👬；（这条路算是打通了）

没有错，不要怀疑，就是这么简单～～

有了路以后，怎么传递数据呢，咱们还须要个快递小哥；（HTTP 就是快递小哥了）

4、发送 HTTP 请求

HTTP 这个快递小哥运输的东西就是 “报文”

一、HTTP 报文

HTTP 报文是由请求报文+响应报文共同组成

请求报文：
- 定义：全部通过传输协议，客户端传递给服务器的内容，都被成为请求报文
- 包含：
  - 起始行
  - 请求头（请求首部）
  - 请求主体
响应报文：
- 定义：全部通过传输协议，服务器返回给客户端的内容，都被成为响应报文
- 包含：
  - HTTP状态码
  - 响应头
  - 响应主体

至于报文是啥？在哪查看咱们一会再说，先看下经常使用的状态码有哪些；

二、HTTP 状态码

1~5开头，三位数字

1 开头的表明处理中，通常见不到
2开头：都是成功
- 200：OK：成功
- 201：CREATED：通常应用于告诉服务器建立一个新文件，最后服务器建立成功后返回的状态码
- 204：NO CONTENT：对于某些请求（例如：PUT或者DELETE），服务器不想处理，能够返回空内容，而且用204状态码告知
3开头：表明成功，只不过中间须要中转一下
- 301：Moved Permanently：永久重定向（永久转移）
- 302：Moved Temporarily：临时转移，很早之前基本上用302来作，可是如今主要用307来处理这个事情，
- 307的意思就是临时重定向Temporary Redirect =>主要用于：服务器的负载均衡等
- 304：Not Modified：设置HTTP的协商缓存
4开头：都是失败
- 400：Bad Request：传递给服务器的参数错误
- 401：Unauthorized：无权限访问
- 404：Not Found：请求地址错误
5开头：都是失败
- 500：Internal Server Error：未知服务器错误
- 503：Service Unavailable：服务器超负荷

三、这些报文都能在控制台 Network 看见

=>谷歌浏览器F12

=>Network（全部客户端和服务器端的交互信息在这里均可以看到）

=>点击某一条信息，在右侧能够看到全部的HTTP报文信息

上图就是了😄，接下来咱们看几个经常使用的

Headers：包含的基本上都是头，首部信息（包括请求首部和响应首部）
- General：通用首部，两个都有的，也是基本的
  - Request URL ：请求地址
  - Request Method：请求方式
  - Status Code：返回的状态码
  - Remote Address：当前服务器的外网 IP
  - ......
- Response Headers：响应头，服务器返回给客户端的
  - Date：服务器把信息返回给客户端时的时间
  - ETag：协商性缓存
  - Server：当前服务器基于什么作的
  - ......
- Request Headers：请求头，客户端给浏览器的
  - Accept：容许传输的类型
  - Accept-Encoding：容许的编码和压缩方式
  - Accept-Language：容许的语言
  - Connection：TCP 协议长链接
  - Cookie：把本地的信息传给服务器
  - Host：当前的域
  - User-Agent：当前浏览器的版本信息
  - ......
Response：响应主体，服务器返回给客户端的
Timing：记录了每一个阶段须要的时间

四、HTTP的请求方式

主要分两种：

GET 系列请求

POST 系列请求

不论GET和POST均可以把信息传递给服务器，也能从服务器获取到结果

GET 与 POST 系列请求的区别（所谓的区别都是约定俗成的，并无必定要这样作的规定）

GET 系列请求：通常用于从服务器获取信息（GET:给的少，拿的多）
- GET
- DELETE：通常应用于告诉服务器，从服务器上删除点东西
- HEAD：只想获取响应头内容，告诉服务器响应主体内容不要了
- OPTIONS：试探性请求，发个请求给服务器，看看服务器能不能接收到，能不能返回
POST 系列请求：通常用于给服务器推送信息（POST:给的多，拿的少）
- POST
- PUT：和DELETE对应，通常是想让服务器把我传递的信息存储到服务器上（通常应用于文件和大型数据内容）

本质区别

GET系列传递给服务器信息的方式通常采用：问号传参
POST系列传递给服务器信息的方式通常采用：设置请求主体

本质区别所致使的问题

一、GET传递给服务器的内容比POST少，由于URL有最长大小限制
- GET：xhr.open('GET','/list?name=xiaozhima&year=18&xxx=xxx...')
  - IE浏览器通常限制2KB，谷歌浏览器通常限制4~8KB，超过长度的部分自动被浏览器截取了
- POST：xhr.send('....')
  - 请求主体中传递的内容理论上没有大小限制，可是项目中，为了保证传输的速度，咱们会本身限制一些
二、GET会产生缓存（缓存不是本身可控制的）
- 由于请求的地址（尤为是问号传递的信息同样），浏览器有时候会认为你要和上次请求的数据同样，拿的是上一次信息；
- 这种缓存咱们不指望有，咱们指望的缓存是本身可控制的；因此项目中，若是一个地址，GET请求屡次，咱们要去除这个缓存；
- 解决办法：设置随机数
  - xhr.open('GET','/list?name=xiaozhima&_='+Math.random());
三、GET相比较POST来讲不安全（只是相对他俩来讲）
- GET是基于问号传参传递给服务器内容，有一种技术叫作URL劫持，这样别人能够获取或者篡改传递的信息；
- 而POST基于请求主体传递信息，不容易被劫持；

好了，HTTP请求就先说到这里😄

服务器接收到请求后：

一、根据端口号找到对应的项目
二、根据请求资源的路径名称找到资源文件
三、读取资源文件中的内容
四、把内容返回

5、断开 TCP 协议（TCP四次挥手）

上面咱们说创建 TCP 链接，就是修路，HTTP 就是快递小哥，在小哥送完快递后，咱们就要把以前修好的路拆掉，就有了 TCP 四次挥手

目的：四次挥手后，断开客户端与服务器的链接

第一次挥手：
- 客户端A发送一个FIN，用来关闭客户A到服务器B的数据传送。
第二次挥手：
- 服务器B收到这个FIN，它发回一个ACK，确认序号为收到的序号加1。和SYN同样，一个FIN将占用一个序号。
第三次挥手：
- 服务器B关闭与客户端A的链接，发送一个FIN给客户端A。
第四次挥手：
- 客户端A发回ACK报文确认，并将确认序号设置为收到序号加1。

白话文翻译👇：

第一次挥手：
- 由浏览器发起，发送给服务器，我请求报文发送完了，你准备关闭吧
第二次挥手：
- 由服务器发起，告诉浏览器，我接收完请求报文，我准备关闭，你也准备吧
第三次挥手：
- 由服务器发起，告诉浏览器，我响应报文发送完毕，你准备关闭吧
第四次挥手：
- 由浏览器发起，告诉服务器，我响应报文接收完毕，我准备关闭，你也准备吧

为何创建链接协议是三次握手，而关闭链接倒是四次握手呢？

这是由于服务端的LISTEN状态下的SOCKET当收到SYN报文的建连请求后，它能够把ACK和SYN（ACK起应答做用，而SYN起同步做用）放在一个报文里来发送。
但关闭链接时，当收到对方的FIN报文通知时，它仅仅表示对方没有数据发送给你了；
但未必你全部的数据都所有发送给对方了，因此你能够未必会立刻会关闭SOCKET,
也即你可能还须要发送一些数据给对方以后，再发送FIN报文给对方来表示你赞成能够关闭链接了，因此它这里的ACK报文和FIN报文多数状况下都是分开发送的。

6、浏览器渲染页面的步骤

这篇咱们以前写过浏览器渲染页面的主体流程，此次咱们把主要的步骤在写一下。

一、生成 DOM 树

渲染了全部的 HTML 标签

转换
- 经过 HTTP 返还的首先是十六进制的编码字节数据
- 拿到字节数据后，浏览器会经过内部的机制，把数据转换成咱们能看到的代码
令牌
- 按照 W3C 规范（第五代版本的规范H5）的规则,转换成咱们能看懂的标签
词法分析
- 经过转换后的标签，进行词法解析，生成DOM节点
DOM构建
- 最后经过查找每一个DOM节点之间的关系，生成DOM树

二、生成 CSSOM 树

请求回来 CSS 后，渲染完 CSS

同生成DOM树同样的过程生成CSSOM树

三、DOM 树 + CSSOM 树 => RENDER-TREE（渲染树）

四、布局（Layout）或重排/回流（reflow）

按照 RENDER-TREE 在设备的视口中进行结构和位置的相关计算=>布局（Layout）或重排/回流（reflow）

五、绘制（painting）或栅格化（rasterizing）

根据渲染树以及回流获得的几何信息，获得节点的绝对像素=>绘制（painting）或栅格化（rasterizing）

到此 “当用户在地址栏输入了网址，到看到页面中间都经历了什么？”这道题咱们算是解答完了。

做为前端咱们在写代码的时候，都是经过 AJAX 向服务器发送请求，下面咱们在说一下 AJAX 的基础知识和操做

AJAX 的基础知识和操做

1、什么是 AJAX

全称：async javascript and xml（异步的 JS 和 XML）

此处的异步指的是：局部刷新（对应的是全局刷新）
- 全局刷新：服务器渲染
- 局部刷新：客户端渲染
XML：可扩展的标记语言，用本身自定义的标签来存储数据的
- （在很早之前，咱们基于 AJAX 和服务器进行交互的数据格式通常都已 XML 格式为主，由于它能清晰展现出对应的数据和结构层级；
- 可是到后面，流行了一种新的数据格式 JSON，它不只比 XML 更清晰展现数据的结构，并且一样的数据存储，JSON 更加轻量，也方便解析和相关的操做，因此如今先后端的数据交互都已 JSON 格式为主）

XML 格式

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <student>
        <name>张三</name>
        <age>25</age>
        <score>
            <english>95</english>
        </score>
    </student>
    <student>
        <name>张三</name>
        <age>25</age>
    </student>
    <student>
        <name>张三</name>
        <age>25</age>
    </student>
</root>
复制代码

JSON 格式

[{
    "name": "张三",
    "age": 25,
    "score": {
        "english": 95
    }
}, {
    "name": "张三",
    "age": 25
}, {
    "name": "张三",
    "age": 25
}]
复制代码

2、AJAX的基础操做

AJAX任务：发送一个请求给服务器，从服务器获取到对应的内容是从SEND后开始到XHR.READYSTATE===4的时候算任务结束

核心四步

1.建立AJAX实例
- 语法：let xhr=new XMLHttpRequest;
- IE低版本浏览器中用的是 new ActiveXObject() （高程三中JS惰性编程思想，关于XHR的兼容处理）
2.打开URL（配置发送请求的信息）
- 语法：xhr.open('GET','./json/xxx.json',true);
- 参数：
  - 一、METHOD：HTTP请求方式
  - 二、URL：请求地址（API接口地址）
  - 三、ASYNC：设置同步或者异步（默认是TRUE异步，FALSE同步）
  - 四、USER-NAME：传递给服务器的用户名（基本不用）
  - 五、USER-PASS：传递给服务器的密码（基本不用）
3.监听AJAX状态
- 在状态为X的时候，获取服务器响应的内容
- AJAX 状态码：
  - 获取状态码：xhr.readyState
  - 0：unsend：未发送（建立一个XHR，初始状态是0）
  - 1：opened：已经打开（执行了xhr.open）
  - 2：headers_received：响应头信息已经返回给客户端（发送请求后，服务器会依次返回响应头和响应主体的信息）
  - 3：loading：等待服务器返回响应内容
  - 4：done：响应主体信息已经返回给客户端
4.发送请求
- 语法：xhr.send(null);
- SEND中放的是请求主体的内容

//1.建立AJAX实例
let xhr=new XMLHttpRequest; 

//2.打开URL（配置发送请求的信息）
xhr.open('GET','./json/xxx.json',true);

//3.监听AJAX状态，在状态为X的时候，获取服务器响应的内容
xhr.onreadystatechange=function(){
  if(xhr.readyState===4 && /^(2|3)\d{2}$/.test(xhr.status)){
    let result = xhr.responseText;
  }
}

//4.发送请求
//SEND中放的是请求主体的内容
xhr.send(null);

//=> AJAX任务（发送一个请求给服务器，从服务器获取到对应的内容）
//=> 从SEND后开始，到XHR.READYSTATE===4的时候算任务结束
复制代码

3、AJAX对象的几个方法

XMLHttpRequest 原型上的方法
- open()
- abort()：手动中断AJAX的请求(通常不用，浏览器自动会中断)
- getAllResponseHeaders()：获取全部的响应头信息（结果是全部信息的字符串）
- getResponseHeader()：获取响应头信息，一个一个获取
- overrideMimeType()：重写Mime类型
- xhr.setRequestHeader()：设置请求头信息（设置的请求头信息值不能是中文）
- send()
xhr 上的私有属性：
- timeout：
  - xhr.timeout = 10
  - 设置AJAX等待时间，超过这个时间算AJAX延迟
- withCredentials：
  - xhr.withCredentials = true
  - 在跨域请求中是否容许携带证书（携带COOKIE）（默认是false）
- readyState/status/statusText
- response/responseText/responseXML/responseType/responseURL

客户端怎么把信息传递给服务器?

问号传参：xhr.open('GET','/getdata?xxx=xxx&xxx=xxx')
设置请求头：xhr.setRequestHeader([key],[value])
设置请求主体：xhr.send(请求主体信息)

服务器怎么把信息返回给客户端？

经过响应头
经过响应主体（大部分信息都是基于响应主体返回的）

4、倒计时抢购案例

/* * 倒计时抢购要注意的细节知识点： * 1.计算剩余多久须要的时间不能是客户端本机的时间，须要获取服务器的时间 * （基于AJAX请求向服务器获取，可是也不能每隔1秒都去请求一次 * 【咱们是第一次加载页面的时候，从服务器获取服务器时间，存储起来，后期咱们把 * 这个时间自动的每隔1秒进行累加，页面刷新还须要从服务器获取】） * 2.为了保证绝对安全，在购买的时候，服务器须要二次校验时间的合法性 * 3.下降服务器返回时间和真实时间的偏差（减小服务器的响应时间） * 1）请求方式基于HEAD，只获取响应头信息便可 * 2）在AJAX状态为2的时候处理，无需等到状态为4 */
复制代码

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  <title>Document</title>
  <!-- IMPORT CSS -->
  <style> * { margin: 0; padding: 0; } #box { box-sizing: border-box; padding: 20px; width: 200px; margin: 20px auto; background: lightblue; line-height: 50px; } </style>
</head>

<body>
  <div id="box">
    距离秒杀还差：
    <span id="content">00:00:00</span>
  </div>

  <!-- IMPORT JS -->
  <script src="1.js"></script>
</body>

</html>
复制代码

let box = document.querySelector('#box'),
  content = document.querySelector('#content'),
  timer = null;

// 获取服务器时间
function getServerTime() {
  return new Promise(resolve => {
    let xhr = new XMLHttpRequest;
    xhr.open('head', './data.json?_=' + Math.random());
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 2 && /^(2|3)\d{2}$/.test(xhr.status)) {
        let time = xhr.getResponseHeader('date');
        // 获取的TIME是格林尼治时间 GMT（北京时间 GMT+0800）
        time = new Date(time);
        resolve(time);
      }
    };
    xhr.send(null);
  });
}

// 根据服务器时间计算倒计时
function computed(time) {
  // time从服务器获取的当时间
  // target是抢购的目标时间
  // spanTime两个时间的毫秒差
  let target = new Date('2020/05/13 15:57:35'),
    spanTime = target - time;
  if (spanTime <= 0) {
    // 已经到达抢购的时间节点了
    box.innerHTML = "开始抢购吧！";
    clearInterval(timer);
    return;
  }
  // 计算出毫秒差中包含多少小时、多少分钟、多少秒
  let hours = Math.floor(spanTime / (60 * 60 * 1000));
  spanTime = spanTime - hours * 60 * 60 * 1000;
  let minutes = Math.floor(spanTime / (60 * 1000));
  spanTime = spanTime - minutes * 60 * 1000;
  let seconds = Math.floor(spanTime / 1000);
  hours < 10 ? hours = '0' + hours : null;
  minutes < 10 ? minutes = '0' + minutes : null;
  seconds < 10 ? seconds = '0' + seconds : null;
  content.innerHTML = `${hours}:${minutes}:${seconds}`;
}

getServerTime().then(time => {
  // 获取到服务器时间后，计算倒计时
  computed(time);

  // 每间隔1秒中，让获取的时间累加1秒，在从新计算倒计时结果
  timer = setInterval(() => {
    time = new Date(time.getTime() + 1000);
    computed(time);
  }, 1000);
});
复制代码

今天的文章到此结束，小芝麻自知还有不少不足，提高空间还有很大很大，感谢打什么批评指正🙏