Web Worker Preload Demo

这是要复制的内容

\n ```\n\n ```javascript\n function copyToClipboard() {\n const content = document.getElementById(\"contentToCopy\").textContent;\n const tempInput = document.createElement(\"input\");\n tempInput.value = content;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand(\"copy\");\n document.body.removeChild(tempInput);\n }\n ```\n\n - 在这个例子中，当用户点击按钮时，将获取要复制的内容，创建一个临时的``元素，将内容放入其中，选中该元素的内容，然后执行复制操作，最后移除临时元素。\n\n2. **限制和兼容性**：\n - 这种方法在一些浏览器中可能存在兼容性问题，并且需要用户交互（如点击按钮）才能触发复制操作。\n - 此外，现代浏览器对于使用`document.execCommand`的限制越来越多，因为它可能存在安全风险。\n\n**二、使用`navigator.clipboard` API**\n\n1. **异步方法**：\n\n - 现代浏览器提供了`navigator.clipboard` API，它提供了更安全和可靠的方式来访问剪切板。这个 API 主要使用异步方法来进行复制操作。\n - 例如：\n\n ```javascript\n async function copyToClipboard() {\n const content = \"这是要复制的内容\";\n try {\n await navigator.clipboard.writeText(content);\n console.log(\"内容已复制到剪切板\");\n } catch (err) {\n console.error(\"无法复制内容到剪切板：\", err);\n }\n }\n ```\n\n - 在这个例子中，使用`navigator.clipboard.writeText()`方法将指定的内容复制到剪切板。如果操作成功，控制台将打印“内容已复制到剪切板”；如果出现错误，将打印错误信息。\n\n2. **权限要求**：\n - 使用`navigator.clipboard` API 可能需要用户的明确许可，特别是在一些注重隐私的浏览器中。如果用户没有授予权限，复制操作可能会失败。\n - 可以通过在页面加载时请求用户的权限来提高复制操作的成功率。\n\n**三、结合事件处理**\n\n1. **响应用户交互**：\n\n - 可以结合用户的交互事件，如点击按钮、按下快捷键等，来触发复制操作。这样可以提供更好的用户体验。\n - 例如，可以使用`addEventListener`方法来监听按钮的点击事件：\n\n ```html\n \n ```\n\n ```javascript\n document.getElementById(\"copyButton\").addEventListener(\"click\", copyToClipboard);\n ```\n\n2. **快捷键支持**：\n - 还可以监听键盘快捷键事件，例如`Ctrl+C`（在 Windows 和 Linux 系统中）或`Command+C`（在 macOS 系统中），来模拟系统的复制操作。\n - 这需要使用`keydown`或`keyup`事件，并检查按下的键是否是复制快捷键。但这种方法可能会受到浏览器的安全限制，并且不同浏览器对快捷键的处理方式可能不同。\n\n通过以上方法，可以在浏览器中实现剪切板复制内容的功能。根据具体的需求和浏览器的兼容性，可以选择合适的方法来实现复制操作。同时，需要注意用户的隐私和安全问题，确保复制操作是在用户许可的情况下进行的。\n",{"_58":320,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/960/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/960/timeline",{"_58":323,"_60":61,"_62":324,"_64":325,"_66":326,"_68":327,"_70":328,"_72":329,"_74":330,"_76":331,"_78":332,"_111":333,"_138":139,"_140":24,"_141":-5,"_142":335,"_144":336,"_166":159,"_160":338,"_162":338,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":339,"_176":340,"_182":341,"_184":342,"_196":344,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/959","https://api.github.com/repos/pro-collection/interview-question/issues/959/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/959/comments","https://api.github.com/repos/pro-collection/interview-question/issues/959/events","https://github.com/pro-collection/interview-question/issues/959",2569653277,"I_kwDOJGDC6c6ZKcwd",959,"分片上传文件，如何校验文件完整性【热度: 220】",{"_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},[334],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":337,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-10-07T07:54:11Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"分片上传是一种将大文件分割成多个小片段进行上传的方法，在分片上传过程中校验文件完整性非常重要，可以确保上传的文件在服务器端能够正确地组合成完整的文件。以下是一些校验文件完整性的思路：\n\n**一、使用哈希算法**\n\n1. **计算文件哈希值**：\n\n - 在客户端上传文件之前，先对整个文件计算哈希值。常用的哈希算法有 MD5、SHA-1、SHA-256 等。\n - 例如，使用 JavaScript 的`crypto-js`库计算文件的 MD5 哈希值：\n\n ```javascript\n import CryptoJS from \"crypto-js\";\n\n const calculateFileHash = async (file) => {\n const fileReader = new FileReader();\n return new Promise((resolve, reject) => {\n fileReader.onload = (event) => {\n const hash = CryptoJS.MD5(event.target.result);\n resolve(hash.toString());\n };\n fileReader.onerror = reject;\n fileReader.readAsArrayBuffer(file);\n });\n };\n ```\n\n2. **上传过程中携带哈希值**：\n\n - 在进行分片上传时，将文件的哈希值作为一个参数一起上传给服务器。\n - 可以在每个分片的请求中携带哈希值，或者在上传开始时先将哈希值发送给服务器。\n\n3. **服务器端校验**：\n - 服务器在接收到所有分片并组合成完整文件后，再次计算文件的哈希值，并与客户端上传的哈希值进行比较。\n - 如果两个哈希值一致，则说明文件完整无误；如果不一致，则说明文件在上传过程中可能出现了问题。\n\n**二、校验和（Checksum）**\n\n1. **计算校验和**：\n\n - 除了哈希算法，还可以使用校验和来校验文件完整性。校验和是通过对文件的每个字节进行特定的数学运算得到的一个值。\n - 例如，可以使用简单的累加校验和算法，将文件的每个字节的值相加得到一个总和作为校验和。\n\n2. **上传和校验**：\n - 在客户端计算文件的校验和，并在分片上传时将校验和发送给服务器。\n - 服务器在组合完文件后，计算文件的校验和并与客户端上传的校验和进行比较，以确定文件的完整性。\n\n**三、文件大小比较**\n\n1. **记录文件大小**：\n\n - 在客户端上传文件之前，记录文件的大小。可以通过`File`对象的`size`属性获取文件的大小。\n\n2. **服务器端验证**：\n - 服务器在接收到所有分片并组合成完整文件后，检查文件的大小是否与客户端上传的文件大小一致。\n - 如果大小一致，则说明文件可能是完整的；如果不一致，则说明文件在上传过程中出现了问题。\n\n**四、上传状态跟踪**\n\n1. **客户端跟踪上传状态**：\n\n - 在客户端，可以使用一个数据结构来跟踪每个分片的上传状态，例如使用一个数组记录每个分片是否成功上传。\n - 当所有分片都成功上传后，可以认为文件上传完整。\n\n2. **服务器端确认**：\n - 服务器在接收到每个分片时，可以回复一个确认消息给客户端。客户端根据服务器的确认消息来更新上传状态。\n - 当客户端收到服务器对所有分片的确认后，可以确定文件上传完整。\n",{"_58":343,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/959/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/959/timeline",{"_58":346,"_60":61,"_62":347,"_64":348,"_66":349,"_68":350,"_70":351,"_72":352,"_74":353,"_76":354,"_78":355,"_111":356,"_138":139,"_140":24,"_141":-5,"_142":358,"_144":359,"_166":159,"_160":361,"_162":362,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":363,"_176":364,"_182":365,"_184":366,"_196":368,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/958","https://api.github.com/repos/pro-collection/interview-question/issues/958/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/958/comments","https://api.github.com/repos/pro-collection/interview-question/issues/958/events","https://github.com/pro-collection/interview-question/issues/958",2569581336,"I_kwDOJGDC6c6ZKLMY",958,"try...catch 是否能捕获异步异常【热度: 701】",{"_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},[357],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_154":360,"_156":232,"_158":159,"_138":139,"_160":233,"_162":234,"_164":-5,"_165":-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-10-07T07:23:27Z","2024-10-07T07:23:28Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：异常处理\n\n题目是：以下代码有错吗？如果有错，应该如何改正？\n\n```js\ntry {\n setTimeout(() => {\n throw new Error(\"err\");\n }, 200);\n} catch (err) {\n console.log(err);\n}\n\ntry {\n Promise.resolve().then(() => {\n throw new Error(\"err\");\n });\n} catch (err) {\n console.log(err);\n}\n```\n\n**解答**\n\n才知道 try...catch 不能异步捕获代码错误。在 JavaScript 中，setTimeout 是一个异步函数，它的回调函数会在指定的延时后被放入事件队列，等待当前执行栈清空后才执行。因此，当 setTimeout 的回调函数执行并抛出错误时，try...catch 已经执行完毕，无法捕捉到异步回调中的错误。\n正确的做法是在异步操作中直接处理错误，例如使用回调函数、Promises 或者 async/await 结合 try...catch\n\n```js\nnew Promise((resolve, reject) => {\n setTimeout(() => {\n try {\n throw new Error(\"err\");\n } catch (err) {\n reject(err);\n }\n }, 200);\n})\n .then(() => {\n // 正常执行时的处理逻辑\n })\n .catch((err) => {\n console.log(err); // 这里会捕捉到错误\n });\n```\n\n至于第二个例子，尝试使用 try...catch 来捕捉一个在 Promise 链中抛出的错误。这种方式同样是无效的，因为 try...catch 不能捕捉到在 Promise 链中的异步错误。\n\n在 Promise 中抛出一个错误（例如通过 throw 语句）会导致 Promise 被拒绝（或失败）。要正确处理这个错误，需要在 Promise 链中使用.catch 方法或者在一个 async 函数中使用 try...catch。\n\n```js\n// 方法一\nPromise.resolve()\n .then(() => {\n throw new Error(\"err\");\n })\n .catch((err) => {\n console.log(err); // 这里会捕捉到错误\n });\n\n// 方法二\nasync function handleError() {\n try {\n await Promise.resolve().then(() => {\n throw new Error(\"err\");\n });\n } catch (err) {\n console.log(err); // 这里会捕捉到错误\n }\n}\n\nhandleError();\n```\n\n**补充**\n\n![1](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0729c13766834971947e0f9c78a00b43~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.avis#?w=686&h=182&s=24314&e=png&b=fcfcfc)\n",{"_58":367,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/958/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/958/timeline",{"_58":370,"_60":61,"_62":371,"_64":372,"_66":373,"_68":374,"_70":375,"_72":376,"_74":377,"_76":378,"_78":379,"_111":380,"_138":139,"_140":24,"_141":-5,"_142":383,"_144":384,"_166":159,"_160":386,"_162":387,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":388,"_176":389,"_182":390,"_184":391,"_196":393,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/955","https://api.github.com/repos/pro-collection/interview-question/issues/955/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/955/comments","https://api.github.com/repos/pro-collection/interview-question/issues/955/events","https://github.com/pro-collection/interview-question/issues/955",2553983248,"I_kwDOJGDC6c6YOrEQ",955,"单元测试、E2E 测试有和区别？【热度: 258】",{"_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},[381,382],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":385,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-28T03:31:56Z","2024-09-28T03:31:57Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：前端测试\n\n单元测试（Unit Testing）和端到端测试（End-to-End Testing，E2E Testing）有以下主要区别：\n\n**一、测试范围**\n\n1. 单元测试：\n\n - 聚焦于软件系统的最小可测试单元，通常是函数、方法或类。\n - 只测试单个功能单元的行为，隔离其他部分的影响。\n - 例如，测试一个特定的数学函数是否正确计算结果，或者一个类的某个方法是否按照预期执行特定任务。\n\n2. 端到端测试：\n - 模拟用户与整个应用程序的交互，从用户界面开始，经过各个系统组件和层，一直到后端服务。\n - 涵盖整个软件系统的多个模块、组件和服务的集成。\n - 例如，测试一个完整的用户注册流程，包括在用户界面输入信息、提交表单、后端验证、数据库存储以及最终的反馈显示。\n\n**二、测试目的**\n\n1. 单元测试：\n\n - 主要目的是确保各个独立的功能单元正确工作，尽早发现代码中的错误。\n - 帮助开发者在开发过程中快速定位和修复问题，提高代码质量和可维护性。\n\n2. 端到端测试：\n - 验证整个系统在真实环境下的功能和性能是否符合预期。\n - 确保不同组件之间的集成没有问题，以及系统能够满足用户的实际需求。\n\n**三、依赖关系**\n\n1. 单元测试：\n\n - 通常可以独立运行，不依赖于外部系统或复杂的环境设置。\n - 可以使用模拟对象（mocks）和桩对象（stubs）来模拟外部依赖，以便专注于测试目标单元的功能。\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":392,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/955/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/955/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,"_138":139,"_140":24,"_141":-5,"_142":408,"_144":409,"_166":159,"_160":411,"_162":411,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":412,"_176":413,"_182":414,"_184":415,"_196":417,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/954","https://api.github.com/repos/pro-collection/interview-question/issues/954/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/954/comments","https://api.github.com/repos/pro-collection/interview-question/issues/954/events","https://github.com/pro-collection/interview-question/issues/954",2553983036,"I_kwDOJGDC6c6YOrA8",954,"前端应用有哪些代码测试手段【热度: 385】",{"_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,407],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":410,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-28T03:31:13Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：测试手段\n\n在前端应用中，有以下几种主要的代码测试手段：\n\n**一、单元测试**\n\n1. 定义：\n\n - 针对应用程序中的最小可测试单元（如函数、方法或类）进行的测试。\n - 目的是确保每个独立的单元在各种输入情况下都能正确执行其预期的功能。\n\n2. 常用工具：\n\n - Jest：一个功能强大且流行的 JavaScript 测试框架，提供了丰富的断言库、模拟函数等功能。\n - Mocha：另一个广泛使用的测试框架，可以与各种断言库和测试运行器配合使用。\n - Jasmine：以简洁的语法和易于使用而著称，适合小型项目和快速测试。\n\n3. 测试示例：\n\n ```javascript\n function add(a, b) {\n return a + b;\n }\n\n test(\"add function should add two numbers correctly\", () => {\n expect(add(2, 3)).toBe(5);\n expect(add(-1, 1)).toBe(0);\n });\n ```\n\n**二、集成测试**\n\n1. 定义：\n\n - 测试多个组件或模块之间的交互和集成。\n - 验证不同部分的代码在组合在一起时是否能正常工作。\n\n2. 实现方式：\n\n - 可以使用与单元测试类似的工具，但需要设置更复杂的测试环境来模拟多个组件的交互。\n - 例如，在前端应用中，可以使用测试框架来加载模拟的组件和数据，然后测试它们之间的通信和功能。\n\n3. 示例：\n - 假设一个前端应用有一个表单组件和一个提交按钮，集成测试可以验证当用户填写表单并点击提交按钮时，数据是否正确地发送到后端服务器。\n\n**三、端到端测试**\n\n1. 定义：\n\n - 模拟用户与整个应用程序的交互，从用户界面开始，经过各个系统组件和层，一直到后端服务。\n - 确保整个应用在真实环境下的功能和性能符合预期。\n\n2. 常用工具：\n\n - Cypress：一个专门用于端到端测试的工具，提供了直观的 API 和强大的功能，如自动等待、截图、视频录制等。\n - Puppeteer：由 Google 开发的无头浏览器自动化工具，可以用于编写端到端测试脚本。\n\n3. 测试示例：\n - 使用 Cypress 测试一个电子商务网站的购物流程：\n ```javascript\n describe(\"E-commerce Shopping Flow\", () => {\n it(\"should add an item to the cart and complete the purchase\", () => {\n cy.visit(\"https://your-ecommerce-site.com\");\n cy.get(\".product-item\").first().click();\n cy.get(\".add-to-cart-button\").click();\n cy.get(\".cart-icon\").click();\n cy.get(\".checkout-button\").click();\n // 继续模拟填写表单和完成购买的步骤\n });\n });\n ```\n\n**四、组件测试**\n\n1. 定义：\n\n - 专门针对前端应用中的组件进行测试。\n - 验证组件的渲染、交互和状态管理等功能。\n\n2. 常用工具：\n\n - React Testing Library：如果使用 React 开发，这个工具提供了一种以用户为中心的方式来测试 React 组件。\n - Vue Test Utils：对于 Vue.js 应用，用于测试 Vue 组件的工具。\n\n3. 测试示例：\n\n - 使用 React Testing Library 测试一个 React 组件：\n\n ```javascript\n import React from \"react\";\n import { render, fireEvent } from \"@testing-library/react\";\n import YourComponent from \"./YourComponent\";\n\n test(\"YourComponent should render correctly and handle button click\", () => {\n const { getByText, getByRole } = render();\n expect(getByText(\"Component Title\")).toBeInTheDocument();\n const button = getByRole(\"button\");\n fireEvent.click(button);\n expect(getByText(\"Button Clicked\")).toBeInTheDocument();\n });\n ```\n\n**五、静态代码分析**\n\n1. 定义：\n\n - 不执行代码，而是对代码进行静态分析，检查代码的质量、风格和潜在的错误。\n - 可以帮助开发者在早期发现代码中的问题，提高代码的可读性和可维护性。\n\n2. 常用工具：\n\n - ESLint：用于检查 JavaScript 和 TypeScript 代码的语法错误、风格问题和潜在的错误。\n - Stylelint：专门用于检查 CSS 和 SCSS 代码的风格问题。\n - Prettier：一个代码格式化工具，可以确保代码的风格一致，并且可以与 ESLint 和 Stylelint 集成。\n\n3. 示例配置：\n - 在项目中配置 ESLint，可以创建一个`.eslintrc.js`文件，定义规则和插件：\n ```javascript\n module.exports = {\n extends: [\"eslint:recommended\", \"plugin:react/recommended\"],\n rules: {\n \"no-console\": \"warn\",\n quotes: [\"error\", \"single\"],\n },\n };\n ```\n\n通过综合运用这些测试手段，可以有效地提高前端应用的质量和稳定性，减少错误和缺陷的出现。\n",{"_58":416,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/954/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/954/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,"_138":139,"_140":24,"_141":-5,"_142":432,"_144":433,"_166":159,"_160":435,"_162":435,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":436,"_176":437,"_182":438,"_184":439,"_196":441,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/952","https://api.github.com/repos/pro-collection/interview-question/issues/952/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/952/comments","https://api.github.com/repos/pro-collection/interview-question/issues/952/events","https://github.com/pro-collection/interview-question/issues/952",2553976927,"I_kwDOJGDC6c6YOphf",952,"mobx 和 redux 有什么区别【热度: 277】",{"_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,431],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":434,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-28T03:11:22Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：mobx 和 redux 区别\n\n> 作者备注\n>\n> 这里知识一个间比较，没有深入去对比 api 等，如果需要深入对比请自行查看下面的文档\n>\n> 参考文档：https://juejin.cn/post/6924572729886638088\n\nMobX 和 Redux 都是流行的 JavaScript 状态管理库，广泛用于帮助开发者以可预测的方式管理应用的状态。尽管它们都旨在解决相同的问题，但它们的设计哲学、实现方式以及提倡的最佳实践有很大差异。\n\n### 设计理念的不同\n\n- **Redux**：其设计理念是保持状态的可预测性，鼓励使用纯函数来执行状态变更。在 Redux 中，所有的状态变化都是通过派发（dispatching）一个动作（action）并通过一个或多个 reducer 来处理这些动作来实现的。这促进了一个单向数据流模型，使得状态管理变得清晰但也更加繁琐。\n- **MobX**：其通过透明的函数响应式编程（TFRP）原则来实现状态管理。在 MobX 中，你可以直接修改状态，而 MobX 会负责跟踪这些状态的变化，并自动应用任何副作用（如重新渲染 UI）。这种方式使得状态管理更加直观和灵活，但可能会牺牲一些可预测性。\n\n### 使用和实现上的差异\n\n- **Redux**：通常需要更多的样板代码和设置。你需要定义 action 类型、action 创建函数以及 reducer。同时，它鼓励使用不可变数据模式，这可能需要使用额外的库（如 Immutable.js）。Redux 并不自带中间件和异步管理的解决方案，通常需要引入如 redux-thunk 或 redux-saga 等中间件来处理副作用。\n- **MobX**：使用起来更简单，几乎不需要样板代码。因为 MobX 通过跟踪状态的修改并自动应用更改来工作（使用代理或装饰器跟踪属性的读写），开箱即用，而无需担心不可变性。MobX 允许使用更自然的 JavaScript 数据结构（如对象、数组），并自动为你处理检测更改和更新 UI。\n\n### 性能对比\n\n- **Redux**：对于大型应用，由于每次状态更新都会执行可能涉及整个状态树的深度比较，因此可能需要仔细优化选择器和避免不必要的渲染。\n- **MobX**：由于其使用响应式系统仅跟踪实际使用的状态部分，并在这部分状态变更时才更新，通常能提供更好的运行时性能，尤其是在大型应用中。\n\n### 选择哪一个？\n\n选择 Redux 还是 MobX，很大程度上取决于项目需求、团队偏好和项目的规模。\n\n- 如果你更喜欢函数式编程范式、需要更高程度的可预测性以及更好的时间旅行调试能力，那么 Redux 可能是更好的选择。\n- 如果你倾向于面向对象的编程范式、期望更少的样板代码以及更加灵活的状态管理方式，那么 MobX 可能更符合你的需求。\n\n两者之间的选择并不是全有或全无，实际上有些项目也会结合使用两者的优点。正确理解每种库的设计理念和适用场景是做出选择的关键。\n",{"_58":440,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/952/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/952/timeline",{"_58":443,"_60":61,"_62":444,"_64":445,"_66":446,"_68":447,"_70":448,"_72":449,"_74":450,"_76":451,"_78":452,"_111":453,"_138":139,"_140":24,"_141":-5,"_142":462,"_144":463,"_166":159,"_160":465,"_162":466,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":467,"_176":468,"_182":469,"_184":470,"_196":472,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/951","https://api.github.com/repos/pro-collection/interview-question/issues/951/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/951/comments","https://api.github.com/repos/pro-collection/interview-question/issues/951/events","https://github.com/pro-collection/interview-question/issues/951",2553975302,"I_kwDOJGDC6c6YOpIG",951,"在 forEach 中和 for 循环中调用异步函数的区别【热度: 371】",{"_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},[454,461],{"_70":455,"_72":456,"_58":457,"_117":458,"_119":459,"_121":24,"_122":460},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":464,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-28T03:06:12Z","2024-09-28T03:06:13Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：循环中的异步\n\n在 JavaScript 中，处理异步函数时，`for` 循环和 `forEach` 方法之间的行为有显著差异，尤其是当你试图在循环体中使用 `async/await` 时。理解这些差异对于编写正确且高效的异步代码是很重要的。\n\n### 使用 `forEach` 调用异步函数\n\n`Array.prototype.forEach` 方法用于对数组的每个元素执行一次提供的函数，但它不会等待异步操作完成。换句话说，即便是在 `forEach` 循环里使用了 `async` 函数，这个 `async` 函数依旧会立即执行，但 `forEach` 不会等待它完成。\n\n```javascript\nconst array = [1, 2, 3];\n\narray.forEach(async (item) => {\n await doAsyncOperation(item); // 将立即开始但不会等待完成\n});\n\nconsole.log(\"Finished\"); // 这行代码不会等待上面的异步操作完成就执行\n```\n\n上面的代码中，`doAsyncOperation` 会对数组中的每个元素立即开始执行，但 `forEach` 不会等待它们完成。因此，`console.log('Finished')` 会在所有异步操作完成之前执行。\n\n### 使用 `for` 循环调用异步函数\n\n与 `forEach` 方法不同，`for` 循环允许在每次迭代时使用 `await` 关键字等待异步操作的完成。因此，如果你需要按顺序等待每个异步操作完成，`for` 循环是更好的选择。\n\n```javascript\nconst array = [1, 2, 3];\n\n(async () => {\n for (let item of array) {\n await doAsyncOperation(item); // 将等待异步操作完成后再继续下一次迭代\n }\n\n console.log(\"Finished\"); // 仅在所有异步操作完成后执行\n})();\n```\n\n这里，每个 `doAsyncOperation` 调用会在下一个开始之前完成。`console.log('Finished')` 等到所有异步操作完成后才执行，这样就能保证异步操作的完成顺序。\n\n### 总结\n\n- 当你不关心异步操作完成的顺序，或不需要等待所有异步操作完成时，可以使用 `forEach`。\n- 如果你需要按顺序等待每个异步操作完成，使用 `for` 循环（或其他支持 `await` 的循环，如 `for...of` 或传统的 `for` 循环）是一个更好的选择。\n- 一般而言，当涉及到异步函数时，使用 `for` 循环（允许 `await`）比 `forEach` 方法（不等待异步调用完成）提供了更大的灵活性和控制力。\n\n### 参考\n\n可以参考下面的文档： https://github.com/lgwebdream/FE-Interview/issues/934\n",{"_58":471,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/951/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/951/timeline",{"_58":474,"_60":61,"_62":475,"_64":476,"_66":477,"_68":478,"_70":479,"_72":480,"_74":481,"_76":482,"_78":483,"_111":484,"_138":139,"_140":24,"_141":-5,"_142":487,"_144":488,"_166":159,"_160":490,"_162":491,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":492,"_176":493,"_182":494,"_184":495,"_196":497,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/950","https://api.github.com/repos/pro-collection/interview-question/issues/950/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/950/comments","https://api.github.com/repos/pro-collection/interview-question/issues/950/events","https://github.com/pro-collection/interview-question/issues/950",2553973612,"I_kwDOJGDC6c6YOots",950,"axios 如何取消请求【热度: 218】",{"_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},[485,486],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":489,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-28T03:00:40Z","2024-09-28T03:00:41Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：axios 取消请求\n\n> 作者备注\n>\n> 新版本已经废弃使用 cancelToken ，改为使用 signal\n>\n> 可以参考官网：https://axios-http.com/docs/cancellation\n\n### 取消请求\n\n`timeout`在 axios 调用中设置属性**可处理响应**相关的超时。\n\n在某些情况下（例如网络连接不可用），提前取消连接对 axios**调用**大有裨益。如果不取消连接，axios 调用可能会挂起，直到父代码/堆栈超时（在服务器端应用程序中可能需要几分钟）。\n\n要终止 axios 调用，您可以使用以下方法：\n\n- `signal`\n- `cancelToken`（已弃用）\n\n组合`timeout`和取消方法（例如`signal`）应该涵盖**响应**相关的超时和**连接**相关的超时。\n\n### `signal`：中止控制器\n\n从`v0.22.0`Axios 开始支持[`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)以 fetch API 方式取消请求：\n\n```js\nconst controller = new AbortController();\n\naxios\n .get(\"/foo/bar\", {\n signal: controller.signal,\n })\n .then(function (response) {\n //...\n });\n// cancel the request\ncontroller.abort();\n```\n\n使用最新 API `nodejs 17.3+`. 的超时示例[`AbortSignal.timeout()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout)：\n\n```js\naxios\n .get(\"/foo/bar\", {\n signal: AbortSignal.timeout(5000), //Aborts request after 5 seconds\n })\n .then(function (response) {\n //...\n });\n```\n\n具有超时辅助函数的示例：\n\n```js\nfunction newAbortSignal(timeoutMs) {\n const abortController = new AbortController();\n setTimeout(() => abortController.abort(), timeoutMs || 0);\n\n return abortController.signal;\n}\n\naxios\n .get(\"/foo/bar\", {\n signal: newAbortSignal(5000), //Aborts request after 5 seconds\n })\n .then(function (response) {\n //...\n });\n```\n\n### 取消令牌`deprecated`\n\n还可以使用 CancelToken\\_取消请求。\n\n> Axios 取消令牌 API 基于已撤回的[可取消承诺提案](https://github.com/tc39/proposal-cancelable-promises)。\n\n> 此 API 已弃用`v0.22.0`，不应在新项目中使用\n\n您可以使用工厂创建取消令牌`CancelToken.source`，如下所示：\n\n```js\nconst CancelToken = axios.CancelToken;\nconst source = CancelToken.source();\n\naxios\n .get(\"/user/12345\", {\n cancelToken: source.token,\n })\n .catch(function (thrown) {\n if (axios.isCancel(thrown)) {\n console.log(\"Request canceled\", thrown.message);\n } else {\n // handle error\n }\n });\n\naxios.post(\n \"/user/12345\",\n {\n name: \"new name\",\n },\n {\n cancelToken: source.token,\n }\n);\n\n// cancel the request (the message parameter is optional)\nsource.cancel(\"Operation canceled by the user.\");\n```\n\n您还可以通过将执行器函数传递给构造函数来创建取消令牌`CancelToken`：\n\n```js\nconst CancelToken = axios.CancelToken;\nlet cancel;\n\naxios.get(\"/user/12345\", {\n cancelToken: new CancelToken(function executor(c) {\n // An executor function receives a cancel function as a parameter\n cancel = c;\n }),\n});\n\n// cancel the request\ncancel();\n```\n\n> 注意：您可以使用相同的取消令牌/信号取消多个请求。\n\n在过渡期间，你可以使用这两个取消 API，即使对于同一个请求也是如此：\n\n```js\nconst controller = new AbortController();\n\nconst CancelToken = axios.CancelToken;\nconst source = CancelToken.source();\n\naxios\n .get(\"/user/12345\", {\n cancelToken: source.token,\n signal: controller.signal,\n })\n .catch(function (thrown) {\n if (axios.isCancel(thrown)) {\n console.log(\"Request canceled\", thrown.message);\n } else {\n // handle error\n }\n });\n\naxios.post(\n \"/user/12345\",\n {\n name: \"new name\",\n },\n {\n cancelToken: source.token,\n }\n);\n\n// cancel the request (the message parameter is optional)\nsource.cancel(\"Operation canceled by the user.\");\n// OR\ncontroller.abort(); // the message parameter is not supported\n```\n",{"_58":496,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/950/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/950/timeline",{"_58":499,"_60":61,"_62":500,"_64":501,"_66":502,"_68":503,"_70":504,"_72":505,"_74":506,"_76":507,"_78":508,"_111":509,"_138":139,"_140":24,"_141":-5,"_142":512,"_144":513,"_166":159,"_160":515,"_162":516,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":517,"_176":518,"_182":519,"_184":520,"_196":522,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/949","https://api.github.com/repos/pro-collection/interview-question/issues/949/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/949/comments","https://api.github.com/repos/pro-collection/interview-question/issues/949/events","https://github.com/pro-collection/interview-question/issues/949",2553968801,"I_kwDOJGDC6c6YOnih",949,"axios 如何注销拦截器【热度: 140】",{"_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,511],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":514,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-28T02:45:49Z","2024-09-28T02:45:50Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：axios 拦截器\n\n> 作者备注\n>\n> 这个问题稍微有点儿偏冷门，需要阅读过 axios 官网才能正确作答，考察的是同学自驱型学习能力\n\n在 Axios 中，可以使用以下方法注销拦截器：\n\n**一、为拦截器分配一个引用**\n\n1. 创建拦截器时保存引用：\n\n - 当创建一个 Axios 请求或响应拦截器时，可以将其分配给一个变量，以便后续可以引用并注销它。\n\n ```javascript\n const requestInterceptor = axios.interceptors.request.use((config) => {\n // 请求拦截器逻辑\n return config;\n });\n\n const responseInterceptor = axios.interceptors.response.use((response) => {\n // 响应拦截器逻辑\n return response;\n });\n ```\n\n**二、使用`Eject`方法注销拦截器**\n\n1. 注销单个拦截器：\n\n - 使用拦截器的引用和`axios.interceptors.request.eject()`或`axios.interceptors.response.eject()`方法来注销特定的拦截器。\n\n ```javascript\n axios.interceptors.request.eject(requestInterceptor);\n axios.interceptors.response.eject(responseInterceptor);\n ```\n\n2. 注销所有拦截器：\n - 如果需要注销所有的请求或响应拦截器，可以使用`axios.interceptors.request.clear()`或`axios.interceptors.response.clear()`方法。\n ```javascript\n axios.interceptors.request.clear();\n axios.interceptors.response.clear();\n ```\n\n以下是一个完整的示例：\n\n```javascript\nimport axios from \"axios\";\n\nconst requestInterceptor = axios.interceptors.request.use((config) => {\n // 请求拦截器逻辑\n return config;\n});\n\nconst responseInterceptor = axios.interceptors.response.use((response) => {\n // 响应拦截器逻辑\n return response;\n});\n\n// 注销特定拦截器\naxios.interceptors.request.eject(requestInterceptor);\naxios.interceptors.response.eject(responseInterceptor);\n\n// 或者注销所有拦截器\n// axios.interceptors.request.clear();\n// axios.interceptors.response.clear();\n```\n\n通过这些方法，可以在需要的时候注销特定的拦截器或所有拦截器，以灵活地管理 Axios 的拦截器。\n",{"_58":521,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/949/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/949/timeline",{"_58":524,"_60":61,"_62":525,"_64":526,"_66":527,"_68":528,"_70":529,"_72":530,"_74":531,"_76":532,"_78":533,"_111":534,"_138":139,"_140":24,"_141":-5,"_142":537,"_144":538,"_166":159,"_160":540,"_162":541,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":542,"_176":543,"_182":544,"_184":545,"_196":547,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/948","https://api.github.com/repos/pro-collection/interview-question/issues/948/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/948/comments","https://api.github.com/repos/pro-collection/interview-question/issues/948/events","https://github.com/pro-collection/interview-question/issues/948",2553968330,"I_kwDOJGDC6c6YOnbK",948,"给 axios 做一个通用拦截器，实现功能为状态码非 200 的时候，统一拦截错误，提示一个 toast, 该如何实现【热度: 339】",{"_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},[535,536],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_154":539,"_156":232,"_158":159,"_138":139,"_160":233,"_162":234,"_164":-5,"_165":-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-09-28T02:44:18Z","2024-09-28T02:44:19Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：axios 拦截器\n\n> 作者备注\n>\n> 拦截器是 axios 的最核心功能之一，该问题只是考察 axios 的核心功能的基本使用\n\n以下是使用 Axios 的拦截器来实现当状态码非 200 时统一拦截错误并提示 toast 的方法：\n\n假设你使用了一个名为 `toast` 的函数来显示 toast 消息，这个函数可以根据你的实际使用的 UI 库进行调整。\n\n```javascript\nimport axios from \"axios\";\n\n// 创建 Axios 实例\nconst instance = axios.create();\n\n// 添加请求拦截器\ninstance.interceptors.request.use(\n (config) => {\n // 在发送请求之前做些什么，比如添加请求头、加载动画等\n return config;\n },\n (error) => {\n // 对请求错误做些什么\n return Promise.reject(error);\n }\n);\n\n// 添加响应拦截器\ninstance.interceptors.response.use(\n (response) => {\n // 对响应数据做点什么\n return response;\n },\n (error) => {\n if (error.response && error.response.status !== 200) {\n // 非 200 状态码时显示 toast\n toast(\"请求错误！\");\n }\n return Promise.reject(error);\n }\n);\n\nexport default instance;\n```\n\n在上述代码中，首先创建了一个 Axios 实例，然后分别添加了请求拦截器和响应拦截器。在响应拦截器中，当响应状态码不是 200 时，调用`toast`函数显示错误提示信息。\n\n请注意，这里的`toast`函数只是一个示例，你需要根据实际使用的 UI 框架或库来实现具体的 toast 显示功能。\n",{"_58":546,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/948/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/948/timeline",{"_58":549,"_60":61,"_62":550,"_64":551,"_66":552,"_68":553,"_70":554,"_72":555,"_74":556,"_76":557,"_78":558,"_111":559,"_138":139,"_140":24,"_141":-5,"_142":562,"_144":563,"_166":159,"_160":565,"_162":565,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":566,"_176":567,"_182":568,"_184":569,"_196":571,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/947","https://api.github.com/repos/pro-collection/interview-question/issues/947/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/947/comments","https://api.github.com/repos/pro-collection/interview-question/issues/947/events","https://github.com/pro-collection/interview-question/issues/947",2553964347,"I_kwDOJGDC6c6YOmc7",947,"想设置 axios 全局通用配置，有哪些方法【热度: 298】",{"_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},[560,561],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_154":564,"_156":232,"_158":159,"_138":139,"_160":233,"_162":234,"_164":-5,"_165":-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-09-28T02:36:12Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：axios 配置\n\n在 Axios 中，可以通过以下几种方法设置全局通用配置：\n\n**一、使用`axios.defaults`**\n\n1. 直接设置属性：\n\n - 可以直接在`axios.defaults`上设置各种配置属性，如`baseURL`、`timeout`、`headers`等。这些设置将应用于所有后续的 Axios 请求。\n\n ```javascript\n axios.defaults.baseURL = \"https://api.example.com\";\n axios.defaults.timeout = 5000;\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer your_token\";\n ```\n\n2. 设置`transformRequest`和`transformResponse`：\n\n - 可以设置全局的请求和响应数据转换函数。这些函数将在每个请求和响应上被调用，允许对数据进行预处理和后处理。\n\n ```javascript\n axios.defaults.transformRequest = [\n function (data, headers) {\n // 对请求数据进行转换\n return data;\n },\n ];\n\n axios.defaults.transformResponse = [\n function (data) {\n // 对响应数据进行转换\n return data;\n },\n ];\n ```\n\n**二、创建自定义 Axios 实例并设置配置**\n\n1. 创建实例并设置配置：\n\n - 可以创建一个自定义的 Axios 实例，并在创建时设置特定的配置。这个实例可以有自己独立的配置，与默认的 Axios 实例分开。\n\n ```javascript\n const customAxios = axios.create({\n baseURL: \"https://custom-api.example.com\",\n timeout: 10000,\n headers: {\n \"Custom-Header\": \"custom-value\",\n },\n });\n ```\n\n2. 使用自定义实例：\n - 可以在应用中的任何地方使用这个自定义实例来发送请求，它将使用设置的全局配置。\n ```javascript\n customAxios\n .get(\"/data\")\n .then((response) => {\n console.log(response.data);\n })\n .catch((error) => {\n console.error(error);\n });\n ```\n\n**三、使用插件或中间件（如果适用）**\n\n1. 寻找合适的插件：\n\n - 有些第三方插件可以帮助你设置 Axios 的全局配置。例如，`axios-interceptors`插件可以方便地设置请求和响应拦截器，从而实现全局的配置和处理逻辑。\n\n ```javascript\n import axios from \"axios\";\n import axiosInterceptors from \"axios-interceptors\";\n\n const axiosInstance = axiosInterceptors(axios);\n\n axiosInstance.useInterceptors({\n request: (config) => {\n // 在请求发送前进行一些处理\n config.headers[\"Custom-Header\"] = \"custom-value\";\n return config;\n },\n response: (response) => {\n // 在响应返回后进行一些处理\n return response;\n },\n });\n ```\n\n2. 自定义中间件：\n\n - 根据你的应用需求，你也可以创建自己的中间件来设置全局配置。中间件可以在请求发送前或响应返回后进行特定的处理。\n\n ```javascript\n axios.interceptors.request.use(\n (config) => {\n // 全局请求处理逻辑\n return config;\n },\n (error) => {\n return Promise.reject(error);\n }\n );\n\n axios.interceptors.response.use(\n (response) => {\n // 全局响应处理逻辑\n return response;\n },\n (error) => {\n return Promise.reject(error);\n }\n );\n ```\n\n通过这些方法，你可以灵活地设置 Axios 的全局通用配置，以满足不同的应用需求。同时，要注意合理管理全局配置，避免出现冲突或不可预期的行为。\n",{"_58":570,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/947/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/947/timeline",{"_58":573,"_60":61,"_62":574,"_64":575,"_66":576,"_68":577,"_70":578,"_72":579,"_74":580,"_76":581,"_78":582,"_111":583,"_138":139,"_140":24,"_141":-5,"_142":586,"_144":587,"_166":159,"_160":589,"_162":589,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":590,"_176":591,"_182":592,"_184":593,"_196":595,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/946","https://api.github.com/repos/pro-collection/interview-question/issues/946/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/946/comments","https://api.github.com/repos/pro-collection/interview-question/issues/946/events","https://github.com/pro-collection/interview-question/issues/946",2553961843,"I_kwDOJGDC6c6YOl1z",946,"解释下 axios withCredentials 配置【热度: 197】",{"_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},[584,585],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":588,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-28T02:32:56Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：axios 配置\n\n> 作者备注\n>\n> 这个问题太冷门了，如果不是细看过顾问囊的人，是不会知道有这个配置项的。可以当做科普即可，面试中问到的可能性也非常的低。\n\n在 Axios 中，`withCredentials`是一个配置选项，用于处理跨源请求时是否携带用户凭证（cookies、HTTP 认证信息等）。\n\n**一、作用**\n\n1. 默认行为：\n\n - 默认情况下，`withCredentials`的值为`false`。这意味着在跨源请求中，浏览器不会自动发送用户凭证。\n - 例如，当你使用 Axios 向不同域名的服务器发送请求时，如果`withCredentials`为`false`，浏览器不会在请求中包含任何用户凭证信息。\n\n2. 启用凭证发送：\n - 如果将`withCredentials`设置为`true`，则在跨源请求中，浏览器会自动包含用户凭证信息，如 cookies、HTTP 认证信息等。\n - 这对于需要在不同域名之间共享用户认证状态的应用非常有用。例如，一个单页应用（SPA）可能需要与不同的后端服务进行交互，并且希望在这些服务之间共享用户登录状态。\n\n**二、注意事项**\n\n1. 服务器端配置：\n\n - 要使`withCredentials`生效，服务器端也需要进行相应的配置，以允许接收跨源请求中的凭证信息。\n - 服务器需要设置适当的 CORS（跨源资源共享）响应头，如`Access-Control-Allow-Credentials: true`，并且指定允许的源`Access-Control-Allow-Origin`不能为通配符`*`，而必须是具体的源地址。\n\n2. 安全考虑：\n - 启用`withCredentials`可能会带来安全风险，因为用户凭证可能会被发送到不受信任的服务器。因此，在使用时需要谨慎考虑安全问题，并确保只向可信任的服务器发送凭证信息。\n\n例如：\n\n```javascript\naxios\n .get(\"http://another-domain.com/api/data\", {\n withCredentials: true,\n })\n .then((response) => {\n console.log(response.data);\n })\n .catch((error) => {\n console.error(error);\n });\n```\n\n在这个例子中，Axios 发送一个跨源请求，并将`withCredentials`设置为`true`，以尝试在请求中包含用户凭证信息。\n",{"_58":594,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/946/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/946/timeline",{"_58":597,"_60":61,"_62":598,"_64":599,"_66":600,"_68":601,"_70":602,"_72":603,"_74":604,"_76":605,"_78":606,"_111":607,"_138":139,"_140":24,"_141":-5,"_142":610,"_144":611,"_166":159,"_160":613,"_162":613,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":614,"_176":615,"_182":616,"_184":617,"_196":619,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/945","https://api.github.com/repos/pro-collection/interview-question/issues/945/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/945/comments","https://api.github.com/repos/pro-collection/interview-question/issues/945/events","https://github.com/pro-collection/interview-question/issues/945",2553960317,"I_kwDOJGDC6c6YOld9",945,"axios 支持哪些常用的配置【热度: 196】",{"_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},[608,609],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":612,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-28T02:31:26Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：axios 配置\n\n> 作者备注\n>\n> 这个其实直接看官网即可 https://axios-http.com/docs/req_config\n\n以下是翻译的全配置\n\n```js\n{\n // `url` 是将用于请求的服务器 URL。\n url: '/user',\n\n // `method` 是进行请求时要使用的请求方法。\n method: 'get', // 默认值。\n\n // `baseURL` 将被添加到 `url` 的前面，除非 `url` 是绝对路径。设置 axios 实例的 `baseURL` 可以方便地向该实例的方法传递相对 URL。\n baseURL: 'https://some-domain.com/api',\n\n // `transformRequest` 允许在将请求数据发送到服务器之前对其进行更改。这仅适用于请求方法为 'PUT'、'POST'、'PATCH' 和 'DELETE'。数组中的最后一个函数必须返回一个字符串或 `Buffer`、`ArrayBuffer`、`FormData` 或 `Stream` 的实例。你可以修改 `headers` 对象。\n transformRequest: [function (data, headers) {\n // 做任何你想对数据进行的转换。\n\n return data;\n }],\n\n // `transformResponse` 允许在将响应数据传递给 `then/catch` 之前对其进行更改。\n transformResponse: [function (data) {\n // 做任何你想对数据进行的转换。\n\n return data;\n }],\n\n // `headers` 是要发送的自定义请求头。\n headers: {'X-Requested-With': 'XMLHttpRequest'},\n\n // `params` 是要与请求一起发送的 URL 参数。必须是一个普通对象或 `URLSearchParams` 对象。注意：值为 `null` 或 `undefined` 的参数不会在 URL 中呈现。\n params: {\n ID: 12345\n },\n\n // `paramsSerializer` 是一个可选的负责序列化 `params` 的函数（例如：https://www.npmjs.com/package/qs，http://api.jquery.com/jquery.param/）。\n paramsSerializer: function (params) {\n return Qs.stringify(params, {arrayFormat: 'brackets'});\n },\n\n // `data` 是要作为请求主体发送的数据。仅适用于请求方法为 'PUT'、'POST'、'DELETE' 和 'PATCH'。当没有设置 `transformRequest` 时，必须是以下类型之一：字符串、普通对象、`ArrayBuffer`、`ArrayBufferView`、`URLSearchParams`；仅在浏览器中：`FormData`、`File`、`Blob`；仅在 Node.js 中：`Stream`、`Buffer`。\n data: {\n firstName: 'Fred'\n },\n\n // 发送数据到主体的语法替代方法，方法为 post，仅发送值，不发送键。\n data: 'Country=Brasil&City=Belo Horizonte',\n\n // `timeout` 指定请求超时的毫秒数。如果请求花费的时间超过 `timeout`，请求将被中止。\n timeout: 1000, // 默认值为 `0`（无超时）。\n\n // `withCredentials` 指示是否应使用凭证进行跨站点的 Access-Control 请求。\n withCredentials: false, // 默认值。\n\n // `adapter` 允许对请求进行自定义处理，这使得测试更加容易。返回一个 Promise 并提供有效的响应（请参阅 lib/adapters/README.md）。\n adapter: function (config) {\n /*... */\n },\n\n // `auth` 表示应使用 HTTP 基本认证，并提供凭证。这将设置一个 `Authorization` 请求头，覆盖你使用 `headers` 设置的任何现有的 `Authorization` 自定义请求头。请注意，仅可通过此参数配置 HTTP 基本认证。对于 Bearer 令牌等，应使用 `Authorization` 自定义请求头代替。\n auth: {\n username: 'janedoe',\n password: 's00pers3cret'\n },\n\n // `responseType` 指示服务器将响应的数据类型。选项有：'arraybuffer'、'document'、'json'、'text'、'stream'；仅在浏览器中：'blob'。\n responseType: 'json', // 默认值。\n\n // `responseEncoding` 指示用于解码响应的编码（仅在 Node.js 中有效）。注意：对于 `responseType` 为 'stream' 或客户端请求将被忽略。\n responseEncoding: 'utf8', // 默认值。\n\n // `xsrfCookieName` 是用作 xsrf 令牌值的 cookie 的名称。\n xsrfCookieName: 'XSRF-TOKEN', // 默认值。\n\n // `xsrfHeaderName` 是携带 xsrf 令牌值的 HTTP 请求头的名称。\n xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值。\n\n // `onUploadProgress` 允许处理上传的进度事件（仅在浏览器中有效）。\n onUploadProgress: function (progressEvent) {\n // 对原生进度事件做任何你想做的处理。\n },\n\n // `onDownloadProgress` 允许处理下载的进度事件（仅在浏览器中有效）。\n onDownloadProgress: function (progressEvent) {\n // 对原生进度事件做任何你想做的处理。\n },\n\n // `maxContentLength` 定义在 Node.js 中允许的 HTTP 响应内容的最大字节大小。\n maxContentLength: 2000,\n\n // `maxBodyLength`（仅在 Node.js 中有效）定义允许的 HTTP 请求内容的最大字节大小。\n maxBodyLength: 2000,\n\n // `validateStatus` 定义对于给定的 HTTP 响应状态码是应该解析还是拒绝 Promise。如果 `validateStatus` 返回 `true`（或设置为 `null` 或 `undefined`），则 Promise 将被解析；否则，Promise 将被拒绝。\n validateStatus: function (status) {\n return status >= 200 && status < 300; // 默认值。\n },\n\n // `maxRedirects` 定义在 Node.js 中要遵循的最大重定向次数。如果设置为 0，则不会遵循重定向。\n maxRedirects: 5, // 默认值。\n\n // `socketPath` 定义在 Node.js 中要使用的 UNIX 套接字。例如：'/var/run/docker.sock' 用于向 Docker 守护进程发送请求。只能指定 `socketPath` 或 `proxy` 中的一个。如果两者都指定，则使用 `socketPath`。\n socketPath: null, // 默认值。\n\n // `httpAgent` 和 `httpsAgent` 定义在 Node.js 中执行 HTTP 和 HTTPS 请求时分别要使用的自定义代理。这允许添加像 `keepAlive` 这样的选项，这些选项在默认情况下是未启用的。\n httpAgent: new http.Agent({ keepAlive: true }),\n httpsAgent: new https.Agent({ keepAlive: true }),\n\n // `proxy` 定义代理服务器的主机名、端口和协议。你也可以使用传统的 `http_proxy` 和 `https_proxy` 环境变量来定义你的代理。如果你使用环境变量来进行代理配置，你还可以定义一个 `no_proxy` 环境变量，作为不应被代理的域名的逗号分隔列表。使用 `false` 来禁用代理，忽略环境变量。`auth` 表示应使用 HTTP 基本认证来连接到代理，并提供凭证。这将设置一个 `Proxy-Authorization` 请求头，覆盖你使用 `headers` 设置的任何现有的 `Proxy-Authorization` 自定义请求头。如果代理服务器使用 HTTPS，则你必须将协议设置为 `https`。\n proxy: {\n protocol: 'https',\n host: '127.0.0.1',\n port: 9000,\n auth: {\n username: 'mikeymike',\n password: 'rapunz3l'\n }\n },\n\n // `cancelToken` 指定一个取消令牌，可用于取消请求（请参阅下面的“取消”部分了解详细信息）。\n cancelToken: new CancelToken(function (cancel) {\n }),\n\n // `decompress` 指示是否应自动解压缩响应主体。如果设置为 `true`，还将从所有解压缩响应的对象中删除 'content-encoding' 请求头。仅在 Node.js 中有效（XHR 无法关闭解压缩）。\n decompress: true // 默认值。\n\n}\n```\n",{"_58":618,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/945/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/945/timeline",{"_58":621,"_60":61,"_62":622,"_64":623,"_66":624,"_68":625,"_70":626,"_72":627,"_74":628,"_76":629,"_78":630,"_111":631,"_138":139,"_140":24,"_141":-5,"_142":634,"_144":635,"_166":159,"_160":637,"_162":638,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":639,"_176":640,"_182":641,"_184":642,"_196":644,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/942","https://api.github.com/repos/pro-collection/interview-question/issues/942/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/942/comments","https://api.github.com/repos/pro-collection/interview-question/issues/942/events","https://github.com/pro-collection/interview-question/issues/942",2553948835,"I_kwDOJGDC6c6YOiqj",942,"axios 有哪些特性【热度: 147】",{"_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},[632,633],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_154":636,"_156":232,"_158":159,"_138":139,"_160":233,"_162":234,"_164":-5,"_165":-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-09-28T01:54:58Z","2024-09-28T01:54:59Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：axios 特性\n\n> 作者备注\n>\n> 以下特性信息都是直接来自于官网 https://axios-http.com/docs/intro\n>\n> 但是可能很多同学并不会去好好看官网，所以这个问题，只是考察同学们的学习主动性\n\n- 从浏览器发出 XMLHttpRequests\n- 从 node.js 发出 http 请求\n- 支持 Promise API\n- 拦截请求和响应\n- 转换请求和响应数据\n- 取消请求\n- 超时\n- 查询参数序列化并支持嵌套条目\n- 自动将请求主体序列化为：\n- JSON ( application/json)\n- 多部分 / 表单数据 ( multipart/form-data)\n- URL 编码形式 ( application/x-www-form-urlencoded)\n- 将 HTML 表单发布为 JSON\n- 响应中的自动 JSON 数据处理\n- 浏览器和 node.js 的进度捕获以及附加信息（速度、剩余时间）\n- 为 node.js 设置带宽限制\n- 兼容符合规范的 FormData 和 Blob （包括 node.js）\n- 客户端支持防范 XSRF\n",{"_58":643,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/942/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/942/timeline",{"_58":646,"_60":61,"_62":647,"_64":648,"_66":649,"_68":650,"_70":651,"_72":652,"_74":653,"_76":654,"_78":655,"_111":656,"_138":139,"_140":24,"_141":-5,"_142":658,"_144":659,"_166":159,"_160":661,"_162":662,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":663,"_176":664,"_182":665,"_184":666,"_196":668,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/941","https://api.github.com/repos/pro-collection/interview-question/issues/941/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/941/comments","https://api.github.com/repos/pro-collection/interview-question/issues/941/events","https://github.com/pro-collection/interview-question/issues/941",2553944270,"I_kwDOJGDC6c6YOhjO",941,"动画性能如何检测【热度: 262】",{"_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},[657],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":660,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-28T01:41:16Z","2024-09-28T01:46:31Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：动画性能\r\n\r\n> 作者备注，这个问题其实没有啥太大的价值，可以当做科普看看即可\r\n\r\n**一、使用浏览器开发者工具**\r\n\r\n1. Chrome 开发者工具：\r\n\r\n - 打开 Chrome 浏览器，进入要检测动画性能的页面。\r\n - 按下 F12 打开开发者工具，切换到“Performance”（性能）选项卡。\r\n - 点击“Record”（录制）按钮开始录制页面的交互和动画。\r\n - 进行页面上的动画操作，如滚动、拖动、动画播放等。\r\n - 停止录制后，开发者工具会生成一个性能分析报告，其中包括 CPU 使用率、FPS（每秒帧数）、帧时间线等信息，可以帮助你分析动画的性能瓶颈。\r\n\r\n\r\n**二、使用 JavaScript 性能分析工具**\r\n\r\nFrame Timing API 可以用于检测动画性能。\r\n\r\n**2.1、Frame Timing API 的作用**\r\n\r\nFrame Timing API 提供了一种方式来测量浏览器渲染每一帧所花费的时间。这对于分析动画性能非常有用，因为它可以帮助你确定动画是否流畅，是否存在卡顿或掉帧的情况。\r\n\r\n**2.2、如何使用 Frame Timing API 进行性能检测**\r\n\r\n1. 获取帧时间数据：\r\n\r\n - 使用 `performance.getEntriesByType('frame')` 方法可以获取帧时间数据的数组。每个条目代表一帧的信息，包括帧的开始时间、持续时间等。\r\n\r\n ```javascript\r\n const frameEntries = performance.getEntriesByType(\"frame\");\r\n frameEntries.forEach((entry) => {\r\n console.log(`Frame start time: ${entry.startTime}`);\r\n console.log(`Frame duration: ${entry.duration}`);\r\n });\r\n ```\r\n\r\n2. 分析帧时间数据：\r\n\r\n - 通过分析帧的持续时间，可以判断动画是否在预期的时间内渲染。如果帧的持续时间过长，可能表示动画出现了卡顿。\r\n - 可以计算平均帧时间、最大帧时间等指标，以评估动画的整体性能。\r\n\r\n3. 结合其他性能指标：\r\n - Frame Timing API 可以与其他性能指标一起使用，如 FPS（每秒帧数）、CPU 使用率等，以全面了解动画性能。\r\n - 例如，可以使用 `requestAnimationFrame` 来计算 FPS，并结合帧时间数据来确定动画的流畅度。\r\n\r\n**2.3、优势和局限性**\r\n\r\n1. 优势：\r\n\r\n - 提供精确的帧时间信息，有助于深入了解动画的性能细节。\r\n - 可以在浏览器中直接使用，无需安装额外的工具。\r\n\r\n2. 局限性：\r\n - 并非所有浏览器都完全支持 Frame Timing API，可能存在兼容性问题。\r\n - 仅提供帧时间数据，对于复杂的动画性能问题，可能需要结合其他工具和技术进行分析。\r\n\r\n**三、使用在线性能检测工具**\r\n\r\n1. WebPageTest：\r\n\r\n - WebPageTest 是一个在线工具，可以对网页的性能进行全面的测试，包括加载时间、动画性能、资源加载等。\r\n - 输入要测试的网页 URL，选择测试参数，如浏览器类型、地理位置等，然后启动测试。\r\n - 测试完成后，会生成详细的报告，包括视频录制、性能指标图表等，可以帮助你分析动画性能问题。\r\n\r\n2. Lighthouse：\r\n - Lighthouse 是一个由 Google 开发的开源工具，可以作为 Chrome 浏览器的扩展或命令行工具使用。\r\n - 运行 Lighthouse 对网页进行审计，它会评估网页的性能、可访问性、最佳实践等方面，并提供详细的报告和建议。\r\n - 在性能部分，会包括对动画性能的评估，如 FPS、主线程忙碌时间等指标。\r\n",{"_58":667,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/941/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/941/timeline",{"_58":670,"_60":61,"_62":671,"_64":672,"_66":673,"_68":674,"_70":675,"_72":676,"_74":677,"_76":678,"_78":679,"_111":680,"_138":139,"_140":24,"_141":-5,"_142":687,"_144":688,"_166":159,"_160":690,"_162":691,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":692,"_176":693,"_182":694,"_184":695,"_196":697,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/939","https://api.github.com/repos/pro-collection/interview-question/issues/939/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/939/comments","https://api.github.com/repos/pro-collection/interview-question/issues/939/events","https://github.com/pro-collection/interview-question/issues/939",2552998537,"I_kwDOJGDC6c6YK6qJ",939,"手写实现 lodash.flattenDeep 将array递归为一维数组【热度: 345】",{"_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},[681,682],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":683,"_72":684,"_58":685,"_117":686,"_119":136,"_121":24,"_122":137},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_154":689,"_156":232,"_158":159,"_138":139,"_160":233,"_162":234,"_164":-5,"_165":-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-09-27T13:48:50Z","2024-09-27T13:48:51Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：lodash.flattenDeep 实现\n\n以下是用 JavaScript 手写实现类似于 `lodash.flattenDeep` 的函数来将数组递归展平为一维数组：\n\n```javascript\nfunction flattenDeep(arr) {\n let result = [];\n for (let item of arr) {\n if (Array.isArray(item)) {\n result = result.concat(flattenDeep(item));\n } else {\n result.push(item);\n }\n }\n return result;\n}\n```\n\n你可以使用以下方式测试这个函数：\n\n```javascript\nconst nestedArray = [1, [2, [3, [4]]]];\nconst flattenedArray = flattenDeep(nestedArray);\nconsole.log(flattenedArray); // [1, 2, 3, 4]\n```\n",{"_58":696,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/939/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/939/timeline",{"_58":699,"_60":61,"_62":700,"_64":701,"_66":702,"_68":703,"_70":704,"_72":705,"_74":706,"_76":707,"_78":708,"_111":709,"_138":139,"_140":24,"_141":-5,"_142":716,"_144":717,"_166":159,"_160":729,"_162":730,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":731,"_176":732,"_182":733,"_184":734,"_196":736,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/938","https://api.github.com/repos/pro-collection/interview-question/issues/938/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/938/comments","https://api.github.com/repos/pro-collection/interview-question/issues/938/events","https://github.com/pro-collection/interview-question/issues/938",2552930522,"I_kwDOJGDC6c6YKqDa",938,"localStorage 是同步还是异步【热度: 210】",{"_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},[710,711],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":712,"_72":713,"_58":714,"_117":715,"_119":136,"_121":24,"_122":137},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",[],{"_58":718,"_68":719,"_62":720,"_70":721,"_72":722,"_74":201,"_76":723,"_122":724,"_154":725,"_156":726,"_158":159,"_138":139,"_160":727,"_162":728,"_164":-5,"_165":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_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},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2024-09-27T13:20:35Z","2024-09-27T13:20:36Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"在大多数现代浏览器中，`localStorage`的操作是同步的。\n\n当你使用`localStorage.setItem()`来存储数据或者`localStorage.getItem()`来获取数据时，这些操作会立即执行并且不会返回一个 Promise 或者使用回调函数来处理异步操作。\n\n例如：\n\n```javascript\nlocalStorage.setItem(\"key\", \"value\");\nconsole.log(localStorage.getItem(\"key\"));\n```\n\n在上面的代码中，设置和获取`localStorage`中的数据的操作会按顺序立即执行，不会像异步操作那样需要等待一段时间后再执行后续代码。\n\n然而，需要注意的是，虽然`localStorage`操作本身是同步的，但如果存储的数据量较大，可能会导致性能问题，因为这些操作会阻塞浏览器的主线程。在这种情况下，可能会感觉操作像是异步的，因为浏览器可能会出现卡顿或响应缓慢的情况。\n",{"_58":735,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/938/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/938/timeline",{"_58":738,"_60":61,"_62":739,"_64":740,"_66":741,"_68":742,"_70":743,"_72":744,"_74":745,"_76":746,"_78":747,"_111":748,"_138":139,"_140":24,"_141":-5,"_142":751,"_144":752,"_166":159,"_160":754,"_162":755,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":756,"_176":757,"_182":758,"_184":759,"_196":761,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/937","https://api.github.com/repos/pro-collection/interview-question/issues/937/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/937/comments","https://api.github.com/repos/pro-collection/interview-question/issues/937/events","https://github.com/pro-collection/interview-question/issues/937",2552925757,"I_kwDOJGDC6c6YKo49",937,"如何限制 input 框只能输入正整数【热度: 230】",{"_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},[749,750],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":712,"_72":713,"_58":714,"_117":715,"_119":136,"_121":24,"_122":137},[],{"_58":718,"_68":719,"_62":720,"_70":721,"_72":722,"_74":201,"_76":723,"_122":724,"_154":753,"_156":726,"_158":159,"_138":139,"_160":727,"_162":728,"_164":-5,"_165":-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-09-27T13:18:13Z","2024-09-27T13:31:07Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"在前端，可以通过以下几种方式来限制 `` 框只能输入正整数：\n\n**一、使用 HTML5 的输入类型和属性**\n\n1. 使用 `type=\"number\"` 属性：\n `` 设置输入框的类型为数字。然而，这并不能完全确保只输入正整数，因为用户仍然可以输入小数。\n\n2. 添加 `step=\"1\"` 和 `min=\"0\"` 属性：\n ``。`step=\"1\"` 确保输入的步长为 1，即只能输入整数。`min=\"0\"` 限制输入值不能小于 0。\n\n 这种方法在大多数现代浏览器中能提供一定程度的限制，但用户仍然可以通过浏览器的开发者工具等方式绕过这些限制。\n\n**二、使用 JavaScript 进行实时验证**\n\n1. 使用 `oninput` 事件处理函数：\n\n ```html\n \n ```\n\n ```javascript\n const inputElement = document.getElementById(\"myInput\");\n inputElement.oninput = function () {\n // 只保留数字字符\n this.value = this.value.replace(/[^0-9]/g, \"\");\n };\n ```\n\n 这个方法在用户输入时实时过滤非数字字符。但是，它不能确保输入的是正整数，只是限制了输入为数字。\n\n2. 结合正则表达式进行更严格的验证：\n ```javascript\n inputElement.oninput = function () {\n const value = this.value;\n if (!/^\\d+$/.test(value)) {\n // 如果输入不是正整数，清空输入框\n this.value = \"\";\n }\n };\n ```\n 这里使用正则表达式 `/^\\d+$/` 来检查输入是否只包含一个或多个数字。如果输入不符合要求，就清空输入框。\n",{"_58":760,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/937/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/937/timeline",{"_58":763,"_60":61,"_62":764,"_64":765,"_66":766,"_68":767,"_70":768,"_72":769,"_74":770,"_76":771,"_78":772,"_111":773,"_138":139,"_140":24,"_141":-5,"_142":776,"_144":777,"_166":159,"_160":779,"_162":779,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":780,"_176":781,"_182":782,"_184":783,"_196":785,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/890","https://api.github.com/repos/pro-collection/interview-question/issues/890/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/890/comments","https://api.github.com/repos/pro-collection/interview-question/issues/890/events","https://github.com/pro-collection/interview-question/issues/890",2529862713,"I_kwDOJGDC6c6WyqQ5",890,"npm run start 的过程是啥，为何能执行对应的命令【热度: 170】",{"_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},[774,775],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":136,"_121":24,"_122":137},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_154":778,"_156":232,"_158":159,"_138":139,"_160":233,"_162":234,"_164":-5,"_165":-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-09-17T02:47:32Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：npm run start 过程\n\n当你在项目的根目录下执行 `npm run start` 命令时，实际上触发了一个由 Node.js 包管理器（npm）管理的一系列流程。理解这一过程，可以帮助你更好地掌握项目的构建和开发流程。以下是 `npm run start` 执行过程的概述：\n\n### 1. `npm run start` 是怎么工作的？\n\n- **查找 `package.json` 文件**：npm 首先在当前目录下查找 `package.json` 文件。这个文件包含了项目的元数据和配置信息，包括一系列定义了脚本（scripts）的键值对。\n- **解析 `scripts` 对象**：`npm run start` 会在 `package.json` 文件的 `scripts` 对象里查找名为 `\"start\"` 的脚本命令。例如：\n\n ```json\n \"scripts\": {\n \"start\": \"node index.js\"\n }\n ```\n\n- **执行命令**：找到 `\"start\"` 脚本后，npm 会在命令行中执行其定义的命令，如上述例子中的 `node index.js`。这里的命令可以是任何可以在终端或命令提示符下运行的命令，包括启动一个服务器、打包应用等。\n\n### 2. `npm run start` 为何能够执行对应命令？\n\n这归功于 npm 的工作方式。`npm run` 命令是一个通用命令，用于执行 `package.json` 文件中 `scripts` 属性下定义的任意脚本。这些脚本可以是几乎任何你希望自动运行的命令行指令。当执行 `npm run start` 时，npm 会查找并执行与 `start` 相关联的脚本指令。\n\n### 3. 为什么使用 `npm run start`？\n\n使用 `npm run start` 以及 `package.json` 中的其他脚本有几个好处：\n\n- **标准化**：为常用任务（如启动开发服务器、构建生产代码等）提供一致的命令接口。\n- **简化复杂命令**：将长长的、可能很复杂的命令简化为一个简单的脚本命令，提高开发效率。\n- **跨平台兼容**：一些命令（尤其是 UNIX 命令）在不同的操作系统下表现不同。使用 npm 脚本可以通过特定工具（如 `cross-env`）来实现跨平台兼容。\n- **依赖局部安装的包**：在 npm 脚本中运行的命令可以直接使用项目 `node_modules/.bin` 目录下安装的本地依赖，无需全局安装或在命令前添加路径。\n\n总结而言，`npm run start` 以及 `package.json` 中定义的其他脚本，为项目开发提供了一种灵活、标准化、易于管理的方式来执行各种命令行任务。\n",{"_58":784,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/890/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/890/timeline",{"_58":787,"_60":61,"_62":788,"_64":789,"_66":790,"_68":791,"_70":792,"_72":793,"_74":794,"_76":795,"_78":796,"_111":797,"_138":139,"_140":24,"_141":-5,"_142":800,"_144":801,"_166":159,"_160":803,"_162":803,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":804,"_176":805,"_182":806,"_184":807,"_196":809,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/885","https://api.github.com/repos/pro-collection/interview-question/issues/885/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/885/comments","https://api.github.com/repos/pro-collection/interview-question/issues/885/events","https://github.com/pro-collection/interview-question/issues/885",2526785723,"I_kwDOJGDC6c6Wm7C7",885,"如何做静态资源预加载【热度: 696】",{"_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},[798,799],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":802,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-15T07:39:24Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：资源预加载\n\n### 预加载\n\n预加载是指在用户需要数据或资源之前，提前加载这些数据或资源的过程。\n\n这个过程可以提高应用程序或网站的响应速度和用户体验\n\n### 预加载的优点\n\n- **提升加载速度**：通过提前加载资源，用户在访问页面时可以更快地看到完整内容。\n- **提高用户体验**：减少页面加载时的延迟，使用户感到更流畅。\n- **优化资源使用**：合理安排资源加载顺序，提高网络利用率。\n\n### WebWorker 实现预加载\n\n下面的示例将展示如何使用 Web Worker 来预加载静态资源。我们将创建一个简单的 Web Worker 脚本，用于在后台预加载一些指定的静态资源（例如图片、CSS、JavaScript 文件等）。这个过程不会阻塞主线程，使得主线程可以继续处理其他任务，如用户交互，从而提升页面的响应性能。\n\n###3 步骤 1：创建 Web Worker 脚本\n\n首先，创建一个 JS 文件作为 Web Worker 的脚本。我们把这个文件命名为 `preloadWorker.js`。\n\n```javascript\n// preloadWorker.js\n\nself.addEventListener(\"message\", (e) => {\n const urls = e.data;\n urls.forEach((url) => {\n fetch(url)\n .then((response) => {\n // 一个简单的操作，标识资源已被预加载\n if (response.status === 200) {\n postMessage(`Resource preloaded: ${url}`);\n } else {\n postMessage(`Resource failed: ${url}`);\n }\n })\n .catch((error) => {\n postMessage(`Resource fetch error: ${url}`);\n });\n });\n});\n```\n\n这个脚本监听来自主线程的消息，该消息包含了要预加载的资源的 URL 列表。对于每个 URL，它使用 `fetch` 请求该资源。根据请求的结果，它会通过 `postMessage` 向主线程发送一条消息，表明该资源已被预加载，或者载入失败。\n\n#### 步骤 2：在主线程中使用 Web Worker\n\n接下来，在 HTML 页面中使用这个 Web Worker。\n\n首先，确保在你的 HTML 中引入一个脚本，初始化并使用这个 Web Worker。\n\n```html\n\n\n \n \n Web Worker Preload Demo\n \n \n \n \n\n```\n\n然后，创建主线程脚本 `main.js` 用于启动和与 Web Worker 交互。\n\n```javascript\n// main.js\n\nif (window.Worker) {\n const worker = new Worker(\"preloadWorker.js\");\n\n const resources = [\n \"image.png\", // 示例资源，确保替换为实际的 URL\n \"style.css\",\n \"script.js\",\n ];\n\n worker.postMessage(resources);\n\n worker.onmessage = (e) => {\n console.log(e.data);\n };\n} else {\n console.log(\"Your browser doesn't support web workers.\");\n}\n```\n\n这段脚本首先检查浏览器是否支持 Web Worker。如果支持，它会创建一个指向 `preloadWorker.js` 的新 Worker 实例，然后将要预加载的资源列表发送给这个 Worker。最后，它设置一个事件监听器来接收并处理 Worker 发出的消息。\n",{"_58":808,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/885/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/885/timeline",{"_58":811,"_60":61,"_62":812,"_64":813,"_66":814,"_68":815,"_70":816,"_72":817,"_74":818,"_76":819,"_78":820,"_111":821,"_138":139,"_140":24,"_141":-5,"_142":824,"_144":825,"_166":159,"_160":827,"_162":827,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":828,"_176":829,"_182":830,"_184":831,"_196":833,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/883","https://api.github.com/repos/pro-collection/interview-question/issues/883/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/883/comments","https://api.github.com/repos/pro-collection/interview-question/issues/883/events","https://github.com/pro-collection/interview-question/issues/883",2526782657,"I_kwDOJGDC6c6Wm6TB",883,"在开发过程中，想做 git 代码暂存，该如何做【热度: 342】",{"_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},[822,823],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":712,"_72":713,"_58":714,"_117":715,"_119":136,"_121":24,"_122":137},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_154":826,"_156":232,"_158":159,"_138":139,"_160":233,"_162":234,"_164":-5,"_165":-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-09-15T07:29:34Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：git stash 使用\n\n> 作者备注 \n> 这个问题的指向性非常明显，就是在问 git stash 的使用\n\n在 Git 中，如果你想要暂存当前的工作进度，可以使用`git stash`命令。这个命令会将你的工作目录中的修改（已追踪文件的修改和暂存的改动）保存到一个未完成工作的栈中，同时将你的工作目录恢复到上次提交的状态，从而让你可以转而处理其他工作，之后再回来继续刚才的工作。\n\n### 基本用法\n\n- **暂存当前的工作**\n\n```bash\ngit stash\n```\n\n或者，为这次暂存操作添加一个描述，以便之后更容易识别：\n\n```bash\ngit stash save \"特征X的进度\"\n```\n\n- **查看暂存列表**\n\n```bash\ngit stash list\n```\n\n这个命令会显示所有被暂存的进度列表。\n\n- **应用最近的暂存**\n\n```bash\ngit stash apply\n```\n\n默认情况下，`git stash apply`将重新应用最近暂存的进度。如果你有多个暂存进度，可以通过指定 stash 的名称（例如：`stash@{0}`）来选择具体的一个进度使用。\n\n```bash\ngit stash apply stash@{0}\n```\n\n- **弹出最近的暂存**\n\n```bash\ngit stash pop\n```\n\n这个命令将应用最近的暂存进度，并将这个暂存记录从暂存的栈中移除。\n\n- **删除一个指定的暂存**\n\n```bash\ngit stash drop stash@{0}\n```\n\n- **清除所有暂存**\n\n```bash\ngit stash clear\n```\n\n### 进阶用法\n\n- **暂存未追踪的文件**\n\n如果你还想暂存那些新添加到工作目录中但还没有加入版本控制的文件（即未追踪文件），可以使用`-u`或`--include-untracked`选项：\n\n```bash\ngit stash -u\n```\n\n或\n\n```bash\ngit stash --include-untracked\n```\n\n- **暂存忽略文件**\n\n默认`git stash`不会暂存`.gitignore`中忽略的文件。如果你希望连同这些文件一起暂存，可以使用`-a`或`--all`选项：\n\n```bash\ngit stash -a\n```\n\ngit stash 是一个非常有用的功能，特别是当你需要快速切换到另一个分支处理一些工作，而你的当前分支有未完成的工作时。它允许你临时保管你的工作进度，防止未完工的更改妨碍其他任务的进行。\n",{"_58":832,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/883/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/883/timeline",{"_58":835,"_60":61,"_62":836,"_64":837,"_66":838,"_68":839,"_70":840,"_72":841,"_74":842,"_76":843,"_78":844,"_111":845,"_138":139,"_140":24,"_141":-5,"_142":848,"_144":849,"_166":159,"_160":851,"_162":852,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":853,"_176":854,"_182":855,"_184":856,"_196":858,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/882","https://api.github.com/repos/pro-collection/interview-question/issues/882/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/882/comments","https://api.github.com/repos/pro-collection/interview-question/issues/882/events","https://github.com/pro-collection/interview-question/issues/882",2526781714,"I_kwDOJGDC6c6Wm6ES",882,"websocket 断联之后如何重连，且保证断链期间数据不丢失【热度: 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},[846,847],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":850,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-15T07:26:21Z","2024-09-17T12:28:20Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：websocket 断联数据不丢失\n\n实现 WebSocket 的自动重连并保证断连期间数据不丢失，通常需要在客户端实现一些机制来管理连接状态、定时重试以及缓存未成功发送的消息。以下是一个简单的步骤和策略指南：\n\n### 1. 监听连接状态\n\n首先，你需要监听 WebSocket 连接的各种事件，以便知道何时发生了断连，并根据这些事件来触发重连逻辑。\n\n- `onclose`: 当 WebSocket 连接关闭时，触发重连逻辑。\n- `onerror`: 出现错误时，也可视为一个触发重连的信号。\n- `onopen`: 连接成功时，清除重试计数器和缓存的数据（如果之前成功发送了）。\n\n### 2. 实现重连逻辑\n\n- **使用指数退避算法**来延迟重连尝试，避免短时间内频繁重连。\n - 例如，第一次重连延迟 1 秒，第二次 2 秒，然后 4 秒，最大延迟设置为 1 分钟。\n- 在每次重连时，重置 WebSocket 对象并重新发起连接。\n\n### 3. 缓存数据\n\n- **发送数据前检查连接状态**：如果 WebSocket 处于非开放状态，将数据缓存起来，待连接恢复后再发送。\n- **使用队列存储待发送数据**：便于按顺序发送，保证数据的完整性和顺序。\n\n### 4. 发送缓存数据\n\n- 在连接成功的回调（`onopen`事件）中，检查是否有缓存的数据，如果有，则遍历队列发送。\n\n### 示例代码\n\n下面是一个示范代码片段：\n\n```javascript\nvar ws;\nvar retryInterval = 1000; // 初始重连间隔为 1 秒\nconst maxInterval = 60000; // 最大间隔为 1 分钟\nvar messageQueue = []; // 数据缓存队列\n\nfunction connect() {\n ws = new WebSocket(\"wss://your-websocket-url\");\n\n ws.onopen = function () {\n console.log(\"WebSocket connected\");\n retryInterval = 1000; // 重置重连间隔\n sendMessageQueue(); // 尝试发送缓存中的数据\n };\n\n ws.onclose = function () {\n console.log(\"WebSocket disconnected, attempting to reconnect...\");\n setTimeout(connect, retryInterval);\n retryInterval = Math.min(retryInterval * 2, maxInterval); // 指数退避\n };\n\n ws.onerror = function (error) {\n console.error(\"WebSocket error:\", error);\n ws.close(); // 确保触发 onclose 事件\n };\n\n ws.onmessage = function (message) {\n // 处理接收到的数据\n };\n}\n\nfunction sendMessage(data) {\n if (ws.readyState === WebSocket.OPEN) {\n ws.send(data);\n } else {\n console.log(\"WebSocket is not open. Queuing message.\");\n messageQueue.push(data); // 缓存待发送数据\n }\n}\n\nfunction sendMessageQueue() {\n while (messageQueue.length > 0) {\n const data = messageQueue.shift(); // 获取并移除队列中的第一个元素\n sendMessage(data); // 尝试再次发送\n }\n}\n\nconnect(); // 初始化连接\n```\n\n这个示例实现了基本的重连逻辑和数据缓存策略。在实际应用中，根据实际需求对这些逻辑进行扩展和定制化是很有必要的，尤其是数据缓存和发送逻辑，可能需要结合业务特点进行更复杂的处理。\n\n特别是数据缓存这个场景，如果有多个 webscoket 数据，建议使用 `indexedDB` 做一个系统级别的数据管理。\n",{"_58":857,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/882/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/882/timeline",{"_58":860,"_60":61,"_62":861,"_64":862,"_66":863,"_68":864,"_70":865,"_72":866,"_74":867,"_76":868,"_78":869,"_111":870,"_138":139,"_140":24,"_141":-5,"_142":873,"_144":874,"_166":159,"_160":876,"_162":876,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":877,"_176":878,"_182":879,"_184":880,"_196":882,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/880","https://api.github.com/repos/pro-collection/interview-question/issues/880/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/880/comments","https://api.github.com/repos/pro-collection/interview-question/issues/880/events","https://github.com/pro-collection/interview-question/issues/880",2526779904,"I_kwDOJGDC6c6Wm5oA",880,"需要详细记录多个操作链路的性能耗时，进行结构化场景分析，该如何做【热度: 378】",{"_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},[871,872],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":308,"_72":309,"_58":310,"_117":311,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":875,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-15T07:20:30Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：操作链路耗时分析\n\n> 作者笔记\n> 该问题，主要是考察两个问题，怎么定操作节点指标，怎么去捕获每个阶段时间的耗时\n\n### 操作节点指标\n\n首先对一个操作链路切片：比如一个操作流程，分拆为第一步，第二步，第三步....... \n然后对每一步一个事件点。 \n然后统计每一个时间点之间的时间差，就可以得出用户早操作每一步操作停留的时间。\n\n甚至可以统计一个串行流程，实际上是一样的。\n\n### 阶段耗时统计\n\n**推荐： `performance.mark()`**\n\n`performance.mark()` 是 Web Performance API 的一部分，它允许你在浏览器的性能条目缓冲区中创建一个具有特定名称的时间戳（也就是一个\"标记\"）。这些标记可用于精确测量页面或应用中的特定流程、操作、或某段代码的执行时间。通过使用`performance.mark()`来标记关键的代码执行点，你可以准确地测量出这些点之间的耗时，从而评估性能和识别瓶颈。\n\n#### 如何使用 `performance.mark()`\n\n**创建标记**\n\n要使用`performance.mark()`，直接调用此函数并传入一个字符串作为标记的名称即可：\n\n```javascript\nperformance.mark(\"startLoad\");\n// 执行一些操作\nperformance.mark(\"endLoad\");\n```\n\n在上述示例中，`startLoad`和`endLoad`是两个标记点，分别表示加载操作的开始和结束。\n\n**测量两个标记间的耗时**\n\n创建标记后，你可以使用`performance.measure()`方法来测量这两个标记点之间的耗时。`performance.measure()`方法同样需要一个名称，并且可以接受两个额外的参数：起始标记和结束标记的名称。\n\n```javascript\nperformance.measure(\"loadDuration\", \"startLoad\", \"endLoad\");\n```\n\n在上面的代码中，`loadDuration`是测量的名称，表示从`startLoad`到`endLoad`之间的耗时。\n\n**获取和分析测量结果**\n\n通过`performance.getEntriesByName()`或其他类似的 API，你可以获取到性能条目并分析结果：\n\n```javascript\nconst measure = performance.getEntriesByName(\"loadDuration\")[0];\nconsole.log(`加载耗时：${measure.duration}毫秒`);\n```\n\n`performance.getEntriesByName('loadDuration')`会返回一个数组，其中包含所有名为`loadDuration`的性能条目。在这个例子中，我们取数组的第一个元素，并通过`duration`属性获取实际的测量时间。\n\n#### 清理标记和测量\n\n为了避免性能条目缓冲区满了或是数据混乱，你可以在完成测量和分析后，使用`performance.clearMarks()`和`performance.clearMeasures()`来清除标记和测量结果。\n\n```javascript\nperformance.clearMarks(\"startLoad\");\nperformance.clearMarks(\"endLoad\");\nperformance.clearMeasures(\"loadDuration\");\n```\n\n#### 使用场景\n\n`performance.mark()`非常适合用于测量页面加载、脚本执行、用户交互处理或任何自定义流程的性能。通过准确地标记和测量这些操作的起始和结束时间，开发者可以识别出性能瓶颈和潜在的优化点，从而改进应用的性能表现。\n\n#### 注意事项\n\n- 并非所有浏览器都支持 Web Performance API 的全部特性。使用这些 API 之前，建议检查兼容性。\n- 对于高频率的性能标记和测量，要注意性能条目缓冲区可能会被快速填满，从而影响数据的收集和分析。确保适时清理不再需要的性能条目。\n",{"_58":881,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/880/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/880/timeline",{"_58":884,"_60":61,"_62":885,"_64":886,"_66":887,"_68":888,"_70":889,"_72":890,"_74":891,"_76":892,"_78":893,"_111":894,"_138":139,"_140":24,"_141":-5,"_142":897,"_144":898,"_166":159,"_160":900,"_162":900,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":901,"_176":902,"_182":903,"_184":904,"_196":906,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/876","https://api.github.com/repos/pro-collection/interview-question/issues/876/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/876/comments","https://api.github.com/repos/pro-collection/interview-question/issues/876/events","https://github.com/pro-collection/interview-question/issues/876",2526772397,"I_kwDOJGDC6c6Wm3yt",876,"eslint 如何设置只校验本次 MR 变更的文件内容【热度: 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},[895,896],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":683,"_72":684,"_58":685,"_117":686,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":899,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-09-15T06:58:14Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：eslint 和 git 结合校验\n\n要让 ESLint 只校验在 Merge Request (MR)、Pull Request (PR)或代码提交中变更的文件，可以采用几种方法。下面是几个可能的方案：\n\n### 1. 命令行 Git 和 ESLint 组合使用\n\n通过组合`git`命令和`eslint`命令来实现。首先，使用`git diff`获取变更的文件列表，然后将这些文件传递给`eslint`进行校验。\n\n```bash\n# 获取master分支与当前分支变更的文件列表，然后对这些文件执行eslint校验\ngit diff --name-only --diff-filter=d master | grep '\\.js$' | xargs eslint\n```\n\n这里的命令解释：\n\n- `git diff --name-only --diff-filter=d master`：获取相对于`master`分支变更的文件列表，`--diff-filter=d`表示排除已删除的文件。\n- `grep '\\.js$'`：过滤出`.js`结尾的文件。\n- `xargs eslint`：将过滤后的文件列表作为参数传递给`eslint`命令。\n\n注意：这个命令以`master`分支作为对比对象，如果你需要对比其他分支，请将`master`替换为相应的分支名。\n\n### 2. 使用 lint-staged 运行 ESLint\n\n[lint-staged](https://github.com/okonet/lint-staged) 是一个在 git 暂存文件上运行 linters 的工具，它非常适合与 pre-commit 钩子结合使用，确保只有符合代码规范的代码才能被提交。\n\n首先，安装`lint-staged`和`husky`（用于管理 git 钩子的工具）：\n\n```bash\nnpm install lint-staged husky --save-dev\n```\n\n然后，你可以在项目的`package.json`文件中配置`lint-staged`：\n\n```json\n{\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"lint-staged\"\n }\n },\n \"lint-staged\": {\n \"*.js\": [\"eslint --fix\", \"git add\"]\n }\n}\n```\n\n这样配置后，每次执行`git commit`操作时，`husky`会触发`pre-commit`钩子，运行`lint-staged`，再由`lint-staged`运行 ESLint 检查所有暂存的`.js`文件。通过这种方式，只有变更的并且被 git track 的文件会被 ESLint 校验。\n\n### 3. CI/CD 中集成 ESLint\n\n在持续集成/持续部署 (CI/CD) 流程中，你也可以配置脚本使用类似于第一个方案的命令，只校验在 MR/PR 中变更的文件。具体实现方式会依赖于你使用的 CI/CD 工具（如 GitLab CI、GitHub Actions、Jenkins 等）。\n\n通过在 CI/CD 流程中加入这一步，可以确保只有通过 ESLint 校验的代码变更才能合并到主分支。\n",{"_58":905,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/876/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/876/timeline",{"_58":908,"_60":61,"_62":909,"_64":910,"_66":911,"_68":912,"_70":913,"_72":914,"_74":915,"_76":916,"_78":917,"_111":918,"_138":139,"_140":24,"_141":-5,"_142":921,"_144":922,"_166":159,"_160":924,"_162":925,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":926,"_176":927,"_182":928,"_184":929,"_196":931,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/867","https://api.github.com/repos/pro-collection/interview-question/issues/867/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/867/comments","https://api.github.com/repos/pro-collection/interview-question/issues/867/events","https://github.com/pro-collection/interview-question/issues/867",2498572415,"I_kwDOJGDC6c6U7TB_",867,"要实时统计用户浏览器窗口大小，该如何做【热度: 210】",{"_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},[919,920],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":308,"_72":309,"_58":310,"_117":311,"_119":136,"_121":24,"_122":137},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_154":923,"_156":232,"_158":159,"_138":139,"_160":233,"_162":234,"_164":-5,"_165":-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-08-31T02:54:46Z","2024-08-31T02:54:47Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：resize 事件应用\n\n要实时统计用户浏览器窗口大小，可以利用 JavaScript 中的 `resize` 事件。当浏览器窗口尺寸变化时，此事件会被触发。通过侦听此事件，可以实时获取并处理浏览器窗口的宽度和高度。\n\n### 基础示例\n\n下面是一个简单的示例，展示如何使用 `resize` 事件来获取并打印当前浏览器窗口的宽度和高度：\n\n```javascript\n// 定义一个函数来处理窗口大小变化\nfunction handleResize() {\n const width = window.innerWidth;\n const height = window.innerHeight;\n console.log(`当前窗口大小：宽度 = ${width}, 高度 = ${height}`);\n}\n\n// 在窗口 resize 事件上添加监听器\nwindow.addEventListener(\"resize\", handleResize);\n\n// 初始化时执行一次，确保获取初始窗口大小\nhandleResize();\n```\n\n### 节流优化\n\n如果你担心 `resize` 事件触发得太频繁，可能会影响页面性能，可以引入“节流”（throttle）机制来限制事件处理函数的执行频率。节流确保了即使事件持续触发，事件处理函数也只在每隔一段时间执行一次。\n\n以下是如何应用节流优化的示例：\n\n```javascript\nfunction throttle(fn, wait) {\n let inThrottle, lastFn, lastTime;\n return function () {\n const context = this,\n args = arguments;\n if (!inThrottle) {\n fn.apply(context, args);\n lastTime = Date.now();\n inThrottle = true;\n } else {\n clearTimeout(lastFn);\n lastFn = setTimeout(function () {\n if (Date.now() - lastTime >= wait) {\n fn.apply(context, args);\n lastTime = Date.now();\n }\n }, Math.max(wait - (Date.now() - lastTime), 0));\n }\n };\n}\n\n// 使用节流函数包装我们的处理器\nconst throttledHandleResize = throttle(handleResize, 100);\n\n// 添加节流化的事件监听\nwindow.addEventListener(\"resize\", throttledHandleResize);\n```\n\n这个 `throttle` 函数通过确保被包装的 `handleResize` 函数在指定的时间间隔（本例中为 100 毫秒）内最多只执行一次，来减少 `resize` 事件处理函数的调用频率。\n\n### 应用场景\n\n这样实时统计用户浏览器窗口大小的方法可以用于多种应用场景，如响应式布局调整、基于窗口大小动态加载资源、或者其他需要根据视窗大小变化进行调整的交互效果实现。\n\n使用这种方法时，重要的是平衡事件处理函数的执行频率和页面的性能，特别是当你的窗口大小调整处理函数中包含复杂操作时。通过合理利用“节流”或“防抖”（debounce）技术，可以有效地解决这个问题。\n",{"_58":930,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/867/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/867/timeline",{"_58":933,"_60":61,"_62":934,"_64":935,"_66":936,"_68":937,"_70":938,"_72":939,"_74":940,"_76":941,"_78":942,"_111":943,"_138":139,"_140":24,"_141":-5,"_142":946,"_144":947,"_166":159,"_160":949,"_162":950,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":951,"_176":952,"_182":953,"_184":954,"_196":956,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/866","https://api.github.com/repos/pro-collection/interview-question/issues/866/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/866/comments","https://api.github.com/repos/pro-collection/interview-question/issues/866/events","https://github.com/pro-collection/interview-question/issues/866",2498571746,"I_kwDOJGDC6c6U7S3i",866,"ResizeObserver 作用是什么【热度: 416】",{"_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},[944,945],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":308,"_72":309,"_58":310,"_117":311,"_119":136,"_121":24,"_122":137},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_154":948,"_156":232,"_158":159,"_138":139,"_160":233,"_162":234,"_164":-5,"_165":-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-08-31T02:52:16Z","2024-08-31T02:52:17Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：ResizeObserver api\n\n`ResizeObserver` 的作用是监测元素的尺寸变化。这是一种强大的 Web API，允许开发者在元素的尺寸发生改变时（无论是因为元素内容的变化、窗口大小的调整还是其他原因导致的尺寸改变），执行一些操作或布局更新。在过去，开发者通常需要依赖定时器或者窗口的 `resize` 事件来间接监测元素尺寸的变化，这种方法不仅不够精确，而且效率低下。`ResizeObserver` 提供了一种更为直接和高效的方式来响应尺寸变化。\n\n### 如何使用 `ResizeObserver`\n\n使用 `ResizeObserver` 很简单，你只需要创建一个 `ResizeObserver` 实例，并为它提供一个回调函数。在回调函数中，你可以基于元素尺寸的变化来执行相应的操作。然后，使用 `observe` 方法来指定需要被观察尺寸变化的元素。\n\n### 示例代码\n\n下面的示例代码展示了如何使用 `ResizeObserver` 来监测一个元素的尺寸变化，并在尺寸变化时输出新的尺寸信息：\n\n```javascript\n// 监测的目标元素\nconst targetElement = document.querySelector(\".resizable\");\n\n// 创建 ResizeObserver 实例\nconst resizeObserver = new ResizeObserver((entries) => {\n for (let entry of entries) {\n // entry.target 是被观察的元素\n // entry.contentRect 包含了元素的尺寸信息\n console.log(\"Element size changed:\", entry.target);\n console.log(`New width: ${entry.contentRect.width}`);\n console.log(`New height: ${entry.contentRect.height}`);\n }\n});\n\n// 开始观察目标元素\nresizeObserver.observe(targetElement);\n```\n\n### 应用场景\n\n`ResizeObserver` 的常见应用场景包括：\n\n- **响应式布局**：当容器的尺寸改变时，动态调整内容或布局，提供更好的响应式设计。\n- **图表和可视化**：在图表或数据可视化的容器大小改变时，重新绘制图表来适应新的尺寸。\n- **动态元素（如弹出窗口和下拉菜单）**：监测并根据内容大小自动调整元素的尺寸。\n",{"_58":955,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/866/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/866/timeline",{"_58":958,"_60":61,"_62":959,"_64":960,"_66":961,"_68":962,"_70":963,"_72":964,"_74":965,"_76":966,"_78":967,"_111":968,"_138":139,"_140":24,"_141":-5,"_142":975,"_144":976,"_166":159,"_160":978,"_162":979,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":980,"_176":981,"_182":982,"_184":983,"_196":985,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/865","https://api.github.com/repos/pro-collection/interview-question/issues/865/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/865/comments","https://api.github.com/repos/pro-collection/interview-question/issues/865/events","https://github.com/pro-collection/interview-question/issues/865",2498567843,"I_kwDOJGDC6c6U7R6j",865,"如何防止前端页面重复请求【热度: 451】",{"_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},[969,970],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":971,"_72":972,"_58":973,"_117":974,"_119":136,"_121":24,"_122":137},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东",[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":977,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-08-31T02:40:24Z","2024-08-31T02:42:12Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：重复请求问题\r\n\r\n防止前端页面的重复请求是提升用户体验和减轻服务器压力的重要策略之一。下面是一些实用的方法来减少或防止重复请求：\r\n\r\n### 1. 使用锁或标志位\r\n\r\n设置一个锁（flag）或状态标志位来控制请求的发送。在首次点击或请求发起时设置该标志位，直到请求完成后再清除该标志，以阻止在请求未完成前再次发起相同的请求。\r\n\r\n#### 示例：\r\n\r\n```javascript\r\nlet isRequestPending = false;\r\n\r\nfunction fetchData() {\r\n if (isRequestPending) {\r\n return; // 如果请求已经在进行中，则不再发起新的请求\r\n }\r\n\r\n isRequestPending = true; // 设置请求标志\r\n\r\n fetch(\"your-api-endpoint\")\r\n .then((response) => response.json())\r\n .then((data) => {\r\n console.log(\"请求成功:\", data);\r\n })\r\n .catch((error) => {\r\n console.error(\"请求失败:\", error);\r\n })\r\n .finally(() => {\r\n isRequestPending = false; // 请求结束，无论成功或失败，都清除请求标志\r\n });\r\n}\r\n\r\n// 模拟用户多次点击\r\nfetchData();\r\nfetchData(); // 这个请求将不会被执行\r\n```\r\n\r\n### 2. 使用防抖（Debounce）和节流（Throttle）\r\n\r\n防抖和节流是限制函数执行频率的两种常见技术，它们可以有效防止重复请求。\r\n\r\n- **防抖**：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。\r\n- **节流**：在规定的时间内只能触发一次函数。如果这个时间内触发多次函数，只有一次生效。\r\n\r\n#### 示例：\r\n\r\n使用 lodash 的 `_.debounce` 和 `_.throttle` 方法：\r\n\r\n```javascript\r\nimport _ from \"lodash\";\r\n\r\n// 防抖函数\r\nconst fetchDataDebounced = _.debounce(fetchData, 300);\r\n\r\n// 节流函数\r\nconst fetchDataThrottled = _.throttle(fetchData, 300);\r\n\r\n// 使用防抖或节流方法来减少函数执行频率\r\nbutton.addEventListener(\"click\", fetchDataDebounced);\r\n```\r\n\r\n### 3. 使用缓存结果（最佳办法）\r\n\r\n对于一些数据不经常变化的请求，例如用户信息、配置数据等，可以将请求的结果缓存起来。下一次请求相同的资源时，先从缓存中读取数据，如果缓存有效，则无需再发起新的网络请求。\r\n\r\n思路类似于下面这张图\r\n![img](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6ce7486c01f451684160a7738c6417e~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1103&h=401&s=57837&e=png&b=fdfdfd)\r\n\r\n要达到这样的效果，可以设计一个请求缓存管理器，来管理并发的请求。如果有相同的请求（URL、参数、方法相同）时，只发起一次网络调用，然后将结果分发给所有等待的请求。这种模式通常可以通过一个简单的缓存对象来实现，该对象将请求的唯一标识作为键，对应的 Promise 作为值。\r\n\r\n以下是一个基本实现的示例：\r\n\r\n```javascript\r\nclass RequestCache {\r\n constructor() {\r\n this.cache = new Map();\r\n }\r\n\r\n // 生成请求的唯一标识符，这里仅以 URL 和 Method 为例，实际可能需要包括请求体等\r\n generateKey(url, method) {\r\n return `${method}:${url}`;\r\n }\r\n\r\n // 执行请求的方法，接受 fetch 的所有参数\r\n request(url, options = {}) {\r\n const { method = \"GET\" } = options;\r\n const key = this.generateKey(url, method);\r\n\r\n // 检查缓存中是否有相同的请求\r\n if (this.cache.has(key)) {\r\n return this.cache.get(key);\r\n }\r\n\r\n // 没有相同的请求，发起新的请求\r\n const requestPromise = fetch(url, options)\r\n .then((response) => response.json())\r\n .then((data) => {\r\n // 请求成功后，将其从缓存中移除\r\n this.cache.delete(key);\r\n return data;\r\n })\r\n .catch((error) => {\r\n // 请求失败也应该从缓存中移除\r\n this.cache.delete(key);\r\n throw error;\r\n });\r\n\r\n // 将新的请求 Promise 保存在缓存中\r\n this.cache.set(key, requestPromise);\r\n\r\n return requestPromise;\r\n }\r\n}\r\n\r\n// 使用示例\r\nconst cache = new RequestCache();\r\nconst URL = \"https://api.example.com/data\";\r\n\r\n// 假设这三个请求几乎同时发起\r\ncache.request(URL).then((data) => console.log(\"请求1:\", data));\r\ncache.request(URL).then((data) => console.log(\"请求2:\", data));\r\ncache.request(URL).then((data) => console.log(\"请求3:\", data));\r\n```\r\n\r\n这个简单的 `RequestCache` 类通过一个内部的 `Map` 对象管理缓存的请求。当一个新的请求发起时，它会首先检查是否已经有相同的请求存在。如果已存在，那么它只返回先前请求的 Promise；如果不存在，它会发起一个新的网络请求，并将请求的 Promise 存储在缓存中，直到请求完成（无论是成功还是失败）之后，再将其从缓存中移除。\r\n\r\n请注意，这里的示例非常基础，且主要用于说明如何缓存并复用请求的结果。在实际应用中，你可能还需要考虑更多细节，比如如何更精细地处理 POST 请求的请求体内容、如何设置缓存的过期时间、错误处理策略、缓存大小限制等。\r\n\r\n\r\n**推荐参考文档**： https://juejin.cn/post/7341840038964363283\r\n",{"_58":984,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/865/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/865/timeline",{"_58":987,"_60":61,"_62":988,"_64":989,"_66":990,"_68":991,"_70":992,"_72":993,"_74":994,"_76":995,"_78":996,"_111":997,"_138":139,"_140":24,"_141":-5,"_142":1000,"_144":1001,"_166":159,"_160":1003,"_162":1004,"_165":-5,"_168":169,"_106":-5,"_170":-5,"_171":1005,"_176":1006,"_182":1007,"_184":1008,"_196":1010,"_198":-5,"_199":-5,"_200":201},"https://api.github.com/repos/pro-collection/interview-question/issues/864","https://api.github.com/repos/pro-collection/interview-question/issues/864/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/864/comments","https://api.github.com/repos/pro-collection/interview-question/issues/864/events","https://github.com/pro-collection/interview-question/issues/864",2498565512,"I_kwDOJGDC6c6U7RWI",864,"统计全站每一个静态资源加载耗时，该如何做【热度: 564】",{"_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},[998,999],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":1002,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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-08-31T02:33:27Z","2024-08-31T02:33:28Z",{"_173":159,"_174":159,"_175":159},{"_178":159,"_179":159,"_180":159,"_181":159},"**关键词**：统计资源加载耗时、PerformanceObserver PerformanceResourceTiming api 使用\n\n要统计全站每一个静态资源（如图片、JS 脚本、CSS 样式表等）的加载耗时，你可以借助浏览器的 Performance API，特别是利用 `PerformanceResourceTiming` 接口来获取资源加载的详细时间信息。以下是一个基本的步骤指导和示例代码，展示如何实现这一功能：\n\n### 步骤\n\n1. **使用 `PerformanceObserver`：** 创建一个 `PerformanceObserver` 实例来监听资源加载事件，能够实时收集性能数据，而且对性能影响较小。\n\n2. **过滤静态资源类型：** 通过检查 `initiatorType` 属性，筛选出静态资源（例如 `img`、`script`、`css` 等）的加载事件。\n\n3. **计算和展示耗时：** 对每个静态资源的加载耗时进行计算并展示。资源的耗时可以通过 `duration` 属性直接获取。\n\n### 示例代码\n\n以下是一个简单的 JavaScript 代码示例，展示了如何使用 `PerformanceObserver` 来统计全站静态资源的加载耗时：\n\n```javascript\n// 创建性能观察者实例来监听资源加载事件\nconst observer = new PerformanceObserver((list) => {\n const entries = list.getEntries();\n for (const entry of entries) {\n // 过滤静态资源类型\n if ([\"img\", \"script\", \"css\", \"link\"].includes(entry.initiatorType)) {\n console.log(`资源 ${entry.name} 类型 ${entry.initiatorType} 耗时：${entry.duration.toFixed(2)} 毫秒`);\n }\n }\n});\n\n// 开始观察 Resource Timing 类型的性能条目\nobserver.observe({ entryTypes: [\"resource\"] });\n```\n\n### 注意事项\n\n- **性能数据的准确性：** 确保性能数据的准确性和实时性，你应该在页面加载的早期就开始监听资源加载事件，例如在 `` 标签中就引入或嵌入这段脚本。\n- **跨域资源的时间信息：** 如果你需要获取跨域资源的详细时间信息（如第三方字体或脚本），那么这些资源的服务器需要在响应头中包含 `Timing-Allow-Origin` 头。\n- **大量数据的处理：** 如果页面包含大量静态资源，考虑如何存储、传输和分析这些数据，避免对性能和用户体验造成影响。\n",{"_58":1009,"_187":159,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159},"https://api.github.com/repos/pro-collection/interview-question/issues/864/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/864/timeline","pagination",{"_1013":151,"_173":1014},"value",7,"actionData","errors"]