前端面试题

一、vue的面试题

1.为什么组件中的data是一个函数不是一个数组?
组件是可复用的vue实例，一个组件被创建好之后，可能会被多次复用，每次被复用，data里面的数据应该是互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。
如果直接使用对象包裹, 那么组件在复用时, 所有的数据都执行同一块内存空间, 修改某一个, 所有的组件值都会发生变化, 这不符合组件复用的需求。

2.自定义指令有哪些? 自定义指令的方法有哪些?
自定义指令的创建

Vue.directive('focus',{ inserted  :  (el) =>  {  
	
}}

自定义指令的方法

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

3.watch和computed的区别

• computed：有缓存机制；不能接受参数；可以依赖其他computed，甚至是其他组件中的data；不能与data中的属性重复
• watch：可接受两个参数；监听时可触发一个回调，并做一些事情；监听的属性必须存在；允许异步
  • watch配置：handler、deep（是否深度）、immeditate（是否立即执行）
• 总结：
  • 当有一些数据需要随着另外一些数据变化时，建议使用computed
  • 当有一个通用的响应数据变化的时候，要执行一些业务逻辑或异步操作的时候建议使用watch

Js面试题

1.从url到返回浏览器的解析过程

• 浏览器地址栏输入URL
• DNS解析URL对应的IP
• 根据IP建立TCP连接（三次握手）
• 发送http请求
• 服务器处理请求，浏览器接受HTTP响应
• 浏览器解析并渲染页面
• 关闭TCP连接（四次握手）

2.回流与重绘

• 回流：当render tree中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建
• 重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的，比如background-color
• 总结 ： 回流必定会发生重绘，重绘不一定会引发回流。重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。

3.如何减少回流和重绘

• 使用 transform 替代 top
• 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
• 不要把节点的属性值放在一个循环里当成循环里的变量,使用事件委托
• 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
• 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
• CSS 选择符从右往左匹配查找，避免节点层级过多