前端面试笔记
1.vuex：store{state, mutations, actions, getters，modules}；解决跨组件通信、数据集中式存储
①state用于存储共享数据，mutation用于修改store数据；
state调用方式A. this.$store.state; B. ...mapState(['count'])使用方式为this.count
②mutations用于同步修改state属性调用方式A. this.$store.commit('func'，params); B. 在methods中调用...mapMutations(['mutation'])使用方式为this.func()
③actions用于处理异步任务调用mutation来间接修改state数据、使用方式为A. this.$store.dispatch('mutation'); B. 在methods中调用...mapActions(['action']) 使用this.action()
④getters用于包装state值用法类似vue的filters其调用方式为A. this.$store.getters.getter; B. ...mapGetters(['getter'])
⑤modules将store拆分成多个模块，模块化状态管理
2.双向数据绑定：通过数据劫持结合发布者-订阅者模式来实现，通过Object.defineProperty()的get和set来实现数据劫持
3.跨域：①服务端修改CORS ②反向代理 ③JSONP ④WebSocket ⑤postMessage
4.对VUE的理解：vue是一个构建用户界面的渐进式js框架，是一个mvvm框架也就是数据双向绑定，通过尽可能简单的API时间响应的数据绑定和组合的视图组件。
5.父子组件之间互相传值
①props，$emit
②$refs
③$parent，$children
④定义全局事件window.eventBus = new Vue();通过$emit和$on来传递数据
⑤vuex
⑥父组件provide定义数据/子组件inject注入数据
⑦混入mixins
6.vue生命周期：创建、数据初始化、挂载、更新、销毁
7.性能优化：减少IO、CPU计算、减少网络请求；静态资源缓存；减少DOM操作、异步加载；DNS预解析
8.页面卡顿的原因：
①JS线程长时间占用：浏览器包括js线程和GUI线程，而二者是互斥的，当长时间占用js线程时，会导致渲染不及时，出现页面卡顿
②简化DOM结构：当DOM结构越复杂时，需要重绘的元素也就越多
③资源加载阻塞：js资源放在body之前；行内script阻塞；css加载会阻塞DOM树渲染；资源过大阻塞
④内存泄漏导致内存过大
9.内存泄漏：
①意外的全局变量
②闭包
③被遗忘的计时器
④DOM删除或清空时，事件未清除
10.ES6新特性：
①变量声明let和const：块级作用域，不能重复声明，let不具备变量提升
②模板字符串使用反引号，引用变量使用${}
③箭头函数：省略function、单行内容可省略return、单个参数可省略()、this指向继承上下文的this指向
④函数参数可设置默认值
⑤Spread合并数组/Rest析构数组
⑥对象和数组解构
⑦超类super
⑧for...in和for...of
⑨class类 默认有一个构造函数constructor
11.HTTP与HTTPS的区别：
①HTTP 明文传输，数据未加密，安全性差，HTTPS（SSL+HTTP） 数据传输加密，安全性好
②HTTP 页面响应速度比 HTTPS 快
③端口不同
④ HTTPS 比 HTTP 要更耗费服务器资源
12.GET与POST的区别：
①get获取数据、post发送数据
②get通过url传递数据、post数据放在from数据体内提交用户不可见
③get请求有长度限制、post请求对数据长度没要求
④get会被缓存而post不会
⑤get请求会被保留记录、post不会保留记录
⑥post比get更安全
⑦get只允许ASCII字符、post没有限制也允许二进制
13.HTTP请求方法：
GET 向服务器获取数据
POST 向服务器发送数据
HEAD 与 GET 相同，但只返回 HTTP 报头，不返回文档主体。
PUT 上传指定的 URI 表示。
DELETE 删除指定资源。
OPTIONS 返回服务器支持的 HTTP 方法。
CONNECT 把请求连接转换到透明的 TCP/IP 通道。
14.宏任务（macrotask ）和微任务（microtask ）：
宏任务：计时器、ajax、读取文件.
微任务：Promise.then.
执行顺序：同步任务>process.nextTick>微任务>宏任务>setImmediate
15.vue权限控制：
①接口权限：通过axios对请求拦截将登录时获取到的token带入请求头；如果返回token失效或错误请求则跳转到登录界面
②路由权限：先注册基本路由，然后获取路由权限表、借助vue-router将有权限的路由动态注册到路由规则上
1.html5和html4有什么区别？
①DOCTYPE声明
②字符编码指定
③新增元素：
A.其他元素：video audio canves embed mark progress meter time ruby rt rp wbr command details datalist datagrid keygen output source menu
B.结构元素：section(内容块)、article(博客中的一篇文章)、aside(辅助信息)、header(标题)、hgroup(标题的结合)、footer(作者姓名)、nav (导航)、figure(文档主体中的一个单元)
C.input元素的类型： email(地址)、 url、 number、 range、 Date Pickers(日历)
④废除元素
2.css3和css2的区别？
①内减模式：box-sizing:border-box;
②新增属性选择器：
A.元素[属性^=值]: 选择以指定字符开头的属性值的元素
B.元素[属性$=值]: 选择以指定字符结尾的属性值的元素
③新增伪类选择器:
:root 可以理解为根
li:first-child 代表找出父元素中第一个li子元素
li:last-child 代表找出父元素中最后一个li子元素
li:nth-child(n) 找出父元素中的第n个li子元素
li:nth-child(even) 代表找出父元素中奇数的li子元素
li:nth-child(odd) 代表找出父元素中偶数的li子元素
li:empty 代表找出父元素中li子元素内容为空的标签
li:nth-of-type(n) 找出li标签中第几个
li:first-of-type 找出li标签中第一个
li:last-of-type 找出li标签中最后一个
li:only-child 唯一子元素
④2d变换效果：transform:值
transform:translate(值1,值2); |移动
transform:rotate(角度);transform-origin:横向坐标 纵向坐标; |旋转
transform:scale(值); |缩放
⑤过渡效果：
transition:动画css属性 过渡时间秒数 速度类型 延迟的秒数
3.实现旋转有哪些方法？
canvas rotate:
let c = canvas.getContext("2d");
c.rotate(90 * Math.PI / 180);
c.drawImage(img, 0, -img.height);
CSS3 transform: transform: rotate(90deg);
4.flex:1是什么意思？ (代表均匀分配元素）
flex-grow: 1; （用来“瓜分”父项的“剩余空间”）当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何索取分配父元素的剩余空间。值越大，索取的越厉害。
flex-shrink: 1; （“吸收”超出的空间）父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。值越大，减小的越厉害。
flex-basis: 0%; （设置子项的占用空间）该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。
5.this指向有哪几种？
①作为函数调用，非严格模式下，this指向window，严格模式下，this指向undefined；
②作为某对象的方法调用，this通常指向调用的对象。
③使用apply、call、bind 可以绑定this的指向。
④在构造函数中，this指向新创建的对象
⑤箭头函数没有单独的this值，this在箭头函数创建时确定，它与声明所在的上下文相同。
6.对比一下for、for..in、for..of、foreach、map的区别、返回值是什么？
①for…in以原始插入顺序访问对象的可枚举属性，包括从原型继承而来的可枚举属性
②for…of(根据值遍历): 在可迭代对象（Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，正确响应break，continue，return语句
③forEach：只能遍历数组，不能中断，没有返回值
④map(根据index遍历)：只能对元素进行加工处理，产生一个新的数组对象
⑤for: 常规语句遍历，可循环数字,字符串，数组
7.数组方法forEach、map、filter、sort的用法？
①forEach: 多用于对数组自身的改变和各元素相关统计性的计算
②map: 新建一个数组，需要有承载对象，将不改变原数组
③filter: 对数组过滤，返回过滤数据
④sort: 对数组的元素进行排序
8.promise、async\await、setTimeout三个有什么区别?
①Promise本身是同步但回调是异步；
②async 函数返回一个 Promise 对象，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句
③await含义为等待，通过返回一个Promise对象来实现同步的效果
9.什么是微任务什么是宏任务？
①每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）
②macrotask主要包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)
③在当前 task 执行结束后立即执行的任务，在当前task任务后，下一个task之前，在渲染之前。
④microtask主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)
运行机制：
执行一个宏任务（栈中没有就从事件队列中获取）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）
10.什么叫原型链？
原型链：通过隐式原型把一些构造函数层层的串起来
①每个函数都有一个原型属性(prototype) ， 这个属性是一个指针，指向构造函数的原型对象( CreateObj.prototype)
②在默认情况下，所有原型对象都会自动获得一个constructor属性，该属性包含一个指向prototype属性所在的函数
③所有的实例( 通过构造函数new出来的，都包含一个隐式原型(__proto__)，该指针指向实例的构造函数的原型对象
④写在构造函数中， 为this赋值的属性和方法
⑤写在原型对象上的方法或者属性
⑥当一个对象访问属性和方法的时候，他的访问规则叫（就近原则）
11.TypeScript了解吗？
Typescript并不直接在浏览器上运行，需要编译器编译成纯Javascript来运行
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译
12.简单说下vue生命周期、双向数据绑定在vue3.0和vue2.0之间的区别
vue2.x实现双向数据绑定的原理是利用了 Object.defineProperty()
Vue3.x是用ES6的语法 Proxy对象来实现
相比于vue2.x，使用proxy的优势如下：
①defineProperty只能监听某个属性，不能对全对象监听
②可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
③可以监听数组，不用再去单独的对数组做特异性操作
vue3.x可以检测到数组内部数据的变化
13.为什么在vue2.0里对数组或对象里单个属性赋值不会引起视图改变？
如果监测得属性是值类型，当值改变就会触发set;如果是引用类型，只有当引用改变得时候才会触发set
14.简单说下echarts图标类型有哪些？
Line折线图、Bar柱状图、Pie饼图、Scatter散点图、Map地图、CandlestickK线图、Radar雷达图、Boxplot盒须图、Heatmap热力图、Graph关系图、Tree树图、Treemap矩形树图、Sunburst旭日图、Parallel平行坐标图、Sankey桑基图、Funnel漏斗图、Gauge仪表盘、PictorialBar象形柱、ThemeRiver主题河流图、日历坐标图
15.centos和Ubuntu的区别？
图形化外观上、软件的安装方面、关于sudo权限、应用场景上
16.如何解决跨域问题？
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
17.nginx如何设置请求头、设置过期时间？
expires 过期时间
proxy_set_header是Nginx设置请求头信息给上游服务器，add_header是Nginx设置响应头信息给浏览器
