cookie有哪些属性可以配置

1. name  : 字段为一个cookie的名称。
2. value  : 字段为一个cookie的值。
3. domain  : 字段为可以访问此cookie的域名。
4.  path : 字段为可以访问此cookie的页面路径。比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。
5. 过期时间expires/Max-Age : 字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。   
6.  size : 字段 此cookie大小。
7.  http   : 字段 cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。
8. secure: 字段 设置是否只能通过https来传递此条cookie

Vue的生命周期有哪些

beforeCreate created 
beforeMount mounted 
beforeUpdate updated
beforeDestroy   destroyed

解释下v-model是什么作用，怎么去用在自定义组件？

本质上是一以及更新数据个语法糖   相当于v-bind加事件绑定，负责监听用户输入事件

JS中的深拷贝与浅拷贝的区别？

区别是 浅拷贝复制的是原数据的内存地址，当改变新数据的时候  原数据也会随之改变   但是深拷贝不会改变原数据

事件捕获和事件冒泡的流转过程是什么样的

捕获阶段 是从外向内    冒泡阶段是从内向外

怎么监听一个对象的属性变化

1. 利用es5中 Object.defineProperty中的getter以及setter 
2. 利用es6中的 Proxy

display有哪些值？说明他们的作用?

1. block  转换成块元素  
2. inline转换成行内元素 
3. none设置元素不可见
4. table  元素会作为块级表格显示 
5. inherit 继承父元素display属性的值 
6. inline-block像行内元素一样显示 内容像块类型元素一样显示
7. list-item像块类型元素一样显示，并添加样式列表标记

css选择器有哪些？优先级是什么样的

1. ！important 
2. 内联样式 
3. id选择器  
4. class选择器  
5. 元素选择器 （伪元素选择器） 
6. 后代选择器  
7. 通用选择器

能用几种方式实现垂直水平居中？

  1 绝对定位+transform  
  2 display：flex +center  
  3 grid网格布局
  4  table-cell middle center 
  5 absolute + margin auto 
  6 absolute + 负margin

post请求和get请求的区别

（1）post请求更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中，get请求的是静态资源，则会缓存，如果是数据，则不会缓存）

（2）post请求发送的数据更大（get请求有url长度限制，http协议本身不限制，请求长度限制是由浏览器和web服务器决定和设置）

（3）post请求能发送更多的数据类型（get请求只能发送ASCII字符）

（4）传参方式不同（get请求参数通过url传递，post请求放在request body中传递）

（5）get请求产生一个TCP数据包；post请求产生两个TCP数据包（get请求，浏览器会把http header和data一并发送出去，服务器响应200返回数据；post请求，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 返回数据）

注意：在发送 POST 的时候都没有带 Expect 头，server 也自然不会发 100 continue。

Json深拷贝的缺陷

在使用 JSON 进行深拷贝时，可能会出现以下问题：

函数和 Symbol 类型的数据无法被拷贝：JSON.stringify() 方法在处理函数和 Symbol 类型数据时会自动将其忽略，因此无法进行深拷贝。

循环引用问题：如果被拷贝的对象中存在循环引用，即对象内部存在相互引用的情况，JSON.stringify() 方法会抛出异常，导致深拷贝失败。

构造函数和原型链的丢失：使用 JSON.stringify() 和 JSON.parse() 方法进行深拷贝时，会丢失原对象的构造函数和原型链信息，即新对象会失去与原对象的继承关系。

对象中存在 undefined、NaN 和 Infinity：在使用 JSON.stringify() 方法将对象转换为 JSON 字符串时，这些特殊的值会被转换为 null，因此在深拷贝后，这些值将丢失原来的特殊含义。

因此，虽然使用 JSON 进行深拷贝是一种简单方便的方法，但在处理某些特殊情况时可能会出现问题，需要根据具体情况选择更适合的深拷贝方法。

函数的this指向

1 在浏览器里，在全局范围内this 指向window对象；
2 在函数中，this永远指向最后调用他的那个对象；
3 构造函数中，this指向new出来的那个新的对象；
4 call、apply、bind中的this被强绑定在指定的那个对象上；
5 箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；
6 apply、call、bind都是js给函数内置的一些API，调用他们可以为函数指定this的执行,同时也可以传参。

call() apply() bind() 有什么区别

call() apply() bind() 都可以改变this的指向，但是call() apply() 会立即执行。

call()的入参方式是单个

apply()的入参方式是数组

created和mounted的区别，created中能获取dom元素吗？

created：通常用于初始化某些属性值，例如data中的数据，然后再渲染成视图。
mounted：通常在初始化页面完成后，对html的dom节点进行需要的操作。
因此，在created中，是无法进行DOM操作的，而mounted可以获取渲染出来的所有属性值。

target和currentTarget的区别是：

target：触发事件的元素。
currentTarget：事件绑定的元素。

两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样了；

git的使用 git添加注释

**基本操作**
  
git init 初始化仓库，默认为 master 分支
​
git add . 提交全部文件修改到缓存区
​
git add <具体某个文件路径+全名> 提交某些文件到缓存区
​
git diff 查看当前代码 add后，会 add 哪些内容
​
git diff --staged查看现在 commit 提交后，会提交哪些内容
​
git status 查看当前分支状态
​
git pull <远程仓库名> <远程分支名> 拉取远程仓库的分支与本地当前分支合并
​
git pull <远程仓库名> <远程分支名>:<本地分支名> 拉取远程仓库的分支与本地某个分支合并
​
git commit -m "<注释>" 提交代码到本地仓库，并写提交注释
​
git commit -v 提交时显示所有diff信息
​
git commit --amend [file1] [file2] 重做上一次commit，并包括指定文件的新变化
​
**提交规则**
​
feat: 新特性，添加功能
​
fix: 修改 bug
​
refactor: 代码重构
​
docs: 文档修改
​
style: 代码格式修改, 注意不是 css 修改
​
test: 测试用例修改
​
chore: 其他修改, 比如构建流程, 依赖管理
​
**分支操作**
  
git branch 查看本地所有分支
​
git branch -r 查看远程所有分支
​
git branch -a 查看本地和远程所有分支
​
git merge <分支名> 合并分支
​
git merge --abort 合并分支出现冲突时，取消合并，一切回到合并前的状态
​
git branch <新分支名> 基于当前分支，新建一个分支
​
git checkout --orphan <新分支名> 新建一个空分支（会保留之前分支的所有文件）
​
git branch -D <分支名> 删除本地某个分支
​
git push <远程库名> :<分支名> 删除远程某个分支
​
git branch <新分支名称> <提交ID> 从提交历史恢复某个删掉的某个分支
​
git branch -m <原分支名> <新分支名> 分支更名
​
git checkout <分支名> 切换到本地某个分支
​
git checkout <远程库名>/<分支名> 切换到线上某个分支
​
git checkout -b <新分支名> 把基于当前分支新建分支，并切换为这个分支
​
**远程操作**
​
git fetch [remote] 下载远程仓库的所有变动
​
git remote -v 显示所有远程仓库
​
git pull [remote] [branch] 拉取远程仓库的分支与本地当前分支合并
​
git fetch 获取线上最新版信息记录，不合并
​
git push [remote] [branch] 上传本地指定分支到远程仓库
​
git push [remote] --force 强行推送当前分支到远程仓库，即使有冲突
​
git push [remote] --all 推送所有分支到远程仓库
​
**撤销操作**
​
git checkout [file] 恢复暂存区的指定文件到工作区
​
git checkout [commit] [file] 恢复某个commit的指定文件到暂存区和工作区
​
git checkout . 恢复暂存区的所有文件到工作区
​
git reset [commit] 重置当前分支的指针为指定commit，同时重置暂存区，但工作区不变
​
git reset --hard 重置暂存区与工作区，与上一次commit保持一致
​
git reset [file] 重置暂存区的指定文件，与上一次commit保持一致，但工作区不变
​
git revert [commit] 后者的所有变化都将被前者抵消，并且应用到当前分支
​
reset：真实硬性回滚，目标版本后面的提交记录全部丢失了
​
revert：同样回滚，这个回滚操作相当于一个提价，目标版本后面的提交记录也全部都有
​
**存储操作**
​
git stash 暂时将未提交的变化移除
​
git stash pop 取出储藏中最后存入的工作状态进行恢复，会删除储藏
​
git stash list 查看所有储藏中的工作
​
git stash apply <储藏的名称> 取出储藏中对应的工作状态进行恢复，不会删除储藏
​
git stash clear 清空所有储藏中的工作
​
git stash drop <储藏的名称> 删除对应的某个储藏


git init---创建一个.git文件
git add --all---将目录下的所有文件与.git绑定
git commit -m "注释信息"---将所有文件暂存在缓存区 注意-m后面是注释信息且注释信息必须填写
git remote add origin 仓库地址---注意仓库地址选rw开头,意思是可读可写,一般为第二个
git pull origin master -- allow-unrelated-histories---将库中的其他文件刷下来更新
git push origin master---将所有文件上传至服务器的库中注意:
git status  查看当前状态
git log  查看提交日志
git merge dev  合并dev分支至当前分支
git add .      添加当前目录全部文件至暂存区
git commit -m '测试'     提交，提交信息为测试
git push origin master  推送至远端分支（master为需要推送分支，按实际需要选择）
git pull origin master  合并远端分支至本地 (git pull 等于 git fetch + git merge)
git pull --rebase origin master rebase方式合并远端分支至本地
git branch 查看当前分支
git branch dev 创建dev分支  （dev可选）
git branch -d dev 删除dev分支
git branch -r 查看远程分支
git branch -a 查看所有分支 （包括远程分支）
git checkout master 切换至master分支
git checkout -b dev 创建dev分支并切换至dev分支
git checkout -b dev origin/dev 创建远程分支到本地
git restore file 丢弃工作区修改（file为具体文件名称）
git restore * 丢弃所有工作区修改
git restore --staged file  回退暂存区文件 不会更改文件内容
git rebase --continue   rebase后继续操作
git rebase --abort 退出rebase 操作

position的使用，position默认值

定义：position属性规定元素的定位类型。

说明：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对定位或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

默认值：static

继承性：no

形式语法：static | relative | absolute | sticky | fixed

let const var区别

1. var没有块级作用域，let和const有块级作用域
2.  全局作用域中，var声明的变量，通过function声明的函数，会自动变为window对象的变量，属性或方法，但const和let不会
3. 暂时性死区：只要作用域内存在let、const，它们所声明的变量或常量就会自动“绑定”这个区域，不再受外部作用域的影响
4. 变量提升：var会提升变量的声明到作用域的顶部，但let和const不会（说白了就是let和const没有变量提升）
5. 重复声明：var允许重复声明，let、const不允许

js的数据类型的转换

在 JS 中类型转换只有三种情况，分别是：

1. 转换为布尔值（调用Boolean()方法）
2. 转换为数字（调用Number()、parseInt()和parseFloat()方法）
3. 转换为字符串（调用.toString()或者String()方法）

什么是BigInt

`BigInt` 是一种新的数据类型，用于当整数值大于Number数据类型支持的范围时。这种数据类型允许我们安全地对 大整数 执行算术操作，表示高分辨率的时间戳，使用大整数id，等等，而不需要使用库

0.1+0.2为什么不等于0.3

0.1和0.2在转换成二进制后会无限循环，由于标准位数的限制后面多余的位数会被截掉，此时就已经出现了精度的损失，相加后因浮点数小数位的限制而截断的二进制数字在转换为十进制就会变成 0.30000000000000004。

new 一个函数，都会发生什么

1. 创建对象
2. 使该新对象的`prototype`指向构造函数的`prototype`
3. 改变创建对象的this指向
4. 如果构造函数返回一个对象，则返回该对象，否则返回新创建的对象

箭头函数和普通函数的区别

1. 箭头函数没有自己的this，如果在箭头函数中使用this，会指向上层作用域中this的指向
2. 箭头函数没有自己的原型对象
3. 箭头函数的写法更简洁
4. 箭头函数没有自己的`arguments`

ES6有哪些新特性？

*   块作用域
*   类 
*   箭头函数
*   模板字符串
*   加强的对象字面
*   对象解构
*   Promise
*   模块 
*   Symbol
*   代理（proxy）Set 
*   函数默认参数 
*   展开

从输入 URL 到页面展示，这中间发生了什么

URL解析
  - 首先判断你输入的是一个合法的URL 还是一个待搜索的关键词，并且根据你输入的内容进行对应操作
DNS 查询
  - DNS查询对应ip
TCP 连接
  - 在确定目标服务器服务器的IP地址后，则经历三次握手建立TCP连接
HTTP 请求
  - 当建立tcp连接之后，就可以在这基础上进行通信，浏览器发送 http 请求到目标服务器
响应请求
  - 当服务器接收到浏览器的请求之后，就会进行逻辑操作，处理完成之后返回一个HTTP响应消息
页面渲染
  - 当浏览器接收到服务器响应的资源后，首先会对资源进行解析：
​
  查看响应头的信息，根据不同的指示做对应处理，比如重定向，存储cookie，解压gzip，缓存资源等等
  查看响应头的 Content-Type的值，根据不同的资源类型采用不同的解析方式
  关于页面的渲染过程如下：
​
  解析HTML，构建 DOM 树
  解析 CSS ，生成 CSS 规则树
  合并 DOM 树和 CSS 规则，生成 render 树
  布局 render 树（ Layout / reflow ），负责各元素尺寸、位置的计算
  绘制 render 树（ paint ），绘制页面像素信息
  浏览器会将各层的信息发送给 GPU，GPU 会将各层合成（ composite ），显示在屏幕上

px、em、rem的区别及使用场景

**三者的区别：**
​
- px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
- em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
- em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。
​
**使用场景：**
​
- 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。
- 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

1. 问题：`png24`位的图片在`ie`浏览器上出现背景。解决： 做成`png8`；
2. 问题：浏览器默认的`margin`和`padding`不同。 解决： 添加一个全局的`*{ margin： 0; padding： 0;}`；
3. 问题：`IE`下,可以使用获取常规属性的方法来获取自定义属性,也可以使用`getAttribute()`获取自定义属性，而`Firefox`下,只能使用`getAttribute()`获取自定义属性。 解决： 统一通过getAttribute()`获取自定义属性；
4. 问题： `IE`下,`event`对象有`x`,`y`属性,但是没有`pageX`,`pageY`属性，而`Firefox`下,`event`对象有`pageX`,`pageY`属性,但是没有`x`,`y`属性。 解决： 使用`mX(mX = event.x ? event.x : event.pageX;)`来代替`IE`下的`event.x`或者`Firefox`下的`event.pageX`。

HTML中几种图片格式的区别以及使用

页面中常用的几种图片格式有: `png`, `jpg(jpeg)`,`gif`, `bmp`等；
​
（1）、**Png格式的特征**
​
特征： 图片背景透明，可以支持的颜色有很多。
​
使用范围: 比较广，在目前使用频率最高。
​
（2）、**jpg格式特征**
​
特征： 图片不支持透明，静态图，支持的颜色也比较多，可压缩。
​
使用范围： 使用范围较广，可使用作为电脑做面壁纸，手机屏保等，可根据需求来确实使用图片的分辨率，
​
（3）、**gif格式特征**
​
特征： 动态图，支持的颜色较少。
​
使用范围： 在目前看到的在网站内使用频率较低。

JS 的运行机制　微任务 宏任务

异步任务分类：宏任务，微任务
同步任务和异步任务分别进入不同的执行"场所"
先执行主线程执行栈中的宏任务
执行过程中如果遇到微任务，进入Event Table并注册函数，完成后移入到微任务的任务队列中
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
主线程会不断获取任务队列中的任务、执行任务、再获取、再执行任务也就是常说的Event Loop(事件循环)。

Websocket

HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。

优点：说到优点，这里的对比参照物是HTTP协议，概括地说就是：支持双向通信，更灵活，更高效，可扩展性更好。

1. 支持双向通信，实时性更强。
2. 更好的二进制支持。
3. 较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。
4. 支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等）

Promise.all和Promise.allSettled有什么区别？

最大的区别：`Promise.allSettled`永远不会被**reject**。

使用`Promise.all`时，一旦有一个promise出现了异常，被reject了，尽管能用catch捕获其中的异常，但你会发现其他执行成功的Promise的消息都丢失了。

而`Promise.allSettled`不会有这种问题，我们只需专注在then语句里，当有promise被异常打断时，我们依然能妥善处理那些已经成功了的promise，不必全部重来。