前端面经（6）

1.介绍BFC:

        BFC（块级格式化上下文），是页面中一个隔离的独立容器，容器内的子元素不会影响容器外面的元素，反之也如此。

BFC布局规则：

1）BFC中的盒子按照垂直方向一个一个的放置

2）盒子的垂直高度是由margin决定的，同一个BFC内的盒子的margin是重叠的

3）BFC区域不会和浮动重叠

4）BFC是一个隔离的独立容器，容器里面的元素不会影响外面的

5）计算BFC高度时，要把浮动的盒子计算在内

如何创建BFC:

1）float的值不是none

2) position的值不是static或relative

3) display的值是inline-block

4) overflow的值不是visible

BFC作用：

1）避免margin重叠

2）自适应两栏布局

3）清除浮动

2.函数防抖（debounce）和节流（throttle）：

        防抖和节流都是防止事件在某一时间内频繁触发，但二者的区别在于，比如设置时间为200ms，对于防抖来说，如果触发了一个事件，但是在200ms内又触发一次，那么这个事件就不执行，除非在200ms内，没有被重复触发，就执行，那么对于节流来说，在200ms内，事件只能被触发，执行一次，等200ms过去之后，才能再一次被触发执行。

防抖的例子：1）在输入框内不断输入搜索内容，使用防抖减少了请求资源的次数

2）用户不断地调整窗口大小，使用防抖让其只触发一次

节流的例子：1）不断点击鼠标，使用节流让其单位时间内只触发一次。

3.CSS选择器为什么从右往左解析？

        如果从左往右解析的话，每一个dom结点都需要遍历一遍样式，而从右往左解析，会减少匹配的次数，提高效率，同时，从左往右匹配，匹配的都是dom元素的子节点，而从右往左匹配，匹配的都是dom元素的父节点，避免了HTML和CSS还未下载完需要等待的情形。

4.apply、call和bind的区别：

        三者都是用来改变函数的this指向的。

区别：       

1）apply和call都是对函数的直接调用，而bind返回的仍然是一个函数，所以需要再一次调用

2）如果要传参的话，apply和call是有区别的，apply第二个参数是一个数组，而bind和call传参的方式一样，而且也可以在调用的时候传参。

5.vue和react区别：

1）react是基于jsx渲染模板，vue是基于html语法进行渲染的

2）vue能够更快的计算出虚拟dom的差异，在渲染的过程中，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树，而react当应用状态发生改变时，每一个子组件都需要重新渲染。

3）vue是MVVM框架，由MVC发展而来的，而react是前端组件化框架，是由后端组件化发展而来的

4）vue 是双向绑定，而react是单向数据流

5）vue通过getter/setter监听数据变化，而react通过diffing算法进行的，不监听数据的变化，强调数据不可变性

6）vuex和redux的区别：在vuex中，通过this.$store获取数据，使用dispatch分发action，commit提交更新，redux中，每一个组件都需要通过connect连接UI组件和redux，只能进行dispatch。