【面试题】做了一份前端面试复习计划，保熟～

前言

以前我看到面试贴就直接刷掉的，从不会多看一眼，直到去年 9 月份我开始准备面试时，才发现很多面试经验贴特别有用，看这些帖子（我不敢称之为文章，怕被杠）的过程中对我的复习思维形成影响很大，所以我现在把之前自己好好整理的面试计划分享出来，希望能帮到接下来要找工作的朋友，不喜勿喷哈～

一、简历

简历在找工作过程中是非常非常重要的，无论你是什么途径去面试的，面试你的人一定会看你的简历。

1、重点

• 简历就像高考作文——阅卷时间非常短。
• 内容要简洁。
• 直击重点，表现出自己的优势（只要是符合招人单位要求的都是优势，不是别人不会的你会才叫优势）。

2、简历包含的内容

• 个人信息。
• 专业技能。
• 工作经历。
• 项目经历。
• 社区贡献。

2.1 基本信息

• 必备：姓名 电话 邮箱。
• 年龄（最好写上，在这个行业年龄还是比较重要的），学历（写好是哪一届）。
• 头像无所谓（好看就放上呗）。
• 可以放 github 链接，前提是有内容。

2.2 专业技能

• 表现出自己的核心竞争力（只要是符合招人单位要求的都是优势）。
• 内容不要太多，3、5 条即可。
• 太基础的不要写，例如会用 vscode、lodash。

2.3 工作经历

• 如实写。
• 写明公司，职位，入职离职时间即可，多写无益。
• 如果有空窗期，如实写明即可。

2.4 项目经历

• 写 2-4 个具有说服力的项目（不要什么项目都写，没用）。
• 项目名称，项目描述，技术栈，个人角色。

2.5 社区贡献

• 有博客或者开源作品，会让你更有竞争力。
• 切记：需要真的有内容，不可临时抱佛脚。

3、注意事项

• 界面不能太花哨，简洁明了即可。
• 注意用词，“精通”“熟练”等慎用，可用“熟悉”。
• 不可造假，会被拉入黑名单。

4、面试前准备

• 看 JD，是否需要临时准备一下。
• 打印纸质简历，带着纸和笔（增加好印象）。
• 最好带着自己电脑，现场可能手写代码（带一个帆布包最适合，又优雅又方便）。
• 要有时间观念，如果迟到或者推迟，要提前说。
• 衣着适当，不用正装，也不要太随意。
• 为何离职？—— 不要吐槽前东家，说自己的原因（想找一个更好的发展平台等）。
• 能加班吗？—— 能！除非你特别自信，能找到其他机会。
• 不要挑战面试官，即便他错了（面试一定要保证愉快）。
• 遇到不会的问题，要表现出自己积极的一面（不好意思哈，确实是我的知识盲区，可以跟我说下 xxx 吗，我回去研究一下）。

二、HTML+CSS 面试题

HTML 和 CSS 面试题答不出来基本可以回去了。

1、HTML 面试题

以下是针对 HTML 相关的面试题，一般来说这地方不会出太多题，面试官也不愿意花太多时间在这上面。

1.1 如何理解 HTML 语义化？

• 让人更容易读懂（增加代码可读性）。
• 让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。
• 在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。

1.2 script 标签中 defer 和 async 的区别？

• script ：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
• async script ：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。
• defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。

下图清晰地展示了三种 script 的过程：

1.3 从浏览器地址栏输入 url 到请求返回发生了什么

先阅读这篇科普性质的：从 URL 输入到页面展现到底发生什么？ 先阅读篇文章：从输入 URL 开始建立前端知识体系。

1. 输入 URL 后解析出协议、主机、端口、路径等信息，并构造一个 HTTP 请求。

• 强缓存。
• 协商缓存。

2. DNS 域名解析。（面试题大全）
3. TCP 连接。

可靠传输决定的。客户端和服务端要进行可靠传输，那么就需要 确认双方的接收和发送能力。第一次握手可以确认客服端的 发送能力，第二次握手，确认了服务端的 发送能力和接收能力，所以第三次握手才可以确认客户端的 接收能力。不然容易出现丢包的现象。

1. http 请求。
2. 服务器处理请求并返回 HTTP 报文。
3. 浏览器渲染页面。

1. 断开 TCP 连接。

2、CSS 面试题

以下是针对 CSS 相关的面试题，这些题答不出来会给人非常不好的技术印象。

2.1 盒模型介绍

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。

两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

• 标准盒模型：只包含 content 。
• IE（替代）盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

• box-sizing: content-box ：标准盒模型（默认值）。
• box-sizing: border-box ：IE（替代）盒模型。

2.2 css 选择器和优先级

首先我们要知道有哪些选择器：选择器参考表。

常规来说，大家都知道样式的优先级一般为 !important > style > id > class ，但是涉及多类选择器作用于同一个元素时候怎么判断优先级呢？相信我，你在改一些第三方库（比如 antd