记一次真实的前端面试经验

西安属于分公司, 成立时间应该不长, 目前主要业务是给华为做外包, 目前是在给新项目做人才储备, 具体技术栈不确定, 根据后期项目而定.

以下是技术面试环节问题整理(技术面试是由大连总公司的技术进行电话面试):

面试官:首先面试官介绍了下公司业务方向, 主要是给华为做外包, 会有加班, 能不能接受
我: 影响不大, 能接受

面试官: (基础问题) 两个div, 在不加任何样式修饰的情况下, 会如何在页面中排版? 
我: div是一个典型的块级元素, 块级元素的有一个特性就是独占一行, 所以在页面的排版应该是上下结构, 上面一个div下面一个div

面试官:(基础问题) 让两个div在一行显示, 你能想到几种做法?
我:让两个div在一行显示有一下几种方式:1-浮动;2-定位;3-改变定位模式(将div的display设置为inline-block);4-使用flex布局

面试官:(js基础)js如何实现一个缓动动画, 让目标元素移动,到指定时间停止动画
我: 首先应该对目标元素进行定位, 然后启动一个间歇定时器(setIterval), 在定时器内部通过操作dom的形式去修改目标元素的left偏移量, 定时器开始的时候应该去记录一个时间戳,并且将定时器的id保存下来(因为将来要清除定时器), 定时器每执行一次用该获取最新的时间戳,减去起始时间戳, 判断是否达到约定的时间点, 如果时间到了,应该清除定时器 


面试官:(js基础)谈谈你对回调函数的理解?
我: 回调函数的作用是为了让一个函数本身功能更加灵活, 表现形式是将一个函数a作为另外一个函数b的参数, 回调函数一般由调用者根据具体的业务逻辑来编写并传递.

面试官: (性能问题)什么是浏览器的回流和重绘,那些操作会引起浏览器的回流和重绘?
我:回流是指浏览器对页面上的dom元素进行重新排列或排版;重绘是指浏览器对页面进行重新渲染(不进行重新排版).
如果我们修改了一个元素的位置信息或者尺寸信息会引起浏览器的回流(重新排版);
如果我们对某一个元素的外观样式做了修改(比如修改了背景色),那么必将引起浏览器的重绘(重新绘制页面);
所以回流必将引起重绘, 重绘不一定会引起回流

面试官:(es6)谈谈对es6中promise异步对象的理解
我: promise本身只是提供了一个组织代码的结构, promise并没有设置具体的业务逻辑, promise只是帮我们来改造我们的代码结构, 最典型的应用场景就是解决回调地狱.
代码层面的表现形式,是一个Promise构造函数, 使用的时候需要通过new关键字创建一个promise实例,创建实例的时候需要传递一个匿名函数作为实参,这个匿名函数需要两个形参(resolve,reject),
resolve是成功处理函数,reject是失败处理函数(具体什么时候触发resolve什么时候触发reject必须结合具体的业务场景).最后调用的时候, 需要调用者通过promise实例对象所提供的一个then()方法来传递成功处理函数和失败处理函数,
换言之时有then方法来接收成功处理函数和失败处理函数, 然后交给promise异步对象, 最后由promise异步对象帮助调用者来执行.

```

function  getData(){
    return  new Promise(function(resove,reject){
        //假数据:实际开发中应该从服务端获取数据
        let data={errcode:0,msg:'ok'}
        setTimeout(function(){
            resove(data);
        },2000);
    });
}

getData().then((res)=>{
    // 实际开发中可根据res做一些其他操作, 比如对页面dom元素进行操作
    console.log(res);
});

```


面试官:(es6)promise中all方法的作用及返回值
我:all是Promise构造函数提供一个静态方法, 他可以帮我们一次性执行多个promise; 他的返回值是一个数组
```
let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})
Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})
```


面试官:(es6)es6的模块化中, 两种导出方式(export default | export )的区别?
我:export default{}导出的模块在导入的时候, 必须使用`import 模块名 from 文件路径`
export导出的模块必须通过按需导入的方式进行导入:`import {模块a,模块b} from 文件路径`

面试官:(es6)generator函数了解多少?
我:
```
function* helloGenerator() {
    yield "hello";
    yield "generator";
    return;
}
var h = helloGenerator();
console.log(h.next());//{ value: 'hello', done: false }
console.log(h.next());//{ value: 'generator', done: false }
console.log(h.next());//{ value: 'undefined', done: true }
```
这个例子中我们引入了yield这个关键字，分析下这个执行过程

(1)创建了h对象，指向helloGenerator的句柄，

(2)第一次调用nex()，执行到"yield hello"，暂缓执行,并返回了"hello"

(3)第二次调用next()，继续上一次的执行，执行到"yield generator",暂缓执行，并返回了"generator"。

(4)第三次调用next(),直接执行return，并返回done:true，表明结束。

经过上面的分析，yield实际就是暂缓执行的标示，每执行一次next()，相当于指针移动到下一个yield位置。

总结一下，Generator函数是ES6提供的一种异步编程解决方案。通过yield标识位和next()方法调用，实现函数的分段执行。


面试官:(vue)谈谈对vue插槽中认识?
我: 首先插槽(slot)这个概念是在vue-2.5的版本中新增的; 作用还是解决组件之间的传值问题; 
slot插槽分为一下几种: 
匿名插槽: 可以在调用一个组件的时候, 通过在组件调用标签中传入一个数据或标签, 这些数据或标签后期会被插入组件模板部分的slot标签的位置
具名插槽:具名插槽,在声明组件的时候, 在组件的模板部分写入多组slot标签, 并且每个slot标签都有一个name属性;
后期组件被调用的时候, 可以在组件调用的标签中间传入多个标签, 分别使用slot属性来标记,这些被标记的标签会被插入到,组件模板部分name属性值等于slot属性的标签部分

```
<!--组件的调用部分-->
<child-component>
  <h2 slot="header">标题</h2>
  <p>正文内容</p>
  <p>更多正文内容</p>
  <div slot="footer">底部信息</div>
</child-component>
<!--组件的定义部分-->
Vue.component('child-component', {
      template: `
      <div class="component">
        <div class="header">
          <slot name="header"></slot>
        </div>\
        <div class="main">
          <slot></slot>
        </div>
        <div class="footer">
          <slot name="footer"></slot>
        </div>
      </div>`
    });
```

面试官:react中如何使用redux来实现状态管理?
我: 首先redux作为一个状态管理工具, 不仅可以使用在react中, 也可以使用在其他框中, 甚至可以脱开框架来使用,只不过和react结合使用的最多, 本身使用起来还是比较繁琐的. 
要在react中使用redux实现状态管理, 必须安装redux和react-redux两个工具包.其中react-redux起到一个中间的角色, 将react和redux连接起来.
react-redux中提供了两个特别重要的东西,Provider容器组件和connect连接方法. Provider容器组件的作用是将保存在redux的store中的状态依次传递给内层组件.
connect({状态属性,状态方法})(react组件)方法是一个高阶函数, 最终返回一个初始化了的组件.
redux中有几个重要的概念:
store用来存储状态数据的对象,必须使用redux提供的creatStore(reducer)方法来创建, 需要一个reducer最为实参.
reducer本质是一个方法,这个方法需要两个参数, state初始状态和aciton更新规则, 这个方法需要按照一定action的规则来更新state数据.
action是一个更新规则, 本质需要是一个对象, 这个对象必须有一个type属性, 属性值必须是字符串

面试官:(webpack)如果一个使用webpack最终打包出来js文件体积比较大,该如何优化?
我:1-分离CSS:安装插件(npm install extract-text-webpack-plugin --save)
2-使用webpack.optimize.UglifyJsPlugin插件压缩混淆JS代码
3-按需打包:使用lodash-webpack-plugin插件让webpack实现按需打包
4-适当的时候可以异步加载模块


面试官:关于服务端渲染你了解多少?
我:首先服务端渲染是解决spa(单页面应用)无法进行seo(搜索引擎推广)的问题.vue官方给出了一整套解决方案, 就是使用nuxt框架.react官方目前没有给出解决方案.
需要注意的是, nuxt必须在服务器上配置nodejs的环境, 因为服务端渲染主要是借助nodejs来实现的.
如果使用 webpack，可以使用 prerender-spa-plugin 对部分也进行预渲染(在打包的时候,对特定路由对应的页面进行预渲染)



面试官:后端语言java和php了解吗?
我:java不了解,php了解

面试官:web服务器apache和nginx会配置吗?
我:可以配置

面试心得:

总体符合大厂招聘的一些规则, 首先是一轮技术面试, 面试过程中规中矩, 由浅入深, 各方面都有涉及, 没有问之前项目相关的问题. 总体感觉是需要一个全栈工程师的角色, 目前对于从业者的要求越来越高, 当然给出的薪资也比较高.