阅读 203

两年前端经验-面试总结

背景

本人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机制
  • 前端性能优化要怎么做
  • 重绘重排的区别

以上!

文章分类
前端
文章标签