【前端面试分享】- 寒冬求职上篇
前言
在这互联网的寒冬腊月时期，虽然说过了金三银四，但依旧在招人不断。更偏向于招聘高级开发工程师。本人在这期间求职，去了几家创业，小厂，大厂厮杀了一番，也获得了本身满意的offer。javascript
整理一下本身还记得的面试题，但愿能帮助到还在求职的你。大佬略过，不喜勿喷。css
记录下我遇到的面试题，都有大佬分享过，附上各个大佬的文章，总结出其中的主要思想便可。html
基础算法篇
css篇
1. 盒模型
概念就不介绍了，请看一个例题，若你能立马反应过来，就说明掌握的不错了。vue
/* 红色区域的大小是多少？ */
.box {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
background: red;
border: 20px solid black;
box-sizing: border-box;
}
复制代码
2. 水平垂直居中
贴上一位腾讯大佬总结的文章java
16种方法实现水平居中垂直居中node
按照固定宽高和不固定宽高分类各说几个方法就能够了。react
3. 页面布局
3.1 高度已知，三栏布局，左右宽度300，中间自适应
/* 浮动布局 */
.layout.float .left{
float:left;
width:300px;
background: red;
}
.layout.float .center{
background: yellow;
}
.layout.float .right{
float:right;
width:300px;
background: blue;
}
/* 决定定位布局 */
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left{
left:0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right:0;
width: 300px;
background: blue;
}
/* flex布局 */
.layout.flexbox{
margin-top: 110px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
复制代码
固然还有 table 布局 和 grid 布局。webpack
当你回答出来之后，面试官还可能会追问你，这几种布局有什么优缺点，兼容性？git
若是把高度已知换成未知，又该怎么作？
这些都是咱们要考虑总结的。
3.2 高度已知，两栏布局，左边固定，右边自适应
基本思路和三栏布局同样
3.3 如何实现左右等高布局
table 布局就登场了
section {
width:100%;
display: table;
}
article {
display: table-cell;
}
.left {
height: 100px;
background: red;
}
.right {
background: black;
}
复制代码
4. 如何实现一个最大的正方形
用 padding-bottom 撑开边距就能够了。
section {
width:100%;
padding-bottom: 100%;
background: #333;
}
复制代码
5. css 的解析顺序
css选择器匹配元素是逆向解析
- 由于全部样式规则可能数量很大，并且绝大多数不会匹配到当前的 DOM 元素（由于数量很大因此通常会创建规则索引树），因此有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。
- 若是正向解析，例如「div div p em」，咱们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，若是遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能肯定匹配与否，效率很低。
- 逆向匹配则不一样，若是当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。
因此为了减小查找时间，尽可能不要直接使用标签选择器。
6. css 如何开启 gpu 加速
请参考网易云社区的文章CSS动画的性能分析和浏览器GPU加速
js篇
1. 不借助第三者交换 a，b两个值。
/* 方法一 */
a = a + b;
b = a - b;
a = a - b;
/* 方法二 */
a = a - b;
b = a + b;
a = b - a;
/* 方法三 */
a = {a:b,b:a};
b = a.b;
a = a.a;
/* 方法四 */
a = [a,b];
b = a[0];
a = a[1];
/* 方法五 */
[a,b] = [b,a];
复制代码
2. new 的过程和实现
/* 选自 yck 文章 */
function create(Con, ...args) {
let obj = {}
Object.setPrototypeOf(obj, Con.prototype)
let result = Con.apply(obj, args)
return result instanceof Object ? result : obj
}
复制代码
若是你能清楚的了解上边代码的原理，请忽略。
否则的话建议阅读下边大佬的文章。
推荐 yck 的文章 重学 JS 系列：聊聊 new 操做符
3. Eventloop
不管是笔试仍是面试，高频出现，要知其然还要知其因此然。
/* 选自 小美娜娜 文章 */
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log( 'async2');
}
console.log("script start");
setTimeout(function () {
console.log("settimeout");
},0);
async1();
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("promise2");
});
console.log('script end');
复制代码
若是你能很清楚的知道每一步的输出，能够忽略。
否则的话建议阅读下边大佬的文章，解释的很详细。
推荐 小美娜娜 的文章 Eventloop不可怕，可怕的是赶上Promise
4. 继承优缺点
function inherits(childCtor, parentCtor) {
function tempCtor() {};
tempCtor.prototype = parentCtor.prototype;
childCtor.prototype = new tempCtor();
childCtor.prototype.constructor = childCtor;
};
复制代码
好比说 原型继承，构造函数继承，组合继承等。
向面试官从简到难介绍每一个继承的优缺点，一步步的写出最完美的继承。
绝对能加好多分。
推荐一篇 路易斯 的文章 JS原型链与继承别再被问倒了
5. 实现一个 promise
首先你须要对 promise 有一个清晰的认识，封装过请求，使用过它的 api 等。
请参考 前端劝退师 的文章 「中高级前端面试」JavaScript手写代码无敌秘籍
6. 实现一个按顺序加载的 promise
当你说出 promise.all 和 promise.race 的区别后，面试官可能就会接着考察此题。
/* 使用 async await */
async function queue(tasks) {
const res = []
for (let promise of tasks) {
res.push(await promise(res));
}
return await res
}
queue([a, b, c])
.then(data => {
console.log(data)
})
复制代码
固然也可使用 reduce 方法。
7. 对 import 和 module.exports的理解
考察对模块化的理解。 区分 Es6 和 commonJs 规范。
能够参考 有赞 2dunn 的 文章 import、require、export、module.exports 混合使用详解
8. 实现一个 EventEmitter 方法
当你回答出 vue 中用 emit 通讯的时候，就要当心了。
EventEmitter 方法主要包含了 on,emit,once,off方法。
class Event {
constructor() {
this.events = Object.create(null);
}
on(name, fn) {
if (!this.events[name]) {
this.events[name] = []
}
this.events[name].push(fn);
return this;
}
emit(name, ...args) {
if (!this.events[name]) {
return this;
}
const fns = this.events[name]
fns.forEach(fn => fn.call(this, ...args))
return this;
}
off(name,fn) {
if (!this.events[name]) {
return this;
}
if (!fn) {
this.events[name] = null
return this
}
const index = this.events[name].indexOf(fn);
this.events[name].splice(index, 1);
return this;
}
once(name,fn) {
const only = () => {
fn.apply(this, arguments);
this.off(name, only);
};
this.on(name, only);
return this;
}
}
复制代码
能够参考 尤大大的 vue 源码 vue-event
9. this 指向
若是你能清楚的知道每一个this的指向，能够忽略。
好比说 默认绑定，隐式绑定，显示绑定，new 绑定。
/* 节选自 京东小姐姐 文章 */
var obj = {
hi: function(){
console.log(this);
return ()=>{
console.log(this);
}
},
sayHi: function(){
return function() {
console.log(this);
return ()=>{
console.log(this);
}
}
},
see: function() {
console.log(this);
(function(){
console.log(this)
})()
},
say: ()=>{
console.log(this);
}
}
let hi = obj.hi();
hi();
let sayHi = obj.sayHi();
let fun1 = sayHi();
fun1();
obj.say();
obj.see();
复制代码
不清楚的话，建议阅读一下
京东小姐姐的文章 嗨，你真的懂this吗？
10. 普通函数和箭头函数的区别
- this指向的问题，会捕获其所在上下文的 this 值，做为本身的 this 值。
- 箭头函数不绑定 arguments，取而代之用rest参数解决。
var foo = (...args) => {
return args[0]
}
console.log(foo(1))
复制代码
- 箭头函数不能用做构造器，和 new 一块儿用就会抛出错误。
- 箭头函数没有原型属性。
var foo = () => {};
console.log(foo.prototype) //undefined
复制代码
11. 考察本地存储
/* 如下代码会输出什么 */
localStorage.setItem('show',false);
console.log(localStorage.show || '显示')
复制代码
vue篇
1. vnode的转换过程 和 dom-diff 的过程
有的大厂面试官须要你手写这个过程，很残忍有木有。
请参考 360-chenhongdong大佬的文章 让虚拟DOM和DOM-diff再也不成为你的绊脚石
2. key值的做用
使用 v-for更新已渲染的元素列表时,默认用就地复用策略。列表数据修改的时候,他会根据key值去判断某个值是否修改：若是修改,则从新渲染这一项;不然复用以前的dom，仅修改value值。
详细参考 阿里-funnycoderstar 文章为何使用v-for时必须添加惟一的key?
3. 对 v-show的理解
我猜你可能会回答 v-show 经过控制样式的 display: none 和 display: block 实现显示隐藏的。 你以为这样合理吗？
好比说：对一个 img 或者 span 使用 v-show，那么当它为 true 的时候不就把内联元素改为块级元素了嘛。
出题目啦：
/* 1.此时span是显示仍是隐藏？ */
<span class="span" v-show="isShow">111</span>
<script> data() { return { isShow: false } }, </script>
<style> .span { display: block; } </style>
/* 2.此时span是显示仍是隐藏？ */
<span class="span" v-show="isShow">111</span>
<script> data() { return { isShow: true } }, </script>
<style> .span { display: none; } </style>
复制代码
v-show 控制显隐，是经过 js 代码去修改元素的 element style。 若是 value 为 false，设置
display: none； 若是 value 为 true，清除 display 属性。 因此 value 为 true 时，只是将 element style 中的 display 效果清除，并不能覆盖 css 中的 display 样式。
4. vue的生命周期
不要直接巴拉巴拉的说出那几个英文单词，建议按照官网图的执行顺序来引出各个生命周期名称，会有加分的。
react篇
1. react的自定义事件和原生事件的区别
React 并非将 click 事件绑在该 div 的真实 DOM 上，而是在 document 处监听全部支持的事件，当事件发生并冒泡至 document 处时，React 将事件内容封装并交由真正的处理函数运行。
详情请参考文章 蚂蚁金服-Nekron 大佬的文章 React合成事件和DOM原生事件混用须知
2. setState是异步仍是同步的
不要着急回答是异步的，再上问的基础上 setState 也能够是同步的。
setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
详情请阅读 饿了么-虹晨大佬的文章 你真的理解setState吗？
3. redux和vuex的区别
- redux 是 flux 的一种实现，redux 不仅仅能够用在 react 上面。
- vuex 是 redux 的基础上进行改变，对仓库的管理更加明确。
- 数据流向不同，vuex 的同异步有不一样的流向，而 redux 的同异步是同样的。
- redux 使用的是不可变的数据，而 vuex 的数据是可变的，redux 每次修改更新数据，其实就是用新的数据替换旧的数据，而 vuex 是直接修改原数据。
4.react 和 vue 的 diff 过程有什么区别
React 是这么干的：你给我一个数据，我根据这个数据生成一个全新的 Virtual DOM，而后跟我上一次生成的 Virtual DOM 去 diff，获得一个 Patch，而后把这个 Patch 打到浏览器的 DOM 上去。完事。而且这里的 Patch 显然不是完整的 Virtual DOM，而是新的 Virtual DOM 和上一次的 Virtual DOM 通过 diff 后的差别化的部分。
Vue 在渲染过程当中，会跟踪每个组件的依赖关系，不须要从新渲染整个组件树。
React 每当应用的状态被改变时，所有子组件都会从新渲染。 这能够经过 shouldComponentUpdate 这个生命周期方法来进行控制。
React diff的是 Dom，而 Vue diff 的是数据。
webpack篇
1. webpack 如何进行打包优化
从提取公共模块，区分开发环境，移除重复没必要要的 css 和 js 文件等方面说。
推荐arlendp2012的文章 Webpack打包优化
2. webpack 打包原理
- 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
- 编译：从 Entry 发出，针对每一个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
- 输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。
推荐whjin的文章 webpack原理
浏览器篇
1. 如何实现跨域
主要介绍 jsonp 和 cors 便可，其余能够一笔带过。
推荐阅读 浪里行舟 大佬的文章 九种跨域方式实现原理（完整版）
2. 输入url后的加载过程
简要回答出 域名解析，返回资源，浏览器渲染，重排重绘概念等便可。
推荐 浪里行舟 文章从URL输入到页面展示到底发生什么？
3. 缓存
分为 强缓存 和 协商缓存， 各自的标识要记住。
推荐 黑金团队的文章 前端缓存最佳实践
推荐名扬的文章 浅解强缓存和协商缓存
4. http状态码
重点是 301 302 304 401 等，要给面试官介绍清楚。
304 的话就会涉及到上问的缓存，能详细介绍下会是个加分项。
推荐骑摩托马斯文章，有图有文字 具备表明性的 HTTP 状态码
5. 本地存储
要记住 cookie 的几个属性值，分别是作什么的。
好比说 cookie 设置了 express 属性，存储位置有什么区别？
好比说 a.snow.com 和 b.snow.com 两个网页如何共享 cookie ?
推荐 Damonare的文章 Javascript 本地存储小结
6. http请求头有哪些
介绍几个，而后说清楚各自的做用便可。
又会涉及到 缓存头的知识。
推荐很是兔的文章http请求头与响应头的应用
7. 路由实现的原理
两种模式 hash 和 history。
推荐寻找海蓝96的文章 面试官: 你了解前端路由吗?
8. 常见的内存泄露
全局变量，未清除的定时器，闭包，以及 dom 的引用等。
推荐掘金的LeviDing文章 [译] JavaScript 工做原理：内存管理 + 处理常见的4种内存泄漏
9. 前端安全问题
主要从 XSS 和 CSRF 两个方面回答便可。
推荐 京东小姐姐的文章 【面试篇】寒冬求职之你必需要懂的Web安全
10. GET 和 POST 的区别
这题道理很深，也有不少误区。
推荐 WebTechGarden 微信公众号的文章 99%的人都理解错了HTTP中GET与POST的区别
11. 对 HTTP2 的理解
HTTP2号称可让咱们的应用更快、更简单、更稳定，它完美解决了1.1版本的诸多问题。
推荐黑金团队的文章 面试官问：你了解HTTP2.0吗？
扩展篇
1. 请问你怎么看待技术和业务的关系？
欢迎讨论、、、
2. 请问你怎么看待996或者说公司加班？
也欢迎讨论，，，
总结
写业务的同时，不要忘记提升本身的基础知识，css，js，http 等，才会在面试中脱颖而出。
水平有限，若是有不妥的回答，还望指出，谢谢。
下篇总结下遇到的编码算法相关题目。
有你才完美
自认很菜，建立了一个数据结构和算法的交流群，不限开发语言，前端后端，欢迎各位同窗入驻。
群以超过扫码限制人数，能够加我好友，邀请你入群。
请备注：掘金加群 哦
- 1. 【前端面试分享】- 寒冬求职下篇
- 2. 混子前端寒冬求职笔试题-01
- 3. 寒冬中的前端社招面试
- 4. 2019“寒冬”前端面试手册
- 5. 「写在寒冬」分享给前端er的求职和成长建议
- 6. 【面试篇】寒冬求职季之你必需要懂的原生JS(上)
- 7. 【面试篇】寒冬求职之你必需要懂的Web安全
- 8. 寒冬面试小总结
- 9. 前端面试题分享
- 10. 寒冬中的半个月前端面试
- 更多相关文章...
- • Lua 调试(Debug) - Lua 教程
- • Eclipse Debug 调试 - Eclipse 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 再有人问你分布式事务，把这篇扔给他
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【前端面试分享】- 寒冬求职下篇
- 2. 混子前端寒冬求职笔试题-01
- 3. 寒冬中的前端社招面试
- 4. 2019“寒冬”前端面试手册
- 5. 「写在寒冬」分享给前端er的求职和成长建议
- 6. 【面试篇】寒冬求职季之你必需要懂的原生JS(上)
- 7. 【面试篇】寒冬求职之你必需要懂的Web安全
- 8. 寒冬面试小总结
- 9. 前端面试题分享
- 10. 寒冬中的半个月前端面试