面试题1

柔情只为你懂 2023-01-07 07:23 45阅读 0赞

\*\*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 编程组件  
隐藏一个元素的方法