前端面试常问问题

一．布局方面：

1.盒模型，ie怪异盒模型，标准盒模型，两者如果切换？

2.左中右三栏布局，（左、右定宽，中间自适应）怎么实现？有几种方式？优缺点？

3.水平垂直居中，几种实现方式？

4.positon 有几种属性值？默认的是什么？

5.重排和重绘？？

重排：dom结构中每个元素都有自己的盒子，这些都需要浏览器根 据各种样式来计算并根据计算结果将元素放到它该出现的位置

重绘：就是页面要出现的内容统统画在屏幕上

二. es6，es7你经常用的一些用法？

1、const、let、var的区别？

2.箭头函数、普通函数的区别？

3. ...可以实现什么功能？

4. 数组的一些新方法（forEach、map、some、every、fifter、find、findIndex）

5.promise，async、await的区别？

三. Vue

1.双向绑定原理？

2.v-for里面的key是干嘛的？？

主要是用来复用，当列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改，则重新渲染这一项，否则会复用之前的元素。（涉及到diff算法，可以聊一下diff算法）

3.this.$nextTick?

它是将回调延迟到dom 下次更新循环之后执行，vue是异步执行dom更新的，首先修改数据，这是同步任务，同一事件循环的所有同步任务都在主线程上执行，同步任务执行完，开始执行异步watcher队列的任务，更新dom,vue在内部尝试对异步队列使用promise.then

4.Store（状态管理）

有几部分构成，每部分用来做什么？

5.组件传参（父子组件、兄弟组件等）

6.父子组件生命周期函数执行顺序？

加载渲染过程
父beforeCreate -> 父created -> 父beforeMount 
->子beforeCreate -> 子created -> 子beforeMount -> 子mounted
-> 父mounted
子组件更新过程
父beforeUpdate
-> 子beforeUpdate -> 子updated
-> 父updated

7.Vue router（路由）

全局： beforeEach、afterEach（钩子函数）
组件内：
beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate
beforeRouteEnter 守卫 不能 访问 this，但可以在next传一个回调来访问组件实例

8.computed与watch的区别？？

computed是计算属性，它会根据你所依赖的数据动态显示新的结果，它是响应式的，如果依赖不变的话，它就会变成缓存，computed的值不会重新计算，所以如果数据要通过复杂逻辑来得出结果，那么最好用计算属性

watch是一个对象，键是data对应的数据，值是对应的回调函数，也可以是一个对象，如果是对象的话，通常是handler，deep:true 深度监听当data的数据发生变化时，就会发生回调，他有两个参数，新的值和老的值，如果一个数据需要被监听并且对数据做一些操作就用watch

四：js

1.eventloop?(事件循环，这个比较难，可以放在后面问)

浏览器的js引擎遇到了settimeout,识别到它是一个异步任务，它不会把它放在运行栈里面而是把它拿走，把它拿走也不是直接就放在异步队列中，等时间到了，time模块会把它放到异步队列去，等同步任务执行完，js运行栈中空了它就会读取异步队列，然后把异步任务放到运行栈中去执行，等它执行完，它就会监听异步队列中还有没有异步任务，如果有就继续执行，就这样循环

2.浏览器输入一个地址然后都干了什么？？

1.dns域名解析

2.建立tcp连接

3.发起http请求

4.服务器处理请求

5.返回响应结果

6.关闭tcp连接

7.浏览器解析html

8.浏览器布局渲染

3.浏览器的渲染过程

html经过html parser转成dom tree

css经过css parser转成cssom tree

最后这两颗树整合成一个attachment,然后形成一个render tree

然后painting最后显示出来

4.防抖和节流？

防抖：在第一次触发事件时，不会立即执行，而是给出一个期限值#####比如200ms,

如果在200ms内没有再次触发滚动事件，那么就执行函数

如果200ms内，再次触发滚动事件，那么当前的计时取消，重新开始计时

作用：如果短时间内大量触发同一件事，只会执行一次函数

节流：

如果短时间内大量触发同一件事，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

Setimeout +状态位 开关 比如说：搜索框 input事件

5.bind、call、apply

都是用来重新定义这个this 指向的

bind后面会多一个（），bind 返回的是一个新函数，你必须调用它才会执行

传参：

第一个参数都是一个对象，

Call,的参数是直接放进去的，第二个、第三个、第n个参数用逗号隔开

Apply第二个参数是一个数组

bind和call一样

6.原型链？？

从实例对象上往上找，构造这个实例对象的相关对象，然后这个关联的对象再往上找，然后它又有创造它的对象，依次类推，直到object.prototype为止。主要是通过prototype和proto来一层一层往上找的。

7.判断数据类型？？

typeof 但是无法判断数组、null、object

Instanceof 判断某个实例是不是属于原型

Object.prototype.toString.call()