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

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

一面

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

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. 晦涩表白： 面试就是一个表白的过程，一些问题心里明确不行，还要晦涩的表述进去，基本上如果面试官感觉你表白的很晦涩，当你讲到一半就不会再让你说上来了，证实曾经通过了