frontend_knowledge_structure

Questions and answers about front-end

1. HTML

1. HTML5与HTML4之间的区别

2. DOCTYPE到底有什么作用？

3. html中meta标签有哪些？都有什么作用？

4. 如何理解移动端的viewport?

5. src和href引入资源的区别

6. script标签的defer和async属性的区别

7. html中引入css的方式有几种？

8. cookie VS sessionStorage VS localStorage

9. preload和prefetch的作用是什么？有什么区别？

2. CSS

1. 块级元素、行内元素和块级行内元素之间的区别

2. CSS盒模型

3. CSS布局模型

4. float布局中的不完全脱离文档流、高度塌陷和清除浮动的方法

5. 块级格式化上下文（BFC）是什么？有什么作用？

6. 层叠上下文和z-index

7. CSS动画的实现方式有哪些？CSS动画 VS JS动画?

8. CSS样式权重和优先级

9. CSS选择器的解析顺序为什么要从右到左？

10. 负margin值的应用：圣杯布局和双飞翼布局

11. 深入理解line-height和vertical-align

12. inline-block元素之间为什么会产生间隙？怎么解决？

13. 水平居中、垂直居中和垂直水平居中的方式

14. CSS实现一个三角形和自适应正方形

3. Javascript

3.1 javascript中的数据类型

1. js中有哪些数据类型

2. js对象类型

3. js中类型检测的方法有哪些？

4. JS类型转换

5. 隐式转换 : ==号两边的数据的类型转换规则

6. ==、===和Object.is()有什么区别？

7. JS中的位运算

8. 手写instanceof操作符

3.2 变量、函数、作用域和闭包

1. 编译器、JS引擎和作用域之间有什么关系？

2. 作用域和作用域链

3. 执行栈和执行上下文

4. 变量声明提升的原理是什么？

5. 定义变量的方式有哪些？有什么区别？

6. 闭包是什么？有什么作用？

7. 实现柯里化函数

8. 防抖和节流

3.3 this关键字

1. 谈谈this机制？

2. 普通函数 VS 箭头函数

3. 手写一个bind方法

4. 手动实现一个call和apply方法

3.4 JS中的类、继承和行为委托

1. 谈谈JS中的类的本质是什么

2. 原型和原型链是什么？

3. 对比js中的继承方案

4. 类 VS 行为委托

5. 实现一个new方法

3.5 JS异步解决方案

1. S中的异步实现和EventLoop

2. JS中异步编程方案的演化过程

3. 深入理解Promise以及手动实现一个Promise

4. 深入理解Generator及其在异步方案中的作用

5. 深入理解async+await

3.6 JS循环和迭代器

1. 深入理解迭代器和Generator

2. for...of循环和forEach之间的区别

3. 实现一个可以用for...of遍历的对象

3.7 模块化

1. 前端模块化的演变过程

2. 深入理解CommonJS在node中的实现

3. 深入理解ES Module

4. CommonJS和ES Module之间的区别

3.8 数组和对象

1. 类数组对象和数组的关联

2. 数组去重

3. 数组平铺

4. 手动实现一个数组map方法

5. 手动实现一个filter方法

6. 手动实现一个reduce方法

7. 分析V8中的sort方法并手动实现一个

8. 数组乱序

9. Object的浅拷贝和深拷贝

4. 框架篇

4.1 React源码解析

1. React架构演变

2. Fiber架构的实现原理

3. 结合源码分析render阶段

4. 结合源码分析Diff算法的实现

5. commit - before mutation

6. commit - mutation

7. commit - layout

8. 结合源码解析Scheduler的实现

9. update - 创建update

10. update - 调度update

11. update - 执行update

12. React Hooks的设计理念

13. Hook - Hooks的数据结构和更新流程

14. Hook - useState和useReducer

15. Hook - 保存无副作用状态：useCallback、useMemo和useRef

16. Hook - Effects的数据结构和调用流程

17. Hook - useEffect 和 useLayoutEffect

18. 结合源码分析React事件系统

19. 批量更新的实现原理

20. 结合源码分析Context的实现

21. 结合React源码分析Suspense的实现原理

22. 结合源码分析useTransition

23. 结合源码分析useDeferredValue

4.2 React应用相关

1. react-hook-form 源码解析

2. 结合React源码谈谈虚拟列表的实现和优化思路

5. 微前端

1. 微前端（MicroFrontEnd） - 分而治之

2. 结合qiankun源码分析基本执行流程

3. qiankun中CSS沙箱的实现

4. qiankun中JS沙箱的实现

5. qiankun中应用之间的通信方案

6. qiankun多实例模式的实现

6. Javascript宿主环境

6.1 浏览器

6.1.1 跨域

1. 什么是跨域？
2. 实现跨域请求的方法

6.1.2 前端安全

1. 谈谈XSS攻击

2. 谈谈CSRF

6.1.3 渲染原理

1. 浏览器中的进程和线程

2. 谈谈复合图层

3. 浏览器帧和EventLoop

4. 详细分析页面首次渲染和JS、CSS资源的关系

6.2 V8

7. 前端工程化

7.1 webpack

1. 打包速度的优化策略
2. 体积优化策略
3. webpack如何实现懒加载

8. 性能优化

1. 从URL到页面输出中间经历了哪些过程？
2. 性能优化—网络层面
3. 性能优化—渲染层面
4. 性能优化—应用层优化

9. 数据结构和算法

9.1 数组和字符串

1. 常用的排序算法

9.2 堆

1. 堆和堆的经典场景

10. 计算机基础

10.1 tcp

1. 谈谈TCP协议
2. TCP协议对比UDP协议

10.2 http

1. 谈谈http协议
2. http请求的方法对比
3. 常见的http响应状态码
4. 常见的请求头和响应头
5. 谈谈http缓存
6. http各版本之间的差异
7. http与https之间的对比

11. 设计模式