我想上岸

2020-07-21 12:52 已编辑前端工程师

关注

超详细的前端面经

超级详细的前端面经，参考了很多优质面经，并且系统的整理了，因为自己也要面试，所以整理的很用心。

地址： https://github.com/huyaocode/webKnowledge

我是19年参加的秋招，面经相对来说比较新。我面试成绩也很好：阿里、腾讯、头条、拼多多、360、依图都过了。我的核心就是我整理了这个GitHub项目，这对我的基础有很大帮助，而且很多面试题都有看过。

求star！

举个例子看我写的细不细

### 从输入 URL 到页面加载完成的过程

- 判断是否需要跳转(301)

- 从浏览器中读取缓存

- DNS 解析

- TCP 连接

- HTTP 请求发出

- 服务端处理请求，HTTP 响应返回

- 浏览器拿到响应数据，解析响应内内容，把解析结果展示给用户

1. 在浏览器地址栏输入 URL

2. 判断是否有永久重定向(301)

1. 如果有，直接跳转到对应 URL

3. 浏览器查看资源是否有**强缓存**，有则直接使用，如果是**协商缓存**则需要到服务器进行校验资源是否可用

1. 检验新鲜通常有两个 HTTP 头进行控制`Expires`和`Cache-Control`：

- HTTP1.0 提供 Expires，值为一个绝对时间表示缓存新鲜日期

- HTTP1.1 增加了 Cache-Control: max-age=,值为以秒为单位的最大新鲜时间

4. 浏览器**解析 URL**获取协议，主机，端口，path

5. 浏览器**组装一个 HTTP（GET）请求报文**

6. **DNS 解析**，查找过程如下：

1. 浏览器缓存

2. 本机缓存

3. hosts 文件

4. 路由器缓存

5. ISP DNS 缓存

6. DNS 查询（递归查询 / 迭代查询）

7. **端口建立 TCP 链接**，三次握手如下：

1. 客户端发送一个 TCP 的**SYN=1，Seq=X**的包到服务器端口

2. 服务器发回**SYN=1， ACK=X+1， Seq=Y**的响应包

3. 客户端发送**ACK=Y+1， Seq=Z**

8. TCP 链接建立后**发送 HTTP 请求**

9. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用 HTTP Host 头部判断请求的服务程序

10. 服务器检查**HTTP 请求头是否包含缓存验证信息**如果验证缓存新鲜，返回**304**等对应状态码

11. 处理程序读取完整请求并准备 HTTP 响应，可能需要查询数据库等操作

12. 服务器将**响应报文通过 TCP 连接发送回浏览器**

13. 浏览器接收 HTTP 响应，然后根据情况选择**关闭 TCP 连接或者保留重用，关闭 TCP 连接的四次挥手如下**：

1. 主动方发送**Fin=1， Ack=Z， Seq= X**报文

2. 被动方发送**ACK=X+1， Seq=Z**报文

3. 被动方发送**Fin=1， ACK=X， Seq=Y**报文

4. 主动方发送**ACK=Y， Seq=X**报文

14. 浏览器检查响应状态吗：是否为 1XX，3XX， 4XX， 5XX，这些情况处理与 2XX 不同

15. 如果资源可缓存，**进行缓存**

16. 对响应进行**解码**（例如 gzip 压缩）

17. 根据资源类型决定如何处理（假设资源为 HTML 文档）

18. **解析 HTML 文档，构件 DOM 树，下载资源，构造 CSSOM 树，执行 js 脚本**，这些操作没有严格的先后顺序，以下分别解释

19. **构建 DOM 树**：

1. **Tokenizing**：根据 HTML 规范将字符流解析为标记

2. **Lexing**：词法分析将标记转换为对象并定义属性和规则

3. **DOM construction**：根据 HTML 标记关系将对象组成 DOM 树

20. 解析过程中遇到图片、样式表、js 文件，**启动下载**

21. 构建**CSSOM 树**：

1. **Tokenizing**：字符流转换为标记流

2. **Node**：根据标记创建节点

3. **CSSOM**：节点创建 CSSOM 树

22. **[根据 DOM 树和 CSSOM 树构建渲染树](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)**:

1. 从 DOM 树的根节点遍历所有**可见节点**，不可见节点包括：1）`script`,`meta`这样本身不可见的标签。2)被 css 隐藏的节点，如`display: none`

2. 对每一个可见节点，找到恰当的 CSSOM 规则并应用

3. 发布可视节点的内容和计算样式

23. **js 解析如下**：

1. 浏览器创建 Document 对象并解析 HTML，将解析到的元素和文本节点添加到文档中，此时**document.readystate 为 loading**

2. HTML 解析器遇到**没有 async 和 defer 的 script 时**，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用 document.write()把文本插入到输入流中。**同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作 script 和他们之前的文档内容**

3. 当解析器遇到设置了**async**属性的 script 时，开始下载脚本并继续解析文档。脚本会在它**下载完成后尽快执行**，但是**解析器不会停下来等它下载**。异步脚本**禁止使用 document.write()**，它们可以访问自己 script 和之前的文档元素

4. 当文档完成解析，document.readState 变成 interactive

5. 所有**defer**脚本会**按照在文档出现的顺序执行**，延迟脚本**能访问完整文档树**，禁止使用 document.write()

6. 浏览器**在 Document 对象上触发 DOMContentLoaded 事件**

7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些**内容完成载入并且所有异步脚本完成载入和执行**，document.readState 变为 complete,window 触发 load 事件

24. **显示页面**（HTML 解析过程中会逐步显示页面）

内容真的太多了，我随便贴一点出来是看不完的。看看目录：

目录如下：

│ 前端成长.md
│ 前端资源汇总.md
│ 概念.md
│
├─CSS
│ │ CSS选择器.md
│ │ README.md
│ │ 其他题目.md
│ │
│ ├─动画
│ │
│ ├─居中元素
│ │ │ README.md
│ │ ├─垂直居中
│ │ └─水平居中
│ │
│ └─布局
│ BFC两栏布局.html
│ README.md
│ 三栏-flex.html
│ 三栏-浮动方案.html
│ 三栏-绝对定位.html
│ 三栏-网格布局.html
│ 三栏-表格布局.html
│ 双飞翼布局.html
│ 圣杯布局.html
|
├─JS基础
│ BOM.md
│ DOM.md
│ ES6.md
│ node事件轮询.md
│ README.md
│ ServiceWorker.md
│ this.md
│ 事件.md
│ 事件轮询机制.md
│ 事件队列.md
│ 作用域.md
│ 全局内置对象.md
│ 其他题目.md
│ 函数.md
│ 原型链与继承.md
│ 变量类型和类型转换.md
│ 垃圾回收与内存泄露和优化.md
│ 正则.md
│
├─NodeJS
│ │ npm.md
│ │ README.md
│ │ 异步IO.md
│ │ 模块机制.md
│ │
│ └─核心模块
│ path.md
│ process.md
│
├─React
│ │ react-router.md
│ │ react-script.md
│ │ React与Vue区别.md
│ │ React中性能优化.md
│ │ README.md
│ │ Redux.md
│ │ setState.md
│ │
│ ├─Hooks
│ │ │ README.md
│ │ │ 常用hooks.md
│ │ │ 自定义Hooks.md
│ │ │
│ │ └─组件复用例子
│ │ class.jsx
│ │ HOC.jsx
│ │ hooks.jsx
│ │ render-props.jsx
│ │
│ └─基础
│ context.md
│ Hooks.md
│ lazy与suspense.md
│ memo.md
│ PureComponent与Component区别.md
│ VDOM.md
│ 高阶组件.md
│
├─TypeScript
│ interface与type.md
│ README.md
│ TS中类.md
│ 接口.md
│ 类型.md
│
├─Vue
│ README.md
│
├─webpack
│ loader.md
│ package-lock.json.md
│ plugins.md
│ README.md
│ sourcemap.md
│ webpack配置文件.md
│ 安装.md
│ 模块化.md
│
├─Web安全
│ CSRF.md
│ README.md
│ SQL注入.md
│ XSS.md
│
├─其他
│ hybird.md
│ 正则.md
│ 错误监控.md
│
├─工具插件
│ README.md
│ 规范风格.md
│
├─性能优化
│ │ CDN.md
│ │ README.md
│ │ SEO.md
│ │ webpack中优化.md
│ │ 性能测试.md
│ │ 浏览器渲染.md
│ │ 编写高性能的Javascript.md
│ │ 网络优化.md
│ │ 雅虎军规.md
│ │
│ └─testDemo
│ │ opentime-1.html
│ │ opentime-2.html
│ │
│ └─slowServer
│ index.js
│ js-bottom.html
│ js-header.html
│ slow.js
│
├─操作系统
│ README.md
│ 死锁与银行家算法.md
│ 进程与线程.md
│
├─算法
│ │ 排序算法.md
│ │
│ └─树的遍历
│ 广度优先遍历.js
│ 深度优先遍历.js
│
├─编程题与分析题
│ bind、apply实现.md
│ compose.md
│ debounce-demo.js
│ deepCopy.js
│ name的值是多少.md
│ promise.js
│ PromiseAll.md
│ README.md
│ reduce实现map.md
│ reduce案例.js
│ this指向.md
│ 两任务并行.md
│ 以下代码输出值.md
│ 作用域.md
│ 使用Promise封装一个AJAX.md
│ 实现flatten函数.md
│ 实现一个sleep函数.md
│ 尽早按序打印Ajax请求.js
│ 异步编程.md
│ 手写Promise.md
│ 柯里化.md
│ 深浅拷贝.md
│ 类型判断.md
│ 观察者模式.md
│ 闭包.md
│ 防抖节流.md
│
├─网络
│ Ajax.md
│ CDN.md
│ cookie和session.md
│ HTTP.md
│ HTTPS.md
│ nginx.md
│ README.md
│ RESTful.md
│ TCP.md
│ UDP.md
│ 从输入URL到页面加载完成的过程.md
│ 缓存.md
│ 跨域.md
│
└─面试

加油，好好复习。到时候找我内推，我帮你修改简历后内推、写推荐语（自己编辑好发给我）、内推并保持联系与你的联系。

# [关于内推你需要知道的事情](https://github.com/huyaocode/webKnowledge/issues/8)

为什么要内推？

找到熟悉 / 可靠的人去帮你内推，然后与他保持联系。你可以知道更多信息，比如：

查看面试进度信息
- 简历挂没挂？有没有把你晾在一边不管？你可知道？
- 内推人可直接帮你查看面试进度信息
填写推荐语
- 好的推荐语可以让你脱颖而出。HR是很忙的，好的简历多的是，万一他没发现你简历中的亮点把你挂了呢
特殊情况紧急联系
- 有一次我面试，A公司发了offer之后需要在几天内签约，快到期了。但是 B 公司还在面试中，B公司更好。我需要联系B公司为我加速面试流程。那次我还好好不容易联系上了，B给我一天内面了终面并保证了我的结果，最后我签了B的offer，并且可以放心大胆的放弃Aoffer。
处理速度更快

为什么少在牛客网，BOSS直聘等招聘平台或信息平台上面投递简历？

牛客网
- 牛客的讨论区被各种内推塞的满满的，热门的帖子你敢投吗？一个部门被很多人投递，你岂不是在自找难度？
- 有骗简历的风险
- 投了基本无法联系上，比如我在为什么要找内推里说的那些，你办不到
- 说海量 HC 可能只是招聘方需要海量备胎。问问内推人简历是不是太多，如果是，换一个部门。
BOSS 与拉钩等招聘平台
- 投了难以联系上，而且处理速度比内推慢
- 如果有给你发消息说看中你简历的，基本不用理会（除非你是大佬）。给你发消息的多数是机器人，你给他发了简历之后他会给你内推，但是不会管你。我是亲眼见过BOSS上用机器人发消息的。简历是很多的，HR处理给他发简历的都来不及。还有就是程序员那种，程序员天天加班没时间来给你看，对方是程序员的话很可能他就是用的爬虫。（当然也不绝对都是机器人，你自己看得出来就好）