五万字前端面试宝典——前端百题斩（上）新鲜出炉

从2021年5月9号开始更新《前端百题斩》，目前终于取得了阶段性成果，《前端百题斩》上册已经更新完毕，内容包括JS基础篇、浏览器篇、网络篇，共计50个章节，5万多字。关注公众号“执鸢者”回复“百题斩”获取pdf版本

写这个系列的文章是有一定缘由的，遥想公瑾当年，小乔初嫁了（额，跑题了），作为一个机械专业出身的程序猿【 (>‿◠)）】，深知自学的痛苦与无助，迫切希望有一本系统的前端学习面试笔记，全面了解和掌握前端高频知识点。结合四年多的自学经验，我开始着手更新《前端百题斩^[1]》系列文章，对高频的前端知识要点进行提炼和总结，融入个人的思考，希望对每位如我当年一样的前端初学者有所助益，互相学习，共同进步！

一、前端百题斩思维导图

下面来看看《前端百题斩》上册的思维导图，通过该思维导图就可以了解其主要知识点，对面试的关键脉络有清晰的认识。

前端百题斩思维导图3.png

二、内容概要

1. typeof与instanceof

typeof和instanceof是js中的两个关键运算符，用于判断变量类型，通过本节可以了解两者的使用、原理，并通过理论与实践相结合验证其原理。

2. js中的六种声明变量的方式

js中共有6种声明变量的方式，分别为var、let、const、function、class、import，通过本节将了解该六种方式的使用及其相应特点。

3. 基本类型和引用类型

通过本节将了解到基本类型和引用类型包含的内容有哪些以及它们的特点是什么。

4. 包装对象

通过本机将了解字符串、数字、布尔值为什么能够调用属性和方法，其后台对象执行流程是什么。

5. 遍历对象属性的方法

对象是在编程中最常见的部分，很多情况下需要遍历该对象上的属性，那么有几种方式可以帮助我们遍历该对象上的属性呢？通过本节将了解九种方法。

6. JavaScript字符串转数字的方式

js中字符串转数字主要有三种方式：利用转换函数、强制类型转换、利用js变量弱类型转换,通过本节将了解这三种方式。

7. 判断js数据类型的四种方法

js有多种数据类型（Number（数值）、String（字符串）、Boolean（布尔值）、Null、Undefined、Symbol、Object、函数等）,通过本节的四种判断方法完美解决类型判断问题。

8. JavaScript代码的执行过程

在V8中，JavaScript是如何进行执行的？何时生成执行上下文？js执行过程中存在机器码吗？通过本节将对这些问题有一个完整的了解。

9. 函数执行过程

js中一个函数是如何执行的，其包含确定执行环境、创建阶段、执行阶段、执行完毕等待被回收的过程，通过本节将对整个过程有一个完整了解。

10. 执行上下文

通过本文将了解执行上下文的类型、包含内容、执行上下文生命周期、代码执行过程等内容，对执行上下文有一个完整的了解。

11. 变量对象

通过本文将了解变量对象的创建过程、变量对象与活动对象的关联以及全局上下文变量对象。

12. 作用域及作用域链

通过本文将了解什么是作用域以及作用域链，并通过实战将这些概念串联起来。

13. 闭包

通过本文将了解闭包的定义、实现、用途、优缺点以及一些经典的面试问题。

14. this

通过本文将了解什么是this、this的作用是什么、this的指向是什么、如何改变this指向等关键知识点，一次性将this了解清楚。

15. call、apply、bind实现

通过本文将了解改变this指向的三个方法call、apply、bind的基础知识和相应的实现原理。

16. 原型/构造函数/实例

通过本文将了解什么是原型、什么是构造函数、什么是实例，从而进一步了解三者之间的关系。

17. 原型链

通过本文将了解什么是原型链、原型链的查找流程是什么，进一步可原型链中属性的查找和修改机制。

18. new操作符

new的作用是通过构造函数来创建一个实例对象,那么new过程中发生了什么呢？通过验证的方式测试这样验证点，从而实现一个new操作符。

19. 数组中的三个方法实现原理

数组中有三个常用方法：map、filter、reduce，那么这三者的实现原理呢？通过本文你将有一个深刻理解。

20. 五种方式实现数组中的flat方法

ES6中新增了flat这个方法，该方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回，那么不支持该方法的环境中该如何处理呢？本文将用五种方式来进行实现。

21. 防抖与节流

性能一直是前端老生常谈的一个话题，其中有一个性能问题就是我们会频繁的触发一些事件，例如mousemove、scroll、resize等，虽然浏览器已经对这些事件的触发做了一些优化，但是如果在很短的时间内频繁的触发仍然会影响性能，这个时候就需要本文的主角：防抖和节流，利用它们来进行优化，提高性能。

22. 三种方式将一个字符串转换成驼峰形式

相信大家都遇到过这样一个问题：将'-'连接的字符串转换为驼峰形式，例如将hello-word转换为helloWorld。这个问题虽然简单，但是如果仅仅用一种方案进行解决不能体现 出自己的能力，如果要想表现的与众不同，就要用多种方式解决。本文就通过三种方式解决该问题。

23. 赋值、浅拷贝、深拷贝

不管是面试还是工作中，经常会遇到三种数据操作方式：赋值、浅拷贝、深拷贝，如果不将这三种搞清楚，很容易会让系统遇到bug，本文将详细介绍这三者。

24. 六种异步方案

为了提高系统性能，引入了异步，那么有哪些异步解决方案呢？本文将带你了解六种异步方案：回调函数、事件监听、发布订阅模式、Promise、Generator、async。

25. Promise原理及实现

Promise在编程中用经常使用，但是很多情况下对其只限于会使用，但并没有进一步了解，通过本文将了解什么是Promise、其优缺点是什么、该对象又有什么特点、如何根据Promise/A+规范实现Promise等。

26. Async原理实现

在开发过程中常用的另一种异步方案莫过于Async，通过async函数的引入使得异步操作变得更加方便,通过本文将了解Async的实现原理。

27. 发布/订阅实现

发布/订阅模式在观察者模式的基础上，在目标和观察者之间增加一个调度中心。订阅者（观察者）把自己想要订阅的事件注册到调度中心，当该事件触发的时候，发布者（目标）发布该事件到调度中心，由调度中心统一调度订阅者注册到调度中心的处理代码。通过本文将从零到一四线发布/订阅模式。

28. 七种排序算法

通过本文将通过七种排序算法实现排序，这七种排序算法分别是：冒泡排序、选择排序、插入排序、归并排序、快速排序、堆排序、桶排序。

29. 浏览器的存储

通过本文将了解浏览器支持的五种存储方式：localStorage、sessionStorage、IndexedDB、WebSQL、Cookie。

30. 刨根问底为跨域分类

通过本文将了解同源策略是如何在DOM层面、数据层面、网络层面保证浏览器安全性的，但是限制过多则会让程序员的开发工作举步维艰，所以浏览器需要在最严格的同源策略限制下做一些让步，这些让步更多了是在安全性与便捷性的权衡，跨域解决方案就是出让一部分安全性提高开发便捷性。

31. 浏览器出让安全性造就JSONP

通过本文将了解JSONP的基本思想、实现原理，并根据该原理实现JSONP。

32. 一文了解CORS

通过本文将通过理论与实践相结合的方式帮助了解CORS，用不一样的方式加深对CORS的理解。

33. 浏览器中的三类五种请求

通过浏览器的控制台可以看到访问一个页面的时候会发起多个请求，并且这一系列请求会被分为多个类别，本文通过总结将该请求分为三类五种：一般请求、Ajax请求（XHR、Fetch、Axios）、WebSocket请求。

34. 浏览器进程有哪些

通过本文将了解多进程浏览器包含的进程类型：浏览器进程、渲染进程、GPU进程、网络进程、插件进程。

35. 浏览器的渲染流程

通过本文将了解浏览器的渲染流程，主要包含构建DOM树、样式计算、布局阶段、分层、图层绘制、分块、栅格化操作、合成和显示。

36. 重绘和回流

“重绘和回流”就会导致浏览器触发更新，重新进行渲染绘制，通过本文将了解这两者，并探索减少重绘和回流的解决方案。

37. 事件循环

通过本文将了解任务分类（广义分类、精确分类）、事件循环流程（同步和异步角度、宏任务和微任务角度），进一步通过一道高频面试题了解事件循环。

38. 网络体系结构

通过本文将了解网络体系结构的划分标准以及七层体系结构中各层的作用。

39. HTTP0.9——HTTP3.0进化史

通过本文将了解HTTP进化史，整个流程包含：HTTP/0.9、HTTP/1.0、HTTP/1.1、HTTP/2.0、HTTP3.0。

40. HTTP缓存机制

通过本文将了解HTTP的缓存机制，包含强缓存和协商缓存。

41. 强缓存引起的问题及解决方案

强缓存的资源由于不会向服务器发起验证，所以存在一些问题，即发布时资源更新问题，更新了资源，但是用户每次请求时依然从缓存中获取原来的资源，除非用户清除或者强刷新，否则看不到最新的效果,通过本文将探索其解决方案方案。

42. 浏览器中请求内容的来源

打开浏览器开发者工具的Network，观察Size列经常看到三种情况：memory cache、disk cache、资源本身大小,通过本文将了解其类型含义及资源查找流程。

43. TCP和UDP的区别

通过本文将五个方面对比TCP和UDP（连接方面、数据传输可靠性方面、实时性方面、连接数量方面、资源需求方面）。

44. TCP中流量控制和拥塞控制

通过本文将了解TCP中的两个重要策略：流量控制、拥塞控制，并进一步对比两者的区别。

45. TCP中三次握手和四次挥手全过程

通过本文将了解TCP中三次握手和四次挥手全过程。

46. HTTP协议中的请求报文和响应报文组成

通过本文将了解HTTP协议中的请求报文和响应报文的组成，方便在调试程序中读懂其请求和响应内容的含义。

47. 状态码301和302的区别

301和302状态码均表征重定向，通过本文将详细了解这两个状态码及相应的区别。

48. HTTPS那些事

本文将从HTTP的缺点为切入点，进一步了解HTTPS的各个关键技术点及整个流程。

49. 两种攻击方式（XSS、CSRF）

通过本文将了解面试中常见的攻击方式有两种：XSS、CSRF。

50. 从浏览器输出一个url到页面展示都经历了什么

本文将通过十五张图来详细常数从浏览器输入一个url到页面展示全流程。

1.如果觉得这篇文章还不错，来个分享、点赞、在看三连吧，让更多的人也看到～

2.关注公众号执鸢者，领取学习资料，定期为你推送原创深度好文

3. 《前端百题斩（上）》pdf版新鲜出炉，关注公众号回复“百题斩”获取。

[1] 前端百题斩