从面试角度了解前端基础知识体系
更新日期:
这两年大裁员过后，带来了一系列的人员变动，常常面临着不受宠的被辞退了，能干的人跑了，剩下的人在努力维护着项目。于是乎老板们才发现人好像又不够了，然后又开始各种招人。机会一直都有，重要的还是得努力提升自己的能力，才能在这场战斗中存活下来。
前端开发中相对基础的一些内容，主要围绕着 HTML/CSS/Javascript 和浏览器等相关。这些基础知识的掌握是必须的，但有些时候在工作中未必会用到。例如有些项目前后端部署在一起，并不会存在跨域一说，那么可能在开发过程中不会遇到浏览器请求跨域和解决方案相关问题。除了通过不断地学习和在项目中练习，或许从面试的角度来补齐相应的专业知识，可以给我们带来更大的动力。
本文的内容包括：
- 前端专业知识相关面试考察点
- 前端项目经验相关面试考察点
前端专业知识相关面试考察点
首先我们会针对前端开发相关来介绍需要掌握的一些知识，内容会包括 Javascript、HTML 与 CSS、网络相关、浏览器相关、安全相关、算法和计算机通用知识。
由于篇幅关系，下面会以关键知识点和问题的方式进行描述，并不会提供具体的答案和详细的内容描述。因此，大家可以针对提到的知识点和问题去进行深入学习和发散，也可以去网上搜一些相关的题目，结合大家的答案去尝试进行理解和解答。
HTML 与 CSS
关于 HTML 的内容会较少单独地问，更多是结合浏览器机制等一起考察：
- DOM 操作是否会带来性能问题
- 事件冒泡/事件委托
关于 CSS，也有以下的一些考察点：
- 介绍盒子模型
- 内联元素与块状元素、
display - 文档流的理解：
static/relative/absolute/fixed等 - 元素堆叠：
z-index与position的作用关系 - Flex 布局方式的理解和使用
- Grid 布局方式的理解和使用
- BFC 的优点和缺点
- CSS 动画考察：关键帧、
animate、transition等
很多时候，面试官也会通过让候选人编码实现某些样式/元素的方式，来考察候选人对 CSS 的掌握程度，其中布局（居中、对齐等）会比较容易考察到。
Javascript
前端最基础的技能包括 Javascript、CSS 和 HTML，尤其是新人比较容易遇到这方面的考察。对于 Javascript 会问到多一些，通常包括：
| 考察范围 | 具体问题 |
|---|---|
| 对单线程 Javascript 的理解 | 单线程来源 Web Workers 和 Service Workers 的理解 |
| 异步事件机制 | 为什么使用异步事件机制 在实际使用中异步事件可能会导致什么问题 关于 setTimeout、setInterval的时间精确性 |
| 对 EventLoop 的理解 | 介绍浏览器的 EventLoop 宏任务（MacroTask）和微任务（MicroTask）的区别 setTimeout、Promise、async/await在不同浏览器的执行顺序 |
| Javascript 的原型和继承 | 如何理解 Javascript 中的“一切皆对象” 如何创建一个对象 proto与prototype的区别 |
| 作用域与闭包 | 请描述以下代码的执行输出内容（考察作用域） 什么场景需要使用闭包 闭包的缺陷 |
this与执行上下文 |
简单描述this在不同场景下的指向apply/call/bind的使用箭头函数与普通函数的区别 |
| ES6+ | 对Promise的理解使用 async、await的好处浏览器兼容性与 Babel Set和Map数据结构 |
对 Javascript 的考察，也可以通过写代码的方式来进行，例如：
- 手写代码实现
call/apply/bind - 手写代码实现
Promise、async/await
-Javascript 中 0.1+0.2 为什么等于 0.30000000000000004，如何通过代码解决这个问题
网络相关
网络相关的知识在日常开发中也是挺常用的，相关的问题可以从“一个完整的 HTTP 请求过程”来讲述，包括：
- 域名解析（此处涉及 DNS 的寻址过程）
- TCP 的 3 次握手
- 建立 TCP 连接后发起 HTTP 请求
- 服务器响应 HTTP 请求
以上的内容都需要尽数掌握，除此以外，关于 HTTP 的还有以下常见内容：
- HTTP 消息的结构，包括 Request 请求、Response 响应
- HTTP 请求方法，使用 PUT、DELETE 等方法时为什么有时候在浏览器会看到两次请求（涉及 CROS 中的简单请求和复杂请求）
- 常见的 HTTP 状态码
- 浏览器是如何控制缓存的：相应的头信息、状态码
- 如何对请求进行抓包和改造
- Websocket 与 HTTP 请求的区别
- HTTPS、HTTP2 与 HTTP 的对比
- 网络请求的优化方法
浏览器相关
关于浏览器，有很多的机制需要掌握。通常来说，面试官会从一个叫“在浏览器里面输入 URL，按下回车键，会发生什么？”中进行考察，首先会经过上面提到的 HTTP 请求过程，然后还会涉及以下内容：
| 考察内容 | 相关问题 |
|---|---|
| 浏览器的同源策略 | “同源”指什么 那些行为受到同源策略的限制 常见的跨域方案有哪些 |
| 浏览器的缓存相关 | Web 缓存通常包括哪些 浏览器什么情况下会使用本地缓存 强缓存和协商缓存的区别 强制 ctrl+F5刷新会发生什么session、cookie 以及 storage 的区别 |
| 浏览器加载顺序 | 为什么我们通常将 Javascript 放在<body>的最后面为什么我们将 CSS 放在 <head>里 |
| 浏览器的渲染原理 | HTML/CSS/JS 的解析过程 渲染树是怎样生成的 重排和重绘是怎样的过程 日常开发中要注意哪些渲染性能问题 |
| 虚拟 DOM 机制 | 为什么要使用虚拟 DOM 为什么要使用 Javascript 对象来描述 DOM 结构 简单描述下虚拟 DOM 的实现原理 |
| 浏览器事件 | DOM 事件流包括几个阶段（点击后会发生什么） 事件委托是什么 |
安全相关
安全在实际开发中是最重要的，作为前端开发，同样需要掌握：
- 前端安全中，需要注意的有哪些问题
- XSS/CSRF 是怎样的攻击过程，要怎么防范
- 除了 XSS 和 CSRF，你还了解哪些网络安全相关的问题呢
- SQL 注入、命令行注入是怎样进行的
- DDoS 攻击是什么
- 流量劫持包括哪些内容
算法与数据结构
很多大公司会考察算法基础，大家其实也可以多上 leetcode 去刷题，这些题目刷多了就有感觉了。前端比较爱考的包括：
- 各种排序算法、稳定排序与原地排序、JS 中的 sort 使用的是什么排序
- 查找算法（顺序、二分查找）
- 递归、分治的理解和应用
- 动态规划
除此之外，常见的数据结构也需要掌握：
- 链表与数组
- 栈与队列
- 二叉树、平衡树、红黑树等
很多人会觉得，对前端开发来说算法好像并不那么重要，的确日常开发中也几乎用不到。但不管是前端开发也好，还是后台开发、大数据开发等，软件设计很多都是相通的。一些比较著名的前端项目中，也的确会用到一些算法，同样树状数据结构其实也在前端中比较常见。
计算机通用知识
同样的，虽然在日常工作中我们接触到的内容比较局限于前端开发，但以下内容作为开发必备基础，也是需要掌握的：
- 理解计算机资源，认识进程与线程（单线程、单进程、多线程、多进程）
- 了解阻塞与非阻塞、同步与异步任务等
- 进程间通信（IPC）常包括哪些方式，进程间同步机制又包括哪些方式
- Socket 与网络进程通信是怎样的关系、Socket 连接过程是怎样的
- 简单了解数据库（事务、索引）
- 常见的设计模式有哪些、列举实际使用过的一些设计模式
- 如何理解面向对象编程、对函数式编程的看法
基础知识相关的内容真的不少，但是这块其实只要准备足够充分就可以掌握。参加过高考的我们，理解和记忆这么些内容，其实没有想象中那么难的。
前端项目经验相关面试考察点
项目经验通常和个人经历关系比较大，前端业务相关的的一些项目经验通常包括管理端、H5 直出、Node.js、可视化，另外还包括参与工具开发的经验，方案选型、架构设计等。
项目相关的内容，比如性能优化、前端框架之类的，之前我也整理过不少的文章，欢迎大家自己翻阅哦~
前端框架与工具库
首先我们来看看前端框架，不管你开发管理端、PC Web、H5，还是现在比较流行的小程序，总会面临要使用某一个框架来开发。因此，以下的问题可能与你有关：
- 谈谈你对前端常见的框架（Angular/React/Vue）的理解
- 该项目使用 Angular/React/Vue 的原因是
- 如果现在你重新决策，你会使用什么框架
- 你有了解过这些框架都做了哪些事情，介绍一下是怎么实现的
- Vue 中的双向绑定是怎么实现的？
- 介绍下 Angular 中的依赖注入
- 讲讲 React 的虚拟 DOM
- 如何进行状态管理，Vuex/Redux/Mobx 等工具是怎么做的
- 单页应用是什么？路由是如何实现的
- 如何进行 SEO 优化
如果你使用到了小程序，还可能会问到：
- 小程序和 H5 有什么不一样，为什么选小程序而不是 H5
- 有考虑在小程序里嵌 H5 实现吗，为什么
- 为什么小程序的性能要好一些
- 小程序开发有用到哪些框架吗、为什么
而工具库相关的就太多了，一般会这么问：
- 有实际使用过哪些第三方库
- 这些工具库有什么特性和优缺点
项目相关的许多问题，其实是我们工作中经常会遇到并需要进行思考的问题。如果平时有养成思考和总结的习惯，那么这些问题很容易就能回答出来。如果平时工作中比较少进行这样的思考，也可以在面试准备的时候多关注下。
Node.js 与服务端
Node.js 相关的可能包括：
- 为什么要用 Node.js（而不是 PHP/JAVA/GO/C++等）
- Node.js 有哪些特点，单线程的优势和缺点是什么
- Node.js 有哪些定时功能
Process.nextTick和setImmediate的区别- Node.js 中的异步和同步怎么理解，异步流程如何控制
- 简单介绍一下 Node.js 中的核心内置类库(事件，流，文件，网络等)
- express 是如何从一个中间件执行到下一个中间件的
- express、koa、egg 之间的区别
- Rest API 有使用过吗，介绍一下
以上这些都属于很基础的问题。很多时候，我们会使用 Node.js 去做一些脚本工程或是服务端接入层等工作。如果项目中有使用 Node.js，面试官更多会结合项目相关的进行提问。
性能优化
性能优化的其实跟项目比较相关，常见的包括：
- 有做过性能优化相关的项目吗，具体的优化过程是怎样的/优化效果是怎样的
- 常见的性能优化包括哪些内容
- 如何理解项目的性能瓶颈/什么时候我们需要对一个项目进行优化
- 图片加载性能有哪些可以优化的地方
- 要怎么做好代码分割/降低代码包大小可以有哪些方式
- 首屏页面加载很慢，要怎么优化
- Tree Shaking 是怎样一个过程
- 页面有没有做什么柔性降级的处理
很多时候，性能优化也是与项目本身紧紧相关，一般来说会包括首屏耗时优化、页面内容渲染耗时优化、内存优化等，可能涉及代码包大小、下载耗时、首屏直出、存储资源（内存/indexDB）等内容。
前端工程化
如今前端工程化的趋势越来越重，通常从脚手架开始：
- 为什么我们开发的时候要使用脚手架
- 如何理解模块化
- 为什么要使用 Webpack，它和 Gulp 的区别是
- 讲一下 Webpack 中常用的一些配置、Loader、插件
- Babel 的作用是什么，如何选择合适的 Babel 版本
- Webpack 是怎么将多个文件打包成一个，依赖问题如何解决
- 有写过 Webpack 插件吗，Webpack 编译的过程具体是怎样的
- CSS 文件打包过程中，如何避免 CSS 全局污染
- 本地开发和代码打包的流程分别是怎样的
除了脚手架相关，如今自动化、流程化的使用也越来越多了：
- 怎么理解持续集成和持续部署
- 你们的项目有使用 CI/CD 吗，为什么
- 你们的代码有写单元测试/自动化测试吗，为什么
- 前端代码支持自动化发布吗，如何做到的
工程化和自动化是如今前端的一个趋势，由于团队协作越来越多，如何提升团队协作的效率也是一个可具备的技能。
开发效率提升
效能提升的意识在工作中很重要，大家都不喜欢低效的加班。通常可能问到的问题包括：
- 做了很多的管理端/H5，有考虑过怎么提升开发效率吗
- 你的项目里，有没有哪些工作是可以用工具完成的
- 项目中有进行组件和公共库的封装吗
- 如何管理这些公共组件/工具的兼容问题
- 日常工作中，如何提升自己的工作效率
监控、灰度与发布
发布和监控这部分，可能较大的业务才会有，涉及的问题可以有:
- 日常开发过程中，怎么保证页面质量
- 版本发布有进行灰度吗？灰度的过程是怎样的
- 版本发布过程中，如何及时地发现问题
- 发生异常，要怎么快速地定位到具体位置
- 如何观察线上代码的运行质量
对于大型项目来说，灰度发布几乎是开发必备，而监控和问题定位也需要各式各样的工具来辅助优化。
多人协作
一些较大的项目，通常由多个开发合作完成。而多人协作的经验也很有帮助：
- 多人开发过程中，代码冲突如何解决
- 项目中有使用 Git 吗？介绍一下 Git flow 流程
- 如果项目频繁交接，如果提升开发效率
- 有遇到代码习惯差异的问题吗，如何解决
- 有哪些常用的代码校验的工具
- 怎么强制进行 Code Review
看到这么多内容不要慌，一般来说面试官只会根据你的工作经历来询问对应的问题，所以如果你并没有完全掌握某一块的内容，请不要写在简历上，你永远也不知道面试官会延伸到哪。
结束语
专业知识也好，项目经验也好，充分的准备可以留给面试官不错的印象。但这些都未必能完全体现日常工作和思考的一些能力，面试官通常会通过编程题、逻辑思维开放题等其他角度来。
同时，对于程序员来说，自学是很关键的一个能力，面试官也可能会通过职业规划、学习习惯等角度，了解候选人对技术的热情、是否好学、抗压能力、解决问题能力等，来判断候选人是否符合团队要求、是否适合团队氛围。
而从面试的角度来介绍这些内容，除了可以有方向地进行知识储备，更多的是希望大家能结合自身的实际情况反思自己是否还有可以改善的地方，因为面试过程中考察的点通常便是实际工作中会遇到的问题。
最后，圣诞夜，祝各位顺颂冬安~
码生艰难，写文不易，给我家猪囤点猫粮了喵~
查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢