二十不惑的年纪，竟靠着这份前端面试指南，有幸拿到字节跳动实习offer，简直在起飞
博主就读于电子科技大学，大三狗一枚！面试是个漫长的过程，从海投到收获电话面试，一面、二面、三面，一个步骤出错那么后面就宣告终结。同时，面试过程中你也可能会遇到一些面试官的刁难，甚至部分面试官会说些比较打击你的话，但是大部分面试官都是很棒的！
为什么要写这篇文章
从一开始手指冒汗被怼的说不出话，到最后和面试官侃侃而谈游刃有余，我发现：同样的能力水平，在不同的面试表现下，反馈到面试官眼中的结果可以有着天壤之别。
因此，如果你希望把自己的真实水平展示给面试官，那么掌握一些合适的方法是非常有必要的。
面经分享
第一部分是我前端面试的经验总结，第二部分是我认为比较有思考空间的题目
⭐ 经验总结
一份漂亮的简历，需要包括以下部分（排版由上而下）
个人亮点（专精领域，个人博客，开源项目）
教育经历（毕业院校，在校经历、荣誉）
工作经历（实习）
项目经历
专业技能
扎实的前端基础，比如你知道
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/> `作用是什么？
flex:1 的 1 代表什么？
闭包, 作用域, 内存？
熟悉一门前端框架（Vue 优先）
勤刷《前端初级工程师面试题精编》 的算法题，熟悉掌握相应的数据结构如常见的链表、栈、队列、哈希表、树
熟悉网络基础、Git 命令、Linux 命令、打包工具
多去了解前端的新趋势（Flutter，PWA，Serveless，GraphQL，CSS Houdini）
要有自信，让面试官感受到你对前端的热爱
此文纯个人观点，希望读者保持自己的判断。
题外话：看完你会忍不住点个赞的，点赞再看，养成习惯🙂
⭐ 推荐阅读：
2023前端面试题精选
老生常谈的面试题就不放出来了，大厂常规面试流程也不写了（不利于阅读，有兴趣的可以翻翻博主文章）
HTML、CSS相关
- 网络中使用最多的图片格式有哪些
- 请简述css盒子模型
- 视频/音频标签的使用
- HTML5新增的内容有哪些
- HTML5 新增的语义化标签有哪些
- CSS3新增的特性
- 清除浮动的方式有哪些？请说出各自的优点
- 定位的属性值有何区别
- 子元素如何在父元素中居中
- Border-box与content-box的区别
- 元素垂直居中
- 如何让chrome浏览器显示小于12px的文字
- CSS选择器有哪些，那些属性可以继承，优先级如何计算？
- CSS3新增的伪类有哪些？
- 网页中有大量图片加载很慢 你有什么办法进行优化？
- 行内元素/块级元素有哪些？
- 浏览器的标准模式和怪异模式区别？
- Margin和padding在什么场合下使用
- 弹性盒子布局属性有那些请简述?
- 怎么实现标签的禁用
- Flex布局原理
- px，rem，em的区别
- 网页的三层结构有哪些
- 请简述媒体查询
- 三栏布局方式两边固定中间自适应
- Doctype作用
- CSS 预处理 sass less 是什么？为什么使用他们
- 怎么转换less为css
JavaScript相关
- Js基本数据类型有哪些
- Ajax如何使用
- 如何判断一个数据是NaN
- 闭包是什么？有什么特性？对页面会有什么影响
- Js中常见的内存泄漏：
- 事件委托是什么？如何确定事件源（Event.target 谁调用谁就是事件源）
- 什么是事件冒泡？
- 本地存储与cookie的区别
- ES6新特性
- Let与var与const的区别
- 数组方法有哪些请简述
- 请掌握2种以上数组去重的方式
- 什么是面向对象请简述
- 普通函数和构造函数的区别
- 请简述原型 / 原型链 /（原型）继承
- Promise的理解
- 请简述async的用法
- 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
- Js中.call()与.apply()区别
- 为什么会造成跨域/请简述同源策略
- This指向
- 什么是jsonp工作原理是什么？他为什么不是真正的ajax
- 请写出一个简单的类与继承
- 同步与异步的区别/阻塞与非阻塞区别
- 为什么js是弱类型语言
- 箭头函数与普通函数的区别
- For循环与map循环有什么区别
- 原型和继承，prototype，call和apply继承的区别
- 深浅拷贝是什么如何实现？
- 什么时候用深拷贝 /浅拷贝
- 什么是js内存泄露？
- 什么是csrf攻击
- 预加载和懒加载的区别，预加载在什么时间加载合适
- Js的函数节流和函数防抖的区别
jQuery相关
- 什么是jQuery？
- 为什么要使用jQuery？jquery有哪些好处？
- Jquery选择器有哪些
- Jquery插入节点的方法
- jQuery对象和DOM对象是怎样转换的
- jQuery中.get()提交和.post()提交的区别
- 怎么使用jQuery中的动画
- jQuery中如何来获取和设置属性
- 如何来设置和获取HTML和文本的值？
- jQuery中有哪些方法可以遍历节点？
- $(this) 和 this 关键字在 jQuery 中有何不同？
- jQuery 里的 each() 是什么函数？你是如何使用它的？
- Query中的Delegate()函数有什么作用？
浏览器，HTTP相关
- http是什么？有什么特点
- HTTP协议和HTTPS区别
- 请简述ajax的执行过程 以及常见的HTTP状态码
- Get和post不同
- 请输出三种减少页面加载时间的方式
- 重绘和回流是什么
- 你如何对网站的文件和资源进行优化？
Vue相关
- Vue的核心是什么
- 请简述你对vue的理解
- 请简述vue的单向数据流
- Vue常用的修饰符有哪些
- v-text与{{}}与v-html区别
- v-on可以绑定多个方法吗
- Vue循环的key作用
- 什么是计算属性
- Vue单页面的优缺点
- Vuex是什么？怎么使用？在那种场景下使用
- Vue中路由跳转方式（声明式/编程式）
- 路由中name属性有什么作用？
- vue跨域的解决方式
- Vue的生命周期请简述
- Vue生命周期的作用
- DOM渲染在那个生命周期阶段内完成
- Vue路由的实现
- Vue路由模式hash和history，简单讲一下
- Vue路由传参的两种方式，params和query方式与区别
- Vue数据绑定的几种方式
- Vue注册一个全局组件
- Vue的路由钩子函数/路由守卫有哪些
- Vue中如何进行动态路由设置？有哪些方式？怎么获取传递过来的数据？
- Elementui中的常用组件有哪些？请简述你经常使用的 并且他们的属性有哪些？
- Vue中指令有哪些
- Vue如何定义一个过滤器
- 对vue 中keep-alive的理解
- 如何让组件中的css在当前组件生效
- Vue生命周期一共几个阶段
- Mvvm与mvc的区别
- Vue组件中的data为什么是函数
- Vue双向绑定的原理
- Vue中组件怎么传值
- Bootstrap的原理
- Watch请简述
- Vant Ui请简述下
- 计算属性与watch区别
- mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
- Vue首屏加载慢的原因，怎么解决的，怎么解决白屏问题
- Vue双数据绑定过程中，这边儿数据改变了怎么通知另一边改变
- Vuex流程
- Vuex怎么请求异步数据
- Vuex中action如何提交给mutation的
- Route与router区别
- vuex的State特性是？
- vuex的Getter特性是？
- vuex的Mutation特性是？
- vuex的actions特性是？
- vuex的优势
- v-for与v-if优先级
React相关
- fetch VS ajax VS axios
- React事件处理—修改this指向
- 请简述你对react的理解
- react组件之间的数据传递
- Vue与react区别
- 请简述虚拟dom与diff算法
- 调用 setState 之后发生了什么？
- react 生命周期函数
- 为什么虚拟 dom 会提高性能?(必考)
- State与props区别
- shouldComponentUpdate 是做什么的
- react diff 原理
- 何为受控组件
- 调用 super(props) 的目的是什么
- React 中构建组件的方式
小程序相关的
- 小程序的优势
- 小程序的页面构成
- 小程序的生命周期
- 小程序如何请求数据
- 如何提高小程序的首屏加载时间
- 请简述你经常使用的小程序的组件
- wxss与css的区别请简述
- 怎么优化小程序
- 小程序如何显示用户头像与用户名
- 请谈谈小程序的双向绑定和vue的异同？
这边给大家送上一份前端工程师学习成长思维导图，对自己的专业技能进行评估，需要的同学可以在评论区留言“前端思维导图”
后话
对于面试，说几句个人观点。
面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。
文内教程PDF可以下图领取：
