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

 给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

一、简历

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

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​​ 的过程： 

推荐文章：

• ​​图解 script 标签中的 async 和 defer 属性​​

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

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

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

• 强缓存。
• 协商缓存。

2. DNS 域名解析。（字节面试被虐后，是时候搞懂 DNS 了）
3. TCP 连接。

总是要问：为什么需要三次握手，两次不行吗？其实这是由 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