2018年间大厂面试考题集锦(拼多多、饿了么、头条、蚂蚁等)

圆儿圈圈
1,446 阅读6分钟

写在开头

年前经历了许多大厂的面试,根据类别整理回顾一些知识点。

一、react+redux部分

1、react Fiber的作用
2、react是同步还是异步？

react是异步的，有两种方式可以处理异步：

this.setState({
    count:this.state.count+1
},function(){
    this.setState({count:this.state.count+1});
})

===========

this.setState((prevState)=>({count:prevState.count+1}));
3、简写redux原理

createStore是redux的核心、暴露出dispatch、subscribe、getState方法给使用者。

function createStore(reducer) {
    let state;
    let listeners=[];
    function getState() {
        return state;
    }

    function dispatch(action) {
        state=reducer(state,action);
        listeners.forEach(l=>l());
    }

    function subscribe(listener) {
        listeners.push(listener);
        return function () {
            const index=listeners.indexOf(listener);
            listeners.splice(inddx,1);
        }
    }
    
    dispatch({});
    
    return {
        getState,
        dispatch,
        subscribe
    }

}
4、redux如何更新组件
 store.subscribe(()=>this.setState({count:store.getState()}))

subscribe中添加回调监听函数，当dispatch触发的时候，会执行subscribe listeners中的函数。

subscribe负责监听改变

5、react如何区别component和dom

当用ReactDOM.render创造一个dom tree的时候，一般有三种方式:

(1) 第一个参数传JSX语法糖

ReactDOM.render(
    <button color='blue'>OK</button>,
    document.getElementById('root')
);

React.createElement会一个虚拟dom元素。

ReactDOM.render(
    React.createElement({
        type：'botton',
        porps:{
            color:'blue',
            children:'OK!'
        }
    }),
    document.getElementById('root')
);

虚拟dom是一个obj：具有一个type属性代表当前的节点类型，还有节点的属性props

(2) 函数声明

function RenderButton() {
    return <button color='blue'>OK</button>
}
ReactDOM.render(
    <RenderButton />,
    document.getElementById('root')
);

(3) 类声明

class DangerButton extends Component {
    render() {
        return <button color='blue'>NOT OK</button>
    }
}
ReactDOM.render(
    <DangerButton />,
    document.getElementById('root')
);

如果我们组合三种方法创建一个节点：

const DeleteAccount =()=>{
    <div>
        <p>Are you sure?</p>
        <DangerButton>Yep</DangerButton>
        <botton color='blue'>Cancel</botton>
    </div>
}

React.createElement会把这个JSX转换为如下的虚拟DOM:

const DeleteAccount = ()=>{
    type:'div',
    porps:{
        children:[{
            type:'p',
            props:{
                children:'Are you sure?'
            }
        },{
            type:'DangerButton',
            props:{
                children:'Yep'
            } 
        },{
            type: 'botton',
            props: {
                color: 'blue',
                children: 'Cancel'
            }
        }]
    }
}

当React碰到type是function|class时，它就知道这是个组件了。

6、react 生命周期中有一个被移除

v16.3新引入两个生命周期：getDerivedStateFromProps,getSnapshotBeforeUpdate

v17.0中将要被移除的三个生命周期：componentWillMount、componentWillReceiveProps、componentWillUpdate

7、react事件机制

其实React事件并没有原生的绑定在真实的DOM上，而是使用了行为委托方式实现事件机制。

React会将所有的事件都绑定在最外层(document)，使用统一的事件监听，并在冒泡阶段处理事件，当挂载或者卸载组件时，只需要在通过的在统一的事件监听位置增加或者删除对象，因此可以提高效率。

而是在基于Virtual DOM的基础上实现了合成事件(SyntheticEvent)

因此在事件层次上具有浏览器兼容性，与原生的浏览器事件一样拥有同样的接口。

  • 使用事件委托技术进行事件代理，React 组件上声明的事件最终都转化为 DOM 原生事件，绑定到了 document 这个 DOM 节点上。从而减少了内存开销。
  • 自身实现了一套事件冒泡机制，以队列形式，从触发事件的组件向父组件回溯，调用在 JSX 中绑定的 callback。因此我们也没法用 event.stopPropagation() 来停止事件传播，应该使用 React 定义的 event.preventDefault()。
  • 所有事件绑定在document上
  • 所以事件触发的都是ReactEventListener的dispatch方法
8、react 兄弟组件的通信

React 组件间通讯 1.通过中介父组件 child1中调用父组件改编child2 state的方法 2.发布者-订阅者模式（eventProxy）

child1
      eventProxy.trigger('msg', 'end');
child2
    eventProxy.on('msg', (msg) => {
      this.setState({
        msg
      });
    });
9、logger中间件是在哪一步调用的

applymiddleWare()

中间件使用这个函数，对store.dispatch方法进行了改造，在发出Action和执行Reducer这两步之间，添加了其他功能。

二、babel部分

1、babel、babel-polyfill的区别

babel-polyfill：模拟一个es6环境，提供内置对象如Promise和WeakMap 引入babel-polyfill全量包后文件会变得非常大。它提供了诸如 Promise，Set 以及 Map 之类的内置插件，这些将污染全局作用域,可以编译原型链上的方法。

babel-plugin-transform-runtime & babel-runtime：转译器将这些内置插件起了别名 core-js，这样你就可以无缝的使用它们，并且无需使用 polyfill。但是无法编译原型链上的方法

babel/preset-react

npm install --save-dev @babel/preset-react

runtime 编译器插件做了以下三件事：

  • 当你使用 generators/async 函数时，自动引入 babel-runtime/regenerator 。
  • 自动引入 babel-runtime/core-js 并映射 ES6 静态方法和内置插件。
  • 移除内联的 Babel helper 并使用模块 babel-runtime/helpers 代替。

三、node部分

1、提高node性能

子线程：cluster? 子进程：Node.js Child child_process（spawn()、exec()、execFile()、fork()） 没答上来（尴尬）

2、node一些api例如fs同步异步处理问题等

四、webpack部分

1、webpack-sever热更新机制

当完成编译的时候，就通过 websocket 发送给客户端一个消息（一个 hash 和 一个ok)

向client发送一条更新消息 当有文件发生变动的时候，webpack编译文件，并通过 websocket 向client发送一条更新消息 webpack-dev-server/lib/Server.js:119

compiler.plugin('done', (stats) => {
    // 当完成编译的时候，就通过 websocket 发送给客户端一个消息（一个 `hash` 和 一个`ok`)
    this._sendStats(this.sockets, stats.toJson(clientStats)); 
});
2、webpack优化问题：多页面提取公共资源

common-chunk-and-vendor-chunk

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                chunks: "initial",
                          minChunks: 2,//最小重复的次数
                          minSize: 0//最小提取字节数
            },
            vendor: {
                test: /node_modules/,
                chunks: "initial",
                name: "vendor",
            }
        }
    }
}
3、webpack如何只打包更新修改过的文件

没答上来？猜测是entery入口修改？？

四、基础知识部分

1、继承的几种方式（es5、es6 class等）

2、css

3、重绘 回流

4、bind、call、apply的区别，并手写

//bind返回一个新函数
Function.prototype.myBind = function (context) {
    if (typeof this !== 'function') {
        throw new TypeError('Error')
    }
    let args = Array.prototype.slice.call(arguments,1)
    let _this = this
    return function F() {
        if (this instanceof F) {
            return new _this(...args, ...arguments)
        }
        _this.apply(context,args.concat([...arguments]))
    }
}

Function.prototype.apply = function (context) {
    var context = context || window
   
    context.fn = this

    var result

    if(arguments[1]){
        result = context.fn(...arguments[1])
    }else{
        result = context.fn()
    }

    delete context.fn
    return result
}

5、Javavscript原型链

6、宏任务微任务

7、柯里化

8、节流防抖

......等等等等

写在最后

此文是菜鸟本菜对面试中遇到的问题进行总结与思考，有不对的地方大家请帮忙指出~~

招聘贴

字节跳动招人啦！

职位描述：前端开发（高级）ToB方向—视频云（Base: 上海、北京）

1、负责音视频点播/直播/实时通信等多媒体服务产品化以及业务云平台建设；

2、负责多媒体质量体系、运维体系建设及系统开发工作；

3、擅长抽象设计、工程化思维，专注交互、打造极致用户体验。

职位要求

1、计算机、通信和电子信息科学等相关专业优先；

2、熟练掌握各种前端技术，包括 HTML/CSS/JavaScript/Node.js 等；

3、深入了解 JavaScript 语言，使用过 React 或 Vue.js 等主流开发框架；

4、熟悉 Node.js，了解 Express/KOA 等框架，有大型服务端程序开发经验者优先；

5、对用户体验、交互操作及用户需求分析等有一定了解，有产品或界面设计经验者优先；

6、有自己的技术产品、开源作品或活跃的开源社区贡献者优先。

职位亮点

视频云团队依托抖音、西瓜视频等产品的音视频技术积累和基础资源，为客户提供极致的一站式音视频多媒体服务，包括音视频点播、直播、实时通信、图片处理等。对内作为视频技术中台，服务内部业务；对外打造产品化的音视频多媒体服务解决方案，服务企业级用户。

团队具备规范的项目迭代流程、完善的项目角色配置；技术氛围浓厚，拥抱开源社区，定期分享，让大家能够伴随业务快速成长，用技术改变世界！

投递方式

可直接发送简历至：yuanyuan.wallace@bytedance.com

也可以扫描内推二维码在线投递，期待你的加入！~

avatar
文章
阅读
粉丝