1.var，let，const区别
(1)var存在变量提升，let和const不存在变量提升，所以只能在变量声明之后使用，否则会报错。
(2)const不可修改，声明时，直接初始化，var，let可修改，但是如果const指向的是一个引用值，只需要保证引用值的地址不改变即可。
(3)let和const都是块级作用域，var是函数级作用域。
(4)let，const都不允许在相同的作用域内声明同一变量。
2.事件冒泡、事件委托以及事件捕获？
事件冒泡就是子级元素的某个事件被触发，它的上级元素的该事件也被递归执行。冒泡的终点是window。
阻止事件冒泡在子级元素上面加上e.stopPropagation()阻止事件冒泡。
事件委托其实是使用了冒泡的原理，从点击的元素开始，以递归方式的向父元素传播事件，这样做的好处是对于大量要处理的元素，不必为每个元素都绑定事件，只需要在他们的父元素上绑定一次即可，提高性能。 还有一个好处就是可以处理动态插入dom中的元素，直接绑定的方式是不行的。
事件捕获是最外层的事件先被触发，最后才是我们点击的button事件被触发，这便是事件捕获。
阻止事件捕获的方式是e.stopPropagation()。
3.防抖：
理解：在车站上车，人员上满了车才发走重点是人员上满触发一次。
场景：实时搜索，拖拽。
实现： //每一次都要清空定时器，重新设置上计时器值，使得计时器每一次都重新开始，直到最后满足条件并且等待delay时间后，才开始执行handler函数。
function debunce（handler，delay）{
//handler是要传入的进行防抖的函数，delay是等待时间。
var timer = null;
return function（）{
var _self = this，
args = arguments;
clearTimeout（timer）; //每次都要清除这个定时器
timer = setTimeout（function（）{ //重新开启定时器
handler.apply（_self，args）;
}，delay）; }
4.节流：
理解：大于等于10分钟发一次车，重点是一定间隔时间就会触发一次。 （即预定一个函数只有在大于等于执行周期时才会执行，周期内不执行）。
场景：窗口调整（调整大小），页面滚动（滚动），抢购时疯狂点击（鼠标按下）
实现： //处理程序是要传入的进行节流的函数，wait是上述的间隔时间。 //使用时间戳进行时间的计算。
function throttle（handler，wait）{
//handler是要进行节流的函数，wait是等待时间
var lastTime = 0;
return function(){
var nowTime = new Date（).getTime（）; //获取当前时间
if（nowTime - lastTime> wait）{
handler.apply（this，arguments）;
lastTime = nowTime; //更新最后时间
}
}
}
5.常见的HTTP状态码你了解多少？描述一下以下状态码
（1）200 ,请求成功，一切正常，数据成功返回
（2）301,永久性重定向，是指所请求的文档在别的地方;文档新的URL会在定位响应头信息中给出。浏览器会自动连接到新的URL。
（3）302,临时重定向，该状态码表示请求的资源已被分配了新的URI，希望用户（本次）能使用新的URI访问。
（4）303，该状态码表示由于请求对应的资源存在着另一个URI，应使用GET方法定向获取请求的资源
（5）403，Foribidden 服务器端理解本次请求，但是拒绝执行任务，没有权限访问
（6）404,NOT,found 请求的资源，网页无法找到，不存在
（7）503，服务器端无法响应，服务器由于在维护或已经超载而无法响应
6.什么情况下会遇到跨域，描述一下前端常见处理跨域的几种方式。并封装一个jsonp原理
浏览器最核心，最基本的安全功能是同源策略。限制了一个源中加载文本或者脚本与其他源中资源的交互方式，当浏览器执行一个脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域。
(1)Jsonp：原理就是利用了script标签不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去。
(2)CORS：(跨域资源共享)是一种允许当前域的资源被其他域的脚本请求访问的机制。
当使用XMLHttpRequest发送请求时，浏览器如果发现违反了同源策略就会自动加上一个请求头:origin,后端在接受到请求后确定响应后会在Response Headers中加入一个属性:Access-Control-Allow-Origin,值就是发起请求的源地址，浏览器得到响应会进行判断Access-Control-Allow-Origin的值是否和当前的地址相同，只有匹配成功后才进行响应处理。
现代浏览器中和移动端都支持CORS，IE下需要8+
(3)服务器跨域，服务器中转代理
前端向本地服务器发送请求，本地服务器代替前端再向服务器接口发送请求进行服务器间通信，本地服务器是个中转站的角色，再将响应的数据返回给前端。
(4)widow.postMessage(html5提供的新方法)
可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。
需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。
7.浏览器端存储有哪些，并描述他们的区别。
cookie, localStorage ,sessionStorage ,web SQL, indexedDB，他们都是保存在浏览器端，且同源的。
区别：
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，2.5M~10M(根据浏览器的不同)。web SQL与indexedDB无上限。
3.数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。web SQL与indexedDB永久有效
4.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage ，cookie，web SQL，indexedDB在所有同源窗口中都是共享的。
5.web SQL是关系数据库，引入了一组使用 SQL 操作客户端数据库的 API。indexedDB是非关系数据库
8.一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？
加载过程：
浏览器根据 DNS 服务器解析得到域名的 IP 地址
向这个 IP 的机器发送 HTTP 请求
服务器收到、处理并返回 HTTP 请求
浏览器得到返回内容
渲染过程：
根据 HTML 结构生成 DOM 树
根据 CSS 生成 CSSOM
将 DOM 和 CSSOM整合形成 RenderTree
根据 RenderTree 开始渲染和展示
遇到<script时，会执行并阻塞渲染
9.TCP与UDP的区别
1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接
2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付
3、TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的，
4、UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）
5、每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信
6、TCP首部开销20字节;UDP的首部开销小，只有8个字节
7、TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道
10.实现元素的垂直水平居中方式
(1) 设置定位，margin为自身的的一半，top：50%，left：50%；position：absolute；
(2) transform:translate(-50%,-50%)
(3)flex布局 justify-center：center //垂直方向；
align-items：center // 水平方向
(4)margin:auto;position:absolute;left:0;top:0;right:0;bottom:0
11.http与https的区别
为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
12.重排（回流）和重绘是什么?什么情况下会触发重排和重绘。
重绘：dom节点的css样式颜色的变化过程叫做重绘 改变的是cssTree 一部分变化，对randerTree影响相对较小。所以相对与重排而言对浏览器性能影响较小
重排：js动态的修改dom 即更改了DOM树了 更改dom树之后 renderTree就变了，renderTree变了也就是要重新建立一个renderTree了 ，这个过程叫做重排。
回流触发的情况：页面首次渲染；浏览器窗口大小发生改变；元素尺寸或位置发生改变；元素内容变化（文字数量或图片大小等等）；元素字体大小变化；添加或者删除可见的DOM元素；触发display
重绘触发条件：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它。
性能优化：避免频繁的样式操作，最好一次性重写style,或者一次性更改class,避免频繁操作dom,对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
13.浏览器执行时间线：
根据js执行那一刻开始的执行顺序 浏览器加载的时间线
1.创建document对象，开始解析web页面 这时document.readyState 等于’loading’
2.遇到link标签（外部引用css）创建线程加载，并继续解析文档， 即异步加载
3.遇到非异步的script标签，浏览器加载并阻塞，等待js加载完成
4.遇到异步的script标签，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行；对于defer属性的脚本，脚本等到页面加载完之后再执行（异步禁止使用document.write）
5.遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档
6.当文档解析完成之后（即renderTree构建完成之后， 此时还未下载完对吧），document.readyState=‘interative’。活跃的 动态的
7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。
8.文档解析完成之后 页面会触发document上的一个DOMContentLoad事件
9.当页面所有部分都执行完成之后 document.readyState =‘complete’ 之后就可以执行window.onload事件了
14.异步加载js
javascript 异步加载 的 三种方案
1.defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。
2.async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script 标签里。 （1.2 执行时也不阻塞页面）
3.创建script，插入到DOM中，加载完毕后callBack
15.xxs介绍一下
xss表示跨站脚本攻击，它与SQL注入攻击类似，SQL注入攻击中以SQL语句作为用户输入，从而达到查询/修改/删除数据的目的，而在xss攻击中，通过插入恶意脚本，实现对用户浏览器的控制。
xss攻击可以分成两种类型：
1.非持久型xss攻击，是一次性的，仅对当次的页面访问产生影响。
2.持久性攻击，会把攻击者的数据存储在服务器端，攻击行为将伴随着攻击数据一直存在。
16.js为什么需要异步，以及Js异步实现方法
Javascript语言的执行环境是"单线程"，单线程的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。导致浏览器长时间无响应，交互性差。
因而产生了可以使js异步的方式：
(1)回调函数：
缺点：会造成回调地狱，可维护性，阅读性差，并且每个任务只能指定一个回调函数。
优点：简单，容易理解和部署
(2)事件监听
缺点：变成了事件驱动，运行流程不清晰
优点：比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以降低耦合度，有利于实现模块化。
(3)promise
优点：解决了回调函数的回调地狱，实现了链式调用
缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消；如果不设置回调函数，Promise内部抛出的错误，不会反应到外部；当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
(4)generator
function *myGenerator(a) {
var b = yield ajax();
yield ajax();
}
var it = myGenerator();
function ajax() {
if(xhr.status == 200) {
it.next(5);
}
} 此时b就是5.
优点：解决了promise的链式调用，可读性更强
缺点：执行完一条语句，需要调用next执行下一条语句
(5)async
async function myGenerator(a) {
var b = await ajax();
await ajax();
return response；
}
优点：上一个ajax执行完，就会调用下一个ajax执行，不需要next。他还会生成一个promise。
myGenerator().then(function () {},function () {})
17.对于模块化的理解以及怎么在书写代码中体现
把一坨代码划分成很多的模块来编写，减少了代码多而复杂的现象，模块化开发的一个实现就是组件化，组件化可以把你的代码有结构的分为一个个小的组件，各个小的组件之间代码是独立的，这样的代码维护起来比较简单方便，也方便了多人协作开发时出现变量复用，函数复用的现象，组件化还有一个优点就是可以代码复用，在不同的网站中如果我们想要这样的效果就可以把代码直接复制过来使用就可以啦，我们所用的webpack打包工具就是一种可以实现模块化开发的工具，vuejs也是以组件化为基础的框架
18.闭包
当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄露。
闭包的用途：1.实现公有变量 eg:函数累加器；2.可以做缓存 eg:eater
3.可以实现封装，属性私有化。 eg: new Person();
使用闭包的注意点：
（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值。
19.数据基本类型，以及引用类型？
null undefined string number bolean
引用类型有Object、Array、Date、RegExp、function
20..css常用的单位？
1.px(像素);2.%(百分数);3.em(相对于夫级的font-size);4.rem(相对于根节点html的font-size，16px);5.vh,vw(移动端);
21.字符串常用的方法
(1)substring
substring（start开始位置索引，end结束位置索引）截取的位置不包含结束位置的字符，只写一个参数表示从开始位置截取最后，输入负值将变为零，哪个较小作为开始
(2)slice(start开始位置索引，end结束位置索引)基本和substring相似，区别在参数为负数。当为负值时，表示相对于最后的位置的第几个，当第二个参数时大于第一个参数时返回空
(3)substr（start开始位置索引，end需要返回字符个数）,只传start时，从开始位置到最后，start为负值时，相对于最后位置的第几个，end为负值时，变为0
(4)charAt（index）方法返回指定索引位置处的字符。如果超出有效范围（0与字符串长度减一）的返回空字符串
(5)indexof（string）返回string对象内第一次出现字符串的位置。如果没有找到字符串，则返回-1.
(6).lastindexof（string）倒序查找
返回string对象中第一次出现的位置相应的索引。如果没有则返回-1；
(7)split(str)将字符串以参数分割为数组
(8)toLowerCase方法返回一个字符串，该字符串中的字母被转换成小写。
(9)toUppercase
(10)match()-方法可在字符串内检索指定值，或找到一个或多个正则表达式的匹配
(11)search()方法返回与正则表达式查找内容的第一个字符串的位置。
(12)replace()用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配;
22.数组的方法：
(1)Push() 添加到最后 返回添加后的数组；
(2)Unshift() 添加到最前面 返回添加后的数组；
(3)Shift() 删除（从前面删除）返回处理后的数组；
(4)Pop() 删除最后一项 返回处理后的数组
(5)reverse() 颠倒数组中的元素的顺序
(6)Join(str) 数组转化为字符串
(7)slice(start,end) 截取数组中的从start（开始）到end（结束 不包含） 返回新数组，原数组不变
(8)concat() 方法用于连接两个或多个数组。
(9)splice（开始下标，个数，ele1，ele2…）剪接数组
(10)forEach(function(ele,index,self){}) 循环遍历
(11)sort（function() {}）排序
23.js循环机制？宏队列？
事件循环的顺序是从script开始第一次循环，随后全局上下文进入函数调用栈，碰到macro-task就将其交给处理它的模块，处理完之后将回调函数放进macro-task的队列之中，碰到micro-task也是将其回调函数放进micro-task的队列之中。直到函数调用栈清空只剩全局执行上下文，然后开始执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次执行macro-task中的一个任务队列，执行完之后再执行所有的micro-task，就这样一直循环。
macro-task(宏任务)包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。micro-task(微任务)包括：process.nextTick, Promises, Object.observe, MutationObserver
注意：Promise构造函数中的第一个参数是在当前任务直接执行
24.Doctype作用？严格模式与混杂模式如果区分？意义？
<!DOCTYPE>声明位于文档的最前面，处于标签之前。告知浏览器以何种模式来渲染文档 严格模式的排版和js运作模式是 以该浏览器支持的最高标准运行 在混杂模式中，页面已宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
25.Doctype多少种文档类型？ 该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档 HTML4.01规定了三种文档类型：Strict, Transitional以及Frameset XHTML 1.0规定了三种XML文档类型：Strict, Transitional以及Franmeset Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标签的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页
26.webpack常用到哪些功能？
- 设置入口
- 设置输出目录
- 设置loader
- extract-text-webpack-plugin将css从js代码中抽出并合并
- 处理图片文字等功能
- 解析jsx解析bable
27.js垃圾回收方法
标记清除（mark and sweep）
- 这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
- 垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
引用计数(reference counting)
- 在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
- 在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的， 也就是说只要涉及BOM及DOM就会出现循环引用问题。
28.flex布局(阮一峰)
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
29.http缓存机制
https://www.cnblogs.com/DiDiao-Liang/articles/8308995.html
30.BFC规范及用法
https://segmentfault.com/a/1190000015715400?utm_source=tag-newest
31.vue路由的两种模式
对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于——— 改变视图的同时不会向后端发出请求。
一、为了达到这个目的，浏览器提供了以下两种支持：
1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。
比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。
history模式，会出现404 的情况，需要后台配置。
二、404 错误
1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com, 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
2、history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。
32.vuex工作原理详解
————————————————
本文为CSDN博主「linaGao」的原创文章的部分借鉴。
原文链接：https://blog.csdn.net/weixin_38292678/article/details/82858215
对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于——— 改变视图的同时不会向后端发出请求。
一、为了达到这个目的，浏览器提供了以下两种支持：
1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。
比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。
history模式，会出现404 的情况，需要后台配置。
二、404 错误
1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com, 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
2、history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。
32.vuex工作原理详解