百度前端校招面试指北，各路英雄来相会！

最新推荐文章于 2022-03-17 01:25:18 发布

weixin_33947521

最新推荐文章于 2022-03-17 01:25:18 发布

阅读量202

点赞数

文章标签：前端面试 javascript ViewUI

原文链接：https://my.oschina.net/zybc/blog/2990238

版权

为什么80%的码农都做不了架构师？>>>

二面三面都有手写代码的环节，对于动手能力弱的人会挺吃力。当时提前批投递的是深圳百度，总共只招五个前端，没过也很正常。后面正式批笔试过了，要去北京面试。。

一面

1. 为什么要用flex布局，align-items和justify-content的区别

传统布局基于盒模型，非常依赖 display属性、position属性、float属性。而flex布局更灵活，可以简便、完整、响应式地实现各种页面布局，比如水平垂直居中。

align-items：定义在侧轴（纵轴）方向上的对齐方式；

justify-content：定义在主轴（横轴）方向上的对齐方式。

2. webpack是怎么打包的，babel又是什么？

把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

3. saas和less不同于普通css的地方

定义变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值；
嵌套写法，父子关系一目了然；
使用运算符，可以进行样式的计算；
内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等；
继承：为多个元素定义相同样式的时候，我们可以考虑使用继承的做法；
Mixins （混入）：有点像是函数或者是宏，当某段 CSS经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

4. es 6模块和其他模块不同的地方

对比了一下es6模块和CommonJS模块：

区别	CommonJS	es6
加载原理	第一次加载模块就会执行整个模块，再次用到时，不会执行该模块，而是到缓存中取值。	不会缓存运行结果，动态的去被加载的模块中取值，并且变量总是绑定其所在模块。
输出	值的拷贝（模块中值的改变不会影响已经加载的值）	值的引用（静态分析，动态引用，原来模块值改变会改变加载的值）
加载方式	运行时加载（加载整个模块，即模块中的所有接口）	编译时加载（只加载需要的接口）
this指向	指向当前模块	指向undefined
循环加载	只输出已经执行的部分，还未执行的部分不会输出	遇到模块加载命令import时不会去执行模块，而是生成一个动态的只读引用，等到真正用到时再去模块中取值。只要引用存在，代码就能执行。

5. 有没有用过es6的一些异步处理函数

Promise，generator，async await

6. redux怎么处理异步操作

可以引入Redux-thunk或者redux-promise这种中间件，可以延迟事件的派发。

其中的原理：是因为他们用了applymiddleware()包装了store的dispatch方法，拥有可以处理异步的能力。

7. 为什么reducer要是个纯函数，纯函数是什么？

纯函数：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态。

原因：Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同（浅比较）。如果你在reducer内部直接修改旧的state对象的属性值，那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变，返回的state将为旧的state。两个state相同的话，页面就不会重新渲染了。

因为比较两个Javascript对象所有的属性是否相同的的唯一方法是对它们进行深比较。但是深比较在真实的应用当中代价昂贵，因为通常js的对象都很大，同时需要比较的次数很多。因此一个有效的解决方法是作出一个规定：无论何时发生变化时，开发者都要创建一个新的对象，然后将新对象传递出去。同时，当没有任何变化发生时，开发者发送回旧的对象。也就是说，新的对象代表新的state。

8. 高阶函数是什么，怎么去写一个高阶函数

高阶函数：参数值为函数或者返回值为函数。例如map，reduce，filter，sort方法就是高阶函数。

编写高阶函数，就是让函数的参数能够接收别的函数。

9. vue跟react的区别是什么

没有用过vue，所以就只说了vue具有双向绑定，react是单向数据流。

参考： Vue.js与React的全面对比

10. nodejs处理了什么问题

可以处理高并发的I/O，也能与websocket配合，开发长连接的实时交互应用程序。

11. 响应式布局，怎么做移动端适配

使用媒体查询可以实现响应式布局。

移动端适配方案：

（1）meta viewport：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width: 让当前viewport宽度等于设备的宽度 user-scalable=no: 禁止用户缩放 initial-scale=1.0: 设置页面的初始缩放值为不缩放 maximum-scale=1.0: 允许用户的最大缩放值为1.0 minimum-scale=1.0: 允许用户的最小缩放值为1.0

（2）媒体查询（响应式)

（3）动态 rem 方案

参考：移动端是怎么做适配的？

二面

1. 怎么做一个实时的聊天系统

使用WebSocket和nodejs，《nodejs实战》这本书详细介绍了这个项目。

2. 当消息有延迟的时候，怎么保证消息的正确顺序

每个消息在被创建时，都将被赋予一个全局唯一的、单调递增的、连续的序列号（SerialNumber，SN）。可以通过一个全局计数器来实现这一点。通过比较两个消息的SN，确定其先后顺序。

3. 怎么做一个登陆窗口，input有哪些兼容性

使用form表单。

4. input按钮如何校验

使用正则表达式。

5. 如何实现水平垂直居中，relative、absolute、fixed

我说了三种方式：

（1）使用表格

.container{
  width: 600px;
  height: 600px;
  background: #eee;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.center{
  background: blue;
}

（2）css3的transform属性

.container{
  width: 100%;
  height: 400px;
  background: #eee;
  position: relative;
}
.center{
  background: blue;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

（3）flex布局

.container{
  width: 100%;
  height: 400px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center{
  width: 100px;
  height: 100px;
  background: blue;
  text-align: center;
}

relative：相对于自己的定位；
absolute：相对于最近一级定位元素的定位；
fixed：相对于窗口的定位。

6. 写一个函数，1s之后依次输出1,2,3,4,5

直接使用了let和定时器。

for(let i = 1 ; i < 6; i++){
    setTimeout(() => {
        conosle.log(i)
    }, 1000)
}

7. 事件队列（宏任务、微任务）

参考：：这一次，彻底弄懂 JavaScript 执行机制

8. 如何每隔三个数加一个逗号，还要考虑小数点的情况

这道题就是大疆的笔试题，当时候笔试题也是瞎写的，后面也没仔细看，没想到又成了一道面试题。

function transform(number){
    var num = number.toString() 
    var numArr = num.split('.')
    var [num, dotNum] = numArr

    var operateNum = num.split('').reverse()
    var result = [], len = operateNum.length
    for(var i = 0; i< len; i++){
         result.push(operateNum[i])
         if(((i+1) % 3 === 0) && (i !== len-1)){
              result.push(',')
        }
    }

    if(dotNum){
         result.reverse().push('.'， ...dotNum)
         return result.join('')
    }else{
         return result.reverse().join('')
    }

}

9. webpack有配置过吗？原理知道吗

参考前面。

10. 父子组件如何通信，子组件怎么跟父组件通信？

父组件把state作为props传递给子组件进行通信。

父组件写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子组件，子组件调用父组件的函数，同时引起state变化。

11. 简单说一下pwa

面试的这个部门就是做pwa的，所以说了下自己对pwa的理解。

三面

1. 手写indexOf

function indexOf(str, val){
    var strLen = str.length, valLen = val.length
    for(var i = 0; i < strLen; i++){
        var matchLen = i + valLen
        var matchStr = str.slice(i, matchLen)
        if(matchLen > strLen){
            return -1
        }
        if(matchStr === val){
            return i
        }
    }
    return -1
}

2. 实现 JS 的继承

function A () {
   this.name = 'a';    
}

A.prototype.getName = function () {
    return this.name;
}

function B () {
}

// B 如何继承 A

参考： JS实现继承的几种方式

3. 从url输入到页面显示会有哪些步骤

（1）DNS服务器解析域名，找到对应服务器的IP地址;

（2）和服务器建立TCP三次握手连接；

（3）发送HTTP请求，服务器会根据HTTP请求到数据服务器取出相应的资源，并返回给浏览器；

（4）浏览器处理响应

加载：浏览器对一个html页面的加载顺序是从上而下的。当加载到外部css文件、图片等资源，浏览器会再发起一次http请求，来获取外部资源。当加载到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，等待js文件加载、解析完毕才可以恢复html文档的渲染线程。
解析：解析DOM树和CSSDOM树。
渲染：构建渲染树，将DOM树进行可视化表示，将页面呈现给用户。

4. method有哪些方法，分别是什么意思？post和put的区别

post：上传资源

put：修改资源

5. https有几次握手

6. http2比http1好的地方

主要是考察http2的几个特性。

参考：HTTP协议知识点总结

7. 页面刷新不出来，是有哪些问题

可以从第三题的每个步骤进行分析，大概是：

域名不存在，或者ip地址错误
网络问题，不能建立正常的tcp连接
服务器找不到正确的资源

8. 上一次系统性的学习是什么时候，怎么学习的

学习react的时候，看文档、博客，照着网上写了点小项目。

9. 你觉得项目中最自豪的是什么

10. 上家公司有哪些不好的地方

有句话叫做“方法不对，努力白费”所有的前端大神都有自己的学习方法，而学web前端的学习也基本一致，而对于一个什么都不懂的初学者，根本不会知道该怎么学，这也是造成失败的最直接原因。所以学web前端一定要有人指点。如果你处在迷茫期，找不到方向。可以加入我们的前端学习交流qun： 731771211 。有任何不明白的东西随时来问我。

点击：加入

转载于:https://my.oschina.net/zybc/blog/2990238