这些年也有不少的面试别人和面试自己的经历，也有好些人来咨询一些前端的面试题目和准备，所以整理一下记录下来。本文概括地描述一下，面试中可能会遇到的一些基础专业知识。
在进行面试前复习的时候，我们需要有结构、有逻辑地进行知识的梳理，那么大概有哪些知识点需要准备呢？面试官又可能会问到哪些内容呢？
# 专业知识
这里会针对前端小伙伴来进行相关专业知识的准备说明，本文只做范围的概述，后面再有详细的文章来一个个讲解。
# Javascript
前端最基础的技能包括 Javascript、CSS 和 HTML，新手比较容易遇到这方面的考察。对于Javascript会问到多一些，通常包括：
| 考察范围 | 具体问题 |
|---|---|
| 对单线程 Javascript 的理解 | 单线程来源 Web Workers 和 Service Workers 的理解 |
| 异步事件机制 | 为什么使用异步事件机制 在实际使用中异步事件可能会导致什么问题 关于 setTimeout、setInterval 的时间精确性 |
| 对 EventLoop 的理解 | 介绍浏览器的 EventLoop macrotask 和 microtask 的区别 setTimeout 和 Promise 在不同浏览器的执行顺序 |
| Javascript 的原型和继承 | 如何理解 Javascript 中的“一切皆对象” 如何创建一个对象 proto 与 prototype 的区别 |
| 作用域与闭包 | 请描述以下代码的执行输出内容（考察作用域） 什么场景需要使用闭包 闭包的缺陷 |
| this | 简单描述 this 在不同场景下的指向 apply 和 call 的使用 箭头函数与普通函数的区别 |
| ES6+ | 对 Promise 的理解 使用 async、await 的好处 浏览器兼容性与 Babel Set 和 Map 数据结构 |
对 Javascript 的考察，也可以通过写代码的方式来进行，例如：
- 手写代码实现 call/apply/bind
- 手写代码实现 Promise、async/await
- Javascript 中 0.1+0.2 为什么等于 0.30000000000000004，如何通过代码解决这个问题
# HTML与CSS
关于 HTML 的内容会较少单独地问，更多是结合浏览器的渲染机制等一起考察。关于 CSS，也有以下的一些考察点：
- 介绍盒子模型
- 内联元素与块状元素、display
- 文档流的理解：static/relative/absolute/fixed等
- 元素堆叠：z-index 与 position 的作用关系
- Flex 布局方式的理解和使用
- BFC 的优点和缺点
- CSS 动画考察：关键帧、animate、transition 等
# 网络相关
网络相关的知识在日常开发中也是挺常用的，相关的问题可以从“一个完整的HTTP请求过程”来讲述，包括：
- 域名解析（此处涉及 DNS 的寻址过程）
- TCP 的 3 次握手
- 建立 TCP 连接后发起 HTTP 请求
- 服务器响应 HTTP 请求
以上的内容都需要尽数掌握，除此以外，关于 HTTP 的还有以下常见内容：
- HTTP 消息的结构，包括 Request请求、Response响应
- HTTP 请求方法，使用 PUT、DELETE 等方法时为什么有时候在浏览器会看到两次请求（涉及 CROS 中的简单请求和复杂请求）
- 常见的 HTTP 状态码
- 浏览器是如何控制缓存的：相应的头信息、状态码
- 如何对请求进行抓包和改造
- Websocket 与 HTTP 请求的区别
- HTTPS、HTTP2 与 HTTP 的对比
# 浏览器相关
关于浏览器，有很多的机制需要掌握。通常来说，面试官会从一个叫“在浏览器里面输入url，按下 enter 键，会发生什么？”中进行考察，首先会经过上面提到的 HTTP 请求过程，然后还会涉及以下内容：
| 考察内容 | 相关问题 |
|---|---|
| 浏览器的同源策略 | “同源”指什么 那些行为受到同源策略的限制 常见的跨域方案有哪些 |
| 浏览器的缓存相关 | Web 缓存通常包括哪些 浏览器什么情况下会使用本地缓存 强缓存和协商缓存的区别 强制 ctrl + F5 刷新会发生什么 session、cookie 以及 storage 的区别 |
| 浏览器加载顺序 | 为什么我们通常将 javascript 放在 <body> 的最后面为什么我们将 CSS 放在 <head> 里 |
| 浏览器的渲染原理 | HTML/CSS/JS 的解析过程 Render Tree 是怎样生成的 Repaint 和 Reflow 是怎样的过程 日常开发中要注意哪些渲染性能问题 |
| 虚拟 DOM 机制 | 为什么要使用虚拟 DOM 为什么要使用 JS 对象来描述 DOM 结构 简单描述下虚拟 DOM 的实现原理 |
| 浏览器事件 | DOM 事件流包括几个阶段（点击后会发生什么） 事件委托是什么 |
# 安全相关
安全在实际开发中是最重要的，作为前端开发，同样需要掌握：
- 前端安全中，需要注意的有哪些问题
- XSS/CSRF 是怎样的攻击过程，要怎么防范
- 除了 XSS 和 CSRF，你还了解哪些网络安全相关的问题呢
- SQL 注入、命令行注入是怎样进行的
- DDoS 攻击是什么
- 流量劫持包括哪些内容
# 算法基础
很多大公司会考察算法基础，大家其实也可以多上 leetcode 去刷题，这些题目刷多了就有感觉了。前端比较爱考的包括：
- 各种排序算法、稳定排序与原地排序、JS 中的 sort 使用的是什么排序
- 查找算法（顺序、二分查找）
- 递归、分治的理解和应用
- 动态规划
除此之外，常见的数据结构也需要掌握：
- 链表与数组
- 栈与队列
- 二叉树、平衡树、红黑树等
# 计算机通用知识
虽然在日常工作中我们接触到的内容比较局限于前端开发，但以下内容如果能掌握，对个人成长和面试过程也会有所帮助：
- 理解计算机资源，认识进程与线程（单线程、单进程、多线程、多进程）
- 了解阻塞与非阻塞、同步与异步任务等
- 进程间通信（IPC）常包括哪些方式，进程间同步机制又包括哪些方式
- Socket与网络进程通信是怎样的关系、Socket连接过程是怎样的
- 简单了解数据库（事务、索引）
- 常见的设计模式有哪些、列举实际使用过的一些设计模式
- 如何理解面向对象编程、对函数式编程的看法
# 结束语
基础知识相关的内容真的不少呢，但是这块其实只要准备足够充分就可以掌握。参加过高考的我们，理解和记忆这么些内容，其实没有想象中那么难的。
