关于前端的总结

1.盒模型：

前端盒模型包括两种，分别是 W3C 盒模型和 IE 盒模型，他们唯一的区别就是元素的宽度
盒模型是规定网页元素如何显示，元素间的相互关系。
W3C 盒模型组成分为四部分：
content(内容区)：元素的宽和高
border(边框区)：盒子的边缘
padding(内边距)：为了使页面布局看起来美观大方，盒子里的内容区会用 padding 来解决父元素和子元素的位置关系；
margin(外边距)：控制同辈元素直接的位置关系
其中 width=content
box-sizing:content-box;就是 W3C 的标准盒模型计算方式。
IE 盒模型组成部分也为四部分：
content,padding,boder,margin.
其中 width=content+padding+border
box-sizing：border-box；就是 IE 盒模型的计算方式。

2.弹性布局

弹性布局，又称”Flex布局”,可以简便、完整、响应式地实现各种页面布局。
弹性布局的使用：
给父容器添加display：flex/inline-flex；属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式。
容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；
display：flex；容器添加弹性布局后，显示为块级元素。
display:inline-flex; 容器添加弹性布局后，显示为行级元素；
设为Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然有效。

3.媒体查询

4.响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
有哪些：
1.媒体查询
2.百分比布局
3.Rem布局
4.视口单位：css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度
5.图片响应式
总结：响应式布局的实现可以通过媒体查询+px；媒体查询+百分比；媒体查询+rem这几种方式来实现。

5.css3过渡、动画和变换

transform属性
过渡：过渡效果一般由浏览器直接改变元素的css属性实现。
Transition属性
动画：动画是使元素从一种样式逐渐变化为另一种样式的效果。
Animation属性
变换：通过css3变换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。使用transform属性为元素应用变换。

6.熟悉css3浏览器兼容性和性能优化

Css3浏览器兼容性：在我们使用css3时可以使用浏览器引擎前缀来解决。
主流的浏览器引擎前缀：
-webkit-（谷歌，Safari，新版Opera浏览器等）
-moz-(火狐浏览器)
-0-(旧版Opera浏览器等)
-ms-（IE浏览器和Edge浏览器）
性能优化：
·内联首屏关键css
·异步加载css
·文件压缩
·去除无用的css
·优化重排和重绘

7.JQuery

什么是jQuery：轻量级的js库，它兼容CSS3，还兼容各种常用浏览器。
优点：链式操作，异步加载，一个函数两用，自带循环
怎么阻止冒泡：stopPropagation( )

8.html5新特征，地理定位

geolocation API 用于获取用户的地理位置。
使用getCurrentPosition()方法来获取用户的位置。

9.客户端储存

1.cookie:在h5之前，cookie是主要的存储方式。Cookie可以兼容包括ie6以上所有的浏览器。
不论服务器端是否需要，每一次http请求都会把这些以cookie形式存储的数据传输到服务器端，这无形中浪费了资源。而且cookie只适合存储少量文本数据。
2.Web存储：web存储API包含localstorage对象和sessionStorage对象。
Localstorage：是存储在用户本地的浏览器上。同样也采用了同源策略对存储的容量进行了限制，一般限制为同一域名5M，并且不同域名的数据不能相互访问。
存储周期为永久，只要开发者不手动删除，就会一直存在
localstorage存储的值只能是字符串的形式，所有我们需要用JSON.stringify转化存储，获取数据后再用JSON.parse转化为对象
sessionStorage:会话缓存，关闭页面或浏览器后被清除。
3.离线缓存：application cache

10.Canvas绘图及echarts

Canvas是h5的一部分，允许脚本语言动态渲染图像。Canvas定义一个区域，可以由html属性定义该区域的宽高，JavaScript代码可以访问该区域，通过一整套完整的绘图功能（API），在网页上渲染动态效果图。
Echarts数据可视化图标

11.面向对象

面向对象有三大特征：
1.封装------隐藏对象的属性和实现细节，仅对外提供公共访问方式，将变化隔离，便于使用，提高复用性和安全性。
2.继承------提高代码复用性；继承是多态的前提
3.多态------父类或接口定义的引用变量可以指向子类或具体实现类的实例对象。提高了程序的扩展性。

12.闭包

定义：获取其他函数内部变量的函数。
原理：外层函数调用后，外层函数的作用域对象被内层函数所引用，无法释放形成闭包。
优点：可以重用，不会造成全局污染。
缺点：因为无法释放，就会多占一块内存，从而造成内存泄漏。
解决：把变量 = null，就可以释放。

13.Js核心

原型：① 所有引用类型都有一个__proto__(隐式原型)属性，属性值都是一个普通对象。
② 所有函数都有一个 prototype(原型)属性，属性值是一个普通的对象。
③ 所有引用类型的__proto__属性指向它的构造函数的 prototype。
原型链：当访问一个对象的某个属性时，会先在这个属性本身上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的 prototype，如果还是没有找到就会再在构造函数的 prototype 的__proto__中查找，这样一层一层的向上查找就会形成一个链式结构，我们称之为原型链。
作用域链：一般情况下，变量取值是到创建这个变量的函数作用域中取值；但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查找到全局作用域链，这个查找过程形成的链条就叫做作用域链。

14.同源策略

同源策略是一种约定。它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受到影响。
什么是同源策略：两个页面地址中的协议、域名、端口号一致，则表示同源
同源策略的限制：
1.存储在浏览器中的数据，如localStroage、cookie和indexedDB不能通过脚本跨域访问；
2.不能通过脚本操作不同域下的DOM；
3.不能通过ajax请求不同域的数据

15.多种方式跨域

受制于同源策略，一个域去请求另一个域的资源时，就会出现跨域的现象，而在我们开发中能，经常需要跨域去请求资源（例如：本地localhost去请求测试环境的资源），所以我们也就需要一些方法去解决这个跨域的问题。
一、使用jsonp解决跨域
缺点：不安全，容易造成xss攻击；只能是get请求。
二、后台可以通过cors解决跨域
原理：在服务器端设置允许跨域的请求头，从而实现跨域。服务器设置后前端通过正常的ajax请求即可。
三、HTTP协议代理跨域，此跨域方法通常是前端在开发环境中用于解决跨域方法。
四、使用window.name来进行跨域
在开发中，跨域问题的解决一般都是由后端人员解决的，所以我对跨域也只是略知一二。

16.Vue路由传参，数据绑定

第一种方法：
需要在path中添加/:id来对应$router.push中path携带的参数。在子组件中可以使用来获取传递的参数值

第二种方法：
通过路由属性中的name来确定属性的路由，通过params来传递参数。

第三种方法：
使用path来匹配路由，然后通过query来传递参数。
这种情况下query传递的参数会显示在url后面?id=?

17.Vue组件通讯

1.父传子----父组件通过props向下传递数据给子组件。
2.子传父----子组件向父组件通过事件传递
3.Ref/$refs来传递4.EventBus中央事件总线----来传递数据，但是eventbus首次不会触发，我们应该把$emit事件写在beforeDestory生命周期内；
5.Vuex----是vue的状态管理器，使用vuex要结合存储localstorage来使用，不然刷新之后就回到了初始状态。
JSON.stringify()将js对象转换为字符串；JSON.parse()将字符串转为js对象

18.vue生命周期

什么是：vue生命周期有四个阶段，创建(create)，挂载(mount)，更新(update)，销毁(destroy);
Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程，我们称这是vue的生命周期。
作用：vue所有功能的实现都是在围绕起生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
生命周期中有多个事件钩子，在控制整个vue实例的过程时更容易形成好的逻辑。
第一次页面加载会触发哪几个钩子：
BeforeCreate , created , beforeMount , mounted这几个钩子函数
你的接口请求一般放在哪个生命周期中？
接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted,需要放在created中。
简述每个周期具体适合哪些场景：
1.beforeCreate：创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。
data，computed，watch，methods 上的方法和数据均不能访问。
可以在这加个loading事件。
2.created：创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。
可访问 data computed watch methods 上的方法和数据。
初始化完成时的事件写在这里，异步请求也适宜在这里调用（请求不宜过多，避免白屏时间太长）。
可以在这里结束loading事件，还做一些初始化，实现函数自执行。
未挂载DOM，若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。
3.beforeMount：挂载前，虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。
beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
4.mounted：挂载，完成创建vm.$el，和双向绑定
完成挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。
可在这发起后端请求，拿回数据，配合路由钩子做一些事情。
5.beforeUpdate：数据更新前，数据驱动DOM。
在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。
可在更新前访问现有的DOM，如手动移出添加的事件监听器。
6.updated：数据更新后，完成虚拟DOM的重新渲染和打补丁。
组件DOM已完成更新，可执行依赖的DOM操作。
注意：不要在此函数中操作数据（修改属性），会陷入死循环。
7.activated：在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了。
如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
8.deactivated：组件被移除时使用。
9.beforeDestroy：销毁前，
可做一些删除提示，如：您确定删除xx吗？
10.destroyed：销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。
这时组件已经没有了，无法操作里面的任何东西了。

19. vue 的绑定原理

访问器属性（set,get）+虚拟 DOM 树

变量被修改时：访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素。
虚拟DOM树的优点：
（1）小：只包含可能变化的元素
（2）遍历查找快
（3）修改效率高：只修改受影响的元素
（4）避免重复编码：已封装dom增删改查代码

19.vue指令和事件绑定

指令：
v-if v-else ------- 作用是控制两个元素二选一显示
v-if v-else-if v-else ------多个元素多选一显示
v-show -------也是控制DOM显示与否，v-show没有v-if的多个判断功能，而且v-show是把dom渲染到文档中，只是加了display：none而已。v-if-是动态的向dom树添加或者删除dom元素。
v-bind------- 用于绑定DOM属性 简写 ：
v-for --------循环，又叫列表渲染，在需要显示多个标签上加这个
:key=“唯一标识”为什么要加：key
修改数组中某个元素值 时，避免重建整个列表，只需要修改一个DOM元素副本即可，提高效率。
v-on------- 表示绑定事件 简写：@
v-model-------- 实现双向数据绑定
v-html -------- 绑定原始HTML代码片段内容
{{ }} --------- 元素的内容需要随变量自动变化
v-once-------首次加载时绑定一次，后续不发生改变
v-pre------保护内容中的{{ }}不被编译
v-cloak和v-text------防止用户短暂看到{{ }}

20.Vue事件绑定原理

原生事件绑定是通过addEventListenner绑定给真实元素，组件事件绑定是通过vue自定义的$on来实现的

21.Vuex全局数据的修改和方法的调用

修改：vuex修改数据在mutations里面修改
在组件methods中定义方法即可，用this.$store.commit(‘方法名’,参数)行内绑定事件，把方法定义到store.js中mutations中即可。
方法调用：

22.什么是模块化开发

简单的说，模块化就是有组织的把一个大程序拆分成独立并互相依赖的多个小文件（模块）。
为什么要模块化：
ES6之前，JavaScript语言一直没有模块（module）体系，无法把大文件有组织的划分成小块，并管理之间的依赖，但是模块化的思想一直存在。因为用JavaScript写的代码越来越庞大，而网页也越来越像桌面app。如此庞杂的代码，如果不进行模块化，就可能引发命名冲突，造成不易复用、维护性低。
模块化开发能够解决命名冲突，可以代码复用，维护性高。

23.简单说一下vue2.x响应式数据原理

Vue在初始化数据时，会使用object.defineproperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集（收集当前组件的watcher）如果属性发生变化会通知相关依赖进行更新操作（发布订阅）

24.那你知道vue3.x响应式数据原理吗?

Vue3.x改用Proxy替代object.efineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多大13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

判断当前Reflect.get的返回值是否为object，如果是则通过reactive方法做代理，这样就实现了深度观测。

我们可以根据判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger.

25.再说一下vue2.x中如何监测数组变化

使用了函数劫持的方法，重写了数组的方法，vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控这样就实现了监测数组变化。

26.NextTick知道吗，实现原理是什么？

在下次DOM更新循环结束之后执行延迟回调。NextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用
。promise
。MutationObserver
。setImmediate
。如果以上都不行则采用setTimeout
定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。

27.再说一下computed和watch

Computed：本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。
Watch：没有缓存，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象的属性时，可以打开deep:true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的化可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销哦。

28.组件中的 data为什么是一个函数

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象 的话，对象属于引用类型，会影响到所有的实例。所有为了保证组件不同的实例之间data不冲突。Data必须是一个函数。

29.说一下v-model的原理

v-model本质就是一个语法糖，可以看成是value + input 方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

30.Vue模板编译原理知道吗，能简单说一下吗？

简单说，vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：
。生成AST树
。优化
。codegen
首先解析模板，生成AST语法树（一种用JavaScript对象的形式来描述这个模板）。使用大量的正则表达式对模板进行解析，遇到标签、文本的时候会执行对应的钩子进行相关处理。
Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染之后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对节点树进行标记。这些被标记的节点（静态节点）我们就可以跳过对他们的比对，对运行时的模板起到很大的优化作用。
编译的最后一步是将优化后的AST树转换为可执行的代码。

31.Vue2.x和vue3.x渲染器的diff算法分别说一下

简单来说，diff算法有以下过程：
。同级比较，在比较子节点
。先判断一方有子节点一方没有子节点的情况（如果新的children没有子节点，将旧的子节点移除）
。比较都有子节点的情况（核心diff）
。递归比较子节点

32.再说一下虚拟dom以及key属性的作用

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM,会产生移动的性能问题，这就是虚拟dom的产生原因。
Vue2的virtual DOM借鉴了开源库snabbdom的实现。
Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(也就是源码中的VNode类，它定义在src/core/vdom/vnode.js中。)
VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段。

Key的作用是尽可能的复用DOM元素
新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。
需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识。

33.Keep-alive了解吗

Keep-alive是vue的内置组件，可以实现组件的缓存，当组件切换时不会对当前组件进行卸载。
常用的两个属性include/exclude，运行组件有条件的进行缓存。
两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。
keep-alive的中还运用了LRU(Least Recently Used)算法。

34.Vue中组件生命周期调用顺序说一下

组件的调用顺序都是先父后子，渲染完成的顺序是先子后父
组件的销毁操作是先父后子，销毁完成的顺序是先子后父

35.SSR了解吗

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。

36.你都做过vue的哪些性能优化

编码阶段：
。尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
。v-if和v-for不能连用
。如果需要使用v-for给每项元素绑定事件时使用事件代理
。SPA（single page application）页面采用keep-alive缓存组件
。在更多情况下，使用v-if替代v-show
。key保证唯一
。使用路由懒加载、异步组件
。防抖、节流
。第三方模块按需导入
。长列表滚动可视区域动态加载
。图片懒加载
SEO优化：
。预渲染
。服务端渲染SSR
打包优化：
。使用webpack打包
。压缩代码
。Tree Shaking/Scope Hositing
。使用cdn加载第三方模板
。多线程打包happypack
。splitChunks抽离公共文件
。sourceMap优化
用户体验：
。骨架屏
。PWA
还可以使用缓存（客户端缓存、服务端缓存）优化、服务器开启gzip压缩等。

37.Hash路由和history路由实现原理说一下

Location.hash的值实际就是URL中的#后面的东西。
History实际采用了HTML中提供的API来实现，主要有history.pushState( )和history.replaceState( )。

1. 说说你对 vue 渐进式的理解

官网:vue 是一套用于构建用户界面的渐进式框架,也可以理解为是一个视图模板引擎,强调的是状态到界面的映射.
声明式渲染,组件系统,客户端路由,大规模状态管理,构建工具
渐进式可以理解为:用什么拿什么

2. h5 新特性

1.媒体 video audio
2.canvas 绘图
3.本地储存 localstorage/sessionStorage
4.geolocation 地理定位
5.拖拽 api(drag & drop)
6.svg 矢量绘图
7.Echarts
8.Web Worker 为 Web 应用程序提供了一种能在后台中运行的方法。通过 Web Worker 可以生成多个线程同时运行，并保证页面对用户的及时响应，完全不会影响用户的正常操作。在 Web Worker 中，不能直接对 DOM 进行操作。

3. css 新特性，分析下

1.选择器-----基本选择器,层次选择器,伪类选择器 
2.盒模型
3.背景和边框
4.文字特效
5.2D/3D 转换
6.动画
7.多列布局
8.用户界面

4. 拖拽会触发哪些事件

1.dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
2.dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
3.dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
4.dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
5.drag:拖拽期间在被拖拽元素上连续触发
6.drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
7.dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

5. 封装组件的过程

两大部:
① 创建组件:
在 Vue 类型添加一种自定义组件.
Vue.component(‘组件名’,{
模板
template:组件专属的HTML片段,
数据
data(){ //因为要重复调用
return{
变量:值
}
}
methods:{…}
watch:{…}
computed:{…}
八个钩子函数
})
② 使用组件:
组件其实就是页面上一个可以重用的自定义 HTML 标签而已
<组件名></组件名>
原理:当 new Vue()扫描到界面中一个不认识的自定义 HTML 标签时,就会尝试回 Vue 类型中查找是否有相同的组件
如果找不到组件会做 3 件事: 1.用组件的 template 代替界面上<组件名>标签位置 2.自动调用一次 data(),为本次组件创建一个专属的 data 模型对象的副本 3.自动为当前组件创建一个 Vue 类型的对象,只监控当前组件的区域
结果:每个组件副本内都是一个功能完成的 Vue 区域,且不同组件之间不会互相干扰!

6. 写一个三栏布局，左右宽度固定，中间自适应，中间的先加载

实现三列宽度自适应布局

我是左边

我是中间

我是右边

7. vue 中 mixin 和 extend 的区别

Vue 中有两个较为高级的静态方法 mixin 和 extend,
区别：
1.mixin 是对 Vue 类的 options 进行混入。所有 Vue 的实例对象都会具备混入进来的配置行为。
2.extend 是产生一个继承自 Vue 类的子类，只会影响这个子类的实例对象，不会对 Vue 类本身以及 Vue 类的实例对象产生影响。

8. 组件间传参

1.父传子----可以使用 props 向子组件传递数据 
2.子传父----子组件主要通过事件传递数据给父组件 $emit
3.兄弟组件传值----  vuex
4.ref/$refs----让参数按照引用传递 
5.中央事件总线(event bus)

9.代码题

console.log(0);

setTimeout(() => {  ---宏任务;
  console.log(1);
}, 0);

new Promise(function fun(resolve) {  ---让异步按顺序执行-- - 主线程;
  console.log(2);
  for (i = 0; i < 10000; i++) {
    i === 9999 && resolve();
  }
  console.log(3);
}).then(() => console.log(4))---- - 微任务;

console.log(5);

// 打印结构为:0,2,3,5,4,1

event loop 的概念:
1.Javascript 是单线程的，所有的同步任务都会在主线程中执行。
2.当主线程中的任务，都执行完之后，系统会 “依次” 读取任务队列里的事件。与之相对应的异步任务进入主线程，开始执行。
3.异步任务之间会存在差异,优先级也会有区别;大致分为微任务(promise)和宏任务(setTimeout,script)
4.Promise 执行器中的代码会被同步调用，但是回调是基于微任务的。
5.宏任务的优先级高于微任务 6.每个宏任务执行完毕都必须将当前的微任务队列清空

解题思路: 1.所有的代码都写在 script 标签中，所以读取所有代码是第一个宏任务，我们开始执行第一个宏任务。
2.我们首先遇到 setTimeout，他是第二个宏任务，将它扔进宏任务事件队列里先排队。
3.下来我们遇到 promise，promise 执行器里的代码会被同步调用，所以我们依次打印出 2 和 3。
4.下来遇到 promise 的回调，他是一个微任务，将它扔进微任务事件对列中。
5.下来我们接着打印出 5，然后执行微任务并且打印出 4.
6.我们第一个宏任务执行完毕，执行下一个宏任务，打印出 1，到此，所有任务都执行完毕。
所以我们最后的结果为 2 3 5 4 1。
任务优先级:
主代码块 > setImmediate > MessageChannel > setTimeout / setInterval

面

1.webpack 的几个模块

1.entry 打包入口
2.output 打包文件放的路径
3.devServer 代理服务器解决跨域问题
4.plugins 插件 happyPack插件是让webpack同一时间执行多个任务
5.resolve 路径映射

2. webpack 打包如何实现 js 和 css 分离

webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中
单独打包css,在webpack需要使用一个插件，entract-text-webpack-plugin

3. 说说对 promise 的理解

1.是 es6 新特性，解决多个异步对象按照顺序执行，可以解决回调地狱
2.promise 的两大特征：
promise 对象的状态不受外界影响（三种状态：pending–初始状态；resolve—成功状态；reject—失败状态）
Promise 的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending 变成 resolve 或者由 pending 变成 reject

4. promise.all 的错误处理

，需求，假设一个界面有三个列表需要显示，用 promise.all 拿取数据，假设有一个列表的数据拿取失败了怎么进行错误处理，要求，能正常拿到的两个要正常显示

5. for 循环和 forEach 的区别，他们都怎么跳出循环

区别：
1、在固定长度或者长度不需要计算的时候 for 循环效率高于 foreach，在不确定长度或者计算长度有损性能的时候用 foreach 比较方便。
2、如果对集合中的值进行修改，就要用 for 循环；foreach 不能用于增加、删除等复杂操作。
3、foreach 相比普通的 for 循环的优势在于对稀疏数组的处理，会跳过数组中的空位。
for 循环可以循环数组，对象，类数组对象等-----continue
-----break 跳出循环
foreach-----return 只能跳出当前循环
-----throw 抛出异常，跳出整个循环

6. es6 的特性

1.模板字符串
2.箭头函数
3.promise
4.muduls
5.class
6.symbol
7.解构

7. var 和 let,const 的区别

var:声明的变量会被提前，成为全局变量；使用函数作用域
let：声明局部变量,使用块作用域，let 不允许在相同作用域内，重复声明同一个变量
const：使用块作用域，不能声明同名变量，一旦声明必须赋值，不能使用 null 占位，声明后不能修改，如果声明的是复合类型数据，可以修改其属性。
Const接住了传过来的参数还可以修改吗？
不可以修改

8. 使用 async 和 await 怎么接受异常

async 和 await 主要用于进行异步请求。
async 是返回一个 promise 对象，await 就是 async 返回的 promise 对象返回的结果。await 需要搭配 async 使用。
异常捕获：除了使用.catch 来错误异常，还可以使用 try/catch 来捕获异常

9. mysql 的常见操作
   增删改查

10. 用 vue 封装过组件没有

11. 需求：在不同的活动时间，显示不同的主题色，说说你的思路

12. 做过哪些性能优化
    1.渲染优化：
    图片懒加载、
    减少dom操作，对dom操作缓存
    减少dom操作，多个操作尽量合并在一起执行
    防抖和节流
    1.浏览器缓存

13. 兼容性一般怎么处理的

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
浏览器兼容问:1：不同浏览器的标签默认的外补丁和内补丁不同
解决方案：在CSS里面添加 *{margin:0, padding:0}
浏览器兼容问题2：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置大大
解决方案：在CSS里面添加 *{margin:0, padding:0}
浏览器兼容问题3：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度。
解决方案：给超出高度的标签设置overflow:hidden；或者设置行高line-height小于你设置的高度。
浏览器兼容问题4：行内属性标签，设置display:block后采用float布局，又有横行的margin得到情况,ie6间距bug
解觉方案：在display：block；后面加入display：inline;display:table

14. vue 的生命周期

四个阶段：creat(创建)；mount(挂载)；update(修改)；destroy(销毁)
八个钩子函数：
beforeCreate-----在 Vue 实例中完全被创建出来之前被调用，此时数据还没有被初始化，所以无法访问数据
created-----在 Vue 实例创建完成被调用，这个过程已经完成了数据的初始化，可以被访问的到，也能获取 methods 方法，这个过程可以修改数据，也是渲染之前修改数据的唯一机会。
beforeMount-----这个过程是在模板已经在内存中编译完成，挂载之前被调用，render 函数也是首次被调用，此时完成虚拟 dom 的构建，但并未被渲染，这也是最后一次修改数据的机会。
mounted-----这个过程在模板挂载之后被调用，完成渲染，所以我们可以进行 DOM.
beforeUpdate-----它是在重新渲染之前调用，这个过程是不能更改数据的。在这之前数据没有改变的话，是无任何变化的；当数据发生改变之后，这个过程会再次调用 render 函数，它会重新构建虚拟 dom 树。
updated-----这个过程在重新渲染之后被调用，已经渲染完成，页面更新。
beforeDestroy-----这个过程是 Vue 实例销毁之前被调用，在这个过程中我们可以做一些事情，比如清除计时器或事件等。
destroyed-----Vue 实例销毁后调用，并且 Vue 实例中所以的东西都会解绑，所有的事件监听器都会被移除，所有的子实例也会被销毁。

14. angular 的生命周期

    1.ngOnChanges---当数据绑定输入属性的值发生变化时调用
    2.ngOnInit---在第一次ngOnChanges后调用
    3.ngDoCheck---自定义的方法，用于检测和处理值的改变
    4.ngAfterContentChecked---在组件内容初始化之后调用
    5.ngAfterContentChecked---组件每次检查时调用
    6.ngAfterViewInit---组件相应的视图初始化之后调用
    7.ngAfterViewChecked---组件每次检查视图时调用
    8.ngOnDestory---指令销毁前调用

15. react 的生命周期

一个react组件的生命周期分为三个部分：实例化、存在期和销毁时
1.Mounting:已插入真实DOM
2.Updating:正在被重新渲染
3.Unmounting:已移出真实DOM

16. react 和 vue 的相同与不同

相同：一、使用 Virtual DOM（虚拟DOM）
二、提供了响应式(reactive)和组件化(composable)的视图组件
三、将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库

不同的点：一、在 react 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。
在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。
二、JSX vs Templates
在 react 中，所有的组件的渲染功能都依靠 JSX,JSX 是使用 XML 语法编写 JavaScript 的语法糖。
使用 JSX 的渲染函数的优势：
1、你可以使用完整的编译语言 JavaScript 功能来构建你的视图页面，比如你可以使用临时变量、js 自带的流程控制，以及直接引用当前 js 作用域中的值等等。
2、开发工具对 JSX 的支持相比于现有可用的其他 Vue 模块还是比较先进的(比如：linting、类型检查、编辑器的自动完成)。
在 Vue 中也提供了渲染函数，然而默认推荐还是使用模板，任何合乎规范的 HTML 都是合法的 Vue 模板，这样带来了一些特有的优势：
1、基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。
2、更容易理解。

17. 知道 keep-alive 吗，会触发哪些钩子函数

<keep-alive>是 Vue 的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM. 
1.<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。 
2.当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

18. 怎样清除浮动

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear:both;）
优点：通俗易懂，方便。
缺点：添加无意义标签，语义化差。 
2.父级添加 overflow 属性（给父元素添加 overflow:hidden）
优点：代码简洁。
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。
3.使用 after 伪元素清除浮动
优点：符合闭合浮动思想，结构语义化正确。
缺点：ie6-7 不支持伪元素：after，使用 zoom:1 触发 haslayout。 4.使用 before 和 after 双伪元素清除浮动
优点：代码更加简洁。
缺点：用 zoom:1 触发 haslayout。

19. vue 的绑定原理

访问器属性+虚拟 DOM 树

20. 用过 vue-router 吗，vue-router 怎么实现权限控制的

路由模块的本质就是建立起url和页面之间的映射关系
vue-router 怎么实现权限控制的：
1.路由添加meta属性------首先，我们将能够访问指定路由的用户权限添加到meta属性的role中。最后在加上一个404页的通配符跳转

2.BeforeEach路由守卫------beforeEach在访问某路由之前会检查meta元信息字段中的role权限，并控制其路由跳转。BeforeEach有三个参数，To代表即将跳转到页面，form 代表从哪个页面跳转走，next代表可以放行，我们将当前用户权限放在localStorage下，以便全局获取。

3.菜单栏筛选------路由是保证用户不能进入超出权限的页面，菜单栏中也要保证用户不会看到超出权限的页面入库。在app.vue的菜单栏下遍历路由表，并显示符合当前用户权限的页面。

21. 了解过前端安全性问题吗，你平时是怎么防的

1、XSS（Cross-Site Scripting）脚本攻击漏洞；
2、CSRF（Cross-sit request forgery）漏洞；
3、iframe安全隐患问题；
4、本地存储数据问题；
在登录注册的时候，将信息进行加密处理；我使用的是md5进行加密的，如果想要更安全的加密，可以用base64进行多次加密然后再多次解码，这样就比较安全了。
5、第三方依赖的安全性问题；
6.HTTPS加密传输数据；

22. js 有哪些数据类型，原始数据类型和引用数据类型的区别

两种数据类型：原始数据类型和引用数据类型
原始数据类型：number、string、boolean、null、undefined、symbol(es6);这些类型可以直接操作保持在变量中的实际值。
引用数据类型：object（在 js 中除了原始数据类型以外的都是对象）
区别：
原始数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，他们是直接按值存放的，所以可以直接按值访问。------传值
引用数据类型是存放在堆内存中的对象，变量其实是保存的在栈内存中的一个指针（保存的是堆内存总的引用地址），这个指针指向堆内存。-------传地址

23. es6 数组新增的 api

1.array.from()---用于将类数组的对象和可遍历的对象转为数组。
2.array.of()----使指定的数组项创建一个新数组。
3.find()---用于查找满足条件的第一个元素，没找到则返回 undefined.
4.findIndex()----用于查找满足条件的第一个元素的下标，没有找到返回-1。
5.fill()----用指定的数据填充满数组所有的内容
6.copyWithin(target,[start],[end])-----在数组内部完成复制，参数 1：从下标为几开始改变数据；参数 2：从哪一位开始复制数据，默认是第一位；参数 3：在指定位置停止复制数据。
7.includes()----判断是否包含某一元素。

24. 说说你对浅拷贝和深拷贝理解，各自出现的场景。

浅拷贝和深拷贝是针对 object 和 array 这样的引用数据类型的
浅拷贝只复制指向某个对象的指针，而不是复制对象本身，新旧对象还是共享一块内存。但深拷贝只会另外造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
浅拷贝的实现方式：
1、object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象 ，然后返回目标对象。但是 object.assign()进行的是浅拷贝。拷贝的是对象的属性的引用，而不是对象本身。
注意：object 只有一层的时候，是深拷贝哦
2、array.prototype.concat()修改新对象会改到原对象
3、array.prototype.slice()同样修改新对象会改到原对象
深拷贝的实现方式：
1、JSON.parse(JSON.stringify()),JSON.stringify()将对象转成 JSON 字符串，再用 JSON.parse()把字符串解析成对象，一去一来，新对象产生了，而且对象会开辟新的栈，实现深拷贝。----此方法不能处理函数
2、递归方法实现深度克隆原理：遍历对象、数组直到里面都是基本数据类型，然后再去复制，就是深度拷贝。
各自出现的场景：

25. javascript 继承的 6 种方法:

1.原型链继承
2.借用构造函数继承
3.组合继承(原型+借用构造)
4.原型式继承
5.寄生式继承
6.寄生组合式继承

26. 说说你对 websocket 的了解

webSocket 是一项先进的技术，它可以在用户的浏览器和服务器之间打开交互通信会话。通过 websocket,你可以向服务器发送消息并实实接收响应，则无需通过传统的轮询服务器的方式来获取服务器上的响应。
简单的来说，websocket 可以使浏览器在一段时间内保持与服务器的连接，它实现了浏览器与服务器全双工通信，即允许服务器指定发送信息给客户端。
websocket 解决了什么问题：在 websocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。这样，即使没有来自客户端的明确请求，服务器向客户端发送信息，实现反向的通讯，这就是服务器与客户端之间的“全双工”通讯。
websocket 的优势：
① 减少宽带开销
② 增强实时性
③ 维持连接状态
④ 更灵活的扩展支持
⑤ 更好的压缩效果
适用于哪些场景呢？
① 需要及时响应的场景----如客服系统
② 需要实时查询的场景
③ 小负载的高频消息传递-----如运动 APP
④ 多人协同的场景-----如在线授课等

27. box-sizing 盒模型

前端盒模型包括两种，分别是 W3C 盒模型和 IE 盒模型，他们唯一的区别就是元素的宽度
盒模型是规定网页元素如何显示，元素间的相互关系。
W3C 盒模型组成分为四部分：
content(内容区)：元素的宽和高
border(边框区)：盒子的边缘
padding(内边距)：为了使页面布局看起来美观大方，盒子里的内容区会用 padding 来解决父元素和子元素的位置关系；
margin(外边距)：控制同辈元素直接的位置关系
其中 width=content
box-sizing:content-box;就是 W3C 的标准盒模型计算方式。
IE 盒模型组成部分也为四部分：
content,padding,boder,margin.
其中 width=content+padding+border

box-sizing：border-box；就是 IE 盒模型的计算方式。

28. transform、transition、animation

29. 有哪些布局方式，特点，如何实现

1.弹性布局
特点：
实现：在父元素上设置 display：field 属性 
2.流式布局
特点：
实现： 
3.响应式布局
特点：能够在不同的设备下显示
实现：通过媒体查询 
4.栅格布局
特点：
实现：
5.table 布局
特点：
实现：

30. 说一下你对闭包的理解

闭包其实就是获取其他函数内部变量的函数
闭包的原理是：外层函数调用后，外层函数的作用域对象被内层函数所应用，无法释放，从而形成闭包。
优点：不会造成全局污染，可以重用。
缺点：因为无法释放，所以会多占一块内存，从而导致内存泄漏。
如何解决：使变量=null 就可以释放。

31. this 的指向有哪些

1、如果是一般函数，this指向全局对象window；
2、在严格模式下‘use strict’ ，为undefined；
3、对象的方法里调用，this指向调用该方法的对象；
（call，apply，bind会改变this的指向）
4、构造函数里的this，指向创建出来的实例
总结: this 8种: 判断this，一定不要看定义在哪儿！只看调用时！

1. obj.fun() this->obj
2. fun() 或 (function(){ … })() 或 多数回调函数 或 定时器函数 this->window
3. new Fun() this->new正在创建的新对象
4. 类型名.prototype.共有方法=function(){ … } this->将来谁调用指谁，同第一种情况
5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象
   如果需要使用简化版函数，必须$(this)
6. 箭头函数中的this->箭头函数外部作用域中的this
7. jQuery.fn.自定义函数=function(){ … } this->将来调用这个自定义函数的.前的jQuery子对象，不用再$(this)
8. new Vue()中methods中的函数中的this->当前new Vue()对象

32. call(),apply(),bind()是什么，用法

他们都是改变 this 的指向的
call()和 apply ()都是临时改变 this 的指向，call()传递的是参数，apply ()传递的是数组；
call()和 apply ()都是立刻执行。
bind()是永久绑定 this

33. 说说你对原型,原型链,作用域链的理解

原型：① 所有引用类型都有一个__proto__(隐式原型)属性，属性值都是一个普通对象。
② 所有函数都有一个 prototype(原型)属性，属性值是一个普通的对象。
③ 所有引用类型的__proto__属性指向它的构造函数的 prototype。
原型链：当访问一个对象的某个属性时，会先在这个属性本身上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的 prototype，如果还是没有找到就会再在构造函数的 prototype 的__proto__中查找，这样一层一层的向上查找就会形成一个链式结构，我们称之为原型链。
作用域链：一般情况下，变量取值是到创建这个变量的函数作用域中取值；但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查找到全局作用域链，这个查找过程形成的链条就叫做作用域链。

34. 说说…运算符的用法

ES6 前用
ES6 的对象扩展运算符
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。
扩展运算符同样可以运用在对数组的操作中： 1.可以将数组转换为参数序列 2.可以复制数组 3.扩展运算符可以与解构赋值结合起来，用于生成数组.(需要注意的是：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错) 4.扩展运算符还可以将字符串转为真正的数组。 5.任何 Iterator 接口对象，都可以用扩展运算符转为真正的数组。

35. exports、module.exports、require、export、export default、import 区别与作用
    module.exports和exports是属于CommonJS模块规范！
    export和export default是属于ES6语法
    import和require分别属于ES6和CommonJS！
    module.exports和exports、export和export default都是导出模块；
    import和require则是导入模块。
    所以现在就不要弄混了，module.exports
    导出对应require导入，export导出对应import导入。

36. ES6 新特性有哪些，你用过哪些，怎么用的

1.箭头函数------简化了函数的书写，不需要用关键字 function 来定义函数；一般情况下可以省略 return；在箭头函数内部，this 并不会跟其他函数一样指向调用它的对象，而是继承上下文的 this 指向的对象。
2.模板字符串------使用反引号(``)将内容括起来，在反引号中可以使用${}来写入需要引用到的变量。
3.promise------处理异步操作的一种模式
4.class------通过 class 关键字，可以定义类。
5.map------map 结构提供了’值-值’的对应,是一种更完善的 Hash 结构实现,如果你需要’键值对’的数据结构,map 比 object 更合适.它类似于对象,也是键值对的集合,但是"键"的范围不限于字符串,各种类型的值(包括对象)都可以当做键.
6.对象和数组解构
7.for of —遍历

37. 说说 Vue 的原理/MVVM 的理解

vue 的原理：访问器属性+虚拟 dom 树

访问器属性：是对象中的一种特殊属性，它不能直接在对象中设置，而必须通过defineProperty（）方法单独定义。
访问器属性的“值”比较特殊，读取或设置访问器属性的值，实际上是调用其内部特性：get和set函数。
get 和 set 函数可以操作对象内部的值。另外，访问器属性的值会“覆盖”同名的普通属性，因为访问器属性会被优先访问，与其同名的普通属性则会被忽略。
（也就是所谓的“劫持”了）
MVC是什么?
MVC是model-view-controller的缩写
主要目的是对代码解耦，把混合在一起的代码拆分为3部分；让HTML中不存在任何逻辑代码，没有javascript代码痕迹。
MVVM理解：是 model-view-viewModel 的简写，它的本质上就是 MVC 的改进版
view -----界面，包括 HTML 和 css，负责数据的展示
model -----模型对象，数据和业务逻辑都在 model 层定义
viewModel -----视图模型，数据库结构往往是不能直接跟界面控件一一对应的，所以，需要在定义一个数据对象专门对应 view 上的控件。而 viewmodel 的职责就是把 model 对象封装成可以显示和接受输入的界面数据对象
简单的说：viewModel 就是 view 与 model 的连接器，view 与 model 通过 viewModel 实现双向绑定。

38. vue 的双向数据绑定原理及实现

原理：Vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图也跟着变化，视图变化，数据也随之发生变化。
通过object.defineProperty（）来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
核心:object.defineProperty()方法；
这个语法有三个参数，分别为 obj(要定义其上属性的对象)，prop(要定义或修改的属性),descriptor(具体的改变方法)
简单的说，就是用这个方法来定义一个值，当调用时我们使用了它里面的 get 方法，当我们给这个属性赋值时，又用到它里面的 set 方法。
实现：将 Vue 中的 data 中的内容绑定到输入文本框和文本节点中。
当文本框的内容改变时，Vue 实例中的 data 也同时发生改变。
当 data 中的内容发生改变时，输入框及文本节点内容也会发生变化。

38.angular双向绑定原理
脏值检查（angular.js）
Angular.js是通过脏值检测的方法。对比数据是否有变更，从而决定是否更新视图。最简单的方法就是通过setInterval（）定时轮询检测数据变动。Angular.js只有在指定的事件触发时，进入脏值检测。大致如下：
-DOM事件，譬如用户输入文本，点击按钮等。
-XHR响应事件（$http）-浏览器location变更事件（$location）
-Timer事件（$timeout,$interval）
-执行$digest()或$apply(）

38.单向绑定与双向绑定的好处和劣势

单向数据绑定：以输入框为例，react框架采用的是单向数据绑定，需要配合onChange事件，才能实现类似vue双向绑定效果。
优点：单向数据流。所有状态变化都可以被记录、跟踪、状态变化通过手动调用通知。源头易追溯。例如：通过_onChange方法可以实现监听输入框数据变更。
缺点：代码量会相应的上升，数据的流转过程变长，从而出现很多类似的样板代码。例如：每个输入框，都要添加对应的方法监听变更。大型表单项目会导致代码非常啰嗦。
双向数据绑定：vue框架采用的是 双向数据绑定
优点：在表单交互较多的场景下，会简化大量业务无关的代码。
缺点：无法实时掌控数据的状态变化

39.vuex是什么？

Vuex是一个专门为vue.js应用程序开发的 状态管理模式
它采用 集中式 存储管理应用的所有组件的状态，并以相应的规则保证状态以一种 可预测的方式 发生变化。
使用场景：组件间的状态共享：登录状态
组件间的数据共享：购物车的数据，登录的token
Vuex的五种属性：
1、state：vuex的基本数据，用来存储变量
2、getters：从基本数据（state）派生的数据，相当于state的计算属性
3、mutations:提交更新数据的方法，必须是同步的（如果需要异步使用action）。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
4、action：和mutation的功能大致相同，不同之处在于1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

39. 说说 vuex 的原理

Vuex实现了一个单项数据流，在全局又有一个state存放数据。
当组件要更改state中的数据时，必须通过mutation进行，mutation同时提供了订阅者模式供外部插件调用获取state数据的更新。
而当所有异步操作（常见于调用后台接口异步获取更新数据）或批量的同时操作需要走action。
但action也是无法直接修改state的，还是需要通过mutation来修改state的数据。
最后根据state的变化，渲染到视图上。

39.vue-router原理

Vue-router通过hash与history两种方式实现前端路由
更新视图但不重新请求页面是前端路由原理的核心之一。
目前在浏览器环境中这一功能的实现主要有两种方式：
1.hash：利用URL中的hash形式上会多个#
例：http://localhost:8080/#/login
2.history：HTML5中新增的方法，形式上比hash更好看
例：http://localhost:8080/login

40. 说说路由守卫有哪些，执行顺序

1.全局&路由使用：
beforeEach((to,from,next)=>{…})
发生路由 跳转时 立即执行
to—跳转到….
From—来源….
Next()----无参数直接执行，表示进入下一个 生命周期
beforeReslove((to,from,next)=>{…})
与beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。即在 beforeEach 和 组件内beforeRouteEnter 之后
afterEach(()=>{…})
全局后置钩子，在所有路由跳转完成的时候调用，不接受next函数等参数，不能改变导航。
beforeEnter 与beforeEach用法相同
2.组件内 路由守卫

41. 如何在子组件上使用 v-model
    在父组件中，给子组件绑定v-model，子组件使用value接收父组件的传参。

42. sync 修饰符的用法

43. 说说 slot 插槽的用法

44. 说说你对 Vue3 的了解

45. 什么是跨域，为什么会出现跨域，如何解决跨域？

46. 浏览器渲染原理

47. 如何提升网站访问速度

1.减少程序执行次数，通过缓存或生产静态页面来加快网站速度
2．页面HTML代码，以DIV+CSS为主的HTML代码比传统的Table结构打开速度快
3.js代码的编写，如果是较大的js文件或需要执行的js代码放在最后
4. 压缩优化网站的图片
5. 通过压缩JS文件、ＣＳＳ样式文件的大小
6. 启用服务器的ZIP压缩功能
7.网站里面如果有视频，尽量不要让视频自动加载或者自动播放

48. 要做一个登陆，注册的页面，尽可能详细的说出你的思路，用到的技术

49. 说说你最近在做的项目->项目中你遇到过最困扰你的问题，如何解决的->用到哪些框架/组件库、技术/->你是固定用这一套框架搭配还是会选择多种框架搭配->选择这个框架的原因->xxx 框架是 xxx 公司做的，业内知名度很高，为什么不选择它呢？->那你的意思是觉得 xxx 框架很 low 吗->那你用你的这个框架看过源码吗？

50. 公司要做 xxx 项目，你就是项目的总负责人，整个项目所有流程和事宜由你安排，说说你怎么安排。

51. 回流和重绘

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式
回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）
回流必定引发重绘，重绘不一定引发回流。回流的代价比重绘高

52. 页面渲染 HTML 是怎么实现的？

HTML 解析过程：构建 DOM 树、构建 CSSOM 树、根据 DOM 树和 CSSOM 树构建 render 树、有了 render 树就开始布局 Layout、最后绘制 paint。
浏览器渲染页面的一般过程： 
1.浏览器解析 HTML 源码，然后创建一个 DOM 树。并行请求 css/image/js 在 DOM 树中，每一个 HTML 标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM 树的根节点就是 documentelement，对应的是 HTML 标签。
2.浏览器解析 css 代码，计算最终的样式数据。构建 CSSOM 树。对 css 代码中非法的语法会直接忽略掉。解析 css 时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外联样式 < 内联样式 < HTML 中的 style。
3.DOM Tree + CSSOM -> 渲染树(rendering tree)，渲染树和 DOM 树有点像，但是是有区别的。 4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果 DOM 或 CSSOM 被修改，以上过程会被重复执行。

53. HTML 状态码描述

1-200（OK） - 表示已在响应中发出
2-204（无内容） - 资源有空表示
3-301（Moved Permanently） - 资源的URI已被更新
4-303（See Other） - 其他（如，负载均衡）
5-304（not modified）- 资源未更改（缓存）
6-400 （bad request）- 指代坏请求（如，参数错误）
7-404 （not found）- 资源不存在
8-406 （not acceptable）- 服务端不支持所需表示
9-500 （internal server error）- 通用错误响应
10-503 （Service Unavailable）- 服务端当前无法处理请求

54. Vue 父组件和子组件生命周期的顺序

1.渲染过程：父组件挂载完成一定是等子组件都挂载完成后，才算是父组件挂载完，所以父组件的 mounted 在子组件 mounted 之后。
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
2.子组件更新过程：
影响到父组件： 父 beforeUpdate -> 子 beforeUpdate->子 updated -> 父 updated
不影响父组件： 子 beforeUpdate -> 子 updated

3.父组件更新过程：
影响到子组件： 父 beforeUpdate -> 子 beforeUpdate->子 updated -> 父 updated
不影响子组件： 父 beforeUpdate -> 父 updated
4.销毁过程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

54. Vue 的事件修饰符主要有哪些，分别是？

55. 如何解析 json 数据

Json是存储和交换文本信息的语法（类似于XML）,是一种轻量级的文本数据交换格式，比XML更快更小，更易解析。
Json有两种结构：对象和数组
为什么要解析json数据：json数据在传输过程中是以文本格式存在的即以字符串形式存在，然而我们的js中的操作却是对象，因此我们必须将json数据解析成对象的操作，然后才能用对象对数据进行访问。
使用json.parse( )将字符串解析为对象

56. 移动端适配

57. 什么是 token

1、Token 的引入：Token 是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token 便应运而生。
2、 Token 的定义：Token 是服务器生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登陆后，服务器生成一个 Token 便将此 Token 返回给客户端，以后客户端只需带上这个 Token 前来请求数据即可，无需再次带上用户名和密码。

3、 Token 的目的：Token 的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
优势相较于cookie:
1.支持跨域访问：cookie是不允许跨域访问的，token支持
2.无状态：token不需要服务器保存任何相关信息。Token自身就携带所有值。
3.去耦：不需要绑定特定的身份验证方案。
4.更适合移动应用：cookie不支持手机端访问。
5.性能：网络传输过程中。性能更好。
6.基于标准化： JWT
缺陷：
1.占宽带：比session_id大，消耗更多的流量。
2.无法在服务器注销：很难解决劫持问题。
3.性能问题：JWT标准消耗更多的cpu资源。

58.Vue开发与传统开发有什么区别

前端框架，这种框架的开发可以把前后台完全分离，前端人员只负责前端开发，服务端人员负责服务端开发。Vue有自己的请求处理方式，现在前后端都是用rest风格，前后台只在接口上有交集，代码上完全独立。
一、服务端渲染 –> 客户端渲染
传统的jsp、php或是模板渲染也好，都是服务端渲染，就是客户端一个请求，服务器直接把整个页面返回给你，简单粗暴。但是Vue开发是前后端分离开发，通过api进行交互，客户端请求服务器返回json数据，由客户端进行渲染。不仅减轻了服务器的压力速度更快而且渲染更加优雅，代码更容易维护。
二、渲染优雅，代码易维护
Jquery是通过DOM来控制数据，不仅笨重而且渲染数据特别麻烦，除了text()html()append(）就没了，而Vue是通过数据来控制状态，通过控制数据来控制渲染，变量可以直接写在html中，渲染更加优雅。因为前端代码和后台代码都是分开的，所以项目更加容易维护，开发效率更高。
三、项目工程化，结合npm直接安装第三方库
Vue 让前端项目更加工程化，同时也规范了前端工程师的代码，node为Vue提供了本地server和模块化开发的思路，npm更能安装vue项目需要的模块，配合Vue使用，比如moment.js、element ui 、vuex等等。

59．HTTP与HTTPS区别

传输信息安全性不同、连接方式不同、端口不同、证书申请方式不同 。
1.传输信息安全性不同：
HTTP协议：是超文本传输协议。信息是明文传输。如果攻击者截取了web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。
HTTPS协议：是具有安全性的ssl加密传输协议。为浏览器和服务器之间的通信加密。确保数据传输的安全。
2.连接方式不同：
HTTP协议：HTTP连接很简单，是无状态的。
HTTPs协议：是由ssl+http协议构建的可进行加密传输、身份认证的网络协议。
3.端口不同：
HTTP协议：使用的端口是8080。
HTTPS协议：使用的端口号是4430.
4.证书申请方式不同：
HTTP协议：免费申请。
HTTPS协议需要到ca申请证书，一般免费证书很少，需要交费。

60.防抖和节流

概念：日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）。
函数防抖：当持续触发事件时，一定时间内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。
函数节流：当持续触发事件时，保证在一定时间内只调用一次事件处理函数。意思就是说。假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次。
区别：防抖是将多次执行变为最后一次执行。节流是将多次执行变为每隔一段时间执行。
实现函数节流我们主要有两种方法：

61. get 和 post 的区别

GET在浏览器回退时是无害的，而POST会再次提交请
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。

62. Restful 的请求有哪些方式

RESTFUL是一种网络应用程序的设计风格和开发方式
RESTFUL特点包括：
1、每一个URI代表1种资源；
2、客户端使用GET、POST、PUT、DELETE 4个表示操作方式的动词对服务端资源进行操作：GET用来获取资源， POST用来新建资源（也可以用于更新资源），PUT用来更新资源，DELETE用来删除资源；

63.rem是什么？

rem（font size of the root element）是指相对于HTML根元素的字体大小的单位。简单的说它就是一个相对单位。
em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
Px（）是固定的像素，一旦设置了就无法因为适应页面大小而改变的。
rem适合的场景就是 web app. 即在手机端上浏览的网页.
利用 JS 根据设备自动更改根元素字体大小, 就可以实现全局的自动适配

64：bindtap 和 catchtap区别

1.什么是事件
（1）事件是视图到逻辑层的通讯方式
（2）事件可以将用户的行为反馈到逻辑层进行处理
（3）事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数
（4）事件对象可以携带额外信息，如id,dataset,touches
Bindtap 和 catchtap的区别
相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。
不同：他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的。

65：小程序的生命周期

分为小程序的生命周期和页面的生命周期
小程序的生命周期：
小程序的生命周期需要在app.js中进行定义，app.js文件的基本结构如下：

App({ 
    //小程序初始化时调用,全局只调用一次 
    //可以在该生命周期内进行初始化工作，如检测用户是否登录，获取用户信息，获取用户的定位等 

onLaunch(){ 

}, 
//小程序启动或者从后台切入前台时触发, 
onShow(){ 
     
}, 
//小程序从前台切入到后台时触发，如手机来电 
onHide(){ 
   
} 
globalData:{ 
	//在此声明各个页面都共享的数据 
	//在期望访问globalData的页面中，首先通过getApp()函数获取小程序对象 
	//然后再通过 变量名称.globalData.xxx 进行访问即可 
} 

})
App()函数用于注册小程序，接收object 类型的参数，在其中指定小程序的生命周期回调及全局数据等。
App()函数只能调用一次。
页面的生命周期：
页面的生命周期需要在page.js中进行定义，page.js文件的基本结构如下：
Page({
//初始化的数据
data:{

}, 
//onLoad生命周期回调在页面加载时被触发，只触发一次 
//options参数代表的是由URL传递的参数所形成的对象 
onLoad(options){ 
     
}, 
//页面显示/从后台切入前台时触发 
onShow(){ 
     
}, 
//页面初始渲染完成时触发，代表页面已经准备完毕，可以与视图层进行交互 
onReady(){ 
     
}, 
//从前台切入到后台时触发 
onHide(){ 
     
}, 
//页面卸载时触发 
onUnload(){ 
     
} 

})

66：前端开发与后台交互的数据格式主要是什么？

主要是JSON XML现在用的不多

67：前端请求参数的形式

Get 和post两种方式，也会采用restful架构，通过请求方式表示用户行为，对安全性不高，采用get方便，post要比get安全；get——从指定的服务器中获取数据；post——提交数据给指定的服务器处理。

68：为什么需要在请求的时候传入参数？

因为后台在查询数据库的时候需要条件查询

69：v-if和v-show的区别？

1、v-if是动态的向DOM树添加或删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐的。
2、v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
3、v-if有更高的切换消耗；v-show有更高的初始渲染消耗
4、v-if适合运营条件不大可能改变；v-show适合频繁切换

70：this的指向？

1、如果是一般函数，this指向全局对象window；
2、在对象的方法里调用，this指向调用该方法的对象；
（call,apply,bind都会改变this的指向）
3、构造函数里this指向创建出来的实例。

71：less和sass的区别？

不同点：
1、Less是基于JavaScript，是在客户端处理的；sass是基于ruby的，是在服务器端处理的；
2、关于变量在less和sass中的唯一区别就是less用@，sass用$
3、Sass支持条件语句，可以使用if{}else{}，for{}循环等，而less不支持
相同点：在语法上有一些共性
1、混入（mixins）——class中的class
2、参数混入——可以传递参数class，就像函数一样；
3、嵌套规则——class中嵌套class，从而减少重复代码；

72：set和map的区别？

Set和map主要应用的场景在于 数据重组 和 数据储存。
Set是一种叫做集合的数据结构，map是一种叫做字典的数据结构。
集合 与 字典 的区别：
共同点：集合、字典 可以储存不重复的值
不同点：集合 是以 [value, value]的形式储存元素，字典 是以 [key, value] 的形式储存
Set：es6新增的一种新的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。
Set本身是一种构造函数，用来生成set数据结构。
Set对象允许你储存任何类型的唯一值，无论是原始值或者是对象引用。
Map：是一组键值对的结构，具有极快的查找速度。可以遍历。