背景
本人17年毕业，一直做前端开发工作，地标北京。19年下半年一直想换工作，终于在8月底迈出了第一步，随后开始了漫长的找工作之旅，终于在国庆前定下来，最近才有了时间，所以将这一个月左右的面试经验写出来，也是对自己之前的一个总结。（ps:相关面试都是与vue相关)。
css相关
两栏布局
左右两栏，实现左边定宽右边自适应
这种已经是非常常规的布局，使用float，position，flex都可以解决
两栏等高布局
左右两栏，高度不固定设置，两栏高度会等同于高的那一栏
查看代码
<div class="parent">
<div class="child">我是child1，我是child1，我是child1，我是child1，我是child1，我是child1，</div>
<div class="child">我是child2，我是child2，</div>
</div>
<style>
/* 使用设置负的margin-bottom和正的padding-bottom实现 */
.parent {
overflow:hidden
}
.child {
margin-bottom:-9999px;
padding-bottom:9999px;
float:left;
background:yellow;
width:200px;
}
/* table布局 table中的元素table-cell本身就是等高的*/
.parent {
display:table-row;
}
.child {
display:table-cell;
background:yellow;
width:200px;
}
/* flex 布局 */
.parent {
display:flex;
}
.child {
flex:0 0 200px;
display:inline-block;
background:yellow;
</style>
实现一个等边三角形
先实现一个三角形，再利用勾股定理可以，30°角对应的斜边和邻边的比是1.732：1，利用这一点可以构造出等边三角形
查看代码
<div class="box"></box>
<style>
.box {
height:0;
width:0;
border-width:173px 100px;
border-style:solid;
border-color:red transparent transparent transparent
}
</style>
常规三栏布局
左右定宽，中间自适应
这种算是非常常规的布局了，双飞翼，圣杯，包括使用float，position，flex都可以解决。
查看代码
<div class="box layout1">
<div class="left">position-left</div>
<div class="middle">position-middle</div>
<div class="right">position-right</div>
</div>
<div class="box layout2">
<div class="left">flex-left</div>
<div class="middle">flex-middle</div>
<div class="right">flex-right</div>
</div>
<!--使用float + margin 需要在布局上将middle模块放在最后-->
<div class="box layout3">
<div class="left">float+margin-left</div>
<div class="right">float+margin-right</div>
<div class="middle">float+margin-middle</div>
</div>
<div class="box layout4">
<div class="middle">圣杯-middle</div>
<div class="left">圣杯-left</div>
<div class="right">圣杯-right</div>
</div>
<div class="box layout5">
<div class="middle">
<div class="inner-middle">双飞翼-middle</div>
</div>
<div class="left">双飞翼-left</div>
<div class="right">双飞翼-right</div>
</div>
<style>
.box {
height: 300px;
}
.left {
width: 200px;
background: red;
}
.middle {
background: pink
}
.right {
width: 300px;
background: yellow;
}
/* 使用position */
.layout1 {
position: relative;
}
.left {
position:absolute;、
left:0;
height:300px;
}
.right {
position:absolute;
right:0;
height:300px;
}
.middle {
position:absolute;
left:200px;
right: 300px;
}
/* 使用flex*/
.layout2 {
display:fex
}
.left {
flex: 0 0 200px;
}
.right {
flex: 0 0 300px;
}
.middle {
flex: auto;
}
/* 使用float + margin */
.layout3 {
position: relative;
}
.left {
float: left;
}
.right {
float: right;
}
.middle {
margin-left: 200px;
margin-right: 300px;
}
/* 使用圣杯 */
.layout4 {
overflow: hidden;
padding-left: 200px;
padding-right: 300px
}
/* middle设置一整行宽度，会导致left和right被挤到第二行，给left设置margin-left:-100%;会浮动自身向上移动一行，right设置margin-left:-自身的宽度可以移动到上一行的行尾。*/
.middle {
position: relative;
width: 100%;
float: left;
}
.left {
position: relative;
left: -200px;
margin-left: -100%; /* 将该div移动到上一行 */
float: left;
}
.right {
position: relative;
right: -300px;
margin-left: -300px;
float: left;
}
/* 使用双飞翼 */
.middle {
float: left; /* middle先占一整行 */
width: 100%;
}
.inner-middle { /* middl内部设置margin */
width: auto;
margin-left: 200px;
margin-right: 300px;
}
.left {
float: left;
margin-left: -100%; /* margin-left:-100% 向上移动一行 */
}
.right {
float: left;
margin-left: 300px;
}
</style>
三栏布局（有特定的要求）
三栏布局，左侧定宽，中间部分和右侧平分剩余空间
在三栏布局的基础上稍作改动，使用float，position，flex都可以解决。
水平垂直居中
实现一个div在页面上的水平垂直居中
查看代码
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent {
width:500px;
height:500px
}
.child {
width: 200px;
height: 200px;
}
/* 水平居中*/
/* 第一种 */
.child {
margin:0 auto;
}
/* 第二种 */
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
margin-left: -100px; /*二分之一child宽度*/
}
/* 第三种 */
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* 第四种 */
.parent {
position: relative;
}
.child {
position: absolute;
left: calc(50% - 100px); /* 使用calc()计算 */
}
/* 垂直居中 */
/* child设定position：absolute；top值设置百分比是根据父元素的高度来计算的，因此父元素高度需要有值*/
/* 第一种 */
.parent {
position:relative;
}
.child {
position: absolute;
top: 50%;
margin-top: -100px; /* 二分之一child高度 */
}
/* 第二种 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transfrom: translateY(-50%);
}
/* 第三种 */
.parent {
position: relative;
}
.child {
position: absolute;
top: calc(50% - 100px);
}
/*使用flex实现*/
.parent {
display:flex;
}
.child {
justify-content: center;
align-items: center;
margin: auto;
}
</style>
其他css问题
- bfc是什么，怎么触发bfc，bfc解决了什么问题（高频）
- 你所了解到的布局方式，介绍下flex布局
js相关
高频问题（基本都是基础问题）
- 闭包，作用域，立即执行函数
- let var const区别
- es6最常用的是什么
- 箭头函数的用法以及和普通函数的区别
- vue双向绑定的原理
- vue的生命周期函数
- vue的组件通信
- vue的nextTick
- vue-router是什么，hash模式和history模式的区别
- vuex是什么，vuex中每一项都分别是什么作用并且怎么使用
- 什么是虚拟dom，有什么优缺点
- promise是什么，解决了什么问题
- async await是什么，一般问到这里还会顺带引申出来Generator相关
非高频问题
- vue的后端渲染 ssr
- vue中嵌套组件，父子组件的生命周期函数执行顺序是什么
<parent>
<child></child>
<secondchild></secondchild>
</parent>
// 父组件嵌套子组件的生命周期函数的执行顺序为
parent beforeCreate
parent created
parent beforeMount
child beforeCreate
child created
child beforeMount
secondchild beforeCreate
secondchild created
secondchild beforeMount
child mounted
secondchild mounted
parent mounted
- 基本类型和引用类型
- 如何判断是否为数组
- instanceOf的原理
- 什么是原型链, prototype，constructor和_proto_的指向关系
- 什么是继承，说出你知道的几种继承以及区别
- 事件捕获
- for，forEach，for...in，for...of这些循环的区别
手写代码
- 将一个多维数组拍平（高频）
- 实现浅拷贝和深拷贝，以及区别（高频）
- 实现call，apply，bind，以及三者的区别（高频）
- 实现防抖（debounce）和节流（throttle）(高频)
- 实现instance of 方法
- 实现new
- 找出一个字符串中出现次数最多的字符
- 让一个数组乱序
- 二叉树的前序遍历和后序遍历
其他问题
- webpack是什么，webpack的打包流程是什么
- webpack loader和plugin区别是什么，有哪些常用的loader，webpack怎么将css文件分离出来
- websocket机制，websocket怎么处理消息丢失和消息重发
- websocket 和http以及https的区别
- websocket怎么判断断连，怎么区分链接是从客户端断开的，还是从服务端断开的
- 浏览器缓存
- cookie，session，localstorage 和 sessionstorage的区别
- 从输入url到整个网页加载完毕及显示在屏幕上的整个流程
- event loop机制
- 前端性能优化要怎么做
- 重绘重排的区别
以上！
