自我整理的一些高频面试基础题，偏初学者、应届生，觉得有用的掘友给个小爱心，谢谢！
HTML
说说你知道的块级、内联元素?
1.块级元素：display：block/table，举例：div、p、ul、ol、table、h1-h6
2.内联元素：display：inline/inline-block，举例：span、input、button、img
如何理解HTML的语义化?
1.让人更容易理解和读懂代码
2.让搜索引擎更容易理解和读懂代码 (SEO优化)
说一下a标签的target属性?
1._self: 默认值，不新建页面跳转
2._blank: 新建页面跳转
Doctype作用?严格模式与混杂模式是什么?
1.Doctype：声明位于文档的最前面，告诉浏览器以何种方式渲染页面，有两种模式，严格模式和混杂模式
2.严格模式：又称标准模式，浏览器按照W3C标准来解析代码
3.混杂模式：又称怪异模式、兼容模式，浏览器以自己的方式来解析代码，往后兼容，模拟老式站点，防止无法工作
区别：
1.盒模型的宽高是否包括padding、border
2.margin: 0 auto;水平居中在混杂模式下失效
3.严格模式下，行内元素的的width、height不生效，而混杂模式下，则生效
CSS
什么是浮动?清除浮动的方式有哪些?
浮动：子元素设置float样式后，脱离文档流，当遇到其他浮动元素或到达父元素边框时停留，造成高度塌陷的效果
清除浮动的方式：
1.子元素添加空白标签
2.父元素添加overflow:hidden
3.父元素添加伪类after和zoom (clearfix)
说一下你知道的盒模型及其宽度如何计算?
盒模型：
标准盒模型：box-sizing: content-box; 宽度不包括border、padding, 参考W3C标准
IE盒模型：box-sizing: border-box; 宽度包括border、padding, 怪异模式
宽度计算：
offsetWidth = border边框 + padding内边框 + width内容宽度 不包括外边距
说说你知道的回流和重绘?什么情况下触发回流?
重绘：在不影响浏览器布局下，元素样式改变，浏览器更新元素，只是UI像素重新绘制，性能损耗小
回流：元素的结构、尺寸、大小的改变，浏览器更新元素，浏览器需要重新计算页面，重新布局，性能损耗大
触发回流：
1.页面初次渲染
2.元素位置、尺寸、大小、结构的改变
3.字体大小的改变font-size
4.添加或删除DOM
5.浏览器窗口大小的改变
链接四种状态和顺序是什么?
四种状态：
1.未访问 2.已访问 3.鼠标悬停 4.激活
1.:link，未访问
2.:active，激活
3.:hover，鼠标悬停
4.:visited，已访问
顺序：
1.:link, 未访问
2.:visited: 可访问
3.:hover, 鼠标悬停
4.:actived，激活
权重比较？
!important > 行内元素 > id > class = 属性 > 标签 > 通配符
水平居中和垂直居中？
水平居中：
1.inline元素，text-align = center;
2.block元素，margin: 0 auto;
3.absolute元素，letf: 50% + margin-left负值(需要知道子元素宽度)
垂直居中：
1.inline元素，line-height = height;
2.absolute元素，top: 50% + margin-top负值(需要知道子元素高度)
3.absolute元素, transform(-50%, -50%);
4.absolute元素，letf、top、right、bottom为0，margin：auto; (终极解决方案)
什么是伪元素?:before和:after的作用是什么?
伪元素：创建一个虚假的元素，插入到目标元素的前面或后面，必须有content属性，否则无效
:before -- 插入到目标元素的前面
:after -- 插入到目标元素的后面
选择器？
1.+选择器：选择紧跟当前元素的首个元素
2.:nth-child(n) 匹配父元素的第n个子元素，n 从 1开始
使用公式 :nth-child(an + b)，n 从 0 开始，n为计数器
隐藏元素的方式?
1.display: none;
2.visibility: hidden;
3.opacity: 0;
何为BFC、形成条件、应用场景？
BFC: 块级格式化上下文，一块独立渲染的区域，内部元素如何渲染不影响边界以外的元素
形成条件：
1.float不为none
2.overflow不为visible
3.display为flex或者inline-block
4.position为absolute或者fixed
应用场景：
1.清除浮动 (最好的方式：overflow：hidden -- 兼容性最强)
display:none、visibility:hidden、opacity：0的区别？
display:none👇
DOM结构：隐藏元素，不占据空间
性能：会触发回流，性能消耗大
事件监听：绑定在元素上的监听事件失效
继承：子元素不会继承
visibility:hidden👇
DOM结构：隐藏元素，占据空间
性能：会触发重绘，性能消耗较小
事件监听：绑定在元素上的监听事件失效
继承：子元素会继承，子元素可通过visibility:visible取消隐藏
opacity：0👇
DOM结构：隐藏元素，占据空间
性能：不会触发回流、重绘
事件监听：绑定在元素上的监听事件有效
继承：子元素会继承，但子元素设置opacity:1不能取消隐藏
说一下flex?
1.flex-direction 主轴方向 -- 横向、纵向
2.justify-content 主轴对齐方式 -- 开始、结束、居中、两边
3.align-items 交叉轴对齐方式 -- 开始、结束、居中、两边
4.flex-wrap 换行
5.align-self 子元素在交叉轴的对齐方式 -- 开始、结束、居中、两边
line-height如何继承呢？
1.如果是数值，则直接继承
2.如果是比例，则继承 子元素的line-height x 比例
3.如果是百分比，则继承 父元素的line-height x 百分比
link和@import的区别？
1.link可以定义Rel、RSS等，而@import只能加载CSS
2.link可以使用Js动态引入，@import不能
3.加载CSS，解析到link时，页面会同步加载CSS样式，而@import引入的CSS只能等页面全部资源加载完才会加载
margin负值和纵向重叠？
margin负值：
1.margin-left负值，元素自身向左移动
2.margin-top负值，元素自身向上移动
3.margin-right负值，右边的元素往左移动，元素自身不受影响
4.margin-bottom负值，下方的元素往上移动，元素自身不受影响
margin纵向重叠：
相邻上下两个元素，margin-top和margin-bottom会发生重叠，数值大的覆盖数值小的，空白内容的标签会被重叠(忽略)
说一下position定位属性？
1.position: static 静态定位，left、top、bottom、right不生效
2.position: relative 相对定位，相对于元素自身定位，通过top、bottom、right、left移动，无论是否进行移动，元素仍然占据原来的空间
3.position: absolute 绝对定位，依据最近一层的定位元素定位，脱离文档流，不占据原来空间
4.position: fixed 固定定位，相对于浏览器窗口定位，脱离文档流，不是始终以body定位
最近一层的定位元素：向上查找父元素，直到找到父元素为定位元素（relative、absolute、fixed、body）,如果没有找到，则找到body
什么是rem、em?常见的响应式布局方案有哪些?什么是vw/vh?
rem: 相对长度单位，相对于根元素的font-size
em: 相对长度单位，相对于父元素的font-size
常见的响应式布局方案：
1.rem 相对于根元素的font-size
2.@media-query媒体查询，根据屏幕宽度设置根元素的font-size
vw：网页视口宽度的1/100
vh: 网页视口高度的1/100
window.innerHeight：网页视口高度：去掉浏览器的头部、尾部所显示的高度
z-index作用?
层叠顺序，数值越大，层级越高，如果为负值，则会被普通文档流覆盖
HTTP和HTTPS
HTTP概念？
超文本传输协议，是客户端和服务端请求和应答的标准，用于从www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少
缓存？
什么是缓存？
浏览器向服务器发生请求，服务器接收到请求后，返回相应的内容，当下一次发送同一个请求，服务器响应的内容未改变时，不需要返回相同的内容，而是浏览器直接去本地缓存中查找，这样可以减少网络请求，达到一个性能优化
为什么需要缓存？
减少网络请求，达到性能优化
哪些资源可以被缓存？
静态资源(JS/CSS/IMG...)
什么是强制缓存?
cache-control在response headers
强制缓存：浏览器初次向服务器发送一个请求，服务器接收请求，并判断请求的资源是否可以被缓存，如果可以则加上cache-control标识并返回给浏览器，浏览器会根据cache-control
缓存到本地存储，当浏览器再次请求时，会直接去本地存储中查找，减少网络请求次数 （缓存未过期）
HTTP请求方式？
① GET 获取
② POST 创建
③ PUT 更新
④ DELETE 删除
⑤ OPTION 预请求
⑥ HEAD
什么是协商缓存?
Etag / Last-Modified 在Response headers中
协商缓存：浏览器初次向服务器发生请求，服务器返回资源和资源标识，当浏览器再次请求时，带着资源标识，服务器对比这个资源标识是否和上次返回的一致，如果一致则返回304(资源未改变),否则返回200和新的资源标识 (缓存过期)
资源标识有两种：Last-Modified / Etag (共存时优先使用Etag)
HTTP常见的header？
Request header 和 Response header👇
Request header：
① Accept 浏览器可接受的数据格式
② Accept-Encoding 浏览器可接收的压缩算法
③ Accept-Language 浏览器可接收的语言
④ Connection keep-alive 一次TCP连接可重复使用
⑤ Host 域名
⑥ Cookies
⑦ User-Agent 简称UA 浏览器信息
⑧ Content-Type 浏览器发送数据的类型
Response header:
① Content-Type 服务器返回数据的类型
② Content-Length 服务器返回数据的大小
③ Content-Encoding 服务器返回的压缩算法
④ Set-Cookies 服务器修改Cookies
HTTP与HTTPS的区别？
① 连接方式不同，端口不同，一个是80端口，一个是443端口
② HTTP，超文本传输协议，明文传输，而HTTPS是具有安全的SSL加密传输协议
③ HTTPS需要到证书颁发机构申请证书，需费用
④ HTTP是无状态连接，指数据包发送、传输、接收都是相互的
HTTP状态码？
① 200 成功
② 201 资源已创建
③ 301 永久重定向
④ 302 临时重定向
⑤ 304 资源未修改
⑥ 403 没有权限
⑦ 404 资源未找到
⑧ 500 服务器错误
⑨ 504 网关超时
get和post的区别？
1.传输方式不同，get传输是在URL上，而post传输是在请求体中
2.安全性不同，因为post传输数据是在请求体，相对来说比较安全，而get传输数据是在URL上，在浏览器的历史记录、缓存中可能找到
3.数据类型不同，get传输数据只能是ASCII字符，而post无限制
4.浏览器刷新、回退，get无害，而post可能再次提交，造成重复
HTTPS概念？
以安全为目标的HTTP通道，在HTTP的基础上，通过传输加密和身份认证保证了传输过程的安全性
HTTPS优缺点？
安全，但加密范围有限，当遭受黑客攻击时，不生效，在握手阶段不如HTTP高效，比较费时
TCP和UDP的区别?
1.TCP是面向连接的，而UDP是无连接的
2.TCP是可靠的传输服务，而UDP是不可靠的
3.TCP是面向字节流的，而UDP面向报文
4.TCP首部大小为20字节，而UDP只有8个字节
5.TCP是一对一，而UDP是一对一、一对多
JavaScript
闭包？
一、什么是闭包?
闭包是指有权访问另一个函数作用域中变量的函数
二、形成闭包的原因？
内部函数存在外部作用域的引用就会导致闭包
三、闭包的作用？
① 实现函数属性和方法私有化
② 保护函数的私有变量不受外部干扰
四、闭包的应用场景？
① 函数作为参数传递
② 函数作为返回值被返回
③ IIFE（自执行函数）
④ 循环赋值
⑤ 使用回调函数
防抖和节流？
防抖：用户输入暂停或结束，才触发change事件
节流：频繁输入、频繁操作，以连续（一定）的频率触发
函数声明与函数表达式的区别?
1.函数声明会在代码执行前预加载，类似于变量提升
2.函数表达式不会进行预加载
函数声明：function a() {...}
函数表达式：const a = function () {...}
何时使用三等、二等?
=== 比较值、比较类型，不会发生类型转换
== 仅比较值，会发生类型转换
除了 == null,其他一律使用 ===
== null --> === null || === undefined
宏任务和微任务有哪些？区别是什么？
宏任务：setTimeout、setInterval、Ajax事件、DOM事件
微任务：promise、async await
区别：
1.宏任务是浏览器规定的，微任务是ES6规定的
2.宏任务在DOM渲染完后执行，微任务是在DOM渲染之前执行
3.微任务的执行时机比宏任务早
什么是回调函数?举例说明？
回调函数：函数的指针作为参数传递给另一个函数，当指针所指向的函数被调用时，即回调函数
举例：
const a = function () {console.log(1);};
const b = function (a) {a();};
b();
逻辑判断?
&& 返回一个falsely变量
|| 返回一个truly变量
面向对象的三大特性？
① 封装
② 继承
③ 多态
什么是内存泄露？常见的内存泄露操作有哪些？
内存泄露：由于疏忽或错误未能释放那些不再使用的内存，造成内存的浪费
内存泄露的常见操作：
1.闭包
2.全局变量
3.被遗忘的定时器和回调函数
4.循环引用(未及时清除DOM元素的引用，仍存在)
说说你知道的设计模式(3个)？
1.单例模式👇
概念：保证一个类只有一个实例，一般先判断这个实例是否存在，如果存在则直接返回，否则先创建再返回
作用：
1. 模块间通信
2. 确保某个类的对象的唯一性
3. 防止变量污染
2.构造函数模式👇
概念：用于创建特定类型的对象
作用：
1.创建特定类型的对象
2.逻辑和业务的封装
3.建造者模式👇
概念：将一个复杂的逻辑或功能通过有条理的分工处理一步步地实现
作用：
1.分布创建一个复杂的对象或实现一个复杂的功能
2.解耦封装过程，无需关注具体创建细节
深浅拷贝？
浅拷贝：
let a = { address: { city: 'beijing' } };
let b = a;
b.address.city = 'shenzhen';
console.log(a.address.city); // shenzhen;
深拷贝：a赋值给b，b改变时，a不改变，互相独立
事件冒泡、事件捕获、事件委托？
事件冒泡：微软提出
事件捕获：网景提出
--两者都是为了解决页面中事件流（事件发生顺序）的问题--
例子：
<div id="outer">
<p id="inner">Click me!</p></div>
这段代码，如果两个元素都有一个click处理函数，那么怎么知道哪一个函数先被触发？
事件冒泡: 事件从最内层元素开始发生，向上传播，直到document对象
例子click发生顺序：p -> div -> body -> html -> document
事件捕获：事件从最外层开始发生，向下传播，直到具体的元素
例子click发生顺序：document -> html -> body -> div -> p
三个事件阶段顺序：捕获 > 目标 > 冒泡
目标阶段：事件到达目标对象，事件触发，若事件不允许冒泡，事件则停止传播
事件冒泡和事件捕获过程图：1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段
---------------
阻止冒泡事件：
1. 子级上加 event.stopPropagation() --> 只阻止冒泡
2. 在事件处理函数中 return false --> 注意：阻止冒泡，也会阻止默认事件
阻止默认事件：
1. event.preventDefault()
2. return false
---------------
事件委托：把绑定在子元素的事件，委托给父元素，由父元素负责事件监听，执行事件时判断匹配是否为目标元素
原理：基于事件冒泡
优点：节省内存占用，减少事件注册
应用场景：无限下拉图片列表，监听每个图片的点击 （多个子元素，监听点击事件）
应用场景解法：1.事件代理 2.用e.target 获取触发元素 3.用matches判断是否为触发元素
---------------
DOM2级事件中规定事件流同时支持事件捕获阶段和事件冒泡阶段，可以使用addEventListener处理事件处于哪一阶段
addEventListener：用于为一个特定的元素绑定一个事件处理函数
语法：e.addEventListener(event, function, useCapture)
event: 字符串，指定事件名，不要使用 "on" 前缀
function: 必须，指定要事件触发时执行的函数
useCapture：可选 1.true-函数在捕获阶段执行 2.false-默认，函数在冒泡阶段执行
JS的基本数据类型和复杂数据类型？
基本数据类型：
1.Null
2.Undefined
3.String
4.Number
5.Boolean
6.BigInt
7.Symbol
复杂数据类型：
1.Object (Function、Array、Object、Date、RegExp)
说说同步和异步的区别?
1.JS是单线程，同步代码一行行执行
2.同步会阻塞代码的执行
3.异步不会阻塞代码的执行(同步代码执行完，再去执行异步代码)
说一下原型和原型链？
原型：
1.所有引用类型都有一个隐式原型属性--__proto__，属性值是一个普通对象
2.所有函数都有一个显式原型属性--prototype，属性值是一个普通对象
3.所有引用类型的隐式原型__proto__指向它构造函数的显式原型prototype
原型链：
当访问一个对象实例的属性时，一般先在当前对象实例中查找，如果没有找到，则
去它的隐式原型__proto__上查找,即它构造函数的显示原型prototype上查找，如
果还没有找到，则去它构造函数的显式原型prototype的隐式原型__proto__上查找,
就这样一层一层往上查找，形成链式结构
1.一层一层往上查找，如果到了null还没有找到，则返回undefined
2.object.prototype.__proto__ === null
值类型和引用类型的区别？
值类型:
let a = 100;
let b = a;
b = 200;
console.log(a); // 100
console.log(b); // 200
引用类型：
let a = { city: 'beijing' };
let b = a;
b.city = 'shenzhen';
console.log(a); // { city: 'shenzhen' };
值类型：存储在栈中，自下而上，占用内存较小，值类型有：undefined、String、Number、Boolean、Symbol
引用类型：存储在堆中，自上而下，占用内存较大，引用类型有：Null、Object、Function、Regexp、Array
如何重定向到另一个页面呢?
1.location.replace();
2.location.href();
何为作用域?作用域的种类有哪些？作用域的查找规则是什么?
作用域：代表一个变量合法的使用范围
种类：
1.全局作用域 -- 当前变量在全局中有效
2.函数作用域 -- 当前变量仅在函数内部有效
3.块级作用域 -- 当前变量仅在块内有效
作用域查找规则：
1.一个变量在当前作用域未定义，但被使用了
2.向上级作用域，一层一层查找，直到找到为止
3.如果在全局作用域中还没有找到，则报错xxx is not defined
bind、call、apply的区别？
共同点：三者的作用都是改变this的指向
区别：
1.call 第一个参数是this指向的目标对象，之后的参数是参数列表，以逗号的形式隔开
2.apply 第一个参数是this指向的目标对象，第二参数是数组
非严格模式: 如果第一个参数不传或者为null或者undefined，this指向window对象，如果传入的是字符、数字、布尔值，则this指向传入的值
严格模式：第一个参数传入的是什么，this就指向什么，包括null和undefined，如果不传，则指向undefined
3.bind 用于与call一致，区别在于是否立即执行，bind返回的是一个函数，需调用才执行，而call、apply会立即执行
const、var、let的区别？
1.var是ES5语法，const和let是ES6语法，var有变量提升
2.const、let有块级作用域，而var没有
3.var、let声明的是变量，而const声明的是常量(指针指向不变)
什么是EventLoop?它的过程是什么？
EventLoop：事件轮询，异步基于回调函数，而EventLoop是异步回调的实现原理
过程：
1.Js是单线程，同步代码一行行放入调用栈执行
2.遇到异步任务，记录下来，等待时机
3.时机一到，则放入回调函数队列中
4.同步代码执行完，清空调用栈，启动EventLoop
5.EventLoop轮询查找回调函数队列，如果有函数则放入调用栈中执行，清空调用栈
6.继续轮询查找
forEach, for in, for of 区别？
forEach： 遍历数组/对象数组, 但不能使用break、continue、return语句，
第一个参数value、第二个参数index,第三个参数源数组
for in：遍历数组或对象，参数为下标（数组）或对象（key）,
但会把定义在显示原型上的属性遍历出来 Array.prototype.xxx,
用Object.hasOwnPrototype()--[ 保证是实例的属性 ]解决
for-of： ES6引入, 可用于遍历Iterable类型数据，只遍历集合本身元素，参数为值
什么是instanceof?它能够判断哪些数据类型?
概念：用于判断构造函数的显示原型属性是否存在于某个对象实例的原型链上
示例：
function Car(name) {this.name = name;}
let car = new Car('baoma');
console.log(car instanceof Car); // true
console.log(car instanceof Object); // true
判断类型：单纯值类型判断不了，引用类型可以，无法准确判断function
let a = 'xxx';
let b = new String('xxx');
console.log(a instanceof String); // false 检查不到 undefined
console.log(a instanceof String); // true
let c = 1;
let d = new Nunber(1);
console.log(c instanceof Number); // false 检查不到 undefined
console.log(d instanceof Number); // true
let e = true;
let f = new Boolean(true);
console.log(e instanceof Boolean); // false 检查不到 undefined
console.log(f instanceof Boolean); // true
let g = {};
let h = new Object();
console.log(g instanceof Object); // true
console.log(h instanceof Object); // true
let i = function () {};
console.log(i instanceof Function); // true
console.log(i instanceof Object); // true
什么是JSON？
1.JSON是一种数据格式，本质是一段字符串
2.JSON的语法和JS对象结构一致，对JS语言友好
3.window.Json是一个全局对象
JSON.parse()把JSON字符串转化为JSON对象，
JSON.stringify()把JSON对象转化为JSON字符串
new操作符的执行过程？
1.创建一个新对象
2.新对象的隐式原型指向构造函数的显示原型
3.构造函数内部的this指向新对象
4.执行构造函数
5.如果构造函数返回的是非空对象，则返回该对象，否则，返回新创建的对象
splice和slice有什么区别?
1.splice -- 剪接，非纯函数，改变原数组，返回剪掉元素组成的数组
第一个参数：开始位置 (下标)
第二个参数：长度
第三个参数：需要拼接的元素，替代剪掉的位置
2.slice -- 切片，纯函数，不改变原数组，返回剪掉元素组成的数组
第一个参数：开始位置 (下标)
第二个参数：结束位置 (下标)
this指向？
1.作为普通函数被调用 (this指向window对象)
2.箭头函数 (this永远指向它的上级作用域，本身没有this)
3.作为对象方法被调用 (this指向当前对象实例，如果该方法用setTimeOut写的，则指向window对象，该方法由setTimeOut本身触发)
4.作为class方法被调用 (this指向new出来的对象实例)
5.bind、call、apply (this指向被改变，指向传入的目标对象--第一个参数)
this取什么样的值，不是在函数定义的时候确定的，而是在函数执行的时候确定的
typeof能判断哪些数据类型?
一、能判断所有的基本数据类型
1.'string'
2.'number'
3.'boolean'
4.'undefined'
5.'symbol'
二、能判断函数类型
1.'function'
三、不能判断引用类型
1.null -> 'object'
2.object -> 'object'
3.array -> 'object'
undefined和null的区别?
相同点：
if条件下，两者都转化为false
不同点：
undefined：值未定义，值类型，Number(undefined) -> NaN
null：值已定义，为空，引用类型，Number(null) -> 0
window load和document ready的区别？
// load
1. window.addEventListener('load')
页面全部资源加载完才执行，包括视频、图片等
// ready
2. document.addEventListener('DOMContentLoad')
DOM渲染完即可执行，这时可能视频、图片未加载完
ES6、ES7
什么是扩展运算符？
用于提取参数对象中可遍历的属性，浅拷贝到当前对象中
Array.from() ？
从数组或对象数组创建一个新的，浅拷贝的数组实例
例子：
Array.from('abc'); // ["a", "b", "c"]
Array.from(new Set(['a', 'b', 'a'])); // ["a", "b"]
Array.from(new Map([[1, 2], [3, 4]])); // [[1, 2], [3, 4]]
function a () {
return Array.from(arguments) // [1, 2, 3]
}
a(1,2,3);
Iterable？
遍历Array可用下标遍历，Map和Set无法用下标遍历，为了统一集合类型，ES6引入Iterable新类型
Iterable：此类型可用for...of遍历，Array、Set、Map都属于此类型
Map和Set？
注意：JavaScript普通对象 {} 的key只能以基础数据类型，并且传入的key都会转为string类型
ES6新增：Set和Map
应用场景：
1. Set 数组去重
2. Map 原数组映射新数组/数据存储（不确定键名，可以用Map的Set方法设定键值对）
----------
Map: 一组键值对结构,可将任何数据类型作为键，将原数组映射成一个新数组
new Map() 初始化 || 二维数组 [[key, value]]
方法:
1. set 添加key-value（重复覆盖）
2. has 判断是否存在key--Boolean
3. get 获取对应key的值
4. delete 删除对应key和value--Boolean
5. clear 清除成员
----------
Set: 类似于数组，成员值唯一，没有重复的值，不会发生类型转换
new Set() 初始化 || 数组 [value, value, ...]
方法：
1. add 添加值（不会添加重复值）
2. has 判断该值是否为Set成员
3. delete 删除某个值-Boolean
4. clear 清除成员
promise？
1.三种状态
pending：在过程中，还没有结果
resolved: 已解决
rejected: 已拒绝
pending -> resolved
pending -> rejected
变化状态不可逆
2.触发函数
pending不会触发后续的then和catch函数
resolved会触发后续的then函数
rejected会触发后续的catch函数
3.返回状态
then函数正常返回resolved状态，如果报错，则返回rejected状态
catch函数正常返回resolved状态，如果报错，则返回rejected状态
async-await？
一、async/await 和promise的关系
1. async 和 await 是消灭异步回调的终极武器
2. 和promise不互斥
3. 相辅相成
总结：
① 执行async函数（封装的promise），返回的是promise对象
② await相当于promise的then
③ try catch 捕获异常，代替了promise的catch
④ async/await只是一个语法糖
git
常见操作?
1.git checkout 切换分支
2.git checkout -b 切换并进入新分支
3.git status 查看分支状态
4.git add. 将更新的分支放入暂存区
5.git commit -am 提交记录
6.git push origin 提交分支到服务器
7.git pull origin 从服务器拉取分支
8.git merge 合并分支
9.git branch 查看分支
新特性
CSS3新特性？
1.@font-face 加载字体样式
2.选择器
:last-child 选择父元素下的最后一个子元素
:nth-child(n) 选择父元素下的第n个子元素
3.animation 动画
4.transform 2D转换
5.transition 过渡效果
6.gradient 渐变
7.媒体查询
8.shadow 阴影
ES6新特性？
1.promise
2.for of
3.解构赋值
4.块级作用域 let-const
5.模板字符串
6.Map/Set
7.扩展运算符
H5新特性？
1.本地存储 localStorage-sessionStorage
2.语义化元素 header/footer/section/article/nav
3.canvas、vedio、audio
性能优化
说说你知道的方式?
性能优化分为两方面：加载过程和渲染过程
加载过程：
1.减少资源体积：压缩代码
2.减少请求次数：合并代码，服务端SSR渲染，缓存
3.使用更快的网络：CDN
渲染过程：
1.css代码放在head里面，js代码放在body最下方
2.尽早执行js代码，使用DOMContentLoad
3.懒加载(图片懒加载、组件懒加载...)
4.给DOM查询做缓存
5.频繁DOM操作，将元素整合一起一次性插入到DOM结构中
6.节流、防抖
存储
localStorage-sessionStorage-cookies的区别？
cookies: 服务器记录用户状态的一种方式，服务端设置、客户端存储，每次发起请求时，携带发送给服务端，存储大小为4KB，过期时间由expires属性规定，只能被同源页面所共享访问
sessionStorage：H5提供的本地存储方式，代表一次会话所保存的数据，仅在当前会话窗口有效，关闭则失效，存储大小为5M，只能被同源同窗口页面所共享访问
localStorage：H5提供的本地存储方式，除非手动删除，否则永远不会消失，存储大小为5M，只能被同源页面所共享访问
跨域
什么是同源策略？
浏览器要求当前页面与服务器必须同源，即协议、域名、端口三者必须相同
说一下你了解的Ajax?
Ajax:用于异步请求数据，核心是XMLHttpRequest
概念：在客户端与服务端之间引入一个中间层(Ajax引擎)，使得用户操作与服务端响应异步化
使用：创建Ajax；连接服务器；发送请求；响应请求
优点：实现局部更新 (无刷新状态下)；降低服务器压力
缺点：当发送多个Ajax请求时，页面加载渲染较慢；安全较低
Ajax的五种状态？
xhr-readyState：
1.0 未初始化，还未调用send()方法
2.1 未载入，send()方法已调用，正在发生请求
3.2 载入完成，send()方法执行完成，客户端已接收完服务端返回的内容
4.3 交互，正在解析响应内容
5.4 完成，响应内容解析完成，可以在客户端中调用
什么是CORS?
CORS：跨域资源共享，是一种机制，利用服务端的HTTP头部实现客户端与服务端之间资源共享
演示代码：
response.setHeader('Accept-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, HEAD');
response.setHeader('Accept-Control-Allow-Headers', 'xxx');
response.setHeader('Accept-Control-Allow-Origin', '*');
说一下fetch发送两次的原因?
fetch第一次发送的是option请求，询问服务器是否支持修改的请求头request header，如果服务器支持，则第二次发送真正的请求
JSONP、原理、例子?
JSONP: 客户端向服务端请求JSON数据，服务端接收请求，将响应的数据放在一个指定名称的回调函数中，返回给客户端
原理：利用script绕过同源策略的限制
例子：
浏览器
说说你知道的浏览器内核有哪些？以及对它的理解？
浏览器 内核👇
IE trident
Chrome blink
Opera blink
FireFox gecko
Safari webkit
浏览器的内核分为两部分：渲染引擎和JS引擎👇
1.渲染引擎：负责取得页面的内容，整理讯息，计算网页的显示方式，然后输出在显示器上，
浏览器的不同内核对网页语法解析不同，所以渲染效果也不同
2.Js引擎：解析和执行Js代码，实现网页的动态效果
输入一个URL到页面渲染的过程？
加载过程：
1.DNS解析 (域名 -> IP地址)
2.浏览器根据IP地址发送请求给服务器
3.服务器处理请求，并返回相应内容给浏览器
渲染过程：
1.根据HTML代码，生成DOM Tree
2.根据CSS代码，生成CSSOM
3.将DOM Tree和CSSOM整合形成Render Tree
4.根据Render Tree开始渲染页面
5.若遇到
6.直到Render Tree渲染完成
工程化、模块化概念
前端模块化？
模块化：具有特定功能的对象
定义模块化的流程：
1.定义模块(对象)
2.导出模块
3.引入模块
作用：存储多个独立的功能块，复用性高
种类：Common.js、CMD、AMD
Common.js用于服务器环境，CMD和AMD用于浏览器环境
前端工程化？
1.开发工具
2.开发流程
3.开发规范
4.开发仓库
5.模块化开发
6.组件化开发
7.项目部署
8.性能优化
Vue
说一下$nextTick?
1.Vue是异步渲染
2.data改变之后，DOM不会立刻渲染
3.$nextTick会在DOM渲染之后触发，以获取最新的DOM
this.$nextTick(() => {})
包含父子组件的生命周期调用顺序？
1.挂载阶段
beforeCreate(父) -> Created(父) -> beforeMount(父) ->
beforeCreate(子) -> Created(子) -> beforeMount(子) ->
Mounted(子) -> Mounted(父)
2.更新阶段
beforeUpdate(父) -> beforeUpdate(子) -> Updated(子) -> Updated(父)
3.销毁阶段
beforeDestroy(父) -> beforeDestroy(子) -> Destroyed(子) -> Destroyed(父)
说一下路由守卫?
路由守卫：路由跳转时做一些验证，比如登录验证等
路由守卫有三种：
1.全局守卫，router.beforeEach(to,from,next)，在main.js中设置
2.路由对象里面的守卫，router.beforeEnter(to,from,next) 与router.beforeEach(to,from,next)用法一致，仅作用于当前路由
3.组件独享的守卫，仅在当前组件有效，
router.beforeRouteEnter(to,from,next);
router.beforeRouteUpdate(to,from,next);
router.beforeRouteLeave(to,from,next);
三个参数：
1.to 到哪个目标路由
2.from 来自哪个路由
3.next 是否执行下一步
说下路由跳转的方式?
1.this.$route.push()
2.router-link
说说生命周期?
创建/挂载阶段：
1.beforeCreate: 实例创建完成，data和methods未初始化
2.created: 实例、data、methods初始化完成，模板未编译
3.beforeMount: 模板已编译完成，未挂载到页面中
4.mounted：模板已挂载到指定的页面容器中
更新阶段：
5.beforeUpdate：实例更新之前调用，data是最新的，但页面上的数据不是最新的(DOM未渲染)
6.updated：实例更新之后调用，data、页面上的数据都是最新的(DOM已渲染完成)
销毁阶段：
7.beforeDestroy: 实例销毁之前调用，实例仍可用
8.destroy：实例销毁之后调用，监听事件、绑定事件已移除，子元素已销毁
说一下双向数据绑定原理?
Vue双向数据绑定原理是通过数据劫持结合发布-订阅者模式实现的
1.数据劫持是通过Object.defineProperty()实现的
2.发布-订阅者模式是vue data在很多个组件使用，每个使用的组件都会将data注册到一个数组中，当数据发生改变时，就会遍历这个数组分别通知它们，各自更新元素
虚拟DOM实现原理?
1.Js对象模拟真实的DOM树，将真实DOM树进行抽象
2.diff算法，比较两颗虚拟DOM树之间的差异
3.path算法，将两个虚拟DOM对象之间的差异应用到真实的DOM树上
自定义组件？
v-model
父组件的子组件上使用 v-model="name"
子组件上 :
value="text" @click="$emit('click', $event.target.value)"
model: {prop:'text',event: 'click'}
props: {text: {type: 'String',default: () => {return ''}}}
说说组件间的通讯?
1.父子组件间通讯
props：传递属性，父组件在子组件上通过自定义属性传递给子组件，子组件通过props接收
emit调用父组件方法
2.隔代组件间通讯
provide/inject
3.兄弟组件间通讯
通过Vue实例(new Vue())自带的emit、$off实现
$on绑定自定义事件
$emit调用自定义事件
$off在beforeDestroy中卸载事件
4.Vuex
computed和watch的区别?
1.computed: 计算属性，根据data的数据对象做缓存，依赖其属性的属性值，属性值改变才会重新计算渲染，拥有get和set方法
2.watch：侦听器，侦听依赖属性的属性值，如果属性值改变，则会触发一个函数默认是浅度监听，监听值类型，能够获取到oldVal，如果要进行深度监听，则需要用deep+handler进行监听，监听引用类型，获取不到oldVal,共用一个地址，属于异步函数
组件中的data为什么是一个函数?
当data是一个函数时，每个组件创建一个私有数据空间，组件各自维护自身数据，如果data是一个对象，组件共有一份data，一个变全都变
说说你对keep-alive的了解?
1.用于缓存组件
2.Vue性能优化的方式
3.频繁切换，不需要重复渲染
父组件引入三个子组件ABC，初次加载先显示A组件，可以通过按钮切换组件，他们都是↓
mounted: console.log('mounted');
destroy: console.log('destroy');
正常情况下：
初次渲染： A mounted
点击B组件：A destroy B mounted
点击C组件：B destroy C mounted
点击A组件：C destroy A mounted
不断循环...
使用keep-alive后：
初次渲染：A mounted
点击B组件：B mounted
点击C组件：C mounted
点击A组件：不输出，已缓存
MVVM和MVC的区别?
MVVM：👇
M：Model，数据模型(定义数据、修改、操作业务逻辑)
V：UI组件，将数据模型转化为UI组件展现出来
VM：ViewModel，监听数据改变、操作业务逻辑、处理用户交互，通过双向数据绑定将View和Model连接起来的桥梁，View和Model之间是同步的，开发者只需关注业务逻辑，而无须操作DOM
MVC：
M：Model，数据模型（封装业务逻辑的数据和数处理方法）
V：视图（渲染页面）
C：控制器（控制流程、操作业务逻辑）
区别：
1.MVC中的Controller演变成为了MVVM中的ViewModel
2.MVVM主要解决：MVC中大量的DOM操作，导致页面渲染性能减低，加载变慢
3.MVC中View和Model之间是可以直接交互的，耦合度高，而MVVM中View和Model之间不直接交互，通过ViewModel来同步，耦合度低
4.MVVM是通过数据来驱动视图的展示而不是节点操作
v-show和v-if的区别?
相同点：两者都用于元素的显示和隐藏
区别：
v-show: 通过display属性来控制元素的显示隐藏，初次渲染性能消耗大，频繁切换渲染性能消耗小，适用于频繁切换元素的场景
v-if: 通过添加或删除DOM元素来控制元素的显示隐藏，初次渲染性能消耗小，频繁切换渲染性能消耗大，适用于一次切换元素的场景
说一下Vuex?
Vuex: 状态管理模式
state：数据的唯一来源(数据源)，所有Vuex的数据都存储在state中 (即内存中)
getter：state的计算属性，类型与computed，主要用于过滤数据
action：将mutation处理数据的方法异步化，view层通过store.dispatch分发action
mutation: commit mutation同步处理数据，一般先commit一个mutation，在mutation中传入一个state,在state中修改数据，这样做是为了记录每一个数据修改的历史和轨迹，便于监听
module: 当项目复杂时，每个模块都拥有各自的state、getter、action、mutation，便于管理
