Document

\n \n

\n ```\n\n - 这里创建了一个宽度和高度都为 500px 的 SVG 容器，并将其放置在一个`id`为`container`的`div`元素内部。\n\n - **步骤二：创建连线元素并设置初始位置（使用 JavaScript）**\n\n - 假设已经有两个可拖拽的 DOM 元素，它们的`id`分别为`element1`和`element2`。在 JavaScript 中，可以通过以下方式创建连线并设置初始位置：\n\n ```javascript\n const svgContainer = document.getElementById(\"svg-container\");\n const element1 = document.getElementById(\"element1\");\n const element2 = document.getElementById(\"element2\");\n // 创建SVG连线元素\n const line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"line\");\n line.setAttribute(\"x1\", element1.offsetLeft + element1.offsetWidth / 2);\n line.setAttribute(\"y1\", element1.offsetTop + element1.offsetHeight / 2);\n line.setAttribute(\"x2\", element2.offsetLeft + element2.offsetWidth / 2);\n line.setAttribute(\"y2\", element2.offsetTop + element2.offsetHeight / 2);\n line.setAttribute(\"stroke\", \"black\");\n line.setAttribute(\"stroke - width\", \"2\");\n // 将连线元素添加到SVG容器中\n svgContainer.appendChild(line);\n ```\n\n - 这段代码首先获取了 SVG 容器和两个可拖拽元素。然后使用`createElementNS`方法创建了一个 SVG 的``元素，这个方法是用于创建 SVG 元素的正确方式，因为 SVG 元素是在一个特定的命名空间下。接着，通过`setAttribute`方法设置了连线的起点（`x1`、`y1`）和终点（`x2`、`y2`）坐标，这里的坐标是根据元素的偏移位置（`offsetLeft`和`offsetTop`）以及元素宽度和高度的一半来计算的，这样连线就会连接到元素的中心位置。最后，设置了连线的颜色（`stroke`）和宽度（`stroke - width`），并将连线元素添加到 SVG 容器中。\n\n - **步骤三：更新连线位置（在元素拖拽事件中）**\n - 为了在元素拖拽时更新连线的位置，需要在拖拽事件处理函数中添加代码来更新连线的起点和终点坐标。假设使用了 HTML5 的`drag`事件来实现元素的拖拽，以下是一个简单的示例：\n ```javascript\n element1.addEventListener(\"drag\", (event) => {\n line.setAttribute(\"x1\", event.target.offsetLeft + event.target.offsetWidth / 2);\n line.setAttribute(\"y1\", event.target.offsetTop + event.target.offsetHeight / 2);\n });\n element2.addEventListener(\"drag\", (event) => {\n line.setAttribute(\"x2\", event.target.offsetLeft + event.target.offsetWidth / 2);\n line.setAttribute(\"y2\", event.target.offsetTop + event.target.offsetHeight / 2);\n });\n ```\n - 在这里，分别为两个可拖拽元素添加了`drag`事件监听器。当元素被拖拽时，会获取元素的新位置，并更新连线的起点（对于`element1`）或终点（对于`element2`）坐标，从而实现连线随着元素位置变化而动态更新的效果。\n\n3. **使用 Canvas 实现连接线（替代方案）**\n\n - **步骤一：创建 Canvas 元素并获取绘图上下文**\n\n - 在 HTML 文件中创建一个 Canvas 元素：\n\n ```html\n

\n ```\n\n - 然后在 JavaScript 中获取 Canvas 元素和它的绘图上下文（`2d`上下文用于绘制二维图形）：\n\n ```javascript\n const canvasContainer = document.getElementById(\"canvas-container\");\n const ctx = canvasContainer.getContext(\"2d\");\n ```\n\n - **步骤二：绘制初始连线（根据元素位置）**\n\n - 同样假设已经有两个可拖拽的 DOM 元素，`id`为`element1`和`element2`。在 JavaScript 中计算连线的起点和终点坐标并绘制连线：\n\n ```javascript\n const element1 = document.getElementById(\"element1\");\n const element2 = document.getElementById(\"element2\");\n function drawLine() {\n const x1 = element1.offsetLeft + element1.offsetWidth / 2;\n const y1 = element1.offsetTop + element1.offsetHeight / 2;\n const x2 = element2.offsetLeft + element2.offsetWidth / 2;\n const y2 = element2.offsetTop + element2.offsetHeight / 2;\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.strokeStyle = \"black\";\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n drawLine();\n ```\n\n - 这段代码定义了一个`drawLine`函数，在函数内部计算了连线的起点和终点坐标，然后使用 Canvas 的绘图 API（`beginPath`、`moveTo`、`lineTo`和`stroke`）来绘制连线，设置了连线的颜色（`strokeStyle`）和宽度（`lineWidth`）。\n\n - **步骤三：更新连线（在元素拖拽事件中）**\n - 在元素拖拽事件处理函数中，需要清除之前绘制的连线（因为 Canvas 是基于像素的绘制，每次重新绘制都需要清除之前的内容），然后重新绘制连线：\n ```javascript\n element1.addEventListener(\"drag\", (event) => {\n ctx.clearRect(0, 0, canvasContainer.width, canvasContainer.height);\n drawLine();\n });\n element2.addEventListener(\"drag\", (event) => {\n ctx.clearRect(0, 0, canvasContainer.width, canvasContainer.height);\n drawLine();\n });\n ```\n - 这里为两个可拖拽元素添加了`drag`事件监听器。当元素被拖拽时，首先使用`clearRect`方法清除整个 Canvas 画布，然后调用`drawLine`函数重新绘制连线，以实现连线随着元素位置变化而更新的效果。\n",{"_58":230,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1083/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1083/timeline",{"_58":233,"_60":61,"_62":234,"_64":235,"_66":236,"_68":237,"_70":238,"_72":239,"_74":240,"_76":241,"_78":242,"_111":243,"_131":132,"_133":24,"_134":-5,"_135":251,"_137":252,"_159":195,"_153":265,"_155":266,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":267,"_170":268,"_176":269,"_178":270,"_190":272,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1082","https://api.github.com/repos/pro-collection/interview-question/issues/1082/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1082/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1082/events","https://github.com/pro-collection/interview-question/issues/1082",2778154022,"I_kwDOJGDC6c6ll0Qm",1082,"前端假如有几十个请求，如何去控制并发【热度: 590】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[244],{"_70":245,"_72":246,"_58":247,"_117":248,"_119":249,"_121":24,"_122":250},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":261,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},510,"2023-03-06T15:00:15Z","2025-09-07T06:08:31Z","2025-01-09T15:37:24Z","2025-02-14T06:52:49Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：并发请求处理\n\n1. **使用`Promise.allSettled`和分批处理**：将请求按并发限制分成小批次，用`Promise.allSettled`逐批执行，如`fetchWithConcurrency`函数，通过循环取批次并处理，最后返回所有结果。\n2. **使用队列方式控制并发**：`PromiseQueue`类通过限制同时运行的`Promise`数量管理并发，有`enqueue`方法添加任务，`runNext`方法按规则执行任务，使用时创建实例并传入并发数，将请求任务入队后用`Promise.all`执行。\n3. **使用第三方库**\n - **`p - limit`**：引入后设置最大并发数，将请求任务用其包裹后用`Promise.all`执行。\n - **`promise - pool`**：引入后配置请求数组、并发数和任务函数，执行`promisePool`获取结果。\n4. **浏览器专用：`AbortController`限制超时**：`fetchWithTimeout`函数利用`AbortController`结合超时机制，在超时后中止请求，处理请求时传入`signal`，捕获错误并在最后清除超时。\n5. **选择建议**\n - 任务数量多但单任务时间短，适合分批处理或`PromiseQueue`。\n - 任务数量多且复杂，建议用`p - limit`等库。\n - 实时性要求高，可考虑`AbortController`或合理设置超时策略。\n\n- 参考文档\n https://juejin.cn/post/7457511148513443850\n",{"_58":271,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1082/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1082/timeline",{"_58":274,"_60":61,"_62":275,"_64":276,"_66":277,"_68":278,"_70":279,"_72":280,"_74":281,"_76":282,"_78":283,"_111":284,"_131":132,"_133":24,"_134":-5,"_135":286,"_137":287,"_159":152,"_153":289,"_155":290,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":291,"_170":292,"_176":293,"_178":294,"_190":296,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1081","https://api.github.com/repos/pro-collection/interview-question/issues/1081/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1081/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1081/events","https://github.com/pro-collection/interview-question/issues/1081",2778144615,"I_kwDOJGDC6c6llx9n",1081,"日常开发中使用到哪些常用的 Git 命令【热度: 193】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[285],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":288,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2025-01-09T15:32:53Z","2025-01-09T15:32:54Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：git 常用命令\n\n**关键词**：git 常用命令\n\n在日常生活的开发工作中，以下是一些常用的 Git 命令：\n\n### 配置相关\n\n- **git config**：\n - **用途**：用于配置 Git 的各种参数，如用户姓名、邮箱等基本信息，这些信息会关联到每一次提交记录。\n - **示例**：\n - `git config --global user.name \"Your Name\"`：设置全局的用户名，这个名字会出现在你提交的代码记录中。\n - `git config --global user.email \"your.email@example.com\"`：设置全局的邮箱，用于标识提交者身份，方便团队协作时追踪提交来源。\n\n### 仓库初始化与克隆\n\n- **git init**：\n - **用途**：在本地创建一个新的 Git 仓库。通常用于开始一个全新的项目，将当前目录初始化为一个可以被 Git 管理的仓库。\n - **示例**：在一个新的项目文件夹下执行`git init`，就会在这个文件夹中创建一个隐藏的`.git`文件夹，用于存储仓库的相关信息。\n- **git clone**：\n - **用途**：用于从远程仓库（如 GitHub、GitLab 等）克隆代码到本地。这是获取已有项目代码的常用方法。\n - **示例**：`git clone [远程仓库地址]`，例如`git clone https://github.com/user/repository.git`，这样就可以把名为`repository`的远程仓库代码克隆到本地。\n\n### 状态查看与文件管理\n\n- **git status**：\n - **用途**：查看工作区（本地仓库目录）的状态，包括文件的修改、新增、删除情况，以及文件是否已被添加到暂存区等信息。\n - **示例**：在项目目录下执行`git status`，可以看到类似“Changes not staged for commit”（未暂存的修改）或者“Untracked files”（未跟踪的文件）等状态信息。\n- **git add**：\n - **用途**：将工作区的文件修改添加到暂存区，告诉 Git 哪些文件的变化需要被包含在下一次提交中。\n - **示例**：\n - `git add [文件名]`：比如`git add main.py`，将`main.py`文件的修改添加到暂存区。\n - `git add.`：将当前目录下所有文件的修改添加到暂存区，但不包括新添加的未跟踪文件。\n - `git add -A`：添加所有文件的修改，包括新添加的未跟踪文件。\n- **git rm**：\n - **用途**：用于从工作区和暂存区删除文件，并且在下次提交时记录这个删除操作。\n - **示例**：`git rm [文件名]`，例如`git rm old_file.txt`，将`old_file.txt`文件从工作区和暂存区删除。\n\n### 提交与历史记录查看\n\n- **git commit**：\n - **用途**：将暂存区的内容提交到本地仓库，形成一个新的版本记录，需要添加提交注释来描述这次提交的内容。\n - **示例**：`git commit -m \"Initial commit\"`，其中`-m`选项后面的内容就是提交注释，用于简要说明本次提交做了什么。\n- **git log**：\n - **用途**：查看提交历史记录，包括每次提交的作者、日期、提交注释和提交哈希值等信息，方便追踪项目的开发历程。\n - **示例**：执行`git log`后，会以逆序（最新的提交在最上面）显示提交记录，如可以看到提交哈希值像`commit 123456789abcdef...`，作者名字，日期和提交注释等内容。\n\n### 分支管理\n\n- **git branch**：\n - **用途**：用于创建、查看和删除分支。分支是 Git 中非常重要的概念，可以让开发者在不影响主分支的情况下进行功能开发或者实验。\n - **示例**：\n - `git branch`：查看本地所有分支，当前分支会以`*`标识。\n - `git branch [分支名]`：创建一个新的分支，例如`git branch new-feature`，会创建一个名为`new - feature`的新分支。\n - `git branch -d [分支名]`：删除一个已经合并的分支，比如`git branch -d old-branch`。\n- **git checkout**：\n - **用途**：用于切换分支或者恢复工作区文件。可以让你在不同分支之间切换，以进行不同的开发工作。\n - **示例**：\n - `git checkout [分支名]`：切换到指定分支，如`git checkout master`，会将工作区切换到`master`分支。\n - `git checkout -b [新分支名]`：创建一个新分支并切换到该分支，例如`git checkout -b dev-branch`，相当于同时执行了`git branch dev - branch`和`git checkout dev - branch`两个操作。\n\n### 远程仓库操作\n\n- **git remote**：\n - **用途**：用于管理远程仓库的信息，如添加、查看和删除远程仓库的关联。\n - **示例**：\n - `git remote -v`：查看已经配置的远程仓库及其对应的推送和拉取地址，会显示类似`origin https://github.com/user/repository.git (fetch)`和`origin https://github.com/user/repository.git (push)`的信息。\n - `git remote add [远程仓库名] [远程仓库地址]`：添加一个新的远程仓库关联，例如`git remote add origin https://github.com/user/new - repository.git`，这里`origin`是远程仓库名，后面是仓库地址。\n- **git push**：\n - **用途**：将本地仓库的分支和提交记录推送到远程仓库，使得远程仓库的内容与本地保持同步。\n - **示例**：`git push [远程仓库名] [本地分支名]`，如`git push origin master`，将本地`master`分支推送到名为`origin`的远程仓库。\n- **git pull**：\n - **用途**：从远程仓库拉取最新的分支和提交记录到本地仓库，并自动尝试合并到当前分支。\n - **示例**：`git pull [远程仓库名] [本地分支名]`，通常简单地使用`git pull`（如果已经配置好远程仓库和分支追踪），就可以拉取并合并远程仓库对应的分支到本地当前分支。\n\n### 标签管理\n\n- **git tag**\n - **用途**：用于给特定的提交打上标签，方便标记重要的版本号、里程碑等。比如在发布软件版本时，可以用标签来标识版本号。\n - **示例**：\n - `git tag -a v1.0 -m \"Version 1.0 release\"`：创建一个带有注释的标签`v1.0`，注释内容为`Version 1.0 release`。\n - `git tag`：查看所有标签，会列出所有已创建的标签名称。\n - `git push origin [标签名]`：将本地标签推送到远程仓库，例如`git push origin v1.0`，这样远程仓库也能看到这个标签。\n\n### 暂存操作\n\n- **git stash**\n - **用途**：当你正在进行一项工作，但需要切换分支去处理其他紧急事情时，可以使用`git stash`将当前工作区和暂存区的修改暂存起来。之后可以再恢复这些暂存的修改继续工作。\n - **示例**：\n - `git stash`：暂存当前的修改。\n - `git stash list`：查看所有暂存记录，会显示类似`stash@{0}: WIP on master: 1234567...`的信息，其中`stash@{0}`是暂存记录的索引。\n - `git stash pop`：恢复最近一次暂存的修改，并将其从暂存列表中删除。如果有多个暂存记录，可以使用`git stash apply stash@{1}`（这里`stash@{1}`是指定的暂存记录索引）来恢复特定的暂存记录。\n\n### 合并与变基\n\n- **git merge**\n - **用途**：用于将一个分支的修改合并到另一个分支。比如将开发分支（`dev`）的功能合并到主分支（`master`）。\n - **示例**：\n - 首先切换到要合并到的分支，例如`git checkout master`，然后执行`git merge dev`，就可以将`dev`分支的修改合并到`master`分支。合并过程中可能会出现冲突，需要手动解决冲突后再提交。\n- **git rebase**\n - **用途**：和`git merge`类似，也是用于整合分支修改，但`git rebase`是将提交历史“变基”，使得提交历史更加线性。一般在希望保持提交历史整洁的情况下使用。\n - **示例**：假设在`feature`分支开发了新功能，现在想将其变基到`master`分支的最新提交上。首先切换到`feature`分支，如`git checkout feature`，然后执行`git rebase master`。在变基过程中，如果出现冲突，需要手动解决冲突，然后继续执行`git rebase --continue`。\n- **git cherry-pick**\n - **用途**：它允许你从一个分支中选择一个或多个提交（commit），然后将这些提交应用到当前分支。简单来说，就是 “摘取” 其他分支上的特定提交，并把它们的更改应用到你正在工作的分支上。\n - **示例**：\n - **场景示例**：假设你有一个主分支（`master`）和一个开发分支（`dev`）。在`dev`分支上，开发人员发现并修复了一个紧急的软件漏洞，这个修复提交为`commit - A`。现在，你希望把这个修复也应用到`master`分支，而不是将整个`dev`分支合并到`master`，因为`dev`分支可能还包含其他未经过充分测试的功能。\n - **操作步骤**：首先切换到`master`分支（`git checkout master`），然后使用`git cherry - pick `。这样，`commit - A`中的更改就会被应用到`master`分支，就好像这个修复是在`master`分支上直接进行的一样。这在保持主分支稳定的同时，能够快速地将关键的修复传播到需要的分支。\n\n### 撤销操作\n\n- **git reset**\n - **用途**：用于撤销提交或者将暂存区的文件修改回退。可以根据不同的参数实现不同程度的撤销。\n - **示例**：\n - `git reset [文件名]`：将暂存区中指定文件的修改撤销，例如`git reset main.py`，如果`main.py`已经添加到暂存区，这个命令会将它从暂存区移除，恢复到未暂存的状态。\n - `git reset --hard [提交哈希值或分支名]`：彻底回退到指定的提交或者分支状态，这个操作会清除工作区和暂存区的所有未提交修改，例如`git reset --hard HEAD~1`会回退到上一个提交的状态，`HEAD~1`表示当前提交的前一个提交，使用时要非常谨慎。\n- **git revert**\n - **用途**：用于撤销已经提交的修改，但会创建一个新的提交来记录这个撤销操作，这样可以保留完整的提交历史。\n - **示例**：`git revert [提交哈希值]`，例如`git revert 123456789abcdef...`，会创建一个新的提交来撤销指定提交所做的修改。\n",{"_58":295,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1081/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1081/timeline",{"_58":298,"_60":61,"_62":299,"_64":300,"_66":301,"_68":302,"_70":303,"_72":304,"_74":305,"_76":306,"_78":307,"_111":308,"_131":132,"_133":24,"_134":-5,"_135":310,"_137":311,"_159":152,"_153":313,"_155":314,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":315,"_170":316,"_176":317,"_178":318,"_190":320,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1080","https://api.github.com/repos/pro-collection/interview-question/issues/1080/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1080/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1080/events","https://github.com/pro-collection/interview-question/issues/1080",2766176897,"I_kwDOJGDC6c6k4IKB",1080,"代码里console.log比较多，该怎么办【热度: 340】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[309],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":312,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2025-01-02T15:00:46Z","2025-01-02T15:00:47Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"1. **`ESLint`配置规则软性禁止**：通过配置`.eslintrc.json`文件，添加`\"no-console\": \"warn\"`规则，使代码中使用`console`的地方会划上黄色波浪线警示，能一定程度削减`console.log`数量，但无法真正阻止其使用。\n2. **`git commit`编写规则限制提交**：找到项目中的`.git/hooks`文件夹下的`pre-commit.sample`文件，将其内容修改为若提交代码中包含`console.log`则报错提交失败，并将文件重命名为`pre-commit`。但该规则可被`git commit -m 'xxx' --no-verify`指令绕过。\n3. **依托于 cicd 的自动检测**: 在流水线部署的时候跑 eslint, 如果 console.log 代码增加，就拒绝部署即可；\n4. **使用插件删除**\n - **`VSCODE`插件**：可在插件商店搜索`remove-console`并安装，找到有`console.log`的文件使用插件删除，但效果可能不太理想。\n - **`Webpack`插件**\n - 可使用`terser-webpack-plugin`，在项目基于`create-react-app`脚手架时可直接搜到，在使用处配置`drop_console: true`，能在打包后去除全部`console.log`。\n\n参考文档：\n\n- https://juejin.cn/post/7417710863711649832\n",{"_58":319,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1080/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1080/timeline",{"_58":322,"_60":61,"_62":323,"_64":324,"_66":325,"_68":326,"_70":327,"_72":328,"_74":329,"_76":330,"_78":331,"_111":332,"_131":132,"_133":24,"_134":-5,"_135":334,"_137":335,"_159":337,"_153":338,"_155":339,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":340,"_170":341,"_176":342,"_178":343,"_190":345,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1079","https://api.github.com/repos/pro-collection/interview-question/issues/1079/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1079/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1079/events","https://github.com/pro-collection/interview-question/issues/1079",2740556506,"I_kwDOJGDC6c6jWZLa",1079,"实现一个加法函数sum，支持sum(1)(2)(3,4)(5,6,7....)【热度: 116】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[333],{"_70":216,"_72":217,"_58":218,"_117":219,"_119":120,"_121":24,"_122":220},[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":336,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},4,"2024-12-15T11:15:36Z","2025-02-22T02:55:03Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：sum 函数实现\n\n举例：\n\n```js\nconsole.log(sum(1,2,3)(4)) => 输出 10\n```\n\n以下是使用 JavaScript 实现满足要求的`sum`函数的代码：\n\n```javascript\nfunction sum(...args) {\n let total = 0;\n for (let arg of args) {\n if (Array.isArray(arg)) {\n for (let num of arg) {\n total += num;\n }\n } else {\n total += arg;\n }\n }\n\n function innerSum(...innerArgs) {\n for (let innerArg of innerArgs) {\n if (Array.isArray(innerArg)) {\n for (let num of innerArg) {\n total += num;\n }\n } else {\n total += innerArg;\n }\n }\n return innerSum;\n }\n\n innerSum.toString = function () {\n return total;\n };\n\n return innerSum;\n}\n```\n\n在上述代码中：\n\n1. 首先定义了外部的`sum`函数，它接受任意数量的参数（可以是单个数字或数字数组），并将这些参数的值累加到`total`变量中。\n2. 然后在`sum`函数内部定义了一个名为`innerSum`的内部函数，它同样接受任意数量的参数，并将这些参数的值累加到`total`变量中。每次调用`innerSum`都会继续累加新传入的参数值。\n3. 最后，为`innerSum`函数添加了一个`toString`方法，当在`console.log`等需要将函数转换为字符串的场景下，会返回累加得到的`total`值，这样就能得到正确的输出结果。\n\n例如：\n\n```javascript\nconsole.log(sum(1, 2, 3)(4));\n// 输出 10\n\nconsole.log(sum(1)(2)(3, 4)(5, 6, 7));\n// 输出 28\n```\n",{"_58":344,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1079/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1079/timeline",{"_58":347,"_60":61,"_62":348,"_64":349,"_66":350,"_68":351,"_70":352,"_72":353,"_74":354,"_76":355,"_78":356,"_111":357,"_131":132,"_133":24,"_134":-5,"_135":359,"_137":360,"_159":152,"_153":362,"_155":363,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":364,"_170":365,"_176":366,"_178":367,"_190":369,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1077","https://api.github.com/repos/pro-collection/interview-question/issues/1077/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1077/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1077/events","https://github.com/pro-collection/interview-question/issues/1077",2685479392,"I_kwDOJGDC6c6gESng",1077,"Rollup 为何高效【热度: 200】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[358],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":361,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-23T06:17:04Z","2024-12-15T11:09:24Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"1. **基于 ES 模块的静态分析**\r\n\r\n - **原理**：Rollup 是围绕 ES 模块（ESM）构建的打包工具。ES 模块具有静态的特性，其导入（`import`）和导出（`export`）语句在代码解析阶段就可以确定。Rollup 利用这种静态结构，通过对代码的一次遍历就能构建出完整的模块依赖树。\r\n - **优势**：相比传统的 CommonJS 模块，这种静态分析方式避免了在运行时动态解析模块的开销。例如，在 CommonJS 中，模块的加载和解析是在运行时进行的，可能会涉及到复杂的模块查找和加载逻辑。而 Rollup 在打包过程中，提前确定了模块之间的依赖关系，使得打包过程更加直接和高效。\r\n - **示例**：假设有以下两个 ES 模块：\r\n - `moduleA.js`：\r\n ```javascript\r\n export const functionA = () => {\r\n console.log(\"Function A\");\r\n };\r\n ```\r\n - `moduleB.js`：\r\n ```javascript\r\n import { functionA } from './moduleA.js';\r\n functionB() {\r\n functionA();\r\n }\r\n export default functionB;\r\n ```\r\n - Rollup 可以快速扫描`moduleB.js`中的`import`语句，定位到`moduleA.js`，从而高效地构建它们之间的依赖关系，而不需要在运行时反复查找和加载模块。\r\n\r\n2. **Tree - Shaking（摇树优化）机制**\r\n\r\n - **原理**：Tree - Shaking 是 Rollup 的一个核心优势功能。它基于代码的静态分析，能够精确地识别出哪些代码是实际被使用的，哪些是未被使用的。在打包过程中，Rollup 会自动将未被使用的代码从最终的输出文件中去除。\r\n - **优势**：这种优化方式可以显著减小打包文件的大小，尤其是在处理大型库或应用时。对于包含许多工具函数或模块的项目，只有实际被调用的部分才会被打包，避免了传输和加载不必要的代码，提高了应用的加载速度和性能。\r\n - **示例**：考虑一个包含多个工具函数的`utils.js`模块：\r\n - `utils.js`：\r\n ```javascript\r\n export const add = (a, b) => a + b;\r\n export const subtract = (a, b) => a - b;\r\n export const multiply = (a, b) => a * b;\r\n ```\r\n - 如果在`main.js`中只使用了`add`函数：\r\n ```javascript\r\n import { add } from \"./utils.js\";\r\n console.log(add(2, 3));\r\n ```\r\n - Rollup 在打包时，通过 Tree - Shaking 会检测到`subtract`和`multiply`函数未被使用，因此不会将它们打包到最终的输出文件中，大大减少了文件的体积。\r\n\r\n3. **代码优化技术 - 作用域提升（Scope Hoisting）**\r\n\r\n - **原理**：Rollup 会对代码进行作用域提升操作。在传统的模块打包方式中，每个模块的代码通常会被包裹在一个函数闭包中，这会导致变量查找路径变长，影响性能。Rollup 通过作用域提升，将模块中的变量和函数声明提升到更外层的作用域，减少了变量查找的层级。\r\n - **优势**：经过作用域提升后的代码在浏览器中执行时更加高效，因为减少了变量查找的开销。这有助于提高应用的运行速度，特别是在复杂的应用程序中，大量的变量查找和函数调用的性能优化效果更加明显。\r\n - **示例**：假设有两个模块`module1.js`和`module2.js`：\r\n - `module1.js`：\r\n ```javascript\r\n export const value1 = 10;\r\n ```\r\n - `module2.js`：\r\n ```javascript\r\n import { value1 } from \"./module1.js\";\r\n const result = value1 + 5;\r\n export const finalValue = result;\r\n ```\r\n - 在传统打包方式下，`module2.js`中的代码可能会被包裹在一个闭包中，导致访问`value1`需要通过闭包的作用域链。而 Rollup 通过作用域提升，将`value1`和`result`等变量提升到一个更外层的共享作用域，使得代码在执行时可以更直接地访问这些变量，提高了执行效率。\r\n\r\n4. **简洁的插件系统**\r\n - **原理**：Rollup 的插件系统设计简洁而高效。插件可以用于扩展 Rollup 的功能，例如处理不同类型的文件（如 CSS、JSON 等）、进行代码转换、添加自定义的模块解析规则等。插件通过钩子（Hook）机制与 Rollup 的核心打包流程相结合，在适当的时机对模块进行处理。\r\n - **优势**：这种简洁的插件系统使得开发者可以根据自己的需求轻松地定制打包过程，同时不会引入过多的复杂性，保证了打包的高效性。例如，开发一个简单的 Rollup 插件来处理 CSS 文件，可以在 Rollup 解析模块的过程中，通过钩子函数检测到 CSS 文件，然后将其转换为 JavaScript 模块（例如，通过将 CSS 内容转换为`style`标签插入到 HTML 中的方式），并将其整合到最终的打包文件或输出结构中。这样的插件机制能够灵活地适应各种项目需求，同时保持 Rollup 打包的高效性。\r\n",{"_58":368,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1077/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1077/timeline",{"_58":371,"_60":61,"_62":372,"_64":373,"_66":374,"_68":375,"_70":376,"_72":377,"_74":378,"_76":379,"_78":380,"_111":381,"_131":132,"_133":24,"_134":-5,"_135":383,"_137":384,"_159":152,"_153":386,"_155":387,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":388,"_170":389,"_176":390,"_178":391,"_190":393,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1076","https://api.github.com/repos/pro-collection/interview-question/issues/1076/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1076/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1076/events","https://github.com/pro-collection/interview-question/issues/1076",2685478821,"I_kwDOJGDC6c6gESel",1076,"vite 和 rollup 是什么样的依赖关系【热度: 153】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[382],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":385,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-23T06:15:32Z","2024-11-23T06:15:33Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：vite 和 rollup\n\n1. **Vite 对 Rollup 的依赖关系（主要在生产构建阶段）**\n\n - **构建过程的底层调用**：Vite 在生产构建过程中依赖 Rollup 来打包代码。当执行`vite build`命令时，Vite 会在内部调用 Rollup 来处理模块打包任务。Rollup 会按照 Vite 提供的配置信息（如入口文件、输出格式、插件等）对项目中的 ES 模块（ESM）进行处理。\n - **配置共享与交互**：Vite 的配置文件（`vite.config.js`）中的`build.rollupOptions`部分用于向 Rollup 传递配置。这意味着 Vite 的构建配置可以直接影响 Rollup 的打包行为。例如，通过配置`rollupOptions`中的`input`指定入口文件，`output`指定输出格式（如`umd`、`es`、`csm`等）和文件路径，以及添加 Rollup 插件来扩展功能。这种配置共享机制表明 Vite 在构建过程中深度依赖 Rollup 的打包功能，并通过配置来定制打包流程。\n - **功能利用与优化协作**：Vite 利用 Rollup 的诸多优化功能来生成高质量的生产代码。其中，Tree - Shaking（摇树优化）是 Rollup 的一个关键特性，Vite 借助这一功能去除未使用的代码，减小打包文件的大小。另外，Rollup 的作用域提升（Scope Hoisting）功能也有助于提高代码性能，Vite 在构建时通过 Rollup 实现这一优化，使得代码在浏览器中的执行更加高效。\n\n2. **Rollup 相对独立于 Vite 的存在**\n\n - **Rollup 自身的功能完整性**：Rollup 本身是一个独立的 JavaScript 模块打包工具，它具有自己的一套完整功能体系。它可以独立于 Vite 使用，开发者可以直接使用 Rollup 来打包 JavaScript 库或应用，通过编写 Rollup 配置文件（`rollup.config.js`）来指定打包规则，包括入口文件、输出格式、插件使用等。例如，许多 JavaScript 库的作者使用 Rollup 来打包他们的代码，以生成高效、简洁的库文件供其他开发者使用。\n - **应用场景的差异**：Rollup 主要聚焦于模块打包和代码优化，适用于各种需要将 ES 模块转换为可部署格式的场景。而 Vite 除了在生产构建时使用 Rollup 进行打包外，更侧重于开发过程中的快速开发体验，如利用浏览器原生 ES 模块支持实现快速的模块加载和热替换（HMR）。这意味着在开发模式下，Vite 的功能与 Rollup 有明显的区别，Rollup 在这个阶段通常不参与 Vite 的主要功能实现。\n\n3. **插件生态中的关联与差异**\n - **插件共享基础**：Vite 在生产构建阶段与 Rollup 的插件生态有一定的关联。部分 Rollup 插件可以在 Vite 的生产构建过程中直接使用或者经过适当修改后使用。这是因为 Vite 在生产构建底层基于 Rollup，它们在插件机制上有一些相似之处，例如在代码压缩、模块转换等方面的插件功能可以共享。\n - **插件开发的侧重点差异**：尽管有共享插件的可能性，但 Vite 和 Rollup 的插件开发也有不同的侧重点。Vite 插件可能需要考虑更多与开发服务器、即时编译、样式处理等开发过程相关的功能，而 Rollup 插件更侧重于模块打包和优化环节，如自定义模块解析、高级的 Tree - Shaking 策略等。\n",{"_58":392,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1076/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1076/timeline",{"_58":395,"_60":61,"_62":396,"_64":397,"_66":398,"_68":399,"_70":400,"_72":401,"_74":402,"_76":403,"_78":404,"_111":405,"_131":132,"_133":24,"_134":-5,"_135":407,"_137":408,"_159":152,"_153":410,"_155":411,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":412,"_170":413,"_176":414,"_178":415,"_190":417,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1075","https://api.github.com/repos/pro-collection/interview-question/issues/1075/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1075/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1075/events","https://github.com/pro-collection/interview-question/issues/1075",2685230657,"I_kwDOJGDC6c6gDV5B",1075,"[webpack] externals 是如何加载外部依赖的【热度: 330】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[406],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":409,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-23T03:36:20Z","2024-11-23T03:36:21Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：webpack externals\n\n1. **`externals`基础原理**\n\n - 当在 Webpack 配置文件中使用`externals`选项时，实际上是在告诉 Webpack 某些模块应该被视为外部依赖，而不是被打包进最终的输出文件。这意味着这些模块将在运行时由浏览器或其他运行环境提供，而不是由 Webpack 处理。\n\n2. **在浏览器环境中的加载方式（以全局变量为例）**\n\n - **配置`externals`**：\n - 假设项目依赖于`lodash`库，并且希望在浏览器环境中通过`\n \n \n \n ```\n - 在这里，`your - main - app - bundle.js`是 Webpack 打包后的应用程序主文件。当 Webpack 在代码中遇到`import _ from 'lodash';`语句时，它不会将`lodash`的代码打包进输出文件，而是假设`lodash`已经在运行时环境中存在，并且可以通过全局变量`lodash`访问。所以在打包后的 JavaScript 代码中，实际上是通过全局变量来引用外部依赖的。\n\n3. **在其他运行环境（如 Node.js）中的加载方式（以 CommonJS 模块为例）**\n\n - **配置`externals`类似操作**：\n - 在 Webpack 配置文件中，对于要作为外部依赖处理的模块（假设是`axios`，用于在 Node.js 环境中进行 HTTP 请求），配置`externals`如下：\n ```javascript\n module.exports = {\n //...其他配置\n externals: {\n axios: \"axios\",\n },\n };\n ```\n - **运行时环境中的模块引用**：\n - 在 Node.js 应用程序代码中，需要确保`axios`已经作为一个 CommonJS 模块安装在项目的`node_modules`目录下或者在全局环境中有相应的模块路径。当运行打包后的代码时，Webpack 不会打包`axios`，而是期望在 Node.js 的模块加载机制中找到它。例如，在打包后的 Node.js 代码中可能会有类似这样的引用：\n ```javascript\n const axios = require(\"axios\");\n ```\n - 此时，Node.js 会按照自己的模块加载规则去查找`axios`模块，就像没有经过 Webpack 打包一样。这是因为 Webpack 通过`externals`配置将`axios`模块的加载责任交给了运行时环境的模块加载系统。\n\n4. **AMD（Asynchronous Module Definition）模块加载方式（适用于支持 AMD 的环境）**\n - **配置`externals`和模块定义**：\n - 假设在一个支持 AMD 的浏览器环境或者 JavaScript 运行环境中，有一个名为`backbone`的外部依赖，在 Webpack 配置文件中设置`externals`：\n ```javascript\n module.exports = {\n //...其他配置\n externals: {\n backbone: \"backbone\",\n },\n };\n ```\n - **AMD 模块加载脚本**：\n - 在 HTML 文件或者 AMD 模块加载器的配置文件中，需要使用 AMD 的方式来加载`backbone`模块。例如，在一个简单的 AMD 配置中，可能会有如下代码来加载`backbone`和应用程序主模块：\n ```html\n \n \n \n \n \n \n \n \n \n \n ```\n - 这里使用`require.js`作为 AMD 模块加载器，通过`require.config`配置`backbone`模块的路径，然后在`require`函数中加载应用程序主模块和`backbone`模块。Webpack 在打包过程中，由于`externals`配置，知道`backbone`是外部依赖，会正确地处理代码中的引用，使得在运行时可以通过 AMD 模块加载器来加载`backbone`模块并正确地执行应用程序。\n",{"_58":416,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1075/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1075/timeline",{"_58":419,"_60":61,"_62":420,"_64":421,"_66":422,"_68":423,"_70":424,"_72":425,"_74":426,"_76":427,"_78":428,"_111":429,"_131":132,"_133":24,"_134":-5,"_135":431,"_137":432,"_159":152,"_153":434,"_155":434,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":435,"_170":436,"_176":437,"_178":438,"_190":440,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1074","https://api.github.com/repos/pro-collection/interview-question/issues/1074/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1074/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1074/events","https://github.com/pro-collection/interview-question/issues/1074",2685228473,"I_kwDOJGDC6c6gDVW5",1074,"[webpack] 在编译产物的时候，要区分 source 代码和外部依赖代码，该如何处理【热度: 125】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[430],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":433,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-23T03:31:59Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：webpack 产物\n\n1. **使用 Webpack 的`optimize-module-ids`插件（用于区分模块来源）**\n\n - **原理**：Webpack 在打包过程中会为每个模块分配一个唯一的`module.id`。`optimize-module-ids`插件可以帮助控制模块标识符的生成方式，使得能够根据模块是源文件还是外部依赖来区分它们。\n - **配置步骤**：\n\n - 首先，安装`optimize-module-ids`插件（可能需要自行开发类似功能插件或寻找已有合适插件）。\n - 然后，在 Webpack 配置文件中添加插件配置。例如：\n\n ```javascript\n const CustomModuleIdsPlugin = require(\"optimize-module-ids\");\n module.exports = {\n //...其他配置\n plugins: [\n new CustomModuleIdsPlugin((module) => {\n if (module.resource && module.resource.includes(\"node_modules\")) {\n return \"external\";\n } else {\n return \"source\";\n }\n }),\n ],\n };\n ```\n\n 这个插件会依据模块的资源路径（`module.resource`）来判别模块是源自`node_modules`（外部依赖）还是其他源文件路径。若为外部依赖，模块的`id`会被标记为`external`，否则标记为`source`。如此一来，在最终的打包产物或构建信息里，就能通过这个`id`区分不同来源的模块。\n\n2. **通过构建工具的输出信息区分（适用于简单区分）**\n\n - **查看构建日志**：Webpack 在构建过程中会输出大量的日志信息。可在构建日志里查找模块的路径信息以区分源文件和外部依赖。比如，日志中来自`src`目录的模块通常是源文件，而来自`node_modules`目录的模块则是外部依赖。\n - **分析统计信息（`stats`）**：Webpack 提供了`stats`选项，可生成详细的构建统计信息。通过将`stats`配置为`'verbose'`或其他详细级别，能获取每个模块的路径、大小、依赖关系等信息。在这些信息中，可轻易识别出源文件和外部依赖。例如，配置`stats`如下：\n\n ```javascript\n module.exports = {\n //...其他配置\n stats: \"verbose\",\n };\n ```\n\n 之后便可通过分析生成的统计文件或在终端输出的详细统计信息来区分不同来源的模块。\n\n3. **自定义打包结构或命名规则（在输出阶段区分）**\n\n - **分离输出目录**：在 Webpack 的输出配置（`output`）中，可以设置不同的输出路径来分离源文件和外部依赖的打包产物。例如：\n\n ```javascript\n module.exports = {\n //...其他配置\n output: {\n path: path.resolve(__dirname, \"dist\"),\n filename: (chunkData) => {\n if (chunkData.chunk.name.includes(\"external\")) {\n return \"external-bundles/[name].js\";\n } else {\n return \"source-bundles/[name].js\";\n }\n },\n },\n };\n ```\n\n 这里依据模块所属的`chunk`名称（可在构建过程中通过某些方式将模块所属的`chunk`标记为`external`或`source`），把外部依赖和源文件分别打包到不同的目录（`external-bundles`和`source-bundles`）下，这样在最终的打包产物中就能很直观地进行区分。\n\n - **命名规则**：除了分离输出目录，还可通过命名规则来区分。例如，在输出文件名中添加前缀以表示模块来源，如`source-[name].js`和`external-[name].js`，如此在查看打包文件时就能快速识别模块来源。\n",{"_58":439,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1074/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1074/timeline",{"_58":442,"_60":61,"_62":443,"_64":444,"_66":445,"_68":446,"_70":447,"_72":448,"_74":449,"_76":450,"_78":451,"_111":452,"_131":132,"_133":24,"_134":-5,"_135":454,"_137":455,"_159":152,"_153":457,"_155":458,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":459,"_170":460,"_176":461,"_178":462,"_190":464,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1073","https://api.github.com/repos/pro-collection/interview-question/issues/1073/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1073/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1073/events","https://github.com/pro-collection/interview-question/issues/1073",2685223512,"I_kwDOJGDC6c6gDUJY",1073,"corejs 是做什么用的，跟 Polyfill 是什么关系【热度: 100】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[453],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":456,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-23T03:25:28Z","2024-11-23T03:25:29Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：corejs 和 Polyfill\n\n1. **CoreJs 的作用**\n\n - **提供标准的 JavaScript 功能支持**：CoreJs 是一个 JavaScript 标准库，它提供了许多在现代 JavaScript 环境中被认为是标准的功能。这些功能包括但不限于对 ES6 + 语法的支持，如`Promise`、`Symbol`、`Map`、`Set`等。例如，在一些较旧的浏览器中可能没有原生的`Promise`支持，CoreJs 可以提供一个兼容的`Promise`实现，使得代码能够在这些浏览器中正确运行。\n - **跨浏览器兼容性支持**：它能够填补不同浏览器之间的 JavaScript 功能差距。由于不同浏览器对 JavaScript 标准的实现进度不同，CoreJs 可以确保在各种浏览器环境下都能提供一致的功能。比如，某些浏览器可能没有完全实现`Array.prototype.includes`方法，CoreJs 可以添加这个方法的实现，使得应用程序在这些浏览器中也能使用该功能。\n - **模块化的功能提供**：CoreJs 是模块化的，这意味着可以根据具体的需求选择引入特定的模块。例如，如果只需要在项目中添加`Promise`和`Map`的支持，而不需要其他功能，可以只引入 CoreJs 相关的模块，避免不必要的代码体积增加。\n\n2. **CoreJs 与 Polyfill 的关系**\n - **CoreJs 是 Polyfill 的一种实现方式**：Polyfill 是一个术语，用于描述一段代码，它提供了浏览器中缺失的功能。CoreJs 可以看作是一种全面的 Polyfill 库。当浏览器不支持某个 JavaScript 特性时，CoreJs 可以通过添加相应的代码来模拟该特性，就像填充了浏览器功能的空缺一样。例如，对于`Object.assign`方法，如果浏览器不支持，CoreJs 可以提供一个自定义的函数来实现相同的功能，这个自定义函数就是一种 Polyfill。\n - **Polyfill 可以有多种来源，CoreJs 是常用的一种**：除了 CoreJs 之外，开发人员也可以自己编写 Polyfill 或者使用其他库来提供类似的功能。但是 CoreJs 是经过广泛测试和优化的，它涵盖了大量的 JavaScript 特性，并且能够很好地与 Babel 等工具配合使用。例如，在 Babel 的`@babel/preset - env`配置中，使用`useBuiltIns: 'usage'`选项时，Babel 会根据目标浏览器的情况，自动引入 CoreJs 中的相关 Polyfill，以确保代码在目标浏览器中能够正确运行。这样就能够高效地为项目添加必要的 Polyfill，而不是无差别地引入所有可能的 Polyfill，从而减小代码体积。\n",{"_58":463,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1073/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1073/timeline",{"_58":466,"_60":61,"_62":467,"_64":468,"_66":469,"_68":470,"_70":471,"_72":472,"_74":473,"_76":474,"_78":475,"_111":476,"_131":132,"_133":24,"_134":-5,"_135":478,"_137":479,"_159":152,"_153":481,"_155":482,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":483,"_170":484,"_176":485,"_178":486,"_190":488,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1072","https://api.github.com/repos/pro-collection/interview-question/issues/1072/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1072/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1072/events","https://github.com/pro-collection/interview-question/issues/1072",2685221785,"I_kwDOJGDC6c6gDTuZ",1072,"[Webpack] 我如何实现在高版本浏览器上使用 es6 产物，在低版本上使用 es5【热度: 122】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[477],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":480,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-23T03:23:47Z","2024-11-23T03:23:48Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：Webpack es6 产物\n\n1. **分别打包 ES5 和 ES6 产物（从一份 ES6 源码）**\n\n - **配置 Webpack 和 Babel 基础环境**\n - 首先，安装必要的依赖。除了 Webpack 本身相关的依赖外，还需要`babel - loader`、`@babel/core`和`@babel/preset - env`。\n ```bash\n npm install webpack webpack - cli babel - loader @babel/core @babel/preset - env --save - dev\n ```\n - 创建 Webpack 配置文件（例如`webpack.config.js`），并在其中配置基本的模块规则，用于处理 JavaScript 文件。先配置一个简单的 ES6 打包规则：\n ```javascript\n const path = require(\"path\");\n module.exports = {\n entry: \"./src/index.js\", // 假设ES6源码入口文件是index.js\n output: {\n filename: \"es6 - bundle.js\",\n path: path.resolve(__dirname, \"dist/es6\"),\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel - loader\",\n options: {\n presets: [\n [\n \"@babel/preset - env\",\n {\n targets: {\n // 设置一个较高的浏览器版本支持ES6原生，这里假设现代浏览器都支持\n chrome: \"80\",\n firefox: \"70\",\n },\n },\n ],\n ],\n },\n },\n },\n ],\n },\n };\n ```\n - **添加 ES5 打包配置**\n - 为了打包 ES5 产物，在 Webpack 配置文件中添加另一个配置对象。可以通过`webpack - merge`工具（需要安装`webpack - merge`）来合并基础配置和 ES5 特定配置，避免重复配置。\n ```javascript\n const path = require(\"path\");\n const webpackMerge = require(\"webpack - merge\");\n const baseConfig = {\n entry: \"./src/index.js\",\n output: {\n filename: \"es6 - bundle.js\",\n path: path.resolve(__dirname, \"dist/es6\"),\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel - loader\",\n options: {\n presets: [\n [\n \"@babel/preset - env\",\n {\n targets: {\n chrome: \"80\",\n firefox: \"70\",\n },\n },\n ],\n ],\n },\n },\n },\n ],\n },\n };\n const es5Config = {\n output: {\n filename: \"es5 - bundle.js\",\n path: path.resolve(__dirname, \"dist/es5\"),\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel - loader\",\n options: {\n presets: [\n [\n \"@babel/preset - env\",\n {\n targets: {\n // 设置较低的浏览器版本，确保转换为ES5语法\n chrome: \"50\",\n firefox: \"40\",\n },\n useBuiltIns: \"usage\",\n corejs: 3,\n },\n ],\n ],\n },\n },\n },\n ],\n },\n };\n module.exports = [baseConfig, webpackMerge(baseConfig, es5Config)];\n ```\n - 上述配置中，`es5Config`部分重新定义了输出文件名和路径，并且在`babel - loader`的选项中，通过`@babel/preset - env`的`targets`选项设置了较低的浏览器支持范围，这样就可以将源码转换为 ES5 语法并打包到`dist/es5`目录下的`es5 - bundle.js`文件。\n\n2. **区分加载 ES5 还是 ES6 产物**\n - **使用浏览器特性检测脚本（HTML + JavaScript）**\n - 在 HTML 文件（假设是`index.html`）中，可以添加一段 JavaScript 代码来检测浏览器是否支持 ES6 特性。例如，检测`Promise`是否存在（`Promise`是 ES6 的一个典型特性）。\n ```html\n \n \n \n \n Document\n \n \n \n \n \n ```\n - 这种方法简单直接，但有一定的局限性。如果浏览器对 ES6 的支持不完全（例如，支持部分 ES6 语法但不支持检测的特性），可能会导致加载错误的产物。\n - **使用服务端渲染（SSR）或构建时检测（更高级）**\n - 如果是在服务端渲染的应用中，可以在服务端根据用户代理（User - Agent）来判断浏览器版本，进而选择加载 ES5 还是 ES6 产物。这需要在服务端代码（例如 Node.js 中的 Express 应用）中进行逻辑处理。\n - 另一种构建时检测的方法是，在构建过程中生成一个包含浏览器支持信息的配置文件。可以使用`browserslist`工具（`@babel/preset - env`内部也使用了这个工具来确定目标浏览器）结合一些自定义脚本，在构建时确定目标浏览器范围，然后生成一个配置文件（例如`browser - config.json`），内容可能是`{\"supportsES6\": true}`或者`{\"supportsES6\": false}`。在 HTML 文件中，通过读取这个配置文件来加载相应的产物。\n ```javascript\n // 假设这是一个自定义脚本，用于生成browser - config.json\n const browserslist = require(\"browserslist\");\n const fs = require(\"fs\");\n const targets = {\n chrome: \"50\",\n firefox: \"40\",\n };\n const browsers = browserslist(Object.keys(targets).map((browser) => `${browser} >= ${targets[browser]}`));\n const supportsES6 = browsers.some(\n (browser) => browser.includes(\"Chrome >= 80\") || browser.includes(\"Firefox >= 70\")\n );\n fs.writeFileSync(\"browser - config.json\", JSON.stringify({ supportsES6 }));\n ```\n - 然后在 HTML 文件中：\n ```html\n \n \n \n \n \n \n \n \n \n \n ```\n",{"_58":487,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1072/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1072/timeline",{"_58":490,"_60":61,"_62":491,"_64":492,"_66":493,"_68":494,"_70":495,"_72":496,"_74":497,"_76":498,"_78":499,"_111":500,"_131":132,"_133":24,"_134":-5,"_135":502,"_137":503,"_159":152,"_153":505,"_155":506,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":507,"_170":508,"_176":509,"_178":510,"_190":512,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1071","https://api.github.com/repos/pro-collection/interview-question/issues/1071/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1071/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1071/events","https://github.com/pro-collection/interview-question/issues/1071",2685189427,"I_kwDOJGDC6c6gDL0z",1071,"Webpack 与 Vite 在产物结果上有何区别【热度: 420】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[501],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":504,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-23T03:02:02Z","2024-11-23T03:02:03Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：Webpack 与 Vite 产物差异\n\n1. **模块格式和加载方式**\n\n - **Webpack**：\n - 在产物中，Webpack 通常会将多个模块打包成一个或多个 bundle 文件。这些 bundle 文件的格式可以是多种形式，如 CommonJS（在 Node.js 环境下常用）或者 IIFE（立即调用函数表达式，用于浏览器环境）。对于浏览器环境，Webpack 会将所有的 JavaScript 模块打包成一个或几个大的文件，并且通过自定义的加载逻辑来加载模块。例如，在一个简单的 Webpack 打包后的 JavaScript 文件中，可能会看到类似`__webpack_require__`这样的函数来实现模块的加载和解析。\n - 这种打包方式会把所有的模块依赖关系都内建在 bundle 文件中，使得浏览器在加载时只需要加载一个或几个文件即可。但如果应用规模较大，bundle 文件可能会变得非常大，导致首次加载时间过长。为了解决这个问题，Webpack 也支持代码分割（Code Splitting），通过动态`import`等方式将代码分割成多个较小的块，在需要的时候再加载。\n - **Vite**：\n - Vite 在产物中更倾向于保留原生 ES 模块（ESM）的格式。在开发阶段，Vite 利用浏览器对 ES 模块的原生支持来加载模块，而在生产阶段，它也会尽量保持这种格式。这意味着浏览器可以利用原生的``。更新后，可以将其改为``，其中`v=2`是版本号。每次更新项目时，递增这个版本号。\n - 在构建或部署工具中，可以通过配置自动更新这个版本号。例如，在使用 Webpack 构建时，可以使用`html - webpack - plugin`插件结合版本控制工具来自动更新版本号。假设你有一个简单的 Webpack 配置文件，如下：\n ```javascript\n const HtmlWebpackPlugin = require(\"html - webpack - plugin\");\n const webpack = require(\"webpack\");\n const path = require(\"path\");\n module.exports = {\n entry: \"./src/index.js\",\n output: {\n filename: \"main.js\",\n path: path.resolve(__dirname, \"dist\"),\n },\n plugins: [\n new HtmlWebpackPlugin({\n template: \"index.html\",\n // 自定义版本号，这里可以通过读取文件系统中的版本文件或者其他方式来获取真实的版本号\n version: \"2\",\n }),\n new webpack.BannerPlugin(\"版权所有，翻版必究\"),\n ],\n };\n ```\n - 这个配置文件中的`HtmlWebpackPlugin`插件可以将版本号插入到 HTML 文件中引用的静态资源 URL 中。\n2. **利用浏览器缓存清除技术（Service Workers）**\n - **原理**：Service Workers 是一种在浏览器后台运行的脚本，它可以拦截和处理网络请求。通过 Service Workers，可以控制浏览器缓存的清除和更新。当项目更新后，Service Workers 可以检测到新的资源版本，并通知浏览器清除旧的缓存，从而强制刷新页面资源。\n - **示例步骤**：\n - 首先，在网页中注册 Service Workers：\n ```javascript\n if (\"serviceWorker\" in navigator) {\n navigator.serviceWorker\n .register(\"service - worker.js\")\n .then(function (registration) {\n console.log(\"Service Worker注册成功\");\n })\n .catch(function (error) {\n console.log(\"Service Worker注册失败: \", error);\n });\n }\n ```\n - 然后，在`service - worker.js`文件中编写缓存管理逻辑。例如，以下是一个简单的缓存更新逻辑：\n ```javascript\n self.addEventListener(\"fetch\", function (event) {\n event.respondWith(\n caches.match(event.request).then(function (response) {\n if (response) {\n return response;\n }\n return fetch(event.request);\n })\n );\n });\n self.addEventListener(\"activate\", function (event) {\n var cacheWhitelist = [\"v2 - cache\"];\n event.waitUntil(\n caches.keys().then(function (cacheNames) {\n return Promise.all(\n cacheNames.map(function (cacheName) {\n if (cacheWhitelist.indexOf(cacheName) === -1) {\n return caches.delete(cacheName);\n }\n })\n );\n })\n );\n });\n ```\n - 这里的`activate`事件处理函数用于在 Service Workers 激活时，清除旧的缓存（不在`cacheWhitelist`中的缓存）。`fetch`事件处理函数用于拦截网络请求，首先尝试从缓存中获取资源，如果缓存中没有，则从网络中获取。\n3. **通过 WebSockets 或长轮询进行实时通知（较复杂）**\n - **原理**：建立一个服务器到客户端的实时通信通道，如 WebSockets 或长轮询。当项目更新时，服务器通过这个通道发送一个通知到客户端，客户端收到通知后，刷新页面或者重新加载相关资源。\n - **示例（以 WebSockets 为例）**：\n - 首先，在服务器端（假设使用 Node.js 和`ws`库）建立 WebSockets 服务：\n ```javascript\n const WebSocket = require(\"ws\");\n const wss = new WebSocket.Server({ port: 8080 });\n wss.on(\"connection\", function connection(ws) {\n console.log(\"客户端已连接\");\n // 当项目更新时，发送更新通知\n ws.send(\"update\");\n });\n ```\n - 然后，在客户端建立 WebSockets 连接并监听更新通知：\n ```javascript\n const socket = new WebSocket(\"ws://localhost:8080\");\n socket.addEventListener(\"message\", function (event) {\n if (event.data === \"update\") {\n location.reload();\n }\n });\n ```\n - 这种方法比较复杂，需要在服务器端和客户端都进行额外的配置，但可以实现非常及时的更新通知。\n",{"_58":627,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1067/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1067/timeline",{"_58":630,"_60":61,"_62":631,"_64":632,"_66":633,"_68":634,"_70":635,"_72":636,"_74":637,"_76":638,"_78":639,"_111":640,"_131":132,"_133":24,"_134":-5,"_135":653,"_137":654,"_159":195,"_153":656,"_155":657,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":658,"_170":659,"_176":660,"_178":661,"_190":663,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1066","https://api.github.com/repos/pro-collection/interview-question/issues/1066/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1066/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1066/events","https://github.com/pro-collection/interview-question/issues/1066",2683321083,"I_kwDOJGDC6c6f8Dr7",1066,"Object.defineProperty 是否可以监听拦截数组变化【热度: 144】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[641,648],{"_70":642,"_72":643,"_58":644,"_117":645,"_119":646,"_121":24,"_122":647},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":649,"_72":650,"_58":651,"_117":652,"_119":129,"_121":24,"_122":130},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":655,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-22T14:08:52Z","2025-02-27T10:34:11Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：Object.defineProperty 监听数组变化\n\n1. **基本原理与部分可行性**\n - `Object.defineProperty`可以用于监听和拦截数组的某些变化，但不是原生地对所有数组操作都能很好地监听。\n - 数组在 JavaScript 中是特殊的对象，其索引可以看作是对象属性。理论上，我们可以使用`Object.defineProperty`为数组的每个索引（属性）定义属性描述符，以此来尝试监听数组元素的读取和设置操作。\n - 例如，对于一个简单的数组元素设置操作，可以这样定义：\n ```javascript\n let arr = [1, 2, 3];\n Object.defineProperty(arr, \"0\", {\n get: function () {\n console.log(\"读取索引为0的元素\");\n return arr[0];\n },\n set: function (value) {\n console.log(\"设置索引为0的元素\");\n arr[0] = value;\n },\n });\n ```\n - 当通过`arr[0]`读取或设置元素时，相应的`get`和`set`函数会被触发，从而实现对这个特定索引元素的变化监听。\n2. **局限性**\n\n - **无法自动监听所有元素**：这种方式需要为每个要监听的索引单独使用`Object.defineProperty`进行定义。如果数组长度是动态变化的，或者要监听整个数组，这种逐个定义的方式就非常繁琐且不实用。例如，对于一个有很多元素的数组或者长度会不断变化的数组，几乎不可能预先为每个可能的索引都定义属性描述符。\n - **无法直接监听数组方法**：它不能直接监听数组的方法（如`push`、`pop`、`shift`、`unshift`、`splice`等）引起的变化。这些方法会改变数组的状态，但不会触发通过`Object.defineProperty`为数组元素定义的`get`和`set`操作。比如，当使用`push`方法添加元素到数组时，不会自动触发之前为数组元素定义的`set`操作来监听这个新元素的添加。\n\n3. **解决方案 - 重写数组方法实现全面监听**\n\n以下是使用`Object.defineProperty`来实现监听数组部分常见操作（如修改元素、添加元素、删除元素等）的基本思路和示例代码：\n\n**3.1. 整体思路**\n\n要使用`Object.defineProperty`监听数组，主要思路是对数组的原型方法进行重定义，在这些重定义的方法内部，通过`Object.defineProperty`来设置属性描述符，使得在执行这些操作时能够触发自定义的监听函数，从而实现对数组变化的监听。\n\n**3.2. 具体步骤及示例代码**\n\n**（1）创建一个继承自原生数组的新类**\n\n首先，创建一个新的类，让它继承自原生数组，以便后续可以在这个新类上添加自定义的监听逻辑。\n\n```javascript\nfunction ObservableArray() {\n // 调用原生数组构造函数，确保可以像正常数组一样使用\n Array.apply(this, arguments);\n}\nObservableArray.prototype = Object.create(Array.prototype);\nObservableArray.prototype.constructor = ObservableArray;\n```\n\n**（2）重定义数组的部分原型方法**\n\n接下来，重定义数组的一些常见操作的原型方法，比如`push`、`pop`、`shift`、`unshift`、`splice`等，在这些重定义的方法内部添加监听逻辑。\n\n以`push`方法为例：\n\n```javascript\nObservableArray.prototype.push = function () {\n // 保存当前数组长度，用于后续判断添加了几个元素\n var previousLength = this.length;\n\n // 调用原生数组的push方法，执行实际的添加操作\n var result = Array.prototype.push.apply(this, arguments);\n\n // 遍历新添加的元素，为每个元素设置属性描述符以实现监听\n for (var i = previousLength; i < this.length; i++) {\n (function (index) {\n Object.defineProperty(this, index, {\n enumerable: true,\n configurable: true,\n get: function () {\n console.log(\"正在读取索引为\" + index + \"的元素\");\n return this[index];\n },\n set: function (value) {\n console.log(\"正在设置索引为\" + index + \"的元素为\" + value);\n this[index] = value;\n },\n });\n }).call(this, i);\n }\n\n console.log(\"执行了push操作，添加了\" + (this.length - previousLength) + \"个元素\");\n\n return result;\n};\n```\n\n在上述`push`方法的重定义中：\n\n- 首先调用原生数组的`push`方法来执行实际的添加元素操作，并保存添加前的数组长度。\n- 然后，通过循环为新添加的每个元素使用`Object.defineProperty`设置属性描述符。在`get`方法中，当读取该元素时会打印相应信息；在`set`方法中，当设置该元素时也会打印相应信息。\n- 最后，打印出执行`push`操作添加的元素个数。\n\n类似地，可以重定义其他如`pop`、`shift`、`unshift`、`splice`等方法，以下是`pop`方法的重定义示例：\n\n```javascript\nObservableArray.prototype.pop = function () {\n var result = Array.prototype.pop.apply(this, arguments);\n\n if (this.length >= 0) {\n Object.defineProperty(this, this.length, {\n enumerable: true,\n configurable: true,\n get: function () {\n console.log(\"正在读取最后一个元素\");\n return this[this.length];\n },\n set: function (value) {\n console.log(\"正在设置最后一个元素为\" + value);\n this[this.length] = value;\n },\n });\n }\n\n console.log(\"执行了pop操作\");\n\n return result;\n};\n```\n\n**3.3. 使用示例**\n\n创建`ObservableArray`的实例并进行操作来测试监听效果：\n\n```javascript\nvar myArray = new ObservableArray(1, 2, 3);\n\nmyArray.push(4, 5);\nvar poppedElement = myArray.pop();\nmyArray[0] = 10;\n```\n\n在上述示例中：\n\n- 首先创建了一个`ObservableArray`实例`myArray`并初始化为`[1, 2, 3]`。\n- 然后执行`myArray.push(4, 5)`，此时会触发重定义的`push`方法，添加元素的同时会为新添加的元素设置监听逻辑，并且会打印出相关操作信息。\n- 接着执行`myArray.pop()`，触发重定义的`pop`方法，执行弹出操作并设置对最后一个元素的监听逻辑，同时打印出相关操作信息。\n- 最后执行`myArray[0] = 10`，由于之前为数组元素设置了监听逻辑（在`push`方法中对新添加元素设置了监听），所以会触发相应的`set`逻辑，打印出相关信息。\n",{"_58":662,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1066/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1066/timeline",{"_58":665,"_60":61,"_62":666,"_64":667,"_66":668,"_68":669,"_70":670,"_72":671,"_74":672,"_76":673,"_78":674,"_111":675,"_131":132,"_133":24,"_134":-5,"_135":682,"_137":683,"_159":152,"_153":685,"_155":686,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":687,"_170":688,"_176":689,"_178":690,"_190":692,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1065","https://api.github.com/repos/pro-collection/interview-question/issues/1065/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1065/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1065/events","https://github.com/pro-collection/interview-question/issues/1065",2683239431,"I_kwDOJGDC6c6f7vwH",1065,"proxy 可以拦截数组变化吗【热度: 133】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[676,677],{"_70":642,"_72":643,"_58":644,"_117":645,"_119":646,"_121":24,"_122":647},{"_70":678,"_72":679,"_58":680,"_117":681,"_119":129,"_121":24,"_122":130},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东",[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":684,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-22T13:33:35Z","2024-11-22T13:34:57Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：proxy set 拦截器\n\n1. **可以拦截数组变化**\n - `Proxy`可以有效地拦截数组的变化。当对数组进行各种操作，如修改元素、添加或删除元素等，`Proxy`都能够捕获这些操作并进行拦截。\n2. **拦截数组的读取和设置操作**\n - 对于数组元素的读取和设置操作，可以通过`get`和`set`拦截器来实现。\n - **`get`拦截器示例**：\n - 假设我们要拦截对数组元素的读取操作，以记录哪些元素被访问了。\n ```javascript\n let array = [1, 2, 3];\n let proxyArray = new Proxy(array, {\n get(target, property, receiver) {\n console.log(`正在读取数组元素${property}`);\n return target[property];\n },\n });\n let element = proxyArray[1];\n ```\n - 在这个例子中，当通过`proxyArray[1]`读取数组元素时，`get`拦截器会被触发。它会先打印出`正在读取数组元素1`，然后返回数组中索引为`1`的元素（即`2`）。\n - **`set`拦截器示例**：\n - 假如我们想要拦截对数组元素的设置操作，比如限制数组元素的取值范围。\n ```javascript\n let array = [1, 2, 3];\n let proxyArray = new Proxy(array, {\n set(target, property, value, receiver) {\n if (value < 0) {\n throw new Error(\"数组元素不能小于0\");\n }\n target[property] = value;\n return true;\n },\n });\n proxyArray[0] = -1;\n ```\n - 这里，当尝试将`proxyArray[0]`设置为`-1`时，`set`拦截器会被触发。由于`-1`小于`0`，会抛出一个错误`数组元素不能小于0`。\n3. **拦截数组的方法调用**\n - 数组有许多方法，如`push`、`pop`、`shift`、`unshift`、`splice`等。可以通过`Proxy`的`apply`拦截器来拦截这些方法的调用。\n - **`apply`拦截器示例**：\n - 假设我们要记录数组的`push`方法的调用情况。\n ```javascript\n let array = [1, 2, 3];\n let proxyArray = new Proxy(array, {\n apply(target, thisArg, argumentsList) {\n if (target.push === argumentsList[0]) {\n console.log(\"正在调用数组的push方法\");\n }\n return target.apply(thisArg, argumentsList);\n },\n });\n proxyArray.push(4);\n ```\n - 在这个例子中，当调用`proxyArray.push(4)`时，`apply`拦截器会被触发。它会先打印出`正在调用数组的push方法`，然后执行正常的`push`操作，将`4`添加到数组中。\n",{"_58":691,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1065/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1065/timeline",{"_58":694,"_60":61,"_62":695,"_64":696,"_66":697,"_68":698,"_70":699,"_72":700,"_74":701,"_76":702,"_78":703,"_111":704,"_131":132,"_133":24,"_134":-5,"_135":711,"_137":712,"_159":152,"_153":714,"_155":715,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":716,"_170":717,"_176":718,"_178":719,"_190":721,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1064","https://api.github.com/repos/pro-collection/interview-question/issues/1064/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1064/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1064/events","https://github.com/pro-collection/interview-question/issues/1064",2683218885,"I_kwDOJGDC6c6f7qvF",1064,"proxy set 拦截器，其中参数中第一个参数 target 和最后一个参数 receiver 有何区别【热度: 132】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[705,706],{"_70":642,"_72":643,"_58":644,"_117":645,"_119":646,"_121":24,"_122":647},{"_70":707,"_72":708,"_58":709,"_117":710,"_119":129,"_121":24,"_122":130},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团",[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":713,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-22T13:23:26Z","2024-11-22T13:23:27Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：proxy set 拦截器\n\n1. **`target`参数**\n\n - **本质和用途**\n - `target`是被代理的原始对象。它代表了代理操作所基于的实际对象。在`Proxy`的`set`拦截器中，`target`的主要作用是提供对原始对象属性和状态的访问，以便在拦截属性设置操作时，可以正确地将新值应用到原始对象的相应属性上。\n - **示例说明**\n - 假设我们有一个简单的对象`originalObject = { value: 10 };`，并创建了一个代理 `const proxy = new Proxy(originalObject, { set });`。当拦截器 `set` 被触发时，`target` 就是 `originalObject`。例如：\n ```javascript\n const originalObject = { value: 10 };\n const handler = {\n set(target, property, value) {\n console.log(`原始对象是: ${JSON.stringify(target)}`);\n target[property] = value;\n return true;\n },\n };\n const proxy = new Proxy(originalObject, handler);\n proxy.value = 20;\n ```\n - 在这个例子中，当设置`proxy.value`时，`target`就是`originalObject`，`set`拦截器可以通过`target`来修改`originalObject`的`value`属性。\n\n2. **`receiver`参数**\n - **本质和用途**\n - `receiver`是实际接收属性设置操作的对象。在简单的情况下，它通常就是代理对象本身。但是，在一些更复杂的场景中，比如涉及到对象的继承或者多层代理时，`receiver`和`target`可能不同，它能帮助确定操作发生的真实上下文。\n - **示例说明**\n - 考虑这样一个场景，有一个基础对象`baseObject`，创建了一个代理`proxy1`，然后又有一个对象通过`Object.create(proxy1)`创建并继承自`proxy1`。当在这个继承对象上进行属性设置操作时，`receiver`将指向这个继承对象，而`target`仍然是原始被代理的对象。\n ```javascript\n const baseObject = { count: 0 };\n const handler = {\n set(target, property, value, receiver) {\n console.log(`接收操作的对象是: ${JSON.stringify(receiver)}`);\n console.log(`原始对象是: ${JSON.stringify(target)}`);\n target[property] = value;\n return true;\n },\n };\n const proxy1 = new Proxy(baseObject, handler);\n const derivedObject = Object.create(proxy1);\n derivedObject.count = 1;\n ```\n - 在这个例子中，当设置`derivedObject.count`时，`receiver`是`derivedObject`，因为它是实际接收操作的对象，而`target`是`baseObject`，因为它是原始被代理的对象。这就体现了`receiver`和`target`在复杂场景下的区别。\n",{"_58":720,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1064/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1064/timeline",{"_58":723,"_60":61,"_62":724,"_64":725,"_66":726,"_68":727,"_70":728,"_72":729,"_74":730,"_76":731,"_78":732,"_111":733,"_131":132,"_133":24,"_134":-5,"_135":736,"_137":737,"_159":152,"_153":739,"_155":739,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":740,"_170":741,"_176":742,"_178":743,"_190":745,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1063","https://api.github.com/repos/pro-collection/interview-question/issues/1063/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1063/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1063/events","https://github.com/pro-collection/interview-question/issues/1063",2683182217,"I_kwDOJGDC6c6f7hyJ",1063,"在 JS 里面， proxy set 拦截器，有那些参数，分别表示什么含义【热度: 120】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[734,735],{"_70":642,"_72":643,"_58":644,"_117":645,"_119":646,"_121":24,"_122":647},{"_70":707,"_72":708,"_58":709,"_117":710,"_119":129,"_121":24,"_122":130},[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":738,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-22T13:17:42Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：proxy set 拦截器\n\n1. **`target`参数**\n - **含义**：它是被代理的目标对象。这个对象是原始的、即将被操作（在`set`操作的情境下是被设置属性值）的对象。例如，如果你创建了一个代理来拦截对某个对象属性的设置操作，`target`就是那个实际拥有属性的原始对象。\n - **示例**：\n ```javascript\n let targetObj = { name: \"John\" };\n let proxyObj = new Proxy(targetObj, {\n set(target, property, value) {\n // 这里的target就是targetObj\n console.log(`正在设置${target}对象的${property}属性为${value}`);\n target[property] = value;\n return true;\n },\n });\n proxyObj.age = 30;\n ```\n 在这个例子中，`target`在`proxyObj.age = 30`这个操作中，就是`targetObj`，它是被代理的基础对象，`set`拦截器可以对这个对象的属性设置操作进行监控和修改。\n2. **`property`参数**\n - **含义**：它表示要设置的属性名。在对象操作中，当你通过`obj[key] = value`或者`obj.property = value`这样的方式设置属性时，`property`就是那个`key`或者`property`。这个参数让拦截器知道具体是哪个属性正在被操作。\n - **示例**：\n ```javascript\n let targetObj = { name: \"John\" };\n let proxyObj = new Proxy(targetObj, {\n set(target, property, value) {\n if (property === \"age\" && typeof value !== \"number\") {\n throw new Error(\"年龄必须是数字\");\n }\n target[property] = value;\n return true;\n },\n });\n proxyObj.age = \"abc\";\n ```\n 在这里，当尝试设置`proxyObj.age`时，`property`的值就是`'age'`，拦截器可以根据这个属性名来进行特定的验证（如这里检查年龄是否为数字）。\n3. **`value`参数**\n - **含义**：它是要设置给属性的新值。在`obj[key]=value`或者`obj.property = value`这样的操作中，`value`就是等号右边的值。拦截器可以获取这个值来决定是否允许设置，或者对这个值进行转换等操作。\n - **示例**：\n ```javascript\n let targetObj = { name: \"John\" };\n let proxyObj = new Proxy(targetObj, {\n set(target, property, value) {\n if (typeof value === \"string\") {\n value = value.toUpperCase();\n }\n target[property] = value;\n return true;\n },\n });\n proxyObj.name = \"jane\";\n console.log(targetObj.name);\n ```\n 在这个例子中，当设置`proxyObj.name`时，`value`最初是`'jane'`，拦截器将其转换为大写`'JANE'`后再设置到`targetObj`的`name`属性中，最后`targetObj.name`的值为`'JANE'`。\n4. **`receiver`参数（可选）**\n - **含义**：它通常是操作发生的对象。在大多数简单的情况下，它和`proxy`对象本身（即被用来设置属性的代理对象）是相同的。不过，在一些复杂的继承或者代理链场景下，它可以帮助确定真正接收操作的对象。这个参数提供了一种机制来正确地处理属性访问的上下文。\n - **示例**：\n ```javascript\n let targetObj = { name: \"John\" };\n let handler = {\n set(target, property, value, receiver) {\n console.log(`接收者是${receiver}`);\n target[property] = value;\n return true;\n },\n };\n let proxyObj = new Proxy(targetObj, handler);\n let anotherObj = Object.create(proxyObj);\n anotherObj.age = 30;\n ```\n 在这个例子中，当通过`anotherObj`（它继承自`proxyObj`）来设置属性`age`时，`receiver`参数将指向`anotherObj`，这可以帮助拦截器更好地理解操作的上下文。\n",{"_58":744,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1063/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1063/timeline",{"_58":747,"_60":61,"_62":748,"_64":749,"_66":750,"_68":751,"_70":752,"_72":753,"_74":754,"_76":755,"_78":756,"_111":757,"_131":132,"_133":24,"_134":-5,"_135":764,"_137":765,"_159":258,"_153":767,"_155":768,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":769,"_170":770,"_176":771,"_178":772,"_190":774,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1062","https://api.github.com/repos/pro-collection/interview-question/issues/1062/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1062/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1062/events","https://github.com/pro-collection/interview-question/issues/1062",2683159568,"I_kwDOJGDC6c6f7cQQ",1062,"如果一行文本展示不下，如何使其通过 popover 来展示全部内容？【热度: 325】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[758,759],{"_70":642,"_72":643,"_58":644,"_117":645,"_119":646,"_121":24,"_122":647},{"_70":760,"_72":761,"_58":762,"_117":763,"_119":129,"_121":24,"_122":130},5597035813,"LA_kwDOJGDC6c8AAAABTZv9JQ","https://api.github.com/repos/pro-collection/interview-question/labels/PDD","PDD",[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":766,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-22T13:16:03Z","2025-03-14T07:36:36Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：动态计算文本是否溢出\n\n> 作者备注\n>\n> 主要考核 JS 动态计算文本是否溢出\n\n以下是一种使用 HTML、CSS 和 JavaScript 来实现当文本一行展示不下时通过`popover`展示全部内容的基本方法。假设你在一个网页环境中操作。\n\n1. **HTML 结构**\n\n - 首先，创建一个包含文本的元素，例如一个`span`标签。为这个元素添加一个自定义属性（比如`data-full-text`）来存储完整的文本内容。\n\n ```html\n \n 这是一段很长很长很长的文本\n \n ```\n\n2. **CSS 样式**\n\n - 为`span`元素设置样式，使其在一行内显示文本，并在文本溢出时隐藏溢出部分。\n\n ```css\n #textElement {\n white - space: nowrap;\n overflow: hidden;\n text - overflow: ellipsis;\n cursor: pointer;\n }\n ```\n\n- 这里设置`cursor: pointer`是为了让用户知道这个元素是可以点击的，当文本溢出时可以触发`popover`显示完整内容。\n\n3. **JavaScript 功能实现**\n - 使用 JavaScript 来检测文本是否溢出。可以通过比较元素的`offsetWidth`和`scrollWidth`来实现。如果`scrollWidth`大于`offsetWidth`，说明文本溢出了。\n - 当文本溢出时，创建一个`popover`来显示完整内容。可以使用一些现成的 JavaScript 库（如 Bootstrap 的`popover`插件）或者自己编写简单的`popover`功能。以下是一个使用自定义 JavaScript 实现简单`popover`功能的示例（不依赖第三方库）：\n ```javascript\n document.addEventListener(\"DOMContentLoaded\", function () {\n const textElement = document.getElementById(\"textElement\");\n if (textElement.scrollWidth > textElement.offsetWidth) {\n textElement.addEventListener(\"click\", function () {\n const fullText = this.getAttribute(\"data-full-text\");\n const popover = document.createElement(\"div\");\n popover.className = \"popover\";\n popover.textContent = fullText;\n document.body.appendChild(popover);\n // 简单的定位，将popover放在被点击元素的下方\n const rect = this.getBoundingClientRect();\n popover.style.left = rect.left + \"px\";\n popover.style.top = rect.bottom + 5 + \"px\";\n });\n }\n });\n ```\n - 同时，你还需要添加一些 CSS 样式来美化`popover`：\n ```css\n .popover {\n position: absolute;\n background - color: white;\n border: 1px solid gray;\n padding: 10px;\n border - radius: 5px;\n z - index: 100;\n }\n ```\n\n上述代码首先检查文本是否溢出。如果溢出，当用户点击该文本元素时，会创建一个`popover`元素并将完整文本内容放入其中，然后将`popover`添加到文档中，并简单地定位在被点击元素的下方。\n\n请注意，这只是一个简单的示例，在实际应用中，你可能需要根据具体的设计要求和项目框架（如使用 Vue.js、React.js 等）来进行更复杂的实现，并且可能需要考虑浏览器兼容性等问题。如果使用像 Bootstrap 这样的框架，实现`popover`功能会更加方便和具有更好的样式一致性。\n",{"_58":773,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1062/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1062/timeline",{"_58":776,"_60":61,"_62":777,"_64":778,"_66":779,"_68":780,"_70":781,"_72":782,"_74":783,"_76":784,"_78":785,"_111":786,"_131":132,"_133":24,"_134":-5,"_135":788,"_137":789,"_159":152,"_153":791,"_155":792,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":793,"_170":794,"_176":795,"_178":796,"_190":798,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1060","https://api.github.com/repos/pro-collection/interview-question/issues/1060/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1060/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1060/events","https://github.com/pro-collection/interview-question/issues/1060",2638601135,"I_kwDOJGDC6c6dRduv",1060,"比如我把事件委托注册在 body 上面，我如何去针对性的出发不同的子元素【热度: 338】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[787],{"_70":642,"_72":643,"_58":644,"_117":645,"_119":646,"_121":24,"_122":647},[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":790,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T16:23:54Z","2024-11-06T16:23:55Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：事件委托应用场景\n\n> 这个问题属于一个典型的「事件委托」的应用场景\n>\n> 如果知识背诵八股文的同学，可能这个问题就尴尬了\n\n当把事件委托注册在 `body` 上时，可以通过以下方法针对性地触发不同子元素的特定行为：\n\n**一、利用事件对象的属性判断目标元素**\n\n1. `event.target` 属性：\n\n - 当事件在 `body` 上触发时，可以通过 `event.target` 来获取实际触发事件的元素。\n - 例如：\n ```javascript\n document.body.addEventListener(\"click\", function (event) {\n const target = event.target;\n if (target.classList.contains(\"button1\")) {\n // 处理按钮 1 的点击事件\n } else if (target.classList.contains(\"button2\")) {\n // 处理按钮 2 的点击事件\n }\n });\n ```\n - 在这个例子中，通过检查 `event.target` 的 `classList` 来确定点击的是哪个特定的按钮，然后执行相应的处理逻辑。\n\n2. `matches()` 方法：\n - 可以使用 `event.target.matches(selector)` 方法来检查目标元素是否与特定的 CSS 选择器匹配。\n - 例如：\n ```javascript\n document.body.addEventListener(\"click\", function (event) {\n const target = event.target;\n if (target.matches(\"#element1\")) {\n // 处理元素 1 的点击事件\n } else if (target.matches(\".class2\")) {\n // 处理具有特定类名的元素的点击事件\n }\n });\n ```\n - 这里使用 `matches()` 方法来判断点击的元素是否与特定的 ID 或类名选择器匹配，从而执行相应的操作。\n\n**二、使用数据属性进行区分**\n\n1. 设置 `data-*` 属性：\n - 可以在 HTML 元素上设置自定义的 `data-*` 属性来标识不同的元素，并在事件处理函数中根据这些属性进行区分。\n - 例如：\n ```html\n \n ```\n - 然后在 JavaScript 中：\n ```javascript\n document.body.addEventListener(\"click\", function (event) {\n const target = event.target;\n if (target.dataset.action === \"action1\") {\n // 处理按钮 1 的点击事件\n } else if (target.dataset.action === \"action2\") {\n // 处理按钮 2 的点击事件\n }\n });\n ```\n - 在这个例子中，通过检查元素的 `data-action` 属性的值来确定执行哪个特定的操作。\n\n通过这些方法，可以在事件委托到 `body` 的情况下，有针对性地处理不同子元素的事件，提高代码的效率和可维护性。\n",{"_58":797,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1060/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1060/timeline",{"_58":800,"_60":61,"_62":801,"_64":802,"_66":803,"_68":804,"_70":805,"_72":806,"_74":807,"_76":808,"_78":809,"_111":810,"_131":132,"_133":24,"_134":-5,"_135":812,"_137":813,"_159":152,"_153":815,"_155":816,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":817,"_170":818,"_176":819,"_178":820,"_190":822,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1059","https://api.github.com/repos/pro-collection/interview-question/issues/1059/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1059/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1059/events","https://github.com/pro-collection/interview-question/issues/1059",2638590157,"I_kwDOJGDC6c6dRbDN",1059,"绑定事件的元素节点销毁又重新创建，绑定的事件还会生效吗【热度: 337】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[811],{"_70":642,"_72":643,"_58":644,"_117":645,"_119":646,"_121":24,"_122":647},[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":814,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T16:19:59Z","2024-11-06T16:20:00Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：事件委托应用场景\n\n> 比如我将事件绑定在 body 上面，后来这个 body 人为移除掉了，然后又重新创建了一个 body 标签，那么之前绑定在 body 上面的事件还会生效吗？\n\n如果将事件绑定在 `body` 上，然后移除了这个 `body` 标签并重新创建一个 `body` 标签，之前绑定在旧 `body` 上的事件不会生效在新的 `body` 上。\n\n原因如下：\n\n当你使用传统的事件绑定方式（如 `addEventListener`）将事件绑定到一个特定的 DOM 元素上时，这个绑定是针对特定的实例。一旦该元素被移除，与之相关的事件处理程序也会与该元素一起被销毁。当重新创建一个新的 `body` 标签时，它是一个全新的 DOM 元素，没有与之前被移除的 `body` 上的事件处理程序相关联。\n\n例如：\n\n```html\n\n\n \n \n \n\n \n \n \n\n```\n\n在这个例子中，点击新创建的 `body` 不会触发之前绑定的点击事件处理程序。\n",{"_58":821,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1059/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1059/timeline",{"_58":824,"_60":61,"_62":825,"_64":826,"_66":827,"_68":828,"_70":829,"_72":830,"_74":831,"_76":832,"_78":833,"_111":834,"_131":132,"_133":24,"_134":-5,"_135":836,"_137":837,"_159":152,"_153":839,"_155":839,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":840,"_170":841,"_176":842,"_178":843,"_190":845,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1058","https://api.github.com/repos/pro-collection/interview-question/issues/1058/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1058/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1058/events","https://github.com/pro-collection/interview-question/issues/1058",2638586369,"I_kwDOJGDC6c6dRaIB",1058,"如果特别多的事件都挂载到一个元素上，会存在什么问题【热度: 336】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[835],{"_70":642,"_72":643,"_58":644,"_117":645,"_119":646,"_121":24,"_122":647},[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":838,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T16:18:34Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：事件委托应用场景\n\n如果将特别多的事件都挂载到一个元素上，比如在事件委托时将事件都绑定在 `body` 上，可能会存在以下问题：\n\n**一、性能问题**\n\n1. **事件处理开销增加**：\n\n - 每次触发事件时，浏览器需要遍历所有绑定在该元素上的事件处理程序，确定哪个处理程序应该响应特定的事件。随着事件数量的增加，这个遍历过程会变得更加耗时，导致性能下降。\n - 例如，当用户在页面上进行频繁的交互操作时，如果有大量事件绑定在 `body` 上，浏览器可能会花费更多的时间来确定应该执行哪个事件处理程序，从而使页面的响应速度变慢。\n\n2. **内存占用增加**：\n - 每个事件处理程序都需要占用一定的内存空间。当有大量事件处理程序绑定到一个元素上时，会消耗更多的内存。这可能会对浏览器的性能产生负面影响，尤其是在内存受限的设备上。\n - 如果页面中同时有其他复杂的操作或大量的数据处理，内存占用过高可能导致浏览器变得不稳定，甚至出现崩溃的情况。\n\n**二、可维护性问题**\n\n1. **代码复杂性增加**：\n\n - 大量的事件处理程序集中在一个元素上，会使代码变得更加复杂和难以理解。这增加了开发和维护的难度，尤其是当需要修改或调试代码时。\n - 例如，在查找特定事件处理程序的问题时，可能需要在大量的代码中进行搜索，这会耗费更多的时间和精力。\n\n2. **冲突和意外行为的风险增加**：\n - 当有多个事件处理程序同时响应一个事件时，可能会出现冲突或意外的行为。例如，一个事件处理程序可能会修改页面的状态，而另一个事件处理程序可能依赖于原始状态，导致不可预测的结果。\n - 随着事件数量的增加，这种冲突的可能性也会增加，使得代码的调试和修复变得更加困难。\n\n**三、可扩展性问题**\n\n1. **难以扩展和修改**：\n\n - 如果后续需要添加新的功能或修改现有功能，大量的事件处理程序绑定在一个元素上可能会使这个过程变得复杂。新的事件处理程序可能需要与现有的处理程序协调工作，这可能需要对现有代码进行大量的修改。\n - 例如，当需要添加一个新的交互元素或改变页面的布局时，可能需要重新考虑事件的绑定方式，以确保新的元素能够正确地响应事件。\n\n2. **不利于模块化开发**：\n - 将大量事件集中在一个元素上不利于模块化开发。模块化开发强调将功能分解为独立的模块，每个模块负责特定的任务。如果事件处理程序都绑定在一个元素上，就难以将相关的功能分离出来，形成独立的模块。\n - 这会使代码的可重用性降低，不利于团队协作和代码的维护。\n",{"_58":844,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1058/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1058/timeline",{"_58":847,"_60":61,"_62":848,"_64":849,"_66":850,"_68":851,"_70":852,"_72":853,"_74":854,"_76":855,"_78":856,"_111":857,"_131":132,"_133":24,"_134":-5,"_135":859,"_137":860,"_159":152,"_153":862,"_155":863,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":864,"_170":865,"_176":866,"_178":867,"_190":869,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1057","https://api.github.com/repos/pro-collection/interview-question/issues/1057/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1057/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1057/events","https://github.com/pro-collection/interview-question/issues/1057",2638581112,"I_kwDOJGDC6c6dRY14",1057,"CDN 是如何决策资源请求的【热度: 300】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[858],{"_70":245,"_72":246,"_58":247,"_117":248,"_119":249,"_121":24,"_122":250},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":861,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T16:16:38Z","2024-11-06T16:16:39Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：CDN 资源请求决策\n\nCDN（Content Delivery Network，内容分发网络）通过以下方式决策资源请求：\n\n**一、用户请求导向**\n\n1. **DNS 解析引导**：\n\n - 当用户在浏览器中输入一个网址请求资源时，首先会进行 DNS（Domain Name System，域名系统）查询，将域名解析为对应的 IP 地址。\n - CDN 利用 DNS 系统，将用户的请求导向到离用户最近的 CDN 节点。例如，用户在北京访问一个使用了 CDN 的网站，DNS 服务器会根据用户的地理位置和网络状况，返回一个位于北京或附近的 CDN 节点的 IP 地址。\n - 这个过程通常是通过修改域名的 DNS 记录来实现的，将域名指向 CDN 提供商的 DNS 服务器，由 CDN 的 DNS 系统进行智能解析和调度。\n\n2. **Anycast 技术辅助**：\n - 一些 CDN 提供商还会使用 Anycast 技术，将同一个 IP 地址分配给多个位于不同地理位置的 CDN 节点。\n - 当用户请求这个 IP 地址时，网络会自动将请求路由到离用户最近的节点。例如，一个 CDN 节点的 IP 地址为 192.168.1.1，这个 IP 地址同时被分配给了位于北京、上海、广州等地的节点。当用户在北京请求这个 IP 地址时，网络会自动将请求路由到北京的节点。\n\n**二、节点选择策略**\n\n1. **地理位置就近原则**：\n\n - CDN 会根据用户的地理位置，选择距离用户最近的节点来响应请求。这样可以减少网络延迟，提高用户访问速度。例如，用户在上海，CDN 会优先选择上海或周边地区的节点来提供服务。\n - 通过测量用户与各个节点之间的网络延迟、响应时间等指标，确定最近的节点。可以使用 traceroute 等工具来测量网络路径和延迟。\n\n2. **网络状况评估**：\n\n - CDN 会实时监测各个节点的网络状况，包括带宽利用率、丢包率、延迟等。\n - 当用户请求资源时，CDN 会选择网络状况较好的节点来响应请求。例如，如果某个节点的带宽利用率过高或出现网络故障，CDN 会自动将请求导向到其他节点。\n - 使用网络监测工具和算法，不断收集和分析节点的网络性能数据，以便做出最优的节点选择决策。\n\n3. **负载均衡考虑**：\n - CDN 会考虑各个节点的负载情况，避免某个节点负载过高而影响服务质量。\n - 当用户请求资源时，CDN 会选择负载较轻的节点来响应请求。例如，如果某个节点正在处理大量的请求，CDN 会将新的请求分配到其他负载较轻的节点。\n - 通过实时监测节点的负载指标，如并发连接数、处理请求的速度等，并使用负载均衡算法来分配请求。\n\n**三、资源缓存与更新策略**\n\n1. **缓存机制**：\n\n - CDN 节点会缓存网站的静态资源，如图片、CSS 文件、JavaScript 文件等。\n - 当用户请求这些资源时，CDN 节点可以直接从缓存中返回资源，而不需要从源服务器获取，从而大大提高响应速度。\n - 根据资源的类型、大小、访问频率等因素设置缓存策略，确定资源的缓存时间和更新方式。\n\n2. **缓存更新**：\n - 当源服务器上的资源发生变化时，CDN 需要及时更新缓存。\n - CDN 可以通过多种方式实现缓存更新，如主动推送、被动拉取等。主动推送是指源服务器在资源发生变化时，主动通知 CDN 节点更新缓存；被动拉取是指 CDN 节点在发现用户请求的资源与缓存中的资源不一致时，自动从源服务器获取最新的资源。\n - 使用缓存更新策略可以确保用户始终获取到最新的资源，同时又能充分利用缓存提高访问速度。\n\n**四、性能优化与安全保障**\n\n1. **性能优化措施**：\n\n - CDN 可以采用多种性能优化技术，如压缩资源、优化图片大小、合并文件等，减少资源的传输大小和加载时间。\n - 还可以使用 HTTP/2、QUIC 等新的网络协议，提高网络传输效率。例如，使用 HTTP/2 的多路复用功能，可以在一个连接上同时传输多个请求和响应，减少连接建立的开销。\n\n2. **安全保障机制**：\n - CDN 可以提供一定的安全保障，如 DDoS（Distributed Denial of Service，分布式拒绝服务）攻击防护、WAF（Web Application Firewall，Web 应用防火墙）等。\n - 通过分布式的架构和强大的网络带宽，可以抵御大规模的 DDoS 攻击。WAF 可以检测和过滤恶意的网络请求，保护网站的安全。\n - 确保用户请求的资源是安全可靠的，同时保护源服务器免受攻击。\n\n**补充知识：GSLB 在 CDN 资源请求决策中的作用**\n\n1. 全局负载均衡\n\n - GSLB 负责在全球范围内对 CDN 节点进行负载均衡。它通过收集各个 CDN 节点的状态信息，如负载、网络延迟、可用性等，来决定将用户请求导向哪个节点。\n - GSLB 可以根据不同的策略进行决策，例如：\n - 基于地理位置：将用户请求导向距离最近的节点。\n - 基于网络性能：选择网络延迟最低、带宽最大的节点。\n - 基于负载情况：避免将请求导向负载过高的节点。\n\n2. 智能 DNS 解析\n\n - GSLB 通常与智能 DNS 系统结合使用。当用户进行 DNS 解析时，GSLB 会根据用户的 IP 地址和其他因素，返回一个最合适的 CDN 节点的 IP 地址。\n - 这样，用户的请求就会被直接导向到选定的 CDN 节点，无需经过多次跳转，提高了访问速度和效率。\n\n3. 故障转移与高可用性\n - GSLB 还可以实现故障转移和高可用性。如果某个 CDN 节点出现故障或不可用，GSLB 可以快速将用户请求导向其他正常的节点，确保服务的连续性。\n - 它会不断监测各个节点的状态，及时发现并处理故障，提高整个 CDN 系统的可靠性。\n",{"_58":868,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1057/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1057/timeline",{"_58":871,"_60":61,"_62":872,"_64":873,"_66":874,"_68":875,"_70":876,"_72":877,"_74":878,"_76":879,"_78":880,"_111":881,"_131":132,"_133":24,"_134":-5,"_135":883,"_137":884,"_159":152,"_153":886,"_155":887,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":888,"_170":889,"_176":890,"_178":891,"_190":893,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1056","https://api.github.com/repos/pro-collection/interview-question/issues/1056/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1056/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1056/events","https://github.com/pro-collection/interview-question/issues/1056",2638553807,"I_kwDOJGDC6c6dRSLP",1056,"网络五层模型具体是指的啥【热度: 116】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[882],{"_70":245,"_72":246,"_58":247,"_117":248,"_119":249,"_121":24,"_122":250},[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":885,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T16:08:01Z","2024-11-09T10:01:38Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：网络模型 OSI 参考模型\n\n网络五层模型，也称为 OSI（Open System Interconnection，开放系统互连）参考模型，它将计算机网络通信的功能划分为五个层次，每个层次都有特定的功能和职责。以下是五层模型的具体介绍：\n\n**一、物理层**\n\n1. 功能：\n\n - 物理层主要负责在物理介质上传输原始的比特流。\n - 它定义了网络设备之间的物理连接标准，包括电缆类型、连接器、信号电平、传输速率等。\n\n2. 举例：\n - 以太网中的双绞线、光纤等传输介质，以及 RJ45 连接器等都属于物理层的范畴。\n - 物理层规定了不同的信号编码方式，如曼彻斯特编码等，确保比特流在物理介质上的准确传输。\n\n**二、数据链路层**\n\n1. 功能：\n\n - 数据链路层负责将物理层传输的比特流组织成数据帧。\n - 进行数据帧的封装和解封装、差错检测和纠正、流量控制等操作。\n - 通过 MAC（Media Access Control，介质访问控制）地址在局域网中唯一标识网络设备，实现设备之间的数据传输。\n\n2. 举例：\n - 以太网协议、Wi-Fi 协议等都工作在数据链路层。\n - 数据链路层的设备如网桥、交换机等，根据 MAC 地址转发数据帧。\n\n**三、网络层**\n\n1. 功能：\n\n - 网络层负责在不同的网络之间进行数据包的路由和转发。\n - 通过 IP（Internet Protocol，网际协议）地址来标识网络中的设备，实现设备之间的逻辑通信。\n - 进行网络拥塞控制、路由选择等操作，确保数据包能够准确地从源设备传输到目标设备。\n\n2. 举例：\n - IP 协议是网络层的核心协议。\n - 路由器是工作在网络层的设备，根据 IP 地址和路由表选择最佳路径转发数据包。\n\n**四、传输层**\n\n1. 功能：\n\n - 传输层负责端到端的数据传输控制。\n - 提供可靠的数据传输服务，如 TCP（Transmission Control Protocol，传输控制协议），或者不可靠的传输服务，如 UDP（User Datagram Protocol，用户数据报协议）。\n - 进行流量控制、差错控制、连接管理等操作，确保数据的正确、有序传输。\n\n2. 举例：\n - 当你在浏览器中访问一个网站时，浏览器和服务器之间的 HTTP（HyperText Transfer Protocol，超文本传输协议）通信通常是基于 TCP 协议在传输层进行的。\n - 一些实时应用如视频会议、在线游戏等可能会使用 UDP 协议，因为它的传输速度快，实时性好，但不保证数据的可靠性。\n\n**五、应用层**\n\n1. 功能：\n\n - 应用层是网络通信的最高层，直接为用户的应用程序提供服务。\n - 定义了各种应用协议，如 HTTP、FTP（File Transfer Protocol，文件传输协议）、SMTP（Simple Mail Transfer Protocol，简单邮件传输协议）等。\n - 应用层的协议规定了应用程序之间通信的方式和数据格式。\n\n2. 举例：\n - 当你在浏览器中输入网址访问网页时，浏览器使用 HTTP 协议与服务器进行通信，获取网页内容。\n - 当你发送电子邮件时，邮件客户端使用 SMTP 协议将邮件发送到邮件服务器。\n\n网络五层模型的各层之间相互独立又相互协作，每一层都为上一层提供特定的服务，同时又依赖于下一层的功能。这种分层结构使得网络通信的设计和实现更加清晰、易于管理和扩展。\n",{"_58":892,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1056/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1056/timeline",{"_58":895,"_60":61,"_62":896,"_64":897,"_66":898,"_68":899,"_70":900,"_72":901,"_74":902,"_76":903,"_78":904,"_111":905,"_131":132,"_133":24,"_134":-5,"_135":907,"_137":908,"_159":152,"_153":910,"_155":910,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":911,"_170":912,"_176":913,"_178":914,"_190":916,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1055","https://api.github.com/repos/pro-collection/interview-question/issues/1055/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1055/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1055/events","https://github.com/pro-collection/interview-question/issues/1055",2638548465,"I_kwDOJGDC6c6dRQ3x",1055,"排查谁在修改对象【热度: 500】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[906],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":909,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T16:06:23Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"> 这是一个话题性值得问题：\n>\n> 例如：redux 申请了一份数据 store , 整个应用有特别多的地方在修改这个 store , 现在数据出现异常，如何排查是哪儿场景修改的这份 store 导致的异常;\n>\n> 不仅仅是针对 redux ，我们面临可能是全局对象等场景，对被多个调用方修改的现象。\n\n这个没有一个标准答案，可以咨询去探索。\n\n作者给几个意见：\n\n1. 首先不允许直接修改对象，必须要经过一个封装函数去修改，修改的时候，必须要传递 `actionUser` 信息，这个 `actionUser` 表示调用方是谁；\n\n2. 怎么约束这个事儿呢？就比如我封装了一个函数去修改全局对象，但是就是有人要手动去改这个全局对象。那么处理方式就是将这个全局对象冻结，或者 proxy 劫持。例如 formily 表单里面的 value 就是 proxy 劫持的，只能允许用户去通过 onChange 修改。\n\n3. 那如何保证调用方就一定会传递 `actionUser` 信息呢；因为是一个函数，所以要是调用方不传递这个会咋样；解决办法最强硬的就是，如果不传递 `actionUser` 就直接不执行，同时 `throw error`；稍微温和一点儿就是写一个 eslint 插件，给予 error 提示；最温和的方式，就是用 TS interface 去约束入参；\n",{"_58":915,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1055/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1055/timeline",{"_58":918,"_60":61,"_62":919,"_64":920,"_66":921,"_68":922,"_70":923,"_72":924,"_74":925,"_76":926,"_78":927,"_111":928,"_131":132,"_133":24,"_134":-5,"_135":930,"_137":931,"_159":152,"_153":933,"_155":933,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":934,"_170":935,"_176":936,"_178":937,"_190":939,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1054","https://api.github.com/repos/pro-collection/interview-question/issues/1054/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1054/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1054/events","https://github.com/pro-collection/interview-question/issues/1054",2638522277,"I_kwDOJGDC6c6dRKel",1054,"解构复制对象，是深拷贝还是浅拷贝【热度: 411】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[929],{"_70":642,"_72":643,"_58":644,"_117":645,"_119":646,"_121":24,"_122":647},[],{"_58":558,"_68":559,"_62":560,"_70":561,"_72":562,"_74":195,"_76":563,"_122":564,"_147":932,"_149":566,"_151":152,"_131":132,"_153":567,"_155":568,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T15:58:00Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：结构复制对象\n\n**浅拷贝**\n\n举例：\n\n```javascript\nconst obj = {\n prop1: \"value1\",\n prop2: {\n nestedProp: \"nestedValue\",\n },\n};\n\n// 使用扩展运算符进行复制\nconst obj2 = { ...obj };\n\nconsole.log(\"原始对象 obj:\", obj);\nconsole.log(\"复制后的对象 obj2:\", obj2);\n\n// 修改基本类型属性\nobj2.prop1 = \"newValue1\";\nconsole.log(\"修改基本类型属性后：\");\nconsole.log(\"原始对象 obj:\", obj);\nconsole.log(\"复制后的对象 obj2:\", obj2);\n\n// 修改嵌套对象的属性\nobj2.prop2.nestedProp = \"newNestedValue\";\nconsole.log(\"修改嵌套对象属性后：\");\nconsole.log(\"原始对象 obj:\", obj);\nconsole.log(\"复制后的对象 obj2:\", obj2);\n```\n\n解释如下：\n\n1. 首先定义了一个对象`obj`，它包含一个基本类型属性`prop1`和一个嵌套对象属性`prop2`。\n2. 使用扩展运算符`{...obj}`创建了一个新的对象`obj2`，这看起来像是对`obj`进行了复制。\n3. 当修改`obj2`的基本类型属性`prop1`时，原始对象`obj`的`prop1`不受影响。这是因为基本类型的值在复制时是按值复制的。\n4. 然而，当修改`obj2`的嵌套对象属性`prop2.nestedProp`时，原始对象`obj`的`prop2.nestedProp`也被修改了。这是因为扩展运算符对于嵌套对象只是复制了引用，而不是创建一个全新的嵌套对象副本，所以这是浅拷贝的行为。\n",{"_58":938,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1054/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1054/timeline",{"_58":941,"_60":61,"_62":942,"_64":943,"_66":944,"_68":945,"_70":946,"_72":947,"_74":948,"_76":949,"_78":950,"_111":951,"_131":132,"_133":24,"_134":-5,"_135":953,"_137":954,"_159":152,"_153":956,"_155":957,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":958,"_170":959,"_176":960,"_178":961,"_190":963,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1053","https://api.github.com/repos/pro-collection/interview-question/issues/1053/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1053/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1053/events","https://github.com/pro-collection/interview-question/issues/1053",2638508271,"I_kwDOJGDC6c6dRHDv",1053,"实现一个处理长字符串的函数【热度: 200】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[952],{"_70":216,"_72":217,"_58":218,"_117":219,"_119":120,"_121":24,"_122":220},[],{"_58":558,"_68":559,"_62":560,"_70":561,"_72":562,"_74":195,"_76":563,"_122":564,"_147":955,"_149":566,"_151":152,"_131":132,"_153":567,"_155":568,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T15:53:43Z","2024-11-06T15:53:44Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"> 描述\n>\n> 实现一个处理字符串的函数: 字符串长度不能超过 256，如果超过 256，字符串中间字符【...】处理，且处理结果字符串长度还是为 256\n\n以下是使用 JavaScript 实现的函数：\n\n```javascript\nfunction processString(str) {\n if (str.length <= 256) {\n return str;\n }\n const halfLength = Math.floor((256 - 3) / 2);\n return str.slice(0, halfLength) + \"... \" + str.slice(str.length - halfLength);\n}\n```\n\n这个函数首先检查输入字符串的长度是否超过 256。如果不超过，则直接返回原字符串。如果超过，它会计算出前后两端保留的字符长度，使得加上中间的“... ”后总长度为 256。然后，它从字符串的开头和结尾分别截取相应长度的子字符串，并将它们与“... ”拼接起来返回。\n",{"_58":962,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1053/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1053/timeline",{"_58":965,"_60":61,"_62":966,"_64":967,"_66":968,"_68":969,"_70":970,"_72":971,"_74":972,"_76":973,"_78":974,"_111":975,"_131":132,"_133":24,"_134":-5,"_135":977,"_137":978,"_159":195,"_153":980,"_155":981,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":982,"_170":983,"_176":984,"_178":985,"_190":987,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1052","https://api.github.com/repos/pro-collection/interview-question/issues/1052/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1052/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1052/events","https://github.com/pro-collection/interview-question/issues/1052",2638501705,"I_kwDOJGDC6c6dRFdJ",1052,"[React] 如何将一个层级非常深的子组件的某一个方法，抛出给上层组件使用【热度: 465】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[976],{"_70":550,"_72":551,"_58":552,"_117":553,"_119":554,"_121":24,"_122":555},[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":979,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T15:51:21Z","2025-02-25T08:49:06Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：调用子组件方法\n\n在 React 中，可以通过以下几种方式将一个层级非常深的子组件的某一个方法抛出给上层组件使用：\n\n**一、使用回调函数传递**\n\n1. 在父组件中定义一个回调函数，并将其作为属性传递给子组件的父级组件，依次向下传递，直到目标子组件。\n\n 例如：\n\n ```jsx\n function ParentComponent() {\n const handleDeepMethod = () => {\n console.log(\"调用了深层子组件的方法\");\n };\n return ;\n }\n\n function ChildComponent({ onDeepMethod }) {\n return ;\n }\n\n function GrandChildComponent({ onDeepMethod }) {\n const deepMethod = () => {\n console.log(\"深层子组件的方法被执行\");\n onDeepMethod();\n };\n return ;\n }\n ```\n\n2. 在深层子组件中，当特定条件触发时，调用这个通过层层传递下来的回调函数，从而让父组件执行相应的操作。\n\n**二、使用 React 的 Context API**\n\n1. 创建一个 Context：\n\n ```jsx\n const DeepMethodContext = React.createContext();\n ```\n\n2. 在父组件中提供值：\n\n ```jsx\n function ParentComponent() {\n const handleDeepMethod = () => {\n console.log(\"调用了深层子组件的方法\");\n };\n return (\n \n \n \n );\n }\n ```\n\n3. 在深层子组件中获取 Context 值并调用：\n\n ```jsx\n function GrandChildComponent() {\n const handleDeepMethod = React.useContext(DeepMethodContext);\n const deepMethod = () => {\n console.log(\"深层子组件的方法被执行\");\n handleDeepMethod();\n };\n return ;\n }\n ```\n\n**三、使用 Custom Events**\n还有一种方法是使用自定义事件（Custom Events）。\n\n1. 在深层子组件中创建并派发自定义事件：\n\n ```jsx\n function GrandChildComponent() {\n const deepMethod = () => {\n console.log(\"深层子组件的方法被执行\");\n const event = new CustomEvent(\"deepMethodTriggered\", { detail: {} });\n window.dispatchEvent(event);\n };\n return ;\n }\n ```\n\n2. 在父组件中监听这个自定义事件：\n\n ```jsx\n function ParentComponent() {\n const handleDeepMethod = () => {\n console.log(\"调用了深层子组件的方法\");\n };\n useEffect(() => {\n window.addEventListener(\"deepMethodTriggered\", handleDeepMethod);\n return () => {\n window.removeEventListener(\"deepMethodTriggered\", handleDeepMethod);\n };\n }, []);\n return ;\n }\n ```\n",{"_58":986,"_181":195,"_182":195,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1052/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1052/timeline",{"_58":989,"_60":61,"_62":990,"_64":991,"_66":992,"_68":993,"_70":994,"_72":995,"_74":996,"_76":997,"_78":998,"_111":999,"_131":132,"_133":24,"_134":-5,"_135":1001,"_137":1002,"_159":152,"_153":1004,"_155":1004,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1005,"_170":1006,"_176":1007,"_178":1008,"_190":1010,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/1051","https://api.github.com/repos/pro-collection/interview-question/issues/1051/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1051/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1051/events","https://github.com/pro-collection/interview-question/issues/1051",2638493203,"I_kwDOJGDC6c6dRDYT",1051,"为何现在主流的图表库都是用的 canvas 方案，而不是使用 svg，是基于什么因素考量的呢【热度: 88】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[1000],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},[],{"_58":253,"_68":254,"_62":255,"_70":256,"_72":257,"_74":258,"_76":259,"_122":260,"_147":1003,"_149":262,"_151":152,"_131":132,"_153":263,"_155":264,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T15:48:06Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：SVG 与 canvas 对比\n\n> 作者备注\n>\n> 比较冷门的话题，当做一个科普吧\n\nSVG 和 Canvas 在利用 GPU 硬件加速方面存在以下区别：\n\n**一、SVG 的 GPU 加速特点**\n\n1. 有限的自动加速\n\n - SVG 图形通常由浏览器自动决定是否使用 GPU 加速。对于一些简单的 SVG 图形，浏览器可能不会启用 GPU 加速，因为在这种情况下，使用 CPU 进行渲染可能已经足够高效。\n - 只有在处理较为复杂的 SVG 场景，如包含大量图形元素、复杂的变换或动画效果时，浏览器才有可能启用 GPU 加速。但这种加速的触发机制并不完全可控，取决于浏览器的实现和判断。\n\n2. 依赖浏览器优化\n - SVG 的 GPU 加速很大程度上依赖于浏览器的优化策略。不同的浏览器对 SVG 的 GPU 加速支持程度可能不同，这可能导致在不同的浏览器上 SVG 图形的性能表现不一致。\n - 例如，一些现代浏览器可能会对特定的 SVG 特性（如滤镜效果、渐变等）进行优化并启用 GPU 加速，而其他浏览器可能没有这样的优化。\n\n**二、Canvas 的 GPU 加速特点**\n\n1. 更明确的控制\n\n - 在 Canvas 中，可以通过一些特定的技术手段来明确地请求 GPU 加速。例如，使用 WebGL（基于 OpenGL ES 的 JavaScript API）与 Canvas 结合，可以直接利用 GPU 进行高性能的 3D 图形渲染。\n - 对于 2D 图形，一些浏览器也提供了对 Canvas 的硬件加速支持，可以通过特定的浏览器设置或使用特定的图形库来启用。开发人员可以更直接地控制是否使用 GPU 加速，以及如何优化图形渲染以充分利用 GPU 的性能。\n\n2. 高性能图形渲染\n - Canvas 结合 GPU 加速可以实现非常高性能的图形渲染，尤其适用于复杂的游戏、数据可视化和动画效果。通过利用 GPU 的并行处理能力，可以快速地绘制大量的图形和进行复杂的图形变换。\n - 例如，在数据可视化中，使用 Canvas 和 WebGL 可以实现大规模数据的实时渲染和交互，提供流畅的用户体验。\n\n总的来说，Canvas 在利用 GPU 硬件加速方面通常具有更明确的控制和更高的性能潜力，而 SVG 的 GPU 加速则更多地依赖于浏览器的自动优化，且加速的范围和效果相对有限。但在实际应用中，选择使用 SVG 还是 Canvas 并考虑 GPU 加速，需要根据具体的应用场景、性能需求和开发技术栈来综合决定。\n",{"_58":1009,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1051/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1051/timeline","pagination",{"_1013":144,"_167":1014},"value",32,"actionData","errors"]