关于前端面试知识点提纲（2021/11/24）

目录

Part1 关于学习内容（以下学习内容按排序复习）

Part2 具体的知识点

一、HTML/CSS

二、HTTP与计算机网络

三、JS

四、ES6

五、框架（React）

六、前端工程化

七、NodeJS

八、手撕代码

---

Part1 关于学习内容（以下学习内容按排序复习）

1. HTML/CSS
2. HTTP与计算机网络
3. JS
4. ES6
5. React
6. 前端工程化
7. NodeJS
8. 算法部分 （手撕代码）

Part2 具体的知识点

一、HTML/CSS

1. CSS权重及其引入方式
2. 标签的全部作用
3. 用CSS画三角形
4. 元素水平垂直居中（方案和比较）
5. 元素种类的划分
6. 盒子模型及其理解
7. 定位方式及其区别（文档流）
8. margin塌陷及合并问题
9. 浮动模型及清除浮动的方法
10. CSS定位属性
11. display及相关属性
12. IFC和BFC
13. 圣杯布局和双飞翼布局的实现
14. Flex布局
15. px，em，rem的区别
16. Less预处理语言
17. 媒体查询
18. vh与vw
19. H5的语义化作用及语义化标签
20. Web Socket和Web Worker
21. CSS3 及相关动画
22. 如何实现响应式布局
23. SEO的概念
24. H5的新特性
25. Less与Sass使用

二、HTTP与计算机网络

1. TCP/IP协议分层管理
2. 三次握手、四次挥手机制及原因
3. HTTP方法以及每次HTTP更新的新功能(解读HTTP/2与HTTP/3 的新特性（推荐）_浪里行舟的博客-CSDN博客)
4. GET与POST的区别
5. HTTP建立持久连接的意义
6. HTTP报文的结构(HTTP报文结构和内容（转） - myseries - 博客园)
7. HTTP状态码
8. Web服务器及其组成
9. HTTP报文首部
10. HTTP通用首部字段(HTTP/1.1)
11. HTTP请求首部字段、相应首部字段、实体首部字段
12. Cookie相关首部字段
13. HTTPS与HTTP区别及其实现方式
14. Cookie与Session
15. 基于HTTP的功能追加协议(SPDY、WebSocket、HTTP)
16. TCP与UDP的区别
17. 存储机制localStorage、sessionStorage与Cookie存储技术
18. XSS攻击及防御
19. CSRF攻击及防御

三、JS

1. 原始值和引用值类型及区别
2. 判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor 
3. 类数组与数组区别于转换
4. 数组的常见API
5. bind、call、apply的区别
6. new的原理
7. 如何正确判断this
8. 作用域和作用域链、执行期上下文----》闭包
9. 闭包及其作用---》垃圾回收机制---》内存泄漏
10. JS的垃圾回收机制---》内存泄漏问题
11. 原型和原型链---》继承实现
12. prototype与__proto__的关系与区别(深入__proto__和prototype的区别和联系 - -云- - 博客园)
13. 继承的实现方式及其比较
14. 深拷贝与浅拷贝
15. 防抖和节流
16. DOM常见的操作方式(http://caibaojian.com/javascript-api-collection.html)
17. Array.sort()方法与实现机制 ---》排序算法(JavaScript中Array.sort()的底层实现及应用 - 云+社区 - 腾讯云)
18. Ajax的请求过程 ---》HTTP状态码
19. JS中的String、Array和Math方法(https://www.cnblogs.com/lihuijuan/p/8490578.html)
20. addEventListener和onClick()的区别
21. new和Object.create的区别
22. Dom的location对象
23. 浏览器从输入URL到页面渲染的整个过程(涉及到计算机网络数据传输过程、浏览器解析渲染过程) ---》回流和重绘
24. 浏览器的回流和重绘
25. 跨域、同源策略及跨域实现方式和原理 ---》XSS、CSRF攻击
26. JavaScript中的arguments
27. Eventloop事件循环 ---》宏任务与微任务
28. 宏任务与微任务
29. BOM属性对象方法
30. 函数柯里化及其通用封装
31. JS的map()和reduce()方法
32. “==”和“===”的区别
33. setTimeout用作倒计时为何会产生误差 ---》EventLoop机制

四、ES6

1. let、const和var的概念和区别 ---》变量提升和暂时性死区
2. 变量提升和暂时性死区
3. 变量的解构赋值
4. 箭头函数及其this问题
5. Symbol概念及其作用
6. Set和Map数据结构
7. Proxy（vue3.0双向绑定）---》Reflect 对象
8. Reflect对象
9. Promise(手撕Promise A+规范、Promise.all、Promise相关的API和方法) ---》async/await(https://segmentfault.com/a/1190000021242711?utm_source=tag-newest)
10. Iterator和for..of（Iterator遍历器的实现）
11. 循环语法比较及使用场景（for、forEach、for...in、for...of）
12. Generator及其异步方面的应用 ---》遍历器
13. async函数（ES7）
14. 几种异步方式的比较（回调、setTimeout、Promise、Generator、async）
15. class基本语法及继承
16. 模块加载方案比较（CommonJS和ES6的Module）---》babel
17. ES6模块加载与CommonJS加载的原理

五、框架（React）

1. React自身特点及选型时考虑
2. React和Vue的异同
3. Virtual Dom ---》diff算法
4. React生命周期（16.3之前之后的差别）
5. Diff算法
6. 受控组件与非受控组件
7. 告诫组件
8. Flux架构模式（涉及MVC/MVVM、Flux）
9. 数据流方案Redux设计概念、设计原则、方法、redux实现异步流的库
10. 纯组件与shouldComponentUpdate关系
11. Redux中组件与connect函数
12. React Fiber架构
13. React Hooks的作用及原理

六、前端工程化

1. 前端工程化的流程（架构转型、业务开发、测试、打包构建、部署上线、项目监控）
2. Webpack基本概念与配置
3. loader与plugin原理与实现
4. Webpack的热模块替换即实现
5. Webpack的优化问题
6. SPA及其优缺点
7. SSR及其优缺点
8. 设计模式（工厂模式、单例模式、原型模式、代理模式、适配器模式、观察者模式等...）

七、NodeJS

1. NodeJS的基本概念及特点
2. CommonJS规范、核心模块
3. Node的异步I/O
4. Node的内存控制
5. Node构建网络服务（TCP、HTTP、Web Socket）
6. Node的进程

八、手撕代码（不全）

1. Promise（A+规范）、then、all方法
2. Iterator遍历器实现
3. Thunk函数实现（结合Generator实现异步）
4. async实现原理
5. class的继承
6. 防抖和节流
7. Ajax原生实现
8. 深拷贝的几种方法与比较
9. 继承的几种实现与比较
10. 未知宽高的元素水平垂直居中
11. 三栏布局的实现
12. 两栏布局的实现
13. React高阶组件
14. 数组去重
15. 几种排序算法的实现及其复杂度比较
16. 前序后序遍历二叉树（非递归）
17. 二叉树深度遍历（分析时间复杂度）
18.  跨域的实现（JSONP、CORS）
19. vue2.0 3.0原生双向绑定