前言
本文是《深入浅出微前端》小册课程的阅读指南，旨在帮助大家快速了解小册的课程概要。对于还未购买小册的同学，可以通过该指南罗列的问题来决策是否需要购买小册，对于已经购买了小册的同学，可以配合这些问题进行有目的性的学习，从而提高学习效率。
温馨提示：本文会随着课程的发布实时更新。
感性了解：微前端概述
- 什么是微前端？
- 微前端具备哪些特性？
- 在哪些业务场景中推荐（不推荐）使用微前端？
- 微前端中 MPA 和 SPA 方案各自有什么优缺点？
方案了解：iframe 方案
- 简述浏览器多进程架构的优点？
- Chrome 浏览器中存在哪些进程？
- 浏览器中的 Browser 主进程和 Renderer 进程有什么作用？
- 从新开一个标签页开始，讲述一下网页生成的整个过程？
- 简述浏览器的沙箱设计？
- Chrome 浏览器的插件进程是否已经沙箱化？
- 什么是浏览器的同源策略？它有什么作用？
- 多个跨站的 Web 应用处于同一个 Renderer 进程会有什么安全风险？
- 什么是站点隔离？它有什么作用？
- 什么情况下浏览器会给标签页（iframe）分配不同的 Renderer 进程？
- 为什么浏览器设计成站点隔离，而不是同源策略的源隔离？
- 跨站和跨域有什么区别？跨域的应用一定跨站吗？
- iframe 和浏览上下文存在什么关系？
- 在微前端中如何识别微应用是在 iframe 中打开？
- 微前端中的 iframe 方案有什么优点和缺点？
- 在浏览器中绕过同源策略限制的解决方案有哪些？是否存在安全风险？
方案了解：NPM 方案
- 为什么 JavaScript 需要模块化规范？
- 为什么在浏览器中使用 ES Module 规范开发需要通过 HTTP 请求的形式？
- 在浏览器中使用 ES Module 规范进行开发的优势有哪些？
- 浏览器中如何设置 ES Module 引入路径的别名？
- CommonJS 模块和 ES Module 模块有什么区别？
- Vite 开发态热更新速度快的主要原因是什么？
- 为什么需要在 Web 应用的开发中使用 Webpack、Vite、ESBuild 等工具？
- 大部分浏览器兼容的最高 ECMAScript 标准是多少？
- 为什么需要对业务组件进行产物构建发布？如果不构建直接发布源码会有什么问题吗？
- 业务组件和 Web 应用的产物构建存在哪些差异？
- 为什么大部分应用使用 babel-loader 进行转义时推荐屏蔽 node_modules 目录？
- 在什么情况下对应用和业务组件进行构建时需要使用 Polyfill?
- 使用 Rollup 和 Webpack 等构建输出的 ES Module 模块和 ES6+ 源码存在什么区别？
- 使用构建工具构建 ES Module 模块的好处是什么？
- 微前端中的微应用和业务组件的构建存在什么差异？
- 微前端 NPM 方案有什么优点和缺点？
- 微前端 NPM 方案适用于哪些业务场景？
- 如何解决在主应用中实时调试微应用 NPM 包的源码问题？
方案了解：动态 Script 方案
- 微前端中的动态 Script 方案如何实现？
- 在动态 Script 方案中如何实现 CSS 样式的激活和失效？
- 通过
script标签动态加载 JS 文件后删除script标签，JS 文件的代码还会执行吗？ - 针对上述问题，如果删除 JS 文件后代码不执行，会有什么副作用？
- 删除 JS 文件和删除后再次添加有什么区别？
- 通过
link标签动态加载 CSS 文件后删除link标签，CSS 文件对应的样式还会生效吗？ - 微前端动态 Script 方案相对于 NPM 方案有哪些优势？
- 微前端动态 Script 方案存在哪些问题？
方案了解：Web Components 方案
- 什么是 Web Components?
- Web Components 的浏览器兼容情况？如何处理浏览器的兼容性问题？
- Web Components 的生命周期回调函数有哪些？
- 微前端中的 Web Components 方案如何实现？
- Web Components 相对于动态 Script 方案有哪些优势？
方案了解：Cookie 处理
- 实现微前端中子应用免登的方案有哪些？
- 跨域情况下 LocalStorage 和 Cookie 能否共享？
- 主子应用同域的情况下使用 Cookie 可能存在什么潜在风险？
- 如何实现本地 IP 地址和自定义域名的关系映射？
- 本地系统的 hosts 文件匹配和 DNS 域名解析的差异是什么？
- 同一个 IP 地址可以映射不同的域名吗？
- 主应用和 iframe 子应用跨域同站的情况下能否共享 Cookie?
- Cookie 的 SameSite 属性有什么作用？
- Chrome 浏览器将 SameSite 默认值设置为 Lax 是为了解决什么问题？
- Chrome 浏览器中主应用和 iframe 子应用跨站时，iframe 子应用默认能够携带 Cookie 吗？
- Chrome 浏览器中 iframe 子应用跨站时，如何才能携带 Cookie?
- 为本地的 Node 服务建立 HTTPS 连接的方式有哪些？
- 主应用和 iframe 子应用跨站的情况下能否共享 Cookie? 为什么呢？
- 主子应用如何做到不同的服务地址前端应用不跨域？
- Web 前端应用跨站发送 Ajax 请求时能否携带 Cookie? 如何才能携带 Cookie?
框架原理：微前端框架设计要素
- 简述在地址栏中输入 URL 地址后浏览器的整个运行过程？
- 浏览器中的网络服务是一个独立的进程还是线程？
- 标签页应用的生命周期状态和事件有哪些？
- 浏览器中如何做到应用内的 DOM（CSS） 和 JS 隔离？
- 站点隔离和跨源隔离的区别是什么？
- 浏览器内部提升加载性能的功能有哪些？
- 什么是导航预加载，如何实现导航预加载？
- 什么是 Resource Hints？什么是 Early Hints?
- 简单描述一下标签页应用的多级缓存设计以及缓存的触发顺序？
- 一个通用的微前端框架大致需要包含哪些设计要素？
框架原理：V8 隔离
- 在同一个 SPA 应用中动态加载两个不同的 Script 时为什么会产生同名属性冲突？
- 如何解决动态 Script 中的同名属性冲突问题？
- 不同的标签页应用、标签页和 iframe 应用为什么可以隔离 JS 运行时？
- V8 是如何做到 JS 运行时隔离的？
- V8 中的 Context 和 Isolate 有什么作用？
- V8 中为什么需要 Context?
- 什么是全局执行上下文栈？它有什么作用？
- V8 中的 Isolate 和 Context 隔离有什么差异？
- 浏览器的 Web 应用中有可以实现 Isolate 或者 Context 隔离的 Web API 吗？
- 浏览器的 Web 应用中隔离 JS 运行时的功能有哪些？
框架原理：iframe 隔离
- 什么是 iframe 隔离？
- iframe 隔离和 iframe 方案有什么区别？
- 使用 iframe 隔离存在哪些优势？
- iframe 的
src设置成about:blank后会和主应用形成跨域吗？ - 将 iframe 的
src设置成about:blank后内部的 JS 运行时环境会存在什么限制吗？ - Vue 或者 React 框架的 Hash 路由和 History 路由有什么差异？
- 如何生成一个和主应用完全同域的 iframe 页面？
- iframe 隔离相对于 iframe 方案存在哪些优势？
- 如何解决 iframe 隔离中的白屏问题？
- 如何解决 iframe 和主应用的 URL 同步问题？
- 如何解决 iframe 中的模态框无法相对于主应用进行居中的问题？
- iframe 和主应用同域后有哪些优势和注意事项？
框架原理：iframe + Proxy 隔离
- Proxy 常用的拦截操作有哪些？
- iframe 的
src设置成about:blank后如何解决 History API 报错的问题？ - 模块作用域中声明的
var变量是全局变量还是局部变量？ - 在函数作用域内声明的变量
var是全局变量还是局部变量？是否有方式可以将var声明的变量通过 Proxy 进行拦截处理？ with+Proxy可以阻止作用域链查找吗？如何才能做到？- 代理后的
window对象执行alert、addEventListener等原生函数会存在什么问题？如何解决该问题？ - 执行
bind操作有什么副作用吗？
框架原理：快照隔离
- 快照隔离的思路是什么？
- 自执行匿名函数有什么特点？
- 将微应用放在自执行的匿名函数中运行可以解决隔离的哪些问题？又会产生什么问题？
- 通过 HTTP 请求获取的 JS 文本字符串有哪些手动执行的方式？
eval和Function存在哪些差异？- 如何使
eval在全局作用域生效？ - 简单描述快照隔离的实现过程？
- 快照隔离的限制有哪些？
框架原理：CSS 隔离
- 主应用和微应用在同一个 DOM 上下文时，实现 CSS 样式隔离的思路有哪些？
- 如果一个时刻只运行一个微应用，实现 CSS 样式隔离的方式有哪些？
- 通过动态删除微应用的 Style 标签来减少样式影响面有什么限制的使用场景吗？
- 在 Shadow DOM 中隔离 CSS 的优势是什么？有什么缺点吗？
- 在 Shadow DOM 中运行低版本的 React 框架为什么会导致 React 事件失效？
框架原理：通信原理
- 观察者模式和发布 / 订阅模式的区别是什么？
- 列举浏览器中常见的观察者模式设计的通信案例？
- 列举常见的发布 / 订阅模式的通信案例？
- MVC、MVP 和 MVVM 中会使用哪种模式进行通信？
- Vue.js 的响应式设计中使用了哪种模式进行设计？
- 简单描述一下观察者模式的概念？
- 简单描述一下发布 / 订阅模式的概念？
- 在微前端中应该使用哪种模式进行通信？
postMessage属于观察者模式还是发布 / 订阅模式？
框架原理：性能优化
- 简述 HTTP 缓存的作用
Expires和Cache-Control: max-age=N有什么区别？Cache-Control: no-cache和Cache-Control: no-store有什么区别？Cache-Control: max-age=N和Cache-Control: s-maxage=N有什么区别？Expires在什么情况下缓存可能会计算错误？Last-Modified和Etag有什么区别？- 使用
Last-Modified进行缓存可能会有哪些问题？
工程设计：设计要素
- 设计一个工具库时需要考虑哪些工程化设计要素？
工程设计：构建工具
- Web 应用的构建需要具备哪些构建特性？
- 在 Webapck 中进行语法转译可以使用什么工具？
- Web 应用在进行打包时为什么希望忽略
node_modules中的库包转译？ - Webpack 构建的 JavaScript 脚本具有什么特性？
- Webpack 进行代码分离的作用是什么？
- Webpack 默认能对 ES6 进行 ES5 编译吗？
- 库的设计为什么需要构建工具？如果不构建会有什么影响？
- 库的设计在进行构建时需要具备哪些特性？
- 如何设计一个库可以支持应用在构建时使用 Tree Shaking 特性？
- 构建工具的类型有哪些？
- 列举常用的打包工具和转译工具？
- 如果使用打包工具设计库构建，需要考虑哪些构建配置处理，对比 Web 应用的构建存在什么差异？
- 打包工具和转译工具有什么差异？
- 组件库和工具库的构建存在什么差异？
- 使用转译工具设计库包的按需加载有哪些优势？
- 支持 TypeScript 转译的工具有哪些？各自有什么特点？
工程设计：按需加载
- 为什么在库的设计中需要考虑按需加载？
- 哪些类型的库不需要考虑实现按需加载？
gulp-typescript具备类型检查的能力吗？在构建时能够自动产出声明文件吗？- 如何向
package.json的 script 中的 node 脚本设置环境变量或者传递参数？ - 如何实现平铺构建产物？需要考虑哪些内容的平铺处理？
工程设计：版本发布
package.json中的字段有哪些？各自有什么作用？- 描述一下发布 NPM 库包的完整流程？
- 如何查询库包已经发布的最新版本？如何进行本地版本和发布版本的比较？
- 在多人协作的过程中如何对发布进行管控从而提高发布的稳定性？
- 如何设置一个受保护的分支？使其不能被 push 或者强制 push 代码到远程？
- 如何设计一个 node 脚本来判断本地和远程的 master 分支代码一致？
- semver 2.0 中的三位数版本号中 X.Y.Z 各自代表什么含义？
- 库包中的依赖类型有哪些？生产依赖和开发依赖相对于发布的库包有什么区别？
- semver 通配符中常见的
^1.0.0、~1.0.0是什么含义？ package-lock.json的作用是什么，使用它有什么好处？npm i和npm ci的区别是什么？
工程设计：代码检查
- 什么是代码检查？为什么需要在 JavaScript 中进行代码检查？
- 代码检查的工具有哪些？
- ESLint 和 TSLint 有什么区别？
- TypeScript 为什么要全面从 TSLint 转向 ESLint?
- ESLint 中的配置文件类型有哪些？各自的优先级是什么？
- ESLint 中的层叠配置有什么作用？能否举个可实践的例子？
- ESLint 的自定义解析器有什么作用？
- ESLint 的插件有什么作用？如何基于插件进行规则设置？
- ESLint 的日志风格有哪些？
- ESLint 的共享配置有什么作用？能否举一个最佳实践的例子？
- ESLint 的共享配置能否配合 ESLint 插件使用？
- ESLint 中的解析器、插件和共享配置的差异是什么？
- 如果让你设计一套代码风格指南，并配合 ESLint 工具进行约束，你会如何设计？
- 如何在写代码时实时获取 ESLint 校验提示信息？有哪些可行的方案？
- 在 VS Code 的 ESLint 插件中如果有校验错误信息，VS Code 会如何表现出来？
- 如何实现 VS Code 的 ESLint 插件的自动保存格式化功能？
- VS Code 的配置有哪两种类型？如何在团队内共享 VS Code 的 ESLint 配置？
- 如何确保构建的代码没有 ESLint 错误？
工程设计：代码格式
- 为什么需要使用 Prettier 进行代码格式化？
- ESLint 和 Prettier 有什么区别？
- ESLint 和 Prettier 组合使用时如果有规则冲突，应该如何处理？
- 如何检查项目中的 ESLint 和 Prettier 是否存在规则冲突？
- 如何实现 Prettier 插件的保存自动格式化功能？
工程设计：提交规范
- 什么是 Git 钩子？
- 如何才能跳过本地的 Git 钩子执行？
- 什么是 Shebang？它有什么作用？
- 在 Git 钩子中可以使用 Node 脚本进行设计吗？
- Git 钩子的类型有哪些？Git 钩子有什么作用？
- 团队协作中在本地设计 Git 钩子会有什么问题？
- 社区用于增强 Git 钩子的工具有哪些？为什么需要设计这些增强工具？
- 如何设计一个 Git 钩子可以在检测 ESLint 失败后放弃提交代码？
- 如何设计一个可共享 Git 钩子目录的项目？
- NPM 的 Life Cycle Scripts（Script 钩子）有哪些？各自有什么作用？
- 如何将 NPM 包封住成 CLI 工具？如何基于 Node 设计 CLI 工具？
- npm 和 npx 有什么区别？
- 简述 husky 的工作原理？
- 如何共享一个 Git 钩子，可以使得 ESLint 校验失败后放弃代码提交？
- 简述 lint-staged 的工作原理？
- 如何使用 Node 脚本获取 Git 暂存区的文件列表？
- 相对于普通的 ESLint 校验，使用 lint-staged 的好处是什么？
原理进阶：浏览器的线程和任务
- 简述 Chrome 浏览器多线程架构的优点？
- Renderer 进程中有哪些线程？
- 简述 Chrome 线程中的任务执行机制？
- Renderer 主线程组要负责哪些任务工作？
- 如何查看浏览器中页面的执行任务？
- Web 页面中的 JavaScript 为什么是单线程的运行模式？
- Web 页面中的 JavaScript 编译执行和 UI 渲染为什么需要互斥？
原理进阶：V8 的编译原理
- 什么是解释器？什么是编译器？两者有什么区别？
- 前端和后端编译器的作用是什么？
- 中间表示 IR 的作用是什么？
- 优化编译器如何实现对代码的编译优化？
- 什么是 JIT，它有什么优缺点？
- 解释器、传统编译器和 JIT 编译器有什么区别？
- 解释器和 JIT 编译器的混合使用有什么优势？
- 早期的 JavaScript 为什么采用解释执行的方式运行？
- JavaScript 是解释型语言还是编译型语言？
- 简述 JavaScript 的编译原理？
- V8 在编译的过程中将 JavaScript 转换成字节码有什么优势？
- 弱类型和强类型、静态类型和动态类型语言的区别？
- 一二三地址指令寄存器架构各自有什么优缺点？
- V8 在什么情况下会对 JavaScript 代码进行优化和去优化？
原理进阶：V8 的嵌入实践
- 将 C++ 源代码编译成可执行文件需要经历哪几个编译步骤？
- C++ 的编译工具有哪些？
- GNU 的 gcc 和 clang 有什么区别？
- clang 和 LLVM 有什么关联关系？
- g++ 和 gcc 有什么区别？
- C++ 中静态库和动态库有什么区别？各自有什么优缺点？
- 如何制作 V8 的静态库？
- 如何在 Mac 的命令终端中添加环境变量？
- g++ 有哪些编译参数？宏定义参数有什么作用？
- 什么是 Homebrew？它有什么作用？
- 如何下载和使用 V8 动态库？
- 如何使用 CMake 编译 V8 应用？
- V8 可以独立使用吗？
原理进阶：V8 的概念说明
- V8 除了可以在 Chrome 和 Node.js 中使用，还可以在哪些应用场景中使用？
- 小程序中应用的双线程架构的优缺点是什么？
- 列举你所知道的 JavaScript 引擎？
- 在 Andriod 和 iOS 中的 JavaScript 引擎都是 V8 吗？
- 如何在 C++ 应用中执行 JavaScript 文件？
- 什么是 Isolate，它的作用是什么？
- 什么是 HandleScope，什么是 Handle，它们的作用是什么？
- 什么是 Context，什么是全局上下文栈，它们的作用是什么？
- Isolate 隔离和 Context 隔离的区别是什么？为什么需要这两个不同的概念？
- 全局上下文栈和执行上下文栈的关联关系是什么？
- 执行上下文栈和作用域链有什么关联关系？