关于前端:12～18k的前端面试会问个啥

不论是跳槽还是涨薪，工资必定是要网上走的，那么在这个 12~18k 这区间须要把握那些能够拿到这工资呢？和在不同公司的小伙伴及些老大聊了下，总结了一下前端这个区间内的要求。可能会有小伙伴说这些全把握了都不止 18k 了吧，我想说的是，依据已把握的技术来查漏补缺，要高工资也得有实力拿。

名词解释

精通

• 理解背地的原理和标准

  • 入手重写过实现代码
• 能够认为此为根底做二次开发
• 能读懂源码并做出批改

把握

• 曾在我的项目中大量应用过此技术
• 能够自若的应用这项技术进行开发
• 参加技术论坛区探讨或者写过相干文章

理解

• 未在开发中应用过，但写过 demo
• 浏览过相干文档或者视频教程
• 能够用五分钟外向别人介绍这项技术的特点和利用场景

不理解

• 只是听过名字
• 只是大略的翻过文档
• 没有写过对于这项技术的代码
• 须要同时具备以后等级所有个性
• 高等级形容蕴含低等级形容个性

手写代码
能够借助 emmet 或者编辑器的揭示，非复制粘贴整段代码的形式书写代码。

记忆性考查：
须要背下来的内容，不能够借助搜索引擎。比方大多数关键字的拼写，对于超长关键词能够借助编辑器实现输出。一些罕用的知识点也会要求记忆性考查，比方盒模型和选择器规定，因为日常应用频度较高，理当记住。

索引性考查：
能够一次性在搜索引擎通过技术关键字找到解决方案。比方：咱们心愿做一个特殊效果的轮播图，文字和背景图不同步滚动，背景图每次只是程度偏移一小截，文字则是整页的滚动 面对这个形容可能辨认出搜寻关键词为“视差滚动”

了解性考查：
要求可能通过代码的形式展示知识点以及和其余知识点的比照。可能在某利用场景内设计出该技术的应用计划。可能讲清其背地的数学原理或者逻辑关系。

面试用意

侧面

1. 是否具备工作岗位所须要的最低能力
2. 是否有过相似我的项目开发经验
3. 是否把握工作岗位所需技能
4. 现场编码解决问题
5. 正确应用搜索引擎
6. 可能对之前我的项目中应用过的技术做出具体解释
7. 是否对技术有激情
8. 有在线可拜访的代码
9. 有技术博客
10. 在技术社区踊跃答复问题
11. 关注新技术，并且做过官网 demo 以外的案例
12. 日常应用技术解决生存中的问题
13. 成长空间
14. 计算机专业背景
15. 良好的算法根底
16. 良好的表达能力
17. 做过技术文章翻译
18. 有至多一项 5 年以上的喜好

背面

1. 对冷门知识点做记忆性考查
2. 对过期知识点做解释型
3. 以答复出问题的个数作为录用指标
4. 面试应该像测视力一样，一开始从最容易的问题动手，逐渐深刻，直到无奈正确答复。
5. 如果面试中面试者没有答复对任何问题或者答复对了所有的问题，都不是一次胜利的面试。

面试办法

• 理解职业经验，确认工作内容。
• 通过场景概括出技术能力范畴。
• 面试前确认，含糊的中央在开始的时候确认。
• 参加了哪些项目，在我的项目中表演什么角色，实现了哪些编码工作。
• 工作的流程是怎么样的，是否有标准（比方 gitflow）工作的教训。
• 依照简历的技能列表筛选比拟显明的做发问。
• 对于基础知识，比方 HTTP 协定，以记忆性考查为主；对于正则路由 promise 等技术如果不是近期我的项目应用过，然而宣称把握，可放宽为索引性考查。

总结：
内容局部常识举例说明了一些常见的技能列表，实际上会依据面试者的简历状况设置问题。
记忆性内容作为底线要求，如果不能达标，意味着根底不牢，在日后的工作中会在很多根本的问题上搞不清。
编码环节次要做搜寻性考查，因为这是工作的常态模式。应用搜索引擎的能力决定了程序员的日常程度。
了解性考查对应的是知识点的了解和利用，是否可能把知识点使用到开发中，并且对日常开发中遇到的问题有本人的思考，反馈的是面试者的后劲和倒退。

基本功考查

1. 对于对于 HTML

• html 语义化标签的了解; 结构化的了解; 是否写出简洁的 html 构造; SEO 优化
• h5 中新增的属性; 如自定义属性 data, 类名 className 等, 新增表单元素, 拖拽 Drag
• h5 中新增的 API, 批改的 API, 废除的 API 稍作理解 (离线存储, audio, video)

2. 对于 CSS

• CSS 选择器(三大个性)
• BFC 机制
• 盒模型
• CSS 模块化开发(封装); SCSS 和 LESS 的应用
• 屏幕适配 以及 页面自适应
• CSS3 中新增的选择器
• CSS3 中新增的属性, transform trasition animation 等…

3. 对于布局

• 规范文档流(padding + margin + 负 margin) + 浮动 float + 定位
• 百分比布局(流式布局): px 单位 用 %num 代替, 占父级元素的百分比
• flex 弹性布局: 主轴 辅助轴的几个属性
• grid 栅格布局: 应用框架中的类名来代替: 实质上还是百分比布局

4. 对于 JS 根底

• 变量数据类型及检测: 根本 + 援用
• 运算符: 算术 + 条件 + 逻辑 + 位 + 短路, 隐式转换等
• 条件, 循环, 异样解决 if switch(){case xxx:} try catch finally throw
• 函数定义, 调用形式(apply, call, 间接调用), 传参: 实参给形参赋值
• 字符串, 数组, 对象罕用 API,
• 正则表达式

5. 对于 JS 高级

• 作用域, 作用域链, 闭包
• 原型, 原型链, 继承
• 函数上下文, this 指向
• js 的运行机制, 事件队列和循环
• 同步, 异步编程

6. 对于网络协议

• HTTP 协定
• cookie, session, token

7. 对于 ES6 语法

• 字符串, 数组, 对象 扩大的 api
• 变量扩大: let const 解构赋值 块级作用域
• 函数扩大: 箭头函数 默认参数, rest 参数
• 开展运算符, 模板字符串
• set 和 map 数据结构
• 迭代器和生成器函数 next 和 yield 的了解
• proxy 对象 属性代理器: 属性的读取（get）和设置（set）相干操作
• promise 对象, 异步编程的解决方案
• async + await: 异步编程的终极计划 promise + generator 的语法糖
• class 语法 构造函数的语法糖
• 模块化编程 export + import 的 导出和导入

8.VUE 根底

• 根本指令
• 实例的属性和办法
• 实例的生命周期
• 组件根底: 创立, 注册, 增加属性办法, 套用等…
• 组件通信传值 父子, 兄弟, 跨级
• 插槽 slot 等…

9. VUE 高级

• vue-router: 搭建 SPA
• 路由, 组件的配置
• 路由间的传值
• 路由跳转
• 路由的导航守卫
• 记住在 router.js 和 组件页面中的应用形式
• vuex: 状态治理: 数据仓库 store
• 实例化仓库的 5 大属性的应用
  state, getters, mutations, actions, modules
• 辅助函数 mapState 等…, 仓库中计算属性的映射, 不便操作
• 记住在 store.js 和 组件中 应用形式

10.VUE 深刻, 源码浏览

• 数据响应式原理
• virtual dom
• diff 算法
• nextTick 等等…
• vue2 和 vue3 的数据绑定
• vue3 的 componest API
• vite 的用法

DOM

把握原生的 DOM 操作
增删查改
相熟 node 和 element 对象
事件对于事件的机制

• 冒泡和捕捉
• 事件委托
• 自定义事件
• Event 对象
• 面向对象

理解面向对象的思维，可能以面向对象的思维构建利用。比方封装一个日历组件，设计对象所需的属性值和办法。

• new 办法
• 继承，派生
• 原型和原型链

函数

• 相熟 Array，String 等的办法
• call 和 apply 办法的应用
• 链式调用
• this

工程化

1. 把握 gulp

2. 索引行考查手写 gulp 工作

3. 把握模块化

• CMD 规范
• commonjs
• ES6 模块
• babel 如何应用
• webpack 打包计划
• 异步加载
• 打包多个文件

4. 把握 webpack

• 浏览 webpack 文档
• 了解配置文件构造
• 合并，注入失效代码局部
• 热更新

理解 nodeJS 对于前端岗位，nodejs 的应用次要集中在自动化和搭建简略的数据服务器两个方面。

• 是否上传过 npm 包
• 断点调试法
• express
• 插件
• 中间件
• 路由原理
• HTTP 协定
• 数据库查问
• HTML 模板（ejs，pug）

理解 ES6

• promise
• Generator
• 花括号作用域
• class
• 数组遍历（ES5）
• 严格模式（ES5）
• 模块零碎

框架专题

通用

• MVC
• 双向数据绑定
• 单项数据流
• 组件化
• 生命期
• 路由

前端模板

• 横向比照，所用模板的长处
• 至多应用过两种以上的前端模板

工程能力考查:

1. 我的项目能力

• vue-cli 脚手架搭建和性能配置
• vue.config.js
• vite 的应用和搭建等
• webpack 的罕用配置
• 我的项目构建 打包

2. 相熟各类框架的文档…

• UI 框架: Bootstrap, MUI, Element-ui 等
• 罕用的插件整顿, 整顿一个本人插件库, 封装本人的办法库, 组件库

3. 罕用的工具熟练度

• PC 端和挪动端开发注意事项和兼容性

4. 经验总结: 如何疾速确定我的项目的技术选型
5.git 或者 svn 等应用状况
6. 我的项目中的性能优化记录 (都是细节点…多记录)
7. 需要文档的了解, 能够联合 我的项目流程图, UML 图
8. 问题解决能力: (bug 定位调试, 查找文档, 寻求别人…)

前端面试

明确了前端面试（学习）方向，也要看看面试题的方向，不论是技术的面试还是人事项目标，想要拿下 offer，在大方向不出错，毕竟有的公司面试轮数还是挺多的。

这份 2021 前端面试题精编涵盖了人事面试题、我的项目、小程序、HTML5\CSS3、JSvascript、HTTP、VUE、REACT 等内容，都是面试的问题整顿，面试前看看准没错。

完整版的 2021 前端面试题精编间接点击这获取，没有开展的内容是等着小伙伴们来细细浏览。

结尾

作为技术人，最重要的就是本人的技术能力，很多人在刚毕业的时候一腔热血，每天打鸡血个别通宵工作也不嫌累，然而起初被社会毒打的次数多了，很容易就困倦了，可能有的人喊着喊着就放弃了，开始安于现状，这是很危险的事件，技术这条路逆水行舟，只有继续学习能力在技术这条路上越走越远

而另外一方面，主观的艰难的确又是存在的，比方工作量太大没工夫，前端技术倒退太快学不完等，这就须要你找到一条可继续倒退的路线，比方每周认真研读一篇高质量技术文章，或者定期地进行总结，不要给本人太大的压力，但又必须要放弃学习和提高

无论你抉择的办法是什么，最终最重要的还是要落到实处，珍藏了一大堆优良文章的链接放在收藏夹吃灰是没用的