前言

全系列分为四个章节，分别是电话面试部分、一面部分、二面部分、三面部分。全系列不光有题目还有详细答案，收藏转发就完事了！

第一章：电话面试部分已经放出：万字长文系列：Web前端百度面经（含答案）第一章

希望这个系列能够助力大家，今年一帆风顺！！

接下来，长文预警~大家有所心理准备

正文：一面

自我介绍以及之前工作流程和模式

这里面试官估计想了解以前的工作状态，是否是一个公认的合理的开发和工作模式，从实习到百度，经历告诉我，不同量级不同类型的公司在这方面差别很大，同时也能反映出之前的公司技术水平和能力，从而面试官判断对面的人是否能够和自己愉快的进行合作开发。

也可能是我想多了，就是简单问问，减轻点被面试者的压力

一个基本的语义化布局的页面你想怎么规划

这个问题说实话没明白想问啥，难不成只是想问语义化？这么简单？

• 主体框架(简单的瀑布流布局)

<nav></nav>
	<header></header>
	<main>
		<section></section>
		<section></section>
	</main>
<footer></footer>

CSS上有没有什么书写注意点或者可优化的角度

说了这个问题我明白了，这是让我说一说在基础层面的页面优化方向，只不过把大问题分化成细节了

这里不说很细了，之前专门写过这方面优化的文章，详细内容可以点击下方链接去阅读

Web前端性能优化：JavaScript细节篇

• 能用html/css解决的问题就不要用js 比如hover显示隐藏 比如导航高亮 自定义原始样式 巧用伪类解决问题 使用预编译器
• 不滥用高消耗的样式
• 选择器合并
• 0值去单位，小于1的值去掉0

使用Float进行布局容易产生什么问题？解决方式呢？

• 子元素在设置 float 后会脱离文档流，造成父元素高度塌陷
• 解决方式： 父元素设置高度 清除浮动

// test.html
<div class="outter">
	<div class="inner"></div>
	<div style="clear: both;"></div>
</div>

// test.css
.outter { width:200px; background:#3FF; border:1px solid #000;}
.inner { float:left; width:120px; height:80px; background:#FF3; }

简单说几种垂直水平居中的方式

• 固定宽高

// test.html
 <div class="outer">
	<div class="inner">
		inner-box
	</div>
</div>

// test.css
.outer {
	width: 500px;
	height: 300px;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: red;
    color: #fff;
}

// 1. position absolute + 负margin
.outer {
	position: relative;
}
.inner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px; // 子元素高度一半
	margin-left: -50px; // 子元素宽度一半
}

// 2. position absolute + calc
.outer {
	position: relative;
}
.inner {
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
}

// 3. position absolute + margin auto
.outer {
	position: relative;
}
.inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

• 不固定宽高

// test.html
 <div class="outer">
	<div class="inner">
		inner-box
	</div>
</div>

// test.css
// 1. flex布局
.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 2. position absolute + transform
.container {
	position: relative;
}
.box-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
// 3. css-table
.outer {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.inner {
	display: inline-block;
}

// 4. grid布局
.outer {
	display: grid;
	justify-items: center;
	align-items: center;
}
.inner {
	text-align: center;
}

盒子模型

• box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。
• box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。

什么情况下回发生回流和重绘

• 回流 页面一开始渲染 显示隐藏元素 浏览器窗口变化 元素位置变化 元素尺寸变化
• 重绘 样式改变不影响元素的位置时，比如 color、background，当然还有visiability

追问：回流和重绘的关系是什么样的

• 重绘不一定会发生回流
• 回流一定触发重绘

追问：怎么避免回流产生

• 避免多级嵌套
• 避免使用内联样式
• 避免使用计算样式
• 尽量少的使用JS去操作DOM结构
• 使用CSS3属性以被动启动GPU加速

事件委托

• 详细的原理要从DOM的事件机制说起：捕获事件阶段、冒泡事件阶段、目标时间阶段
• 事件委托是利用冒泡机制来实现的，可以减少内存消耗，减少注册事件。

平常开发遇到涉及数组遍历或对象遍历问题都是用什么方式

这里说的可能不是很全，记得之前阅读过一篇全面分析各种循环方式的文章，找到后再为大家总结一遍，敬请关注。

• 对象循环 for...in 遍历 Object.keys(Object),创建包含对象属性的数组 Object.values(Object),创建包含对象值的数组 Object.getOwnPropertyNames(Object),返回一个数组，包含对象自身的所有属性（包含不可枚举属性） Object.entries(Object),创建了一个二维数组，每个内部数组都有两个元素，第一个元素是属性名，第二个属性值
• 数组循环 基本的 for forEach map for...of 使用ES6 filter()，some(), every()进行业务查找和筛选

追问：map和forEach的共同点和区别

• 共同点 都是遍历数组 都支持三个参数，item（当前每一项），index（索引值），arr（原数组）
• 区别 map()会分配内存空间存储新数组并返回, forEach()不会返回数据 forEach()允许callback更改原始数组的元素, map()返回新的数组

追问：普通for循环和forEach的区别

这里一开始没明白面试官想要问啥，答了forEach更加简洁一些，普通for循环针对大量级数据性能更好，然后面试官直接说在跳出循环上说一下，才明白要问的，这里提醒大家，如果没弄明白想问啥，一定要问清楚

• for 循环可以通过 break，continue， return 跳出循环
• forEach 不能使用上述跳出方式，可以采用 try...catch 的写法，扔出一个 Error 跳出循环

追问：刚才说到 for...in 循环对象，有没有碰到什么疑惑或者问题，怎么解决的

• 遍历的是原型链中的数据，需要使用 hasOwnProperty 看是否属于该对象。

追问：既然说到原型了，讲讲你理解的原型和原型链吧

从循环的问题追问到原型，我可太南了

简单讲

• 每一个函数都有一个prototype对象属性，指向另一个对象(原型链上面的)
• prototype就是调用构造函数所创建的那个实例对象的原型(proto)
• 实例对象与原型之间的连接，叫做原型链

展开讲

在展开讲的时候，我边画图边给面试官讲的，作为技术人员嘛，充分利用各种形式展现自己的技术理解，大概就是下边这张图

• 定义了一个函数后，天生自带 prototype 指向函数的原型对象
• 函数经过new调用后，返回一个全新的实例对象，实例对象的 _proto_ 指向构造函数的原型对象
• 对象的 hasownproperty() 来检查自身中是否含有该属性

事件机制

• 浏览器的JS引擎管理着事件代码的调用和执行，主线程在运行时会产生执行栈，栈中的代码调用某些异步API时会在任务队列中添加事件，栈中的代码执行完毕后，就会读取任务队列中的事件，去执行事件对应的回调函数，如此循环往复，形成事件循环机制。
• 整体的执行顺序：宏任务 -> 微任务 -> 必要的渲染UI -> 下一轮Eventloop
• 通俗点的流程 执行一个宏任务（首次执行的主代码块或者任务队列中的回调函数） 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中 宏任务执行完毕后，立即执行当前微任务队列中的所有任务（依次执行） JS引擎线程挂起，GUI线程执行渲染 GUI线程渲染完毕后挂起，JS引擎线程执行任务队列中的下一个宏任务
• 宏任务： script主代码、setTimout、setInterval、事件I/O等
• 微任务：promise等

追问笔试题：那道经典的setTimeout题，并问什么会这样输出

• 主线程执行同步任务，也就是主循环，setTimeout 为宏任务，同时是异步任务，会被挂起到循环结束
• 循环结束执行 setTimeout 的回调,执行时发现 i 的当前作用域不存在，向上查找，在全局作用域中发现了 i ，此时循环已经结束，所以全都输出同一个数

追问笔试题：一道结合了各种 setTimout 和 promise 的事件机制输出题目,共有十一个输出代码块

题目具体已经不记得了，反正记住执行顺序一点一点的输出，面试时最好带个笔记本或者电脑，可以随时记录下，方便回答

HTTP请求的三次握手机制

三次握手机制这里不再大篇幅展开讲了，随便搜索就能找到一堆详解

追问：HTTP请求为什么是三次握手，不是两次或者四次

• 三次握手是确定客户端和服务端接收和发送能力都正常的最优次数 第一次：客户端发送能力正常 第二次：服务端接收能力正常，服务端发送能力正常 第三次：客户端接收能力正常

追问：HTTP、HTTPS的区别

• HTTPS更安全：http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议
• HTTP更简单：http 的连接是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议。

追问：关于缓存方面讲一讲

这个问题之前写过关于缓存策略的文章，不在展开讲，详细内容请点击作为程序员，HTTP缓存这一块还是需要了解一下的

• 强缓存(不走服务器)： Expires Cache-Control
• 协商缓存(走服务器): Last-Modified/If-Modified-Since ETag/If-None-Match

追问：几种缓存策略的对比简单说一下

这个问题也在关于缓存策略的文章里，上述那个文章

前端跨域问题如何产生，有什么方法解决

这里之前写过详细的文章，不展开细讲了，可以点击这里查看Web前端开发，必须要了解的四种跨域解决方案

• 产生原因：同源策略
• 解决方式： jsonp实现跨域请求 使用 iframe + form 进行跨域请求 CORS(跨域资源共享 Cross-origin resource sharing)进行跨域请求 利用服务器中转

追问：JSONP跨域有什么特点

• 只支持 GET 请求

追问：CORS进行跨域有什么特点

这个追问题我回答完之后面试官说是临时想出来的，但是他没想到我之前看过相关的文章还整理出来了，这不是巧了么这不是~ 这个问题的答案也在上面给出的前端跨域文章里

• CORS请求分为简单请求和非简单请求，区分方式是看请求头和请求方法 (只有 GET、POST、HEAD)
• 简单请求：服务端配置好的前提下，简单请求直接请求就可以
• 非简单请求：在请求时会发送两次请求，第一次是预检测请求，返回的状态码为204，第二次请求为预检测请求通过后才会发送真实请求

问到这里其实一面已经结束了，不过面试官看来需求不多，告诉我一面已经过了，看我是Vue技术栈，遂通过Vue又续上了，没有问很深入的问题，都是小细节，当做聊家常了，然后我猜测二面应该会问关于Vue深层次的问题，不过我还是有点信心的，毕竟是看过源码的人。

就在我写这篇文章的收尾阶段，网上发布了关于尤雨溪和Vue的纪录片，链接附上纪录Vue.js尤雨溪 - 中英CC字幕 - Honeypot呈现，朋友们可以当做茶余饭后的小片看，这里建议大家，少看那些场景简单，人物两三个人，说着奇奇怪怪语言的视频！

有没有遇到深层次对象双向绑定后子组件未监听到更新的情况，怎么解决的

• 有
• 解决方式： 一：深层监听 deep: true,但是这样会带来性能问题 二：使用 this.$set() 进行赋值

Vue的data以Function方式返回的原因

• 避免产生变量共享，不以返回值的情况下，所有组件将共享同一个对象，指向相同的内存地址

Vue的响应式怎么做的，简单说

• init 时利用 Object.defineproperty 监听数据变化
• 利用 setter 和 getter 进行触发

尾声

这里一面算是正式结束了，面试官走的时候说回答的不错，我去给你找个精通 Vue 的二面来，你们再聊聊。

一面面试官说完我瞬间感觉要爆炸，我可太南了！但是事实是二面面试官并没有很深入的问，而是让我自己说，他从中问一些细节。后来才知道，百度有个业务组的领导是Vue的核心开发者，大家都很熟悉Vue。