docs：update (#14)

* update * update * update * update * chore: ci update * update * fix: pnpm workspace * chore: ci update * docs:update * docs:update * update * update * docs: add new * docs: add koa * docs:update http * docs:update * docs: update network * docs:update
aaronlamz · Nov 26, 2023 · 9ee999b · 9ee999b
1 parent 16f550a
commit 9ee999b
Show file tree

Hide file tree

Showing 15 changed files with 777 additions and 64 deletions.
diff --git a/packages/interview/docs/.vitepress/config.ts b/packages/interview/docs/.vitepress/config.ts
@@ -37,7 +37,8 @@ export default defineConfig({
  { text: '变量提升', link: '/javascript/hosting.md' },
  {
  text: 'EventLoop', link: '/javascript/event-loop.md'
- }
+ },
+ { text: 'new 底层实现', link: '/javascript/new.md' },
  ]
  },
 
@@ -138,6 +139,9 @@ export default defineConfig({
  collapsed: true,
  items: [
  { text: '介绍', link: '/nodejs/' },
+ { text: 'Express、koa、egg有什么区别', link: '/nodejs/express-koa-egg.md' },
+ { text: '进程管理工具', link: '/nodejs/process-manager.md' },
+ { text: 'koa 中间件原理', link: '/nodejs/koa-middleware.md' },
  ]
  },
  {
@@ -151,6 +155,9 @@ export default defineConfig({
  {
  text: 'HTTP 协议', link: '/network/http.md'
  },
+ {
+ text: 'HTTP 缓存', link: '/network/http-cache.md'
+ },
  {
  text: 'HTTP 协议升级', link: '/network/http-upgrade.md'
  },
@@ -163,14 +170,12 @@ export default defineConfig({
  {
  text: 'UDP 协议', link: '/network/udp.md'
  },
- {
- text: 'WebSocket 协议', link: '/network/websocket.md'
- },
-
  {
  text: 'CDN', link: '/network/cdn.md'
  },
-
+ {
+ text: 'DNS', link: '/network/dns.md'
+ }
  ]
  },
  {
@@ -183,6 +188,8 @@ export default defineConfig({
  { text: 'preload和prefetch', link: '/performance/preload-prefetch.md' },
  { text: 'defer和async', link: '/performance/defer-async.md' },
  { text: 'css是否会阻塞页面渲染', link: '/performance/css-block.md' },
+ { text: '长列表优化方案', link: '/performance/long-list.md' },
+ { text: '浏览器白屏原因及优化方案',link: 'performance/white-screen.md'}
  ]
  },
  {
@@ -192,6 +199,7 @@ export default defineConfig({
  { text: '介绍', link: '/build-tool/' },
  { text: 'webpack工作原理', link: '/build-tool/webpack.md' },
  { text: 'webpack优化策略', link: '/build-tool/webpack-optimization.md' },
+ { text: 'tree-shaking 实现原理', link: '/build-tool/tree-shaking.md' },
  { text: 'webpack、rollup、vite 等工具适用场景及优缺点', link: '/build-tool/webpack-rollup-vite.md' },
  ]
  },
@@ -210,15 +218,15 @@ export default defineConfig({
  ]
  },
  {
- text:'安全',
+ text: '安全',
  collapsed: true,
  items: [
  { text: '介绍', link: '/security/' },
  { text: 'XSS', link: '/security/xss.md' },
  { text: 'CSRF', link: '/security/csrf.md' },
  { text: 'CORS', link: '/security/cors.md' },
  { text: 'JWT', link: '/security/jwt.md' },
- { text: '中间人攻击' , link: '/security/mitm.md'},
+ { text: '中间人攻击', link: '/security/mitm.md' },
  ]
  },
  {
@@ -230,12 +238,6 @@ export default defineConfig({
  { text: '最有挑战性的项目是什么？', link: '/open-question/challenge.md' },
  { text: '最有价值的项目是什么？', link: '/open-question/value.md' },
  { text: '最有意思的项目是什么？', link: '/open-question/interesting.md' },
- { text: '最有难度的项目是什么？', link: '/open-question/difficulty.md' },
- { text: '最有成就感的事情是什么？', link: '/open-question/achievement-thing.md' },
- { text: '最有挑战性的事情是什么？', link: '/open-question/challenge-thing.md' },
- { text: '最有价值的事情是什么？', link: '/open-question/value-thing.md' },
- { text: '最有意思的事情是什么？', link: '/open-question/interesting-thing.md' },
- { text: '最有难度的事情是什么？', link: '/open-question/difficulty-thing.md' },
  ]
  },
  {

diff --git a/packages/interview/docs/build-tool/tree-shaking.md b/packages/interview/docs/build-tool/tree-shaking.md
@@ -0,0 +1,25 @@
+# tree-shaking 实现原理
+
+Tree-shaking 是一种通过静态分析移除 JavaScript 中未引用代码的技术。这一术语来源于想象一个树上挂着未使用的代码，这些代码像枯叶一样被“摇动”（shaken）掉。Tree-shaking 的实现原理依赖于 ES6 模块的静态结构特性，允许工具在编译阶段确定哪些导出被使用，哪些没有。
+
+## 静态导入导出
+- ES6 模块的导入 (`import`) 和导出 (`export`) 语句是静态的，这意味着它们不能是动态改变的，必须在代码的顶层作用域中声明。
+- 这种静态结构使得工具能够在编译时分析模块间的依赖关系。
+
+## 编译时分析
+- 构建工具（如 Webpack 或 Rollup）在打包过程中解析这些 `import` 和 `export` 语句，构建起模块间的依赖图。
+- 通过分析这个依赖图，工具可以确定哪些模块和模块内的哪些部分被其他模块引用了。
+
+## 移除未引用代码
+- 在确定了哪些代码没有被引用之后，这些代码在最终的打包文件中可以被“摇掉”（即不包括在内）。
+- 这通常通过压缩工具（如 Terser）实现，它们在压缩代码的同时移除未被引用的部分。
+
+## 其他考虑
+- **副作用（Side Effects）**: 不是所有的模块都适合 Tree-shaking。如果模块在导入时有副作用（如立即执行的代码），那么这部分代码不能安全地被摇掉。在 `package.json` 中的 `"sideEffects"` 属性可以用来指示哪些文件是有副作用的。
+- **标记未使用代码**：一些工具可能不是完全移除未使用的代码，而是在初步阶段标记这些代码。最终的移除工作由压缩阶段完成。
+
+## CommonJS 与 Tree-shaking
+相比之下，CommonJS 模块（Node.js 使用的模块系统）允许动态的导入和导出，其依赖关系可能在运行时才能确定。例如，你可以根据条件动态地 require 不同的模块，或者在函数内部进行 require。这使得在编译时静态分析并移除未使用的代码变得更加困难，甚至不可能。
+
+## 总结
+Tree-shaking 是一种基于 ES6 模块静态结构的编译时优化技术，通过构建工具的静态分析实现。它可以有效地减小打包文件的大小，提高应用性能。正确地使用 ES6 模块并注意代码的副作用，可以最大化 Tree-shaking 的效果。
diff --git a/packages/interview/docs/build-tool/webpack.md b/packages/interview/docs/build-tool/webpack.md
@@ -1,31 +1,132 @@
-# Webpack工作原理
+# Webpack 实现原理
 
-Webpack 是一个模块打包器(module bundler)和任务运行器(task runner)。它读取应用程序的入口点，并递归地构建一个依赖图(dependency graph)，然后将所有这些依赖项打包成少量的 bundle(s) - 通常是一个 - 以在浏览器中加载。
+Webpack 的实现原理可以分为几个主要部分：入口分析、依赖处理、模块打包、文件输出，以及插件系统。下面是这些部分的详细解释：
 
-下面是 Webpack 的一些核心概念和它是如何工作的：
+## 1. 入口分析（Entry Analysis）
+- **入口点**：Webpack 需要一个或多个入口点来开始构建过程。入口点通常是应用程序的主文件，Webpack 从这里开始解析依赖。
+- **解析依赖**：Webpack 读取入口文件，解析包含的 `import` 和 `require` 语句，递归地构建一个依赖图，包括应用中使用的所有模块。
 
-1. **入口(Entry)**: 指定 Webpack 应该使用哪个模块开始构建其内部依赖图。默认值为 `./src/index.js`。
+## 2. 依赖处理（Dependency Resolution）
+- **加载器（Loaders）**：Webpack 使用加载器来处理非 JavaScript 文件（如 CSS、图片、字体等）。加载器转换这些文件为模块，使它们可以被应用程序使用。
+- **解析器（Parser）**：Webpack 使用解析器（例如 Acorn）将每个文件转换为 AST（抽象语法树）。这允许 Webpack 分析代码中的各种语句，找出依赖关系。
 
-2. **输出(Output)**: 告诉 Webpack 在哪里发出它创建的 bundles，以及如何命名这些文件。默认主输出文件的路径是 `./dist/main.js`。
+## 3. 模块打包（Bundling）
+- **模块处理**：Webpack 对每个模块应用相应的加载器，然后将其添加到依赖图中。
+- **代码合并**：所有模块（原始源代码及其所有依赖）最终被合并成一个或多个 bundle。这些 bundle 是包含了所有必需模块的文件。
 
-3. **加载器(Loaders)**: Webpack 本身只能理解 JavaScript。加载器使得 Webpack 能够处理其他类型的文件，并将它们转换为有效的模块，这些模块可以被应用程序使用，并添加到依赖图中。
+## 4. 文件输出（Output）
+- **输出结果**：根据配置，Webpack 将处理后的代码和资源输出为一个或多个文件。
+- **代码拆分**（Code Splitting）：Webpack 可以将代码拆分为多个 bundle，以优化加载性能。
 
-4. **插件(Plugins)**: 插件可以用于执行从打包优化和压缩到重新定义环境中的变量等范围更广泛的任务。
+## 5. 插件系统（Plugins）
+- **扩展功能**：Webpack 的插件系统允许开发者扩展其构建流程。插件可以在构建的不同阶段执行任务，如代码压缩、环境变量注入、生成 HTML 文件等。
+- **事件钩子**：插件可以绑定到整个构建流程的各种事件钩子上，从而在特定时刻执行操作。
 
-5. **模式(Mode)**: 通过选择 `development`, `production` 或 `none` 之一，可以让 Webpack 使用相应模式的内置优化。
+## 6. 编译（Compilation）
+- **编译过程**：Webpack 的编译过程涵盖了从入口分析到文件输出的整个过程。这个过程涉及模块的解析、处理和转换。
 
-### Webpack 的工作原理
+## 代码实现
 
-1. **构建依赖图(Dependency Graph)**: 从配置的入口模块开始，Webpack 递归地构建一个依赖图，这个依赖图包含应用程序所需的每个模块。
+要实现一个类似于 Webpack 这样的基础版本的模块打包器，我们可以遵循几个基本步骤：解析文件依赖、转换代码、以及打包生成输出文件。下面是一个简化版模块打包器的示例实现：
 
-2. **模块(Module)**: 在 Webpack 里，关于模块的概念很广泛。它不仅仅是 JavaScript 模块，还包括 CSS, images, 或者 HTML 等任何通过 loader 转化成 JavaScript 模块的资源。
+### 1. 解析文件依赖
+首先，我们需要分析入口文件，并递归地找出所有依赖的模块。
 
-3. **生成 bundles**: 一旦有了依赖图，Webpack 会开始生成输出 bundles。这些 bundles 包含所有模块的最终版本的代码。
+```javascript
+const fs = require('fs');
+const path = require('path');
+const babelParser = require('@babel/parser');
+const traverse = require('@babel/traverse').default;
+const babel = require('@babel/core');
 
-4. **加载器和转换**: 在将所有模块加入 bundle 之前，通过加载器，Webpack 可以转换和处理模块。例如，SASS 文件可以被转换为纯 CSS，TypeScript 可以被转换为 JavaScript。
+// 解析单个文件的依赖
+function parseDependencies(filePath) {
+ const content = fs.readFileSync(filePath, 'utf-8');
+ const ast = babelParser.parse(content, {
+ sourceType: 'module'
+ });
 
-5. **插件系统**: 在整个打包过程中，Webpack 会广播特定的事件，插件在监听这些事件后，可以执行特定的操作。
+ const dependencies = [];
+ traverse(ast, {
+ ImportDeclaration({ node }) {
+ dependencies.push(node.source.value);
+ }
+ });
+ return dependencies;
+}
 
-6. **输出结果**: 最后，Webpack 将根据配置输出具体的文件，通常是把资源和代码放在 `dist` 目录下，并确保 JavaScript 文件可以在浏览器中引用和执行。
+// 递归地解析所有依赖
+function collectDependencies(entry) {
+ const entryPath = path.resolve(entry);
+ const entryDependencies = parseDependencies(entryPath);
 
-Webpack 的这种方式提供了高度的灵活性和配置能力，使其能够满足各种应用程序和工作流的需求。同时，这也意味着入门门槛可能会比其他工具稍高，但这种灵活性在复杂应用程序中是非常有价值的。
+ // 递归解析
+ // 你可以在这里添加更多的逻辑，比如处理依赖的路径等
+}
+```
+
+### 2. 转换代码
+使用 Babel 转换每个模块的代码，使其可以在浏览器中运行。
+
+```javascript
+// 转换模块代码
+function transformModule(filePath) {
+ const content = fs.readFileSync(filePath, 'utf-8');
+ const transformed = babel.transform(content, {
+ presets: ['@babel/preset-env']
+ });
+ return transformed.code;
+}
+```
+
+### 3. 生成打包文件
+最后，我们需要将所有模块的代码合并为一个文件，并处理模块间的依赖关系。
+
+```javascript
+// 生成打包文件
+function bundle(entry, output) {
+ // 收集所有依赖
+ const dependencies = collectDependencies(entry);
+
+ // 转换每个模块并合并代码
+ let modules = '';
+ dependencies.forEach(depPath => {
+ const transformedCode = transformModule(depPath);
+ modules += `
+ '${depPath}': function(require, module, exports) {
+ ${transformedCode}
+ },
+ `;
+ });
+
+ // 生成打包后的文件内容
+ const result = `
+ (function(modules) {
+ // 模块缓存
+ var installedModules = {};
+
+ // 模拟 require 函数
+ function require(moduleId) {
+ // ...
+
+ // 执行模块代码
+ // ...
+ }
+
+ // 执行入口模块
+ require('${entry}');
+ })({${modules}});
+ `;
+
+ // 写入输出文件
+ fs.writeFileSync(output, result);
+}
+
+// 使用示例
+bundle('./src/index.js', './dist/bundle.js');
+```
+
+### 注意事项
+- 这个实现是高度简化的，只用于展示 Webpack 基本原理。
+- 实际的 Webpack 实现远比这个示例复杂，包括处理多种文件类型、优化配置、插件系统等功能。
+- 你可能需要根据实际需求调整和完善这个简化版打包器的代码。
diff --git a/packages/interview/docs/javascript/new.md b/packages/interview/docs/javascript/new.md
@@ -0,0 +1,54 @@
+# new() 底层实现
+
+在 JavaScript 中，使用 `new` 操作符创建一个新对象的过程涉及几个关键步骤，这些步骤反映了 `new` 操作符的底层实现机制。当你执行类似 `new MyClass()` 的代码时，大致发生以下事情：
+
+### 1. 创建新对象
+首先，JavaScript 引擎会创建一个新的空对象。
+
+### 2. 设置原型
+接着，这个新对象的内部 `[[Prototype]]` （也就是通常所说的 `__proto__`）会被赋值为构造函数的 `prototype` 属性。这意味着新对象可以访问构造函数原型上的属性和方法。
+
+### 3. 将构造函数的 `this` 绑定到新对象
+构造函数内的 `this` 会被绑定到新创建的对象上。这样，当构造函数内部的代码执行时，任何对 `this` 的引用都会指向这个新对象。
+
+### 4. 执行构造函数
+构造函数内部的代码（即初始化代码）随后被执行。通常，这些代码会初始化新对象的属性。
+
+### 5. 返回新对象
+如果构造函数返回一个对象，则这个对象会被返回；如果构造函数没有返回对象，则会返回步骤 1 创建的新对象。
+
+### 示例代码
+为了更好地理解这个过程，可以看一个简单的 JavaScript 函数和 `new` 操作符的模拟实现：
+
+```javascript
+function MyClass() {
+ this.property = 'value';
+}
+
+// 使用 new 操作符创建 MyClass 的一个实例
+var myInstance = new MyClass();
+```
+
+在这个例子中，`myInstance` 是 `MyClass` 的一个新实例。它继承了 `MyClass.prototype` 上的所有属性和方法，并且拥有 `MyClass` 构造函数中定义的属性。
+
+### 模拟 `new` 操作符的实现
+```javascript
+function simulateNew(constructor, ...args) {
+ // 步骤 1: 创建一个新对象
+ const obj = {};
+
+ // 步骤 2: 将对象的原型指向构造函数的 prototype
+ obj.__proto__ = constructor.prototype;
+
+ // 步骤 3 & 4: 将构造函数的 this 绑定到新对象，并执行
+ const result = constructor.apply(obj, args);
+
+ // 步骤 5: 根据返回值类型决定是返回新对象还是返回值
+ return result instanceof Object ? result : obj;
+}
+```
+
+这个 `simulateNew` 函数模拟了 `new` 操作符的基本行为。在实际的 JavaScript 引擎中，`new` 操作符的实现要复杂得多，但基本原理是相似的。
+
+### 总结
+`new` 操作符在 JavaScript 中是创建基于原型继承的对象的重要机制。它创建了一个新对象，将其原型设置为构造函数的 `prototype` 对象，并执行构造函数，最后返回新对象。了解这一过程有助于深入理解 JavaScript 中的对象、原型和继承。
diff --git a/packages/interview/docs/monitor/index.md b/packages/interview/docs/monitor/index.md
@@ -0,0 +1 @@
+# 前端监控
diff --git a/packages/interview/docs/network/cdn.md b/packages/interview/docs/network/cdn.md
@@ -0,0 +1,20 @@
+# CDN
+
+内容分发网络（Content Delivery Network，CDN）在前端应用中扮演着重要的角色，它可以帮助加速网站和应用的性能，提供更好的用户体验。以下是 CDN 在前端应用中的一些常见应用：
+
+1. 静态资源加速：CDN 可以缓存并分发网站或应用的静态资源，如图像、CSS 文件、JavaScript 文件、字体等。这些资源可以被缓存在全球各个分发节点上，使用户从离他们地理位置更近的节点加载资源，从而减少加载时间和提高页面加载速度。
+
+2. 动态内容加速：一些 CDN 提供动态内容加速功能，可以缓存动态生成的页面内容，如动态网页、API 响应等。这有助于减轻源服务器的负载，提高响应速度，并降低带宽成本。
+
+3. 安全性增强：CDN 可以提供安全性功能，如 DDoS 攻击防护、Web 应用程序防火墙等。它们可以帮助保护您的前端应用免受恶意攻击和不必要的流量干扰。
+
+4. 负载均衡：CDN 可以帮助分发流量到不同的服务器节点，以实现负载均衡。这有助于确保应用始终保持高可用性，并能够有效地处理高流量负载。
+
+5. SSL 加速：CDN 可以提供 SSL 加速，通过在 CDN 边缘节点上终止 SSL 连接，减轻源服务器的负担，并提供更快的加密通信。
+
+6. 视频和流媒体分发：对于需要传输大量视频和流媒体内容的应用，CDN 可以提供高效的分发和流媒体加速，以确保内容在全球范围内快速加载和流畅播放。
+
+7. 地理位置感知：CDN 可以根据用户的地理位置将内容提供给最近的节点，从而降低延迟并提高性能。这对于全球范围内的应用来说尤为重要。
+
+8. 实时数据分发：一些 CDN 还支持实时数据分发，可以用于实时应用程序，如在线游戏、实时协作工具等。
+