应届生前端面试题笔记

有什么不对或者需要补充的地方还望各位大佬指出，大家共同进步。

一、css篇

1.实现垂直居中的方式

        1.定位，移动50%,在使用transfor:translate(-50%)往反向走自身的50%

        2.定位，然后将left,top,bottom,right都设为0，在margin:auto

        3.flex布局

2.说一说你对盒模型的理解

        盒模型分为：ie盒模型和怪异盒模型

       ie盒模型：宽度=内容宽度(content) + margin + border +padding 

       怪异盒模型：宽度=内容宽度(content+border+padding)+margin

        box-sizing属性控制：content-box和boder-box

3.display和visibility隐藏有什么区别

        display：会发生重绘和回流，会从文档中移除

        visibility：只发生回流，不会移除，仍然占据位置

4.为什么会要清除浮动，以及怎么实现清除浮动

        当父元素没有指定高度，同时子元素又脱离文档流后，父元素不会被子元素撑开，所以需要清除浮动。

        1.给后面加一个空标签，写入样式clear：both

        2.给父标签overflow：hidden;*room：1

        3.使用before和after伪元素

5.如何实现自适应

        像百分比，vw，vh，rem(根据根html的size)，媒体查询

6.css3和html5新特性

        css3：transfrom，annimation，新增的选择器，文本：如text-shadow等,边框：border-radus等，linear-gradient，flex布局，媒体查询等。

    html5：语义话标签，input新增类型，video，audio，svg，canvas，地理定位，拖拽api，history api，webwoker，websokit，存储等。

7.css优先级

        元素选择器：1

        类选择器：10

        id选择器：100

        !important 最高

8.选择器有哪些

        id选择器，类选择器，元素选择器，父选择器，后代选择器，伪类选择器，属性选择器等

9.哪些属性可以继承

        可以：font-size，color，text-align等

        不可以：background，border，margin，padding，width，height等

10.flex有哪些常用的属性

        flex-direction，justify-content，align-items，flex-sharken，flex-wrap，flex-grow，flex等。

二、vue篇

1.说一说vue双向绑定原理

        可以从2.0和3.0两个方面进行回答

2.说一说vue的生命周期

        不要只说8个，应该说完整。加上keep-alive的actived、deactivated和处理异常的钩子函数errorCaptured和处理ssr的serverPrefetch

3.说一说为什么data要是一个函数

        考察的点是作用域，变量冲突问题

4.vuerouter了解吗

        两种模式，hash是根据url的#，histora是依赖html5出的api。在讲一讲路由懒加载。

5.vuex了解吗

        回答出五个属性，然后在说一说只能通过mutains修改值的原因

6.mixins了解吗

        可以实现可复用功能，与普通封装方法相比，mixins拥有生命周期函数，相当于一个组件

7.this.$nexttick用过吗

        它是将回调延迟到下次DOM更新之后执行，可以简单讲讲事件循环。nexttick源码还没有去看过，有待学习。

8.$set了解吗

        因为定义在data里的属性会一开始会被vue通过defineproperty监听到，如果在后端返回数据对象上加一个属性，vue是监听不了的，需要$set来实现监听。  vue提供了vue.set（）将set函数绑定到vue构造函数上，然后通过defineproperty实现监听。

9.vue3了解吗

        可以讲解一下vue3的双向绑定， setup语法糖。

10.vue父子组件通信

11.如何使样式只在当前组件生效

12.v-if和v-show

        可以说一说它两实现消失隐藏的区别，分别在什么情况下使用较好。

13.虚拟dom有了解过吗

        为什么要使用虚拟dom，首先要了解浏览器渲染过程，首先会创建dom tree，然后构建style tree，根据dom tree和style tree构建 render tree，在根据render tree去找到对应的位置，进行标记，最后将它们显示出来。

        每次操作dom，浏览器都会从头开始遍历，如果有多个dom节点有变动，浏览器也会构建多次，浪费了不必要的性能，其实一次更新是最好的。

        虚拟dom是将dom节点以js对象的形式进行表示，它不会立即去进行构建重新渲染，它会等到最后一次构建，同时它也是局部渲染，会和真实dom进行比对，找出变化的地方，进行局部更新。

三、js篇

1.说一说有哪些数据类型

        加上es6的symbol

2.判断数据类型的方法

        typeof，instanceof，Object.prototype.toString().call() //样子 "[object,类型]"

3.闭包了解吗

        可以讲闭包的定义和优缺点，然后在说一说科利华函数，它也是基于闭包实现的。

4.垃圾回收了解吗

        可以讲一讲v8引擎

5.说一说es6

        问map和set的话

        https://www.jianshu.com/p/174cb389d46b

6.promise了解吗

        可以先说一说为什么会有promise，然后在讲一讲promise的参数，状态（是否可逆），回调，api：race和all

7.async和await了解吗

        实则也是返回promise

8.let、const、var的区别

 9.浏览器缓存机制了解吗

        强缓存和协商缓存，在讲一讲它们的字段。

10.输入url地址发生了什么

        可能你会直接从域名解析开始说，其实它前面会先看是否有缓存，没有缓存才会进行域名解析。

11.常见状态码有哪些

        主要：200，301，302，304，400，401，402，403，404，500，501，502

12.浅拷贝和深拷贝

        1.通过递归遍历拷贝，得先判断是不是数组，在判断对象，因为数组也会被认作为对象

        2.Object.assig()浅拷贝语法糖

        3.JSON.parse(JSON.stringnify())深拷贝语法糖，但不能拷贝undefined,和方法

13.事件循环知道吗

        因为js是单线程，进入开始执行后，在遇到宏任务或者微任务的时候会把它们放到各自任务队列里面去，等当前执行栈执行完之后，会从微任务队列开始取出到执行栈执行，最后在去执行宏任务队列里的。

四、其它篇

1.webpack有哪些常用的loader

        file-loader，css-loader，less-loader，image-loader，babel-loader，eslint-loader，url-loader，style-loader，vue-loader

2.webpack有哪些常见的plugin

        html-webpack-plugin，define-plugin，clean-webpack-plugin，mini-css-extract-plugin

3.项目中如何对性能进行优化

        使用cdn，路由懒加载，使用精灵图（像emoji就是使用精灵图的形式），代码分割，代码压缩，部分输入框和按钮注意防抖和节流。

4.echarts如何实现自适应

        echarts有提供一个resize方法

5.笔试题

        笔试主要考察作用域，事件循环，排序，查询等。

6.如何看待前端这个岗位

7.未来的职业规划