百度前端三面面试题全部公开，三面的最后一个问题令我窒息

分享一次百度面试，部分题目会带有面试答案，百度二面三面都有手写代码的环节，对于动手能力弱的小伙伴来说会有些挺吃力。

一面

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 模块：

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 的区别是什么

10. nodejs 处理了什么问题

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

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

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

移动端适配方案：

<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.0minimum-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

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

直接使用了 let 和定时器。

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

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

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

三面

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

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 好的地方

7. 页面刷新不出来，是有哪些问题可以从第三题的每个步骤进行分析，大概是：

• 域名不存在，或者 ip 地址错误

• 网络问题，不能建立正常的 tcp 连接

• 服务器找不到正确的资源

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

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

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

再窒息也要好好回答出来！小编整的一份 2022 前端面试题精编包括了人事面试题、描述项目、兼容性、小程序、开发中遇到的 BUG、HTML5\CSS3、JS、HTTP、ES6、VUE、React 面试题，想看完整版的 2021 前端面试题精编的小伙伴点击这就OK了哦。###人事面试题

• 请你自我介绍一下你自己？

• 你觉得你个性上最大的优点是什么？

• 说你最大的缺点？

• 你对加班的看法？

• 你对薪资的要求？

• 在五年的时间内，你的职业规划？

• 你还有什么问题要问吗？

• 谈谈你对跳槽的看法？

• 你对于我们公司了解多少？

• 最能概括你自己的三个词是什么？

如何描述自己做过的项目

• 开篇

• 在面试前准备项目描述，别害怕，因为面试官什么都不知道

• 准备项目的各种细节，一旦被问倒了，就说明你没做过

• 不露痕迹地说出面试官爱听的话

• 一定要主动，面试官没有义务挖掘你的亮点

• 你可以引导，但不能自说自话

小程序面试题整理

• 数据请求怎么封装

• 参数传值的方法

• 提高小程序的应用速度的方法

• 小程序的优点

• 小程序的缺点

• 简述小程序原理

• 怎么解决异步请求问题

• 小程序和 Vue 写法的区别

• 小程序的双向绑定和 vue 哪里不一样

• 生命周期函数

• 几种跳转，小程序内的页面跳转

• 如何自定义组件

开发中遇到的 BUG

• vue 项目中用 v-for 循环本地图片， 图片不显示，解决办法：使用 require 动态引入图片，

• 合并多个对象并去重（es6）

• vue 计算属性里如何传参：需求是需要把数值转为三位数，类似 1 需要变为 001，10 变为 010 这样。

• JS 监听同源其他窗口发生的事件，主要是利用 window.addEventListener('s

• 前端做登录注册时提交按钮问题在用 ajax 传数据给后端时，通常给 button 按钮绑定 js 事件

• ajax 传输给 nodejs 后台数据时的数据类型问题

• 用 isNaN 判断数据是否是非数字值，是则 true，不是则 false

HTML5\CSS3 面试题整理

• Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

• 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• CSS 的盒子模型有几种？各有什么特点？

• link 和 @import 的区别是?

• CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

• 如何居中 div,如何居中一个浮动元素?

• 浏览器的内核分别是什么? 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技

• css 属性那些有继承性？哪些没有？

• 如果盒子都为浮动，父类会没有高度，如何解决

• visibility 和 display 的隐藏有什么区别？

• 伪类的写作顺序？

• border 和 outline 的区别

JSvascript 面试问题整理

• 原型/原型链/构造函数/实例/继承

• 如何实现 new 运算符

• 有几种方式可以实现继承

• arguments

• 数据类型判断

• 作用域链、闭包、作用域

• Ajax 的原生写法

• 对象深拷贝、浅拷贝

• 图片懒加载、预加载

• 实现页面加载进度条

• this 关键字

• 函数式编程

• 手动实现 parseInt

VUE 面试问题整理

• 什么是 MVVM？

• mvvm 和 mvc 区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• vue 的优点是什么？

• 组件之间的传值？

• 路由之间跳转

• vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？

• vue 如何实现按需加载配合 webpack 设置

• vuex 面试相关

• v-show 和 v-if 指令的共同点和不同点

• 如何让 CSS 只在当前组件中起作用

• <keep-alive> </keep-alive>的作用是什么?

• Vue 中引入组件的步骤?

由于篇幅原因列举的内容不多，需要完整版2021前端面试题精编的小伙伴们直接点击这领取，祝大家顺风顺水顺财神！

小结百度面试感悟

1.逻辑清晰： 一定要逻辑清晰，不然即使你知道这个问题的答案，面试官也不会满意，如果你逻辑清晰，即使这个答案不会，面试官也会给你加分。

2.独特理解： 现在的面试题大同小异，那么如何体现出你的优势就很重要。结合业务以及你自身的知识储备来讲。

3.深入思考 ： 对每个问题一定要有深入的思考，不然就很难进入大公司了，深度上要有一个拔高才能在面试中获得好的成绩

4.流畅表达 ： 面试就是一个表达的过程，一些问题心里明白不行，还要流畅的表述出来，基本上如果面试官觉得你表达的很流畅，当你讲到一半就不会再让你说下去了，证明已经通过了