一、HTML
1.html5和css3新特性
html5：
自定义属性data-id
本地存储：localStorage,sessionStorage
语义化标签：header,nav,section,aside,article,footer
音频视频：audio,video
画布：canvas
表单控件：date,time,email,url,search,tel,file,number
css3:
圆角边框border-radius,边框阴影box-shadow,边框图片border-image
颜色rgba,渐变颜色：线性渐变liner-gradient,径向渐变radial-gradient
3D,2D转换：transform,缩放scal,扭曲skew,旋转rotate,移动translate
flex布局：display:flex;
动画animation：animation:all 0.3s;
多媒体查询：@media screen and (width:800px){...}
盒模型：标准盒模型，怪异盒子模型；box-sizing:border-box,content-box;
2.常用的响应式布局
流式布局：使用百分比或者 em/rem 单位设置元素的宽度和高度，使得页面元素能够随着视口大小的变化而自适应调整。
栅格系统：将页面分为若干列，每列的宽度固定，通过设置不同的列数和列之间的间隔来适应不同的屏幕尺寸。
媒体查询：通过设置不同的 CSS 样式来适应不同的屏幕尺寸，可以针对不同的屏幕尺寸设置不同的样式表。
flexbox 布局：使用 flexbox 布局可以方便地实现元素的自适应和自动排列，适用于需要动态调整布局的场景。
CSS Grid 布局：使用 CSS Grid 布局可以将页面划分为多个区域，并通过设置不同的网格线来控制元素的位置和大小，适用于复杂的布局场景。
3.什么是内存泄漏
是指不再用的内存没有被及时释放出来，导致改该段内存无法被使用
4.为什么会导致内存泄漏
无法通过js访问某个对象，而垃圾回收机制却认为该对象还在被引用，就不会释放该对象，导致该内存永远无法释放，积少成多系统会越来越卡以至于崩溃
5.垃圾回收机制有哪些策略
标记清除法，引用计数法
6.哪些操作会引起内存泄漏
意外的全局变量引起的内存泄漏，闭包引起的内存泄漏，没有清理的dom元素引用，遗忘的定时器或者回调函数
7.js继承的6种方法
原型链继承，构造函数继承，组合继承(原型+借用构造)，原型式继承，寄生式继承，寄生组合继承。
es6新增class继承
原型链继承:
让一个构造函数的原型是另一个类型的实例，那么这个构造函数new出来的实例具有该实例的属性
优点：写法方便简洁，容易理解
缺点：对象实例共享所有继承的属性和方法，无法向父类构造函数传参
构造函数继承：
在子类构造函数的内部调用父类型构造函数，使用apply或call方法将父对象的构造函数绑定在子对象上
优点：解决了原型链实现继承的不能传参的问题和父类的原型共享的问题
缺点：方法都在构造函数中定义，因此无法实现函数复用
在父类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式
class：
通过extends关键字来实现继承，其实质是先创造出父类的this对象，然后用子类的构造函数修改this
子类的构造方法中必须调用super方法，且只有在调用了super之后才能使用this，因为子类的this对象是继承父类的this对象，然后对其进行加工，而super方法表示的是父类的构造函数，用来新建父类的this对象
优点：语法简单易懂，操作更方便
缺点：并不是所有的浏览器都支持class关键字
8.什么是作用域/作用域链
作用域：就是变量可以使用的一个范围。好处：增强程序可靠性，减少名字冲突
作用域可分为：全局作用域，函数作用域，块状作用域，动态作用域
作用域链：一个变量在当前作用域没有定义，但是被使用了，它就会向上层作用域进行查找，如果没有找到就会报错，这个自由变量查找的过程就是作用域链
9.什么是原型/原型链
原型：就是一个对象自带隐式的__proto__属性
原型链：当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，就会沿着这个对象的原型链向上查找，直到null还没有找到，就会返回undefined,这样一直向上查找就是原型链。
10.w3c标准和web标准
web标准主要分为结构，表现，行为。结构html标签，表现css样式，行为指页面与用户的交互由js部分组成。
w3c是对web标准提出的规范化的要求，即代码规范
对结构的要求：标签字母要小写，标签要闭合，不允许随意嵌套
对表现和行为的要求：使用外链css和js脚本，实现结构与表现分离，提高页面的渲染效率，更快的显示出网页内容
11.对语义化标签的理解
可以理解为用正确的标签做正确的事情。header,footer,article,nav,aside,section
好处:在没有加载css的情况下也能呈现较好的内容结构与代码结构，易于阅读
有利于seo,便于团队的开发与维护
12.es5和es6语法
es5常用数组：forEach,map,filter,for..of,every,some,find,findIndex,reduce,reduceRight
es6新增语法：let,const,解构赋值，扩展运算符,模板字符串，symbol数据类型，set和map数据结构，promise，class,箭头函数，proxy拦截，import模块导入
数组：Array.from()转为数组，Array.of()负责把一堆文本或者变量转换成数组，fill()填充，copyWithin将指定位置的成员复制到其他位置，返回当前数组。
字符串方法：startsWith()返回布尔值，表示参数字符串是否存在原字符串的头部，endsWith()返回布尔值，表示参数字符串是否存在原字符串的尾部，repeat()重复，String.fromCodePoint()用于成uniCode码点返回对应字符
ES7：includes(),Math.pow(1,3)求幂运算
ES8：async,await异步解决方案，优化回调地狱的写法，Object.values(),Object.entries(),String.padStart，String.padEnd()填充目标长度
ES9：异步迭代Promise.finally()，flat,flatMap()数组降维方法，String.trimStart()，String.trimEnd()去除首位空格字符
13.ajax,axios和fetch的区别
都是js种用于发送http请求的API
AJAX Ajax 即"AsynchronousJavascriptAndXML"（异步 JavaScript 和 XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
本身是针对 MVC 编程，不符合前端 MVVM 的浪潮 基于原生 XHR 开发，XHR 本身的架构不清晰
不符合关注分离（Separation of Concerns）的原则 配置和调用方式非常混乱.
fetch是原生js自带的，axios是封装的原生xhr
axios支持更广泛的浏览器和node.js版本，而fetch只能在较新的浏览器种使用，或需要使用polfill兼容旧版本浏览器
axiso可以拦截请求和响应，可以全局配置默认的请求头，超时时间等，而fetch目前不支持
axios默认返回json格式的数据，而fetch返回的是response对象，需要通过response的方法(json,text等)将结果转换成所需的格式。
axios对于请求错误可以直接抛出异常，方便进行错误处理，而fetch的错误处理比较繁琐。需要手动检查response.ok属性
fetch 的优点：
语法简洁，更加语义化 基于标准 Promise 实现，支持 async/await 更加底层，提供的 API 丰富（request, response） 脱离了 XHR，是 ES 规范里新的实现方式
fetch 的缺点：
fetch 只对网络请求报错，对 400，500 都当做成功的请求，服务器 返回 400，500 错误码时并不会 reject，只有网络错误这些导致请 求不能完成时，fetch 才会被 reject
Axios 是一种基于 Promise 封装的 HTTP 客户端，其特点如下：
浏览器端发起 XMLHttpRequests 请求 node 端发起 http 请求 支持 Promise API
监听请求和返回 对请求和返回进行转化 取消请求 自动转换 json 数据 客户端支持抵御 XSRF 攻击
14.常见的有哪些跨域
JSONP跨域：通过动态创建<script>标签，利用script标签的跨域特性来实现跨域请求数据。
CORS跨域：是一种跨域资源共享的标准，通过在服务器端设置响应头，允许指定的源访问特定的资源。
代理跨域：在同源的服务器端设置代理，将客户端请求发送到目标服务器，再将目标服务器的响应返回给客户端，从而实现跨域请求数据
WebSocket协议跨域：它是一种全双工通信协议，在建立连接时需要进行握手，握手过程中可以设置origin头，从而实现跨域请求数据
跨域资源嵌入（CRI）：通过在同源的页面中嵌入目标资源，从而实现跨域请求数据。常见的CRI方式有<img>、<link>、<script>等标签。
15.怎么会触发跨域，及解决方法
出于浏览器安全策略考虑了，跨域的话他首先有3点，第一点需要在浏览器当中，第二点需要请求后端接口，第三点触发了同源策略。
同源策略相当于浏览器的一个自我保护机制。要求三点，第一点是域名，第二点是协议，第三点是端口号，三者一旦触发任何一个不同都会触发跨域问题
解决方案：一是后端通过配置请求头实现跨域；二是本地服务器开启一个代理实现跨域
16.浏览器中输入URL到网页显示，整个过程发生了什么
域名解析，发起tcp三次握手，发建立tcp连接之后发起http请求，服务端响应http请求，浏览器得到html代码，浏览器解析html代码并请求代码中的资源，浏览器对页面进行渲染。
17.三次握手和四次挥手
三次握手：第一次，建立连接时，客户端发送syn包到服务端，等待服务端确认
第二次，服务端收到syn包必须确认客户端的syn，同时也发送一个syn包和ack包。
第三次，客户端收到服务器的syn和ack包，向服务器发送确认包ack，发送完毕客户端和服务端连接成功，完成三次握手
四次挥手：第一次，客户端向服务端发送一个FIN包，表示客户端没有数据要发送了
第二次，服务端收到FIN包后，向客户端发送ACK包，表示已收到客户端的请求同时还需要告诉客户端自己还有数据要发送
第三次，服务端发送完所有数据之后，向客户端发送FIN包，表示自己也没有数据要发送了
第四次，客户端收到服务端发送的FIN包，向服务端发送ACK包表示已确认收到请求
18.如何提高网站的下载效率
网站本身(尽量减小网站体积)
图片/视频进行压缩，图片合并(css精灵图)
代码进行压缩与合并(去掉空格，换行，缩进，引号等)
19.防抖/节流
防抖：只会在最后一次事件后执行触发函数。原理：维护一个定时器，将很多个相同的操作合并成一个，规定在delay后触发函数，如果在此之前触发函数，则取消之前的计时重新计时，只有最后一次操作能被触发。
应用场景：实时搜索input输入框
节流：不管事件多么的频繁，都会保证在规定时间内触发事件函数。原理：判断是否达到一定的时间来触发事件，如果当前时间距离上一次执行时间超过设定的等待时间 ，则执行函数。
应用场景：滚动事件，鼠标移动事件。
20.浮动元素引起的问题，以及解决方法
问题：父元素的高度无法被撑开，影响同级元素
如果不是第一个元素浮动，则该元素之前的元素也需要浮动，会影响页面的显示结构。
解决方法：父级定义height，或者定义overflow:hidden,结尾处加空div标签clear:both，添加伪元素
:after{content:"",display:block;clear:both;}
21.如何给按钮绑定两个onclick事件
var btn = document.getElementById("btn");
btn.addEventListener("click",helo);
btn.addEventListener("click",hes);
function helo(){......};
function hes(){......};
22.document.write和innerHtml区别
document.write是直接写入到页面的内容流，页面会被重写
innerHtml是DOM元素的一个属性，修改内容不会导致页面的全部重绘
什么是Ajax。如何使用Ajax
Ajax是异步的JavaScript和xml,能够刷新局部页面而不重新加载整个页面
全称：Asynchronous JavaScript and XML
第一步创建xmlHttprequest对象
第二步使用xmlHttprequest对象的open()和send()方法发送资源请求给服务器
第三步使用x...对象的responseText和responseXML属性获得服务器的响应
第四步监听onreadystatechange函数完成对应的操作
24.Xml和json的区别
json数据体积小，传递的速度更快些，交互更方便
xml描述性比较好
25.什么是执行栈，什么是执行上下文？
执行栈：存储函数调用的栈结构，遵循先进后出的原则
执行上下文：是对Javascript代码执行环境的一种抽象概念，只要有Javascript代码运行，那么它就一定是运行在执行上下文中
全局执行上下文：只有一个，浏览器中的全局对象就是 window对象，this 指向这个全局对象
函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文
Eval 函数执行上下文：指的是运行在 eval 函数中的代码，很少用而且不建议使用
26.网站性能优化
减少http请求数；使用缓存；JavaScript中的dom操作优化，css选择符优化；图片编码优化，懒加载；使用负载均衡方案
27.px,em,rem的区别
Px表示像素，绝对单位，不会因其他元素的尺寸变化而变化
Em 相对与父元素的字体大小，em是相对单位，没有固定值
rem是相对于根元素的字体大小进行计算
28.浏览器是如何渲染页面的
解析html文件，创建dom树；解析css；将css与dom合并；布局和绘制，重绘和重排
29.$(document).ready()方法和window.onload有什么区别
$(document).ready()在DOM载入就绪时进行操作，并调用执行绑定的函数
window.onload()在网页中所有的元素完全加载到浏览器后执行
30.<!Doctype>作用？严格模式与混杂模式如何区分，有何意义
<!Doctype>声明位于文档中的最前面，告知浏览器以何种模式来渲染文档
严格模式，以该浏览器支持的最高标准运行
混杂模式，页面以宽松向后兼容的方式显示
31.css中link和@import的区别
link属于HTML标签，import是css提供的
link无兼容问题，@import 有
页面加载时，link会同时加载，@import引用会等到页面被加载完才被加载
32.css优先级
!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认样式
33.postion的absolute和fixed的共同点和不同的
共同点：改变行内元素的呈现方式，display被设置为block
元素脱硫默认文档流，不占据空间
不同点：在有滚动条情况下，fixed定位不会随滚动条移动而移动，absolute会随滚动条移动
34.css盒子模型
分为标准盒模型和IE盒模型(怪异盒模型)
标准盒模型：内容区高/宽度+外边距margin+边框border+内边距padding
怪异盒模型：内容去高/宽度+边框border+内边距padding
属性值：box-sizing; 默认content-box, border-box/ inherit
35.null和undefined的区别
Null代表定义并赋值了，且值为null，转为数值时为0，对象原型链的终点
undefined代表定义未赋值，默认值为undefined，转为数值时为NAN.
36.元素的alt和title属性有什么异同
alt作为图片的替代文字出现，title作为图片的解释文字出现
alt属性应用较少，如img,area,input . title应用较多，如a,form，input,div,p等
alt只能是标签属性，title可以是标签属性也可以是标签，网页的标题标签
37.iframe优缺点：
优点：解决加载缓慢的第三方内容如图标和广告的加载问题，并行加载脚本
缺点：Iframe会阻塞主页面的onload事件，即使内容为空，加载也需要时间
没有语意。
38.怎么解决外边距塌陷问题：
外边距塌陷：产生在嵌套元素中（父元素与子元素）
垂直方向上的外边距合并现象（margin-top和margin-bottom）
解决方法： 给父元素加边框border
给父元素加内边距padding
给父元素加overflow:hidden
39.var，let，const区别：
let和const具有块级作用域，var不存在；
var存在变量提升，let,const不存在变量提升，就是变量只能在声明后使用，否在会报错；
var可以重复声明变量，后声明的同名变量会覆盖之前声明的变量。Const和let不允许重复声明变量；
let,const存在暂时性死区，也就是声明变量之前都是不可用的；
var和let可以不用设置初始值，const必须声明变量初始值；
let创建的变量可以更改指针指向，const声明的变量不可以改变指针的指向。
40.Promise 是异步编程的一种解决方案
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject
在异步操作成功式调用resolve方法，使用.then方法执行回调，异步操作失败时调用reject方法，使用catch方法执行回调
特点：对象的状态不受外界影响 （3种状态）
Pending状态（进行中）Fulfilled状态（已成功）Rejected状态（已失败）
一旦状态改变就不会再变 （两种状态改变：成功或失败）
Pending -> Fulfilled Pending -> Rejected
41.宏任务与微任务
宏任务是由宿主发起的，而微任务由JavaScript自身发起
宏任务包括：setTimeout setInterval Ajax DOM事件
微任务：Promise async/await
微任务比宏任务的执行时间要早
执行顺序：同步程序-->process.nextTick-->微任务-->宏任务-->setImmediate
42.什么是闭包？作用
是指内层函数可以访问外层函数的变量，外层函数无法操作内层函数的变量的特性就叫做闭包。
好处：隔离作用域，保护私有变量；长期存在内存中，不会被垃圾回收机制清除，可以延迟变量生命周期；
坏处：过度使用可能会造成内存泄漏；
解决方法：使用完后将函数的引用赋值为null
43.什么是事件委托
事件委托:把原本需要绑定在子元素的响应事件委托给父元素,让父元素担当事件监听的职务
44.说说Async await
Async 和 await两种语法结合可以让异步代码像同步代码一样
Async 函数的返回值为promise对象，promise对象的结果由async函数执行的返回值决定
Await必须写在async中
Await右侧的表达式一般为promise对象
Await返回的是promise成功的值
Await的promise失败了，就会抛出异常，需要通过try-catch捕获处理
45.for...of 和 for...in
for...in 循环主要是为了遍历对象而生，遍历的是数组的索引
for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象
for...of无法遍历对象
for-in适合遍历对象，遍历数组拿到数组的下标。For-of适合遍历数组，直接拿到数组的项；for of只能遍历具备iterator接口的类型
46.为什么会有任务队列呢？
因为JavaScript是单线程，执行任务必须一个一个的执行，为了高效的利用cpu，就有了同步任务和异步任务。
47.同步和异步的区别？案例？
同步：上一件事没有完成，继续处理上一件事，只有上一件事完成了才会做下一件事。
异步：规划要做一件事情，如果是异步事情，不是当前立马去执行这件事情，需要等一定的时间，不会等着他的执行，而是继续执行下面的操作。
同步案例：for循环，alert,console.log等
异步案例：定时器，ajax等
48.常用BOM
Window: Alert、prompt、confirm、setInterval,clearInterval,setTimeout,clearTimeout,
History: go,back,forward
Location:href
49.构造函数生成实例的执行过程：使用面向对象编程时，new关键字做了什么(new原理)
新建一个object对象
为object对象添加一个proto属性，使其指向构造函数的prototype属性
修改构造函数this的指向，使其指向新建的object对象，并且执行构造函数
最后将这个object对象返回出去
代码：
function newFun(Fun, ...args) {
let newobj = {}
newobj.__proto__ = Fun.prototype;
const result = Fun.apply(newobj, args);
return result instanceof Object ? result : newobj;
}
function Person(name) {
this.name = name;
}
Person.prototype.say = function() { //只能通过这种形式定义方法
console.log(this.name);
}
let p1 = newFun(Person, '小白');
p1.say();
console.log(p1);50.模块化开发的好处？几种模块规范
模块化理解：一个模块是实现一个特定功能的一组方法
能解决文件之间的依赖关系
可以避免命名的冲突
能进行代码的复用。
模块规范：
CommonJS方案，通过require来引入模块，通过module.exports定义模块的输出接口
Es6方法，使用import和export的形式来导入导出模块
Amd方案采用异步加载的方式来加载模块
Cmd方案
51.Bootstrap栅格系统：
窗口<768px （移动设备------xs） 容器宽度为 auto
窗口>=768px（小屏平板------sm） 容器宽度为 750px
窗口>= 992px（中屏pc------md） 容器宽度为 970px
窗口>=1200px（大屏pc------lg） 容器宽度为1170px
52.Http和Https区别（高频）
HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
端口不同，HTTP端口80，HTTPS端口443；
HTTP明文传输 数据未加密，安全性较差，HTTPS 它是ssl+http，数据是加密的安全性较好；
HTTP响应速度比HTTPS快，HTTP使用tcp三次握手建立连接，客户端与服务端需要交换3个包，而HTTPS除了tcp三个包，还要加上ssl握手需要的9个包。
HTTPS建构在ssl/tls之上的http协议，所以更耗费服务器资源
53.三次握手和四次挥手
三次握手：
第一次：建立连接时客户端发送syn包到服务器，等待服务端确认
第二次：服务器收到syn包必须确认客户的syn(同步序列编号)，同时也发送一syn+ACk包
第三次：客户端收到服务器的syn和ack包，向服务器发送确认包ack，发送完毕，客户端和服务端连接成功，完成三次握手
四次挥手：
第一次，客户端向服务器发送一个FIN（结束）包，表示客户端没有数据要发送了。
第二次，服务器收到FIN包后，向客户端发送ACK（确认）包，表示已收到客户端的请求同时还需要告诉客户端自己还有数据要发送
第三次，服务器发送完所有的数据后，向客户端发送FIN包，表示自己也没有数据要发送了
第四次，客户端收到FIN包后，向服务器发送ACK包以确认收到请求
53-1.为什么是三次握手而不是两次握手
在服务端收到SYN后，向客户端返回一个ACK确认就进入establish状态，万一这个请求中间遇到网络情况而没有传给客户端，客户端一直是等待状态，后面服务端发送的信息客户端也接受不到了
54.GET和POST区别（高频）
get在浏览器回退时不会再次请求；post在浏览器回退时会重新请求
get请求会被浏览器主动缓存；post不会需要手动进行一个设置
get请求参数会被浏览器完整的留在历史记录里，会暴露在地址栏里；post请求参数放在requestbody中，放在报文内部，相对来说比较安全
get一般用于查询信息，post提交某种信息
get会产生一个tcp的一个数据包，post产生两个
get参数有长度限制，最大只能传送1024kb的一个数据，post没有限制
Ge和post的选择：
1.私密性的信息请求使用post（如注册、登陆）。
2.查询信息使用get。
55.浏览器前缀以及浏览器使用的内核
-moz- 火狐浏览器
-webkit- 谷歌浏览器、safari
-ms- ie浏览器
-o- opera浏览器
56.什么是BFC,如何创建
Bfc即格式化上下文block formatting context，用于决定盒子的布局及浮动相互影响范围的一个区域，使内外的元素的定位不会相互影响。
创建 BFC 的条件：
根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex 等；
overflow 值为：hidden、auto、scroll；
57.JS的数据类型
基本类型：Undefined，String，Boolean，Null ，Bigint，Number，Symbol
引用类型：Array，Function，Date，Object，RegExp
基本数据类型是直接存储在栈中，引用数据类型存储在堆中
栈内存是自动分配的，堆内存是动态分配的，不会自动释放
58.判断数据类型有几种方法
Typeof，Instanceof，Constructor，Object.prototype.toString.call()
Typeof缺点：typeof null的值为Object，无法分辨是null还是Object；
typeof false // 'Boolean'
Instanceof：原理实际上就是查找目标对象的原型链
缺点：只能判断对象是否存在于目标对象的原型链上
console.log(123 instanceof Number); //false
Constructor
console.log(date.constructor.name)// Date
Object.prototype.toString.call()
缺点：不能细分为谁的实例
console.log(Object.prototype.toString.call(123)); // "object Number"
59.为什么typeof null是Object
因为在JavaScript中，不同的对象都是使用二进制存储的，如果二进制前三位都是0的话，系统会判断为是Object类型，而null的二进制全是0，自然也就判断为Object
60.箭头函数和普通函数的区别？箭头函数可以当做构造函数 new 吗
箭头函数的this指向它定义时所在的对象，而不是调用时所在的对象。
普通函数的this指向则是在运行时确定的，它取决于函数被调用时的上下文。如果函数被作为对象的方法调用，this指向该对象；如果函数被直接调用,this指向全局对象(在浏览器中是window对象)
不能作为构造函数使用，因为它没有自己的this绑定。
箭头函数不能使用call、apply、bind来修改this指向
箭头函数没有原型prototype，箭头函数不能当成一个构造函数
箭头函数没有自己的arguments，箭头函数处于全局作用域中，则没有arguments
61.HTTP头都有哪些字段
请求头：
cache-control 是否使用缓存
Connection：keep-alive 与服务器的连接状态
Host 主机域
返回头：
cache-control
etag 唯一标识，缓存用的
last-modified最后修改时间
62.说说你知道的状态码
200 OK - 请求成功状态码
201表示服务器已经成功处理了请求，并在服务器端创建了新的资源（用户注册)
204表示请求已经成功处理，但服务器没有返回任何内容（删除）
301 永久重定向状态码
304 未修改状态码。表示客户端的资源已经是最新的，不需要重新获取
400 错误请求状态码，表示客户端的请求有语法错误或无法被服务器理解
401 需要身份验证状态码。表示请求需要用户身份验证
403 禁止访问状态码。表示服务器理解请求，但拒绝执行该请求
404 资源不存在状态码。表示请求的资源不存在
500 服务器内部错误状态码。表示服务器内部发生错误，导致无法完成请求。
63.网络OSI七层模型都有哪些？TCP是哪一层的
七层模型：
(从下到上)物理层，数据链路层，网络层，传输层，会话层，表示层，应用层
TCP属于传输层
64.tcp和udp有什么区别
TCP协议全称是传输控制协议是一种面向连接的、可靠的、基于字节流的传输层通信协议；
UDP协议全称是用户数据报协议，在网络中它与TCP协议一样用于处理数据包，是一种无连接的协议
区别：
tcp面向连接，udp不需要连接
tcp需要三次握手四次挥手请求连接
tcp是面向字节流传输,udp是面向报文传输
tcp是可靠传输,udp是不可靠传输，但会最大努力交付
tcp是点对点的,UDP支持一对一，一对多，多对多
tcp首部占20字节, udp首部占8字节
udp实时性高，比tcp工作效率高
65.什么是回流 什么是重绘？
回流（重排）：render树中一部分或全部元素需要改变尺寸、布局、或着需要隐藏而需要重新构建，这个过程叫做回流
回流必将引起重绘
重绘：render树中一部分元素改变，而不影响布局的，只影响外观的，比如颜色。该过程叫做重绘
页面至少经历一次回流和重绘（第一次加载的时候）
66.JS常见的设计模式
单例模式、工厂模式、构造函数模式、发布订阅者模式、迭代器模式、代理模式
67.cookie和localStorage和sessionStorage的区别
cookie大小4kb；可以设置过期时间。若不设置过期时间，关闭浏览器窗口就失效。
localStorage永久存储，除非手动去清除，否则永远都存在，他的储存大小是5MB
sessionStorage关闭浏览器就会清除数据，存储大小为5MB
68.隐藏元素的方法有哪些
display:none不占空间的隐藏元素
visibility: hidden占据物理空间
opacity: 0 但是依旧存在页面中，占据位置
transform: translateX(-9999px);将元素移出视口外部
clip-path裁剪 clip-path: circle(0) 可以将元素进行隐藏
69.css哪些属性可以继承
css三大特性：继承，层叠，优先级
子元素可以继承父类元素的样式
font 相关属性：color，font-size, font-family, font-weight, font-style 等
text-decoration，text-align，letter-spacing，word-spacing，line-height，list-style，cursor
元素的可见性 ：visibility:hidden
表格布局的属性：border-spacing,border-collopse
列表的属性：list-style
70.首屏加载：首屏加载时间指的是浏览器从相应用户输入网址，到首屏内容渲染完成的时间，此时整个网页不一定全部渲染完成，但需要展示当前视窗需要的内容，首屏加载是用户体验的重要环节
计算首屏加载时间 times=(performance.timing.domComplete -performance.timing.navigationStart) / 1000
解决方法：
减小入口文件体积，静态资源本地缓存，UI框架按需加载，图片资源的压缩，组件重复打包，开启GZip压缩，使用SSR
二、Vue
1.Vue2生命周期
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期
beforeCreate，created， beforeMount，mounted，beforeUpdate，updated， beforeDestroy，destroyed
2.vuex专为vue应用程序开发的状态管理模式。
它是响应式的,当store中的状态发生变化，那么相应的组件也会相应的得到高效更新。它有五个模块，
state用于定义数据状态，
getter相当于计算属性，只有当他的依赖值发生了改变才会被重新计算，
mutation唯一更改store中状态的方法，且必须时同步函数，使用commit来触发相应方法，
action用于提交mutation，而不是直接变更状态，可以包含任意异步操作，使用dispatch来触发相应方法，
module可以将单一的store拆分为多个store同时保存在单一的状态树中
3.vue路由有几种模式，以及它们的区别和场景使用
hash和history模式，默认hash。vue-router实现原理(核心)：更新视图但不重新请求页面
区别：
hash,地址栏中有#号，#后面的内容为前端路由不会发送至服务端，对后端没有影响，改变hash不会重新加载页面。基于location.hash和hashchange事件实现路由切换，监听url中#后的变化来更新页面内容；无需后端配置，直接部署即可正常使用；无兼容性问题，容易被搜索引擎忽略，对seo不太友好。
history,地址栏中没有#号，形态更进阶传统url结构，美观性高；它是利用html5的historyAPI，修改浏览器历史记录栈，并通过popstate事件监听路由变化；history需服务端支持(如nginx配置路由重定向)，避免直接访问子路由时返回404错误；有兼容性问题需要ie10版本以上的浏览器；history完整url更易被搜索引擎抓取，但需配合服务端渲染实现seo优化；
场景：
hash：对seo无要求，需兼容老旧浏览器的小型应用或快速开发场景
history：追求url美观性，需seo优化的项目
4.vue-router 有哪几种导航钩子?
全局前置守卫：router.beforeEach(to,from,next),在路由导航出发之前调用。用于全局的权限验证，导航控制等。
全局解析守卫 router.beforeResolve(to,from,next) 在导航确认之前调用，也就是在beforeEach之后，在路由组件渲染之前，只在导航被确认之前调用一次。
全局后置钩子router.afterEach(to,from)在每次路由导航完成之后调用，不关心导航的成功与否。
路由独享守卫beforeEnter在单个路由配置中使用，用于对特定路由进行拦截。
组件内的导航守卫:：
beforeRouteEnter(to,from,next)在路由进入之前，在组件实例化之前调用。beforeRouteUpdate(to,from,next)在当前路由改变，但是该组件被复用时调用。beforeRouteLeave(to,from,next)在路由离开之前调用，导航离开该组件的对应路由时调用
5.路由对象route和router的区别，router的传参方式
route 是"路由信息对象"，包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。
router 是"路由实例对象"，包括了路由的跳转方法(push、go)，钩子函数等。
vue 路由传参数如何实现？主要通过 query 和 params 来实现
(1) query可以使用name和path而params只能使用name
(2) 使用params传参刷新后不会保存，而query传参刷新后可以保存
(3) Params在地址栏中不会显示，query会显示
(4) Params可以和动态路由一起使用，query不可以
(5）to="/goods?id=1001" this.$route.query.id 来接收
对象写法
this.$router.push({name:"login",query:{keyword:this.keyword}})
注意query传参对象写法必须给路由组件命名（添加name属性）
指定params参数可传可不传
在占位后面加个问号，就不会出现路径有问题 path:'/search/:keyword？'
如果传递的是空字符串，可以用undefined解决
this.$router.push({name:"login",params:{keyword:this.keyword||undefined}})
路由组件传递props数据
布尔值写法：在路由配置项里写props:true(只能传递params参数)
{ path:'/search/:keyword？', props:true }
接收props：'keyword' 使用{{keyword}}
对象写法：能携带一些额外参数
{ path:'/search/:keyword？', props:{a:1,b:2} }
接收 props：'keyword','a','b' 使用{{a}}
函数写法：params，query参数都能传递
{ path:'/search/:keyword？',
props(route)=\>({keyword:route.params.keyword}) }
接收props：'keyword' 使用{{keyword}}
6.vue常用修饰以及常见指令
修饰符：
.stop 阻止事件冒泡等同于 JavaScript 中的 event.stopPropagation()
.cpture 设置事件捕获
.self 只有当事件作用在元素本身才会触发
.prevent 阻止默认事件，比如超链接跳转 等同于 JavaScript 中的 event.preventDefault()
.once 事件只能触发一次
.native 触发js原生的事件
.number 把文本框的内容转换为数字
.trim 去除文本框左右空格
.passive 告诉浏览器你不想阻止事件的默认行为
键盘事件修饰符 @keyup.enter
.enter .tab .delete .esc .space .up .down .left .right
系统修饰符
.ctrl .alt .shift .meta
鼠标按钮修饰符
.left .right .middle
常见指令：
⑴v-bind：给元素绑定属性
⑵v-on：给元素绑定事件
⑶v-html：给元素绑定数据，且该指令可以解析 html 标签
⑷v-text：给元素绑定数据，不解析标签
⑸v-model：数据双向绑定
⑹v-for：遍历数组
⑺v-if：条件渲染指令，动态在 DOM 内添加或删除 DOM 元素
⑻v-else：条件渲染指令，必须跟 v-if 成对使用
⑼v-else-if：判断多层条件，必须跟 v-if 成对使用
⑽v-cloak：解决插值闪烁问题
⑾v-once：只渲染元素或组件一次
⑿v-pre：跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度
⒀v-show：条件渲染指令，将不符合条件的数据隐藏(display:none)
7.vue v-if和v-show的区别
v-if真正意义上的条件渲染，当条件成立时才会渲染dom,否则不渲染，每切换一次就会重新走一次声明周期updated
v-show是真正意义上的条件隐藏，不管条件是否成立，都会渲染，再根据条件是否成立才显示，使用css样式display:none，不会再走生命周期
v-if 有更高的切换消耗，而 v-show 有更高的初始化渲染消耗，一般推荐频繁切换的时候使用 v-show 更好，当我们的判断分支比较多的时候，和首次渲染的时候 使用v-if
8.v-if 和 v-for 为什么不建议一起使用
v-for和v-if不要在同一标签中使用，因为解析时先解析v-for在解析v-if，造成不必要的性能浪费
9.v-for为什么要加key:
提升渲染速度。防止vue替我们去计算DOM，给每个节点做一个唯一的标识，diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点，key的主要作用是为了高效的更新虚拟dom，，当两个元素位置发生改变时vue不会对整个列表进行重新渲染，而只是更换dom顺序减少资源消耗。
10.key值为什么一般不用index:
更新DOM的时候会出现性能问题，会发生一些状态bug
当你进行删除操作时，相应的key绑定关系也会变化，会被重新渲染，影响性能
如果使用唯一id作为key，删除 一条数据 后，剩下的元素因为与 key 的关系没有发生变化，都不会被重新渲染，从而达到提升性能的目的。
11.v-model原理解析
其实v-model是vue的一个语法糖。即利用v-model绑定数据后，既绑定了数据，又添加了一个input事件监听。
实现原理：
v-bind绑定响应数据
触发input事件并传递数据
12.为什么data是一个函数
每复用一次组件就 会返回新的data,如果不是一个函数，当修改组件数据时，其他组件所用的数据也会发生改变，会影响到其他实例
13.Vue组件通讯有哪些方式？
props 和 $emit父子组件传递数据,
parent 和 children 获取当前组件的父组件和当前组件的子组件
attrs 和 listeners不同层级组件间的数据传递
$refs 获取组件实例
envetBus 事件总线方式
vuex 状态管理
14.Diff算法有三大策略：
Tree Diff、Component Diff、Element Diff
diff 算法是一种通过同层的树节点进行比较的高效算法,
diff整体策略为：深度优先，同层比较
当data发生改变 会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法，会找到不同地方，只去渲染不同的地方，总的来说就是减少DOM，重绘和回流。
15.Vue的父子组件生命周期钩子函数执行顺序
加载渲染过程
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
子组件更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
父组件更新过程
父beforeUpdate -> 父updated
销毁过程
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
16.虚拟DOM是什么？有什么优缺点？
Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。
优点：
保证性能下限
无需手动操作DOM
缺点：
无法进行极致优化
首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。
17.Vue事件绑定原理
组件事件绑定是通过Vue自定义的on实现的。on、$emit 是基于发布订阅模式的，维护一个事件中心，on的时候将事件按名称存在事件中心里，称之为订阅者，然后emit将对应的事件进行发布，去执行事件中心里的对应的监听器。
18.Vuex 页面刷新数据丢失怎么解决？
需要做 vuex 数据持久化，一般使用本地储存的方案来保存数据，可以自己设计存储方案，也可以使用第三方插件。
19.Vuex 为什么要分模块并且加命名空间？
模块： 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能会变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
命名空间： 默认情况下，模块内部的 action、mutation、getter是注册在全局命名空间的 --- 这样使得多个模块能够对同一 mutation 或 action 做出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced:true 的方式使其成为带命名的模块。当模块被注册后，他所有 getter、action、及 mutation 都会自动根据模块注册的路径调整命名。
20.使用过 Vue SSR 吗？说说 SSR
SSR 也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端完成，然后再把 html 直接返回给客户端。
优点：SSR 有着更好的 SEO、并且首屏加载速度更快。
缺点：开发条件会受限制，服务器端渲染只支持 beforeCreate 和 created 两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于 Node.js 的运行环境。
服务器会有更大的负载需求。
21.vue 中使用了哪些设计模式？
工厂模式 - 传入参数即可创建实例
虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode。
单例模式 - 整个程序有且仅有一个实例
vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉。
发布-订阅模式。（vue 事件机制）
观察者模式。（响应式数据原理）
装饰器模式（@装饰器的用法）
策略模式，策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案 - 比如选项的合并策略。
22.你都做过哪些 Vue 的性能优化？
v-if 和 v-show 区分使用场景
computed 和 watch 区分场景使用
v-for 遍历必须加 key，key最好是id值，避免同时使用 v-if
组件销毁后把全局变量和定时器销毁
图片懒加载
路由懒加载
异步路由
第三方插件的按需加载
适当采用 keep-alive 缓存组件
防抖、节流的运用
服务端渲染 SSR or 预渲染
23.Vue.mixin 的使用场景和原理
提取组件中公共的代码，提高代码的复用性，可以通过vue 的 mixin 功能抽离公共的业务逻辑，原理类似"对象的继承"，当组件初始化时会调用 mergeOptions 方法进行合并，采用策略模式针对不同的属性进行合并。当组件和混入对象含有相同名选项时，这些选项将以恰当的方式进行"合并"。
24.nextTick 使用场景和原理
nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法。
this.$nextTick(()=>{ console.log("下次dom更新之后执行的回调") })
25.keep-alive 使用场景和原理
keep-alive 是 Vue 内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。
常用的两个属性 include/exclude，允许组件有条件的进行缓存，还有一个max最大缓存数。
两个生命周期 activated/deactivated，用来得知当前组件是否处于活跃状态。
keep-alive 运用了 LRU 算法，选择最近最久未使用的组件予以淘汰。
26.自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用。
update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较前后的绑定值。
componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
unbind：只调用一次，指令与元素解绑时调用。
原理：
1、在生成 ast 语法树时，遇到指令会给当前元素添加 directives 属性
2、通过 genDirectives 生成指令代码
3、在 patch 前将指令的钩子提取到 cbs 中，在 patch 过程中调用对应的钩子。
4、当执行指令对应钩子函数时，调用对应指令定义方法。
27.Vue 模板编译原理
Vue 的编译过程就是将 template 转化为 render 函数的过程，分为以下三步：
第一步是将 模板字符串转换成 element ASTs（解析器）
第二步是对 AST 进行静态节点标记，主要用来做虚拟 DOM 的渲染优化（优化器）
第三步是 使用element ASTs 生成 render 函数代码字符串（代码生成器）
28.Vue如何监测数组中的数据
通过包裹数组更新元素的方法实现，第一调用原生对应的方法对数组进行更新，第二重新解析模板，进而更新页面
方法：push(),pop(),shifit(),unshift(),splice(),sort(),reverse()
数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，而是选择数组方法进行重写，所以在 Vue 中修改数组的索引和长度无法监控到。需要通过以上7种变异方法修改数组才会触发数组对应的watcher进行更新。
修改数组也可以使用Vue.set()方法和vm.$set()方法
29.Vue如何检测对象中的数据
通过setter实现监视，且要在new Vue时就传入要监视的数据
对象中追加的属性，vue不做响应式处理，如需给后添加的属性做响应式，可以使用Vue.set(target,propertyName/index,value)或 vm.$set(target,propertyName/index,value)
30.vue中的数据代理
通过vm对象来代理data对象中的属性的操作
好处：更加方便的操作data中的数据
基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter，在getter/setter内部去操作(读/写)data中对应的属性
31.mvc，mvp，mvvm的区别？
MVC:
是包括view视图层、controller控制层、model模型层。各部分之间的通信都是单向的。View 传送指令到 Controller，Controller 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈. Model不依赖于View，但是 View是依赖于Model的
MVP 全称 Model（模型层 ）-View（视图层 ）- Presenter（提供者）。
MVP:
是从经典的 MVC 模式演变而来。模型与视图完全分离。Presenter 与具体的 View 是没有关联的，而是通过定义好的接口进行交互。从而保证在变更 View 的时候 Presenter 保持不变。这样 Presenter 就能够实现复用。还可以编写测试用的 View，模拟用户操作。
MVP 模式与 MVC 唯⼀不同的在于 Presenter 和 Controller。
MVVM:
就是 Model-View-ViewModel 的缩写，MVVM 将视图和业务逻辑分开。
View：视图层，Model 模型层，而 ViewModel 是把两者建立通信的桥梁。在 MVVM 框架下，View 和 Model 之间没有直接的联系，而是通过 ViewModel 进行交互。它们之间的交互都是双向的，因此 view 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反映到 View 上。可以说它们两者是实时更新的，互相影响。因此开发者只需要关注业务逻辑，不需要手动操作 DOM，也不需要关注数据状态的同步问题，这些都由 MVVM 统一管理.
32.Vue3的Proxy 相比于 Vue2的DefineProperty 的优势
Vue3是通过Object.define.proxy 对对象进行代理，从而实现数据劫持。使用Proxy 的好处是它可以完美的监听到任何方式的数据改变，唯一的缺点是兼容性的问题，因为 Proxy 是 ES6 的语法
Object.defineProperty 的缺点：
Object.defineProperty 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实施响应。
Object.defineProperty 只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。
33.Vue双向数据绑定原理
数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调从而达到数据和视图同步。
33.Vue 响应式数据的原理
整体思路是数据劫持 + 观察者模式
Vue 的响应式原理是Object.defindeProperty 中的访问器属性中的 get 和 set 方法，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render当前组件,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。
34.Vue2，Vue3生命周期
beforeCreate -> setup() 开始创建组件之前，创建的是data和method
created -> setup() 开始创建组件之后
beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。
mounted -> onMounted 组件挂载完成后执行的函数
beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。
updated -> onUpdated 组件更新完成之后执行的函数。
beforeDestroy -> onBeforeUnmount 组件卸载之前执行的函数。
destroyed -> onUnmounted 组件卸载完成后执行的函数
keep-alive组件生命周期
activated -> onActivated
deactivated -> onDeactivated
35.uniapp生命周期
应用生命周期：
onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onError 当 uni-app 报错时触发
页面生命周期：
onload 监听页面加载
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
36.Computed和watch，methods的区别
Computed有缓存，必须使用return返回数据，可以直接使用，不需要在data中定义。
Watch监听的是data中定义的数据，没有缓存。
Methods 是定义方法的没有缓存，只要调用，就会执行
当一个数据影响多条数据时适合使用watch
多条数据影响一个数据时适合使用computed
37.一般在哪个生命周期请求异步数据
created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
在created中最好，能更快获取到服务端数据，减少页面加载时间，用户体验更好；SSR不支持 beforeMount 、mounted 钩子函数，放在 created 中有助于一致性。
38.Vuex严格模式
开启严格模式，仅需在创建 store 的时候传入 strict: true：
在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到
不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更------请确保在发布环境下关闭严格模式，以避免性能损失。
const store = createStore({
strict: process.env.NODE_ENV !== 'production'
})
39.高级用法辅助函数（语法糖）
mapState,mapActions,mapMutations,mapGetters
辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
如何使用：
Import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
computed(){ ...mapState('数据名字')}
40.Vue 初始化页面闪动问题。
能够解决插值表达式闪烁问题，需要在style中设置样式v-clock{display:none}
41.什么是 mixin ？mixin和页面生命周期执行顺序问题
Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。
mixin中的代码先执行，单文件中的后执行。
mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted
42.Vue的删除数组和原生删除数组的区别delete
删除数组
delete只是把数组元素的值变成empty/undefined，元素的键不变，数组长度不变。
Vue.delete直接删除数组，改变数组的键值和长度。
删除对象
两者相同，都会把键名（属性/字段）和键值删除。
43.什么是slot？什么是命名slot？slot怎么使用？
插槽就是子组件中的提供给父组件使用的一个占位符
有三种方式，默认插槽，具名插槽，作用域插槽
具有名字的插槽，在默认插槽基础上指定插槽的名字（name = " "）。
父组件指明放入子组件的哪个插槽 slot = "footer"，如果是template可以写成 v-slot : footer。
VUE中的作用域插槽可以让父组件使用插槽时，插槽内容能够访问子组件中的数据
44.在做项目中，会遇到这么一个问题，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。那么有哪些解决办法呢？
在模板中使用两次style标签。
scoped穿透：/deep/ >>>
45.单页面应用和多页面应用区别以及优缺点，
单页面：只有一个html页面，跳转方式是组件之间的切换
优点：跳转流畅、组件化开发、组件可复用、开发便捷
缺点：首屏加载过慢
多页面：有多个页面，跳转方式是页面之间的跳转
优点：首屏加载块
缺点：跳转速度慢
46.assets和static的区别？
assets中的文件会经过webpack打包，重新编译，static中的文件，不会打包编译。static中的文件只是复制一遍。建议放一些外部第三方文件已经压缩好了，提高打包效率。