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

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

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 哪里不一样
生命周期函数
几种跳转，小程序内的页面跳转
如何自定义组件

vue 我的项目中用 v -for 循环本地图片，图片不显示，解决办法：应用 require 动静引入图片，
合并多个对象并去重（es6）
vue 计算属性里如何传参：需要是须要把数值转为三位数，相似 1 须要变为 001，10 变为 010 这样。
JS 监听同源其余窗口产生的事件，次要是利用 window.addEventListener(‘s
前端做登录注册时提交按钮问题在用 ajax 传数据给后端时，通常给 button 按钮绑定 js 事件
ajax 传输给 nodejs 后盾数据时的数据类型问题
用 isNaN 判断数据是否是非数字值，是则 true，不是则 false

Doctype 作用? 严格模式与混淆模式 - 如何触发这两种模式，辨别它们有何意义?
行内元素有哪些？块级元素有哪些？空 (void) 元素有那些？
CSS 的盒子模型有几种？各有什么特点？
link 和 @import 的区别是?
CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？CSS3 新增伪类有那些？
如何居中 div, 如何居中一个浮动元素?
浏览器的内核别离是什么? 常常遇到的浏览器的兼容性有哪些？起因，解决办法是什么，罕用 hack 的技
css 属性那些有继承性？哪些没有？
如果盒子都为浮动，父类会没有高度，如何解决
visibility 和 display 的暗藏有什么区别？
伪类的写作程序？
border 和 outline 的区别

原型 / 原型链 / 构造函数 / 实例 / 继承
如何实现 new 运算符
有几种形式能够实现继承
arguments
数据类型判断
作用域链、闭包、作用域
Ajax 的原生写法
对象深拷贝、浅拷贝
图片懒加载、预加载
实现页面加载进度条
this 关键字
函数式编程
手动实现 parseInt

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

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

一面

二面

三面

人事面试题

如何形容本人做过的我的项目

小程序面试题整顿

开发中遇到的 BUG

HTML5\CSS3 面试题整顿

JSvascript 面试问题整顿

VUE 面试问题整顿

小结百度面试感悟

Just My Socks（注册教程内含优惠码）

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

一面

二面

三面

人事面试题

如何形容本人做过的我的项目

小程序面试题整顿

开发中遇到的 BUG

HTML5\CSS3 面试题整顿

JSvascript 面试问题整顿

VUE 面试问题整顿

小结百度面试感悟

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）