前言
全系列分为四个章节，分别是电话面试部分、一面部分、二面部分、三面部分。全系列不光有题目还有详细答案，
收藏转发就完事了！第一章：电话面试部分已经放出：
希望这个系列能够助力大家，今年一帆风顺！！
接下来，长文预警~大家有所心理准备
自我介绍以及之前工作流程和模式
这里面试官估计想了解以前的工作状态，是否是一个公认的合理的开发和工作模式，从实习到百度，经历告诉我，不同量级不同类型的公司在这方面差别很大，同时也能反映出之前的公司技术水平和能力，从而面试官判断对面的人是否能够和自己愉快的进行合作开发。
也可能是我想多了，就是简单问问，减轻点被面试者的压力
一个基本的语义化布局的页面你想怎么规划
这个问题说实话没明白想问啥，难不成只是想问语义化？这么简单？
- 主体框架(简单的瀑布流布局)
<code>
\t<header>
\t<main>
\t\t
\t\t
\t/<main>
<footer>/<code>
CSS上有没有什么书写注意点或者可优化的角度
说了这个问题我明白了，这是让我说一说在基础层面的页面优化方向，只不过把大问题分化成细节了
这里不说很细了，之前专门写过这方面优化的文章，详细内容可以点击下方链接去阅读
- 能用html/css解决的问题就不要用js 比如hover显示隐藏 比如导航高亮 自定义原始样式 巧用伪类解决问题 使用预编译器
- 不滥用高消耗的样式
- 选择器合并
- 0值去单位，小于1的值去掉0
使用Float进行布局容易产生什么问题？解决方式呢？
- 子元素在设置 float 后会脱离文档流，造成父元素高度塌陷
- 解决方式： 父元素设置高度 清除浮动
<code>// test.html
\t
\t
// test.css
.outter { width:200px; background:#3FF; border:1px solid #000;}
.inner { float:left; width:120px; height:80px; background:#FF3; }/<code>
简单说几种垂直水平居中的方式
- 固定宽高
<code>// test.html
\t
\t\tinner-box
\t
// test.css
.outer {
\twidth: 500px;
\theight: 300px;
}
.inner {
width: 100px;
height: 100px;
background-color: red;
color: #fff;
}
// 1. position absolute + 负margin
.outer {
\tposition: relative;
}
.inner {
\tposition: absolute;
\ttop: 50%;
\tleft: 50%;
\tmargin-top: -50px; // 子元素高度一半
\tmargin-left: -50px; // 子元素宽度一半
}
// 2. position absolute + calc
.outer {
\tposition: relative;
}
.inner {
\tposition: absolute;
\ttop: calc(50% - 50px);
\tleft: calc(50% - 50px);
}
// 3. position absolute + margin auto
.outer {
\tposition: relative;
}
.inner {
\tposition: absolute;
\ttop: 0;
\tleft: 0;
\tright: 0;
\tbottom: 0;
\tmargin: auto;
}/<code>
- 不固定宽高
<code>// test.html
\t
\t\tinner-box
\t
// test.css
// 1. flex布局
.outer {
display: flex;
justify-content: center;
align-items: center;
}
// 2. position absolute + transform
.container {
\tposition: relative;
}
.box-center {
\tposition: absolute;
\ttop: 50%;
\tleft: 50%;
\ttransform: translate(-50%, -50%);
}
// 3. css-table
.outer {
\tdisplay: table-cell;
\ttext-align: center;
\tvertical-align: middle;
}
.inner {
\tdisplay: inline-block;
}
// 4. grid布局
.outer {
\tdisplay: grid;
\tjustify-items: center;
\talign-items: center;
}
.inner {
\ttext-align: center;
}/<code>
盒子模型
- 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引擎线程执行任务队列中的下一个宏任务
- 宏任务：>
- 微任务：promise等
追问笔试题：那道经典的setTimeout题，并问什么会这样输出
- 主线程执行同步任务，也就是主循环，setTimeout 为宏任务，同时是异步任务，会被挂起到循环结束
- 循环结束执行 setTimeout 的回调,执行时发现 i 的当前作用域不存在，向上查找，在全局作用域中发现了 i ，此时循环已经结束，所以全都输出同一个数
追问笔试题：一道结合了各种 setTimout 和 promise 的事件机制输出题目,共有十一个输出代码块
题目具体已经不记得了，反正记住执行顺序一点一点的输出，面试时最好带个笔记本或者电脑，可以随时记录下，方便回答
HTTP请求的三次握手机制
三次握手机制这里不再大篇幅展开讲了，随便搜索就能找到一堆详解
追问：HTTP请求为什么是三次握手，不是两次或者四次
- 三次握手是确定客户端和服务端接收和发送能力都正常的最优次数 第一次：客户端发送能力正常 第二次：服务端接收能力正常，服务端发送能力正常 第三次：客户端接收能力正常
追问：HTTP、HTTPS的区别
- HTTPS更安全：http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议
- HTTP更简单：http 的连接是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议。
追问：关于缓存方面讲一讲
这个问题之前写过关于缓存策略的文章，不在展开讲，详细内容请点击
- 强缓存(不走服务器)： Expires Cache-Control
- 协商缓存(走服务器): Last-Modified/If-Modified-Since ETag/If-None-Match
追问：几种缓存策略的对比简单说一下
这个问题也在关于缓存策略的文章里，上述那个文章
前端跨域问题如何产生，有什么方法解决
这里之前写过详细的文章，不展开细讲了，可以点击这里查看
- 产生原因：同源策略
- 解决方式： 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。
閱讀更多 碼農登陸 的文章
