2020针对2年工作经验的前端面试题总结（含部分答案）

前言

写这篇文章也是想要分享给经验不多没有足够时间准备面试的小伙伴，可以了解我在面试中涉及到的一些内容，做个参考，也是给自己留个笔记随时复习。由于我只会vue框架，所以没有涉及到其他框架的问题

面试流程

面试过的都知道，一般都是先hr面，觉得薪资ok，然后约技术面，技术面过了offer差不多到手了。
技术面的流程：首先可能是做面试题，有的公司会根据这个刷人，有的是作为面试的参考，可能会根据你的答案进行一些提问——然后就是与面试官面对面交谈，先介绍项目，描述自己在项目中担任的职责——最后就是面试官提问
技术面大多不止一轮，第一轮比较基础，第二轮考验解决问题的能力，第三轮大概看眼缘吧

面试题

css

1. css盒模型

   html元素都可以看成是一个盒子，盒模型就是用来设计和布局时使用。
   盒模型主要包括：外边距（margin）、边框（border）、内边距（padding）、内容（content）
   盒模型又分为两种：标准盒模型（content-box）、怪异盒模型（content-box）
   盒模型可以通过box-sizing制定
   标准盒模型：width就是content的内容，所以计算标准盒模型的总长/宽=margin+border+padding+width
   怪异盒模型/IE盒模型：width就是content+border+padding的宽度，所以计算怪异盒模型的总长/宽=margin+width

2. 实现垂直居中的几种方式
   从两个方面讲：一种是普通流，一种是脱离文档流，具体如下：
   1.inline-block + text-align + table-cell + vertical-align

   
     
   Demo
   
   
   

   2.absolute+transform

   
     
   Demo
   
   
   
   

   3.flex布局(兼容性好，自适应布局)

   
     
   Demo
   
   
   

   css 常见布局可参考这篇文章css常见布局及解决方案
3. padding的几种取值

   padding:10px;//上下左右都是10px
   padding:10px 20px;//上下10px 左右20px
   padding:10px 20px 30px;//上10px 左右20px 下30px
   padding:10px 20px 30px 40px;//上10px 右20px 下30px 左40px

4. flex布局的一些属性

   flex-direction
   flex-wrap
   flex-flow
   justify-content
   align-items
   align-content
   flex入门可以参考阮一峰的文章

5. absolute和relative的区别

   absolute和relative都是脱离文档流
   absolute是相对于其上一级不是static的父元素进行定位
   relative是相对于其在普通流中的位置进行定位

6. display:none和visibility:hidden的区别

   两者都是将元素隐藏，
   visibility:hidden;隐藏后元素的空间会被保留，即不会影响其他元素的布局
   display:none;隐藏后元素不占空间

7. em、rem、px的区别

html

1. DOCTYPE是什么，作用是什么

   DOCTYPE文档类型，作用是告知浏览器以哪种方式解析html
   DOCTYPE有3种类型：Strict、transitional、Frameset
   如果不制定DOCTYPE，浏览器默认使用混杂模式

2. 如何理解html语义化

   正确使用html标签，易于阅读，利于seo，方便其他设备解析，有利于开发维护

3. html标签有哪些

   行级标签：a,span,em,strong
   块级标签：,div,table,ul,ol,li,tbody,button,h1~h6,form,p
   行内块级标签：img,input,textarea

4. img标签属于行级标签还是块级标签
   行内块级标签
5. h5有哪些新标签
   header,address,footer,audio,canvas,video,mark,section,dialog
6. link和@import的区别

   1.link是html标签，@import是css提供的一种方式
   2.@import有兼容性要求
   3.link引入的资源在解析html时到了这个位置就会加载，而@import引入的资源是在html解析完成后才下载
   4.link引入的资源种类可以是css文件，还有rel连接属性等，而@import只能引入css文件

7. css兼容各版本浏览器的前缀

   浏览器	前缀
   IE	-ms-
   Chrome、Safari	-webkit-
   firefox	-moz-
   Opera	-o-

8. 如何禁止页面的缩放

   在meta中添加content="user-scalable=no"即可防止浏览器被放大
   maximum-scale、minimum-scale控制允许用户以怎样的方式放大或缩小页面

9. 如何防止浏览器的js或css缓存

   引入js或css时生成唯一版本号

js

1. js的数据类型

   null、undefined、String、Boolean、Number、Object、Symbol（es6）

2. null和undefined的区别

   一个对象已经声明但是没有赋值时，即为undefined，undefined转为数值为0
   null表示对象未声明，不存在，转为数值时为NaN
   相同点：
   null==undefined为true，null和undefined转为布尔值都是false

3. js的事件处理机制

   js的事件处理机制可以分为3个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
   事件捕获阶段：document发出事件流从document节点开始往下一层层查找
   处于目标阶段：事件流到达响应事件所在节点，并执行同名函数
   事件冒泡阶段：事件流从目标节点往document节点一层层冒泡，如果遇到与目标函数同名函数则会被触发

4. var、let、const的区别

   var、let、const都是声明数据的访问权限的关键字、let、const是es6才出现的
   var声明的是全局变量，且具有变量声明提升的特点，即可以在声明该变量之前就可以访问该变量
   let和const不具备变量声明提升，在声明之前访问会报错，const声明的数据是常量，基本数据类型不可改变，引用数据类型在栈内保存的地址值不可改变，但存放在堆里的数据内容可以改变

5. es6的了解，有哪些新内容
6. promise的用法
7. js原型链的理解
8. this的作用域
9. 如何改变this的指向
10. cookie和localStorage的区别
11. 闭包的理解
12. 手写一个Array.map的实现
13. js的事件循环机制
14. jQuery的选择器有哪些
15. js的定时器有哪些，有什么区别
16. 防抖和节流的区别及实现

vue

1. vue的生命周期
2. MVVM的概念
3. 数据的双向绑定是如何实现的
4. vue的常见指令有哪些
5. v-if和v-show的区别
6. computed和watch的区别
7. 封装组件的思路
8. this.nextTick()的作用
9. keepAlive是用来干什么的
10. 页面返回会调用哪些钩子函数
11. 组件间的通信方式
12. 路由传参的方式及区别
13. 除vue全家桶外使用过哪些类库
14. webpack的了解，做过什么配置
15. vue-router的导航钩子有哪些
16. 针对element-ui组件更改样式在scoped里不生效的解决方案

浏览器

1. 输入网址到页面渲染的过程
2. 遇到的浏览器兼容的问题
3. 浏览器的事件处理机制
4. 不同浏览器的内核及css属性前缀

其他

1. tcp/ip的三次握手、四次挥手（这个我在另一篇文章有总结过，包括涉及到的问题）
2. http协议与https协议的区别
3. 在项目中遇到了哪些问题，怎么解决的
4. 前端优化

   我在vue性能优化里有讲一点vue的优化

如果有在面试的小伙伴遇到了其他问题，欢迎进行补充哇~