面试题1

**vuejs**

1. vue数据双向绑定原理，
   1. 在beforecreate 和 created 之间 递归data 使用object.defineprototype 监听属性，设置 get 和 set ，set的时候通知视图改变（订阅-发布模式） get的时候订阅  set的时候发布  一对多
   2. 给 input textarea 绑定input事件，val改变是改变data的值  
2. nextTick具体是怎么实现的
   1. 下一次视图更新时触发
   2. promise
   3. mutaionObserve
   4. setImmediate
   5. setTimeout
3. vue3.0的proxy和2.0有什么改变
   1. proxy 优点可以监听一个对象下的所有属性
   2. 在取值的时候再给下一个层次设置监听 提高性能
4. 对象新增属性和数组更新是怎么实现的？
   1. $set(this,key,val)
5. vue的生命周期各个阶段都发生了什么
   1. 创建vue实例之后触发beforeCreate
   2. beforeCreate 和 created 之间 绑定事件，监听data里的数据，这时还没有dom
   3. befoeMount 和 mounted之间  生成虚拟dom => 转化为真实dom
   4. mounted dom挂载结束，可以操作dom了
   5. beforeUpdate 和 updated  data数据变化导致的更新前后
   6. beforeDestroy 和 destroyed vue实例销毁前后
6. compute和watch有什么差别，
   1. watch 一对多 一个变量 对应多个操作，监听的数据发生变化了就调用函数
   2. computed  多对一  一个变量依赖多个变量时使用。任何一个变量发生变化了都会影响这个数据。有缓存
7. vueX插件是怎么绑定到vue实例上的
   1. 
8. 什么是vnode，他是怎么工作的？
   1. 虚拟dom，用js描述的dom结构。
   2. vue模板解析成vnode，当页面操作时把新生成的vnode和之前的vnode进行比较（diff），做到只更新修改的dom 而不更新整个dom，提高性能。
9. diff具体步骤是怎么进行的？
   1. 判断新老节点是否一致 一直return
   2. 判断是否都有子节点 都是文本  替换
   3. 判断是否都有子节点 diff   （两端比较，找出最长的不等队列比较）
   4. 判断新的有子 老的没  给老的加
   5. 判断新的没有 老的有 老的删掉

​    不设key，newCh和oldCh只会进行头尾两端的相互比较，设key后，除了头尾两端的比较外，还会从用key生成的对象<code>oldKeyToIdx</code>中查找匹配的节点，所以为节点设置key可以更高效的利用dom。

**原生js**

什么是闭包

1. 可以读取函数内部的变量的函数
2. 优点：可以读函数内部变量，不会被全局变量污染，不能在函数外面被修改
3. 缺点：变量一直被引用，不会被垃圾回收机制回收，导致内存泄漏

什么是原型链

1. new 构造函数 => 实例
2. 实例.--proto-- === 构造函数.prototype

描述下js的event loop

1. 宏任务： script整体 ，setTimeout，setInterval，setImmediate，I/O、UI rendering
2.  微任务 promise、Object.observe、MutaionObserver
3. 同步操作按顺序 执行代码压入 调用栈  后进先出  
4. 异步操作 按照宏任务和微任务 把回调函数放入宏任务队列和微任务队列

什么是节流和防抖，怎么实现

1. 节流： 高频率的调用一个函数时  设置在一个时间段内只执行一次
2. 防抖： 高频率的调用一个函数时  间隔小于设置的时间则取消调用，只执行最后一次

怎么解决回调地狱

1. promise
2. asyc awiat

谈谈你对解构赋值的理解

​    es6的新功能  讲数组或变量拆解成一系列的变量，简化 = 赋值，可以设置默认值，也可以嵌套使用

​    对象

​    同名赋值  let {a,b} = c

​    非同名赋值 let {a:aa,b:bb} = c  (更名为 aa 和 bb )

​    默认值 let {a:aa,b:bb = 1} = c  (更名为 aa 和 bb 默认值 1 )

​    嵌套使用 let {a:{ b } } = c

​    数组

​    let [a] = arr 

typeof instanceof的区别

1. typeof 能识别基本类型  可以返回变量的类型
2. instanceof 类型  返回 true || false  

有没有做过web Accessibility 前端优化
缩写A11Y  可访问性

cookie的domain属性和path

1. domian 所在的域  设置一级域名的话，对应的二级域名都可以使用
2. path 所在的路径  
3. 都是子可以访问父，兄弟之间不能访问

# **综合**

1. websocket的使用场景是什么？中途因网络断开链接怎么处理的？
   1. 持久化链接的一种网络链接协议。数据需要实时同步，实时获取服务端消息。
   2. 网络聊天  高即时，低延迟。
   3. 弹幕  / 视屏聊天会议  /  
   4. 
2. 浏览器的缓存策略是什么
   1. 概念：缓存是存在于客户端和服务端的一个web资源的副本。 下次请求相同的地址就会根据缓存机制来决定是重新请求和走缓存。
   2. 优点：减少响应时间，减少请求次数。减少带宽和服务端压力
   3. 强缓存 expiress 和 cache-control（优先） 设置过期时间等，不过期走缓存，过期了请求数据。
   4. 协商缓存 last-modified 和 etag（优先）  检查客服端和服务端的资源是否一致，一致则304 更新过期时间，不一致返回资源。
3. 怎么优化平台首页性能
   1. 减少请求 （雪碧图 文件合并）
   2. 减少文件大小 （压缩文件）
   3. 先加载出页面 在加载js
   4. 合理利用缓存

**前端常见安全问题，举个具体的例子**

​    xss 代码注入   文本框  输入script 和 js片段，回显时js代码执行

​    csrf 模拟跨平台请求  img 的src 设置成一个get 的请求地址，携带当前网站的cookie信息等

从代码层面怎么优化性能

​    减少dom操作

​    及时清理定时器

​    谨慎使用 闭包

​    图片懒加载

​    节流 防抖 

nodejs的express框架和其他框架有什么优劣势

​    

平台

1. 前端自动化部署的方案是什么

2. 请求异常和日志上报是怎么实现的

   1. window.onerror
   2. Vue.config.errorHandler
   3. 打包上报

3. 现有项目平台的架构是什么样？

   vue  vuex 路由 vue-router。axiso，iview和element， 

4. 平台怎么进行身份验证和权限校验的

   1. 登录返回token 放在cookie，每次请求接口携带token，校验token的一致性和合法性
   2. 登录返回身份信息，路由中设置身份字段。把身份信息和路由中的信息比对。

补充
v-model 怎么实现的
script 标签的 async 和 defer 区别
伪类和伪元素的区别
水平垂直的方法
怎么清除浮动
this的指向问题
父子组价的生命周期加载顺序
key 的作用
vue怎么监听数组的
vuex在什么时机绑定到各个组件的
cookie 、localStorage、sessionStorage 和 indexDB 的异同点
vue-router 的钩子函数，调用顺序
怎么解决闭包的内存泄漏  
动态加载组件  component is
vue 编程组件
隐藏一个元素的方法