前言
本文是《深入浅出微前端》小册课程的阅读指南,旨在帮助大家快速了解小册的课程概要。对于还未购买小册的同学,可以通过该指南罗列的问题来决策是否需要购买小册,对于已经购买了小册的同学,可以配合这些问题进行有目的性的学习,从而提高学习效率。
温馨提示:本文会随着课程的发布实时更新。
感性了解:微前端概述
- 什么是微前端?
- 微前端具备哪些特性?
- 在哪些业务场景中推荐(不推荐)使用微前端?
- 微前端中 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 隔离的区别是什么?为什么需要这两个不同的概念?
- 全局上下文栈和执行上下文栈的关联关系是什么?
- 执行上下文栈和作用域链有什么关联关系?