Hello, world!

;\n```\n\n经过编译后，会被转换为类似的 JavaScript 对象：\n```javascript\nconst element = React.createElement(\"h1\", null, \"Hello, world!\");\n```\n\n上述代码中，`React.createElement` 是一个由 React 提供的方法，它接收三个参数：元素的类型、元素的属性（可以是一个对象或 null）、元素的子元素。这样，通过调用 `React.createElement`，JSX 元素就被转换成了一个 JavaScript 对象。\n\n在 React 项目中，Babel 是一个常用的工具，用于将 JSX 代码转换为 JavaScript 代码。Babel 实际上是一个 JavaScript 编译器，可以根据配置和插件，将代码从一种语法转换为另一种语法。\n\n当 Babel 遇到 JSX 代码时，它会使用一个名为 `@babel/preset-react` 的 preset（预设）来进行转换。这个 preset 包含了一系列的插件，用于处理 JSX 语法。\n\n**具体的工作流程如下**：\n\n1. Babel 解析代码：Babel 会将代码解析成抽象语法树（AST），以便于之后的处理。\n\n2. JSX 转换：Babel 使用 `@babel/preset-react` 预设来处理 JSX 代码。这个预设包含了一个插件 `@babel/plugin-transform-react-jsx`，用于将 JSX 转换为函数调用。\n\n 例如，将 `

Hello, world!

` 转换成 `React.createElement(\"h1\", null, \"Hello, world!\")`。\n\n3. 生成 JavaScript 代码：Babel 使用转换后的 AST，将其重新生成为 JavaScript 代码。\n\n 例如，将 `React.createElement(\"h1\", null, \"Hello, world!\")` 转换成实际的 JavaScript 代码。\n\n总结起来，Babel 的作用就是将 JSX 代码转换为 JavaScript 代码，使其能够在浏览器中执行。这样，React 就可以理解和处理 JSX 语法，并通过转换后的 JavaScript 代码来创建虚拟 DOM 和进行后续的更新操作。\n\n\n### 2. 创建虚拟 DOM：React 使用解析后的 JSX 对象来创建虚拟 DOM（Virtual DOM）。虚拟 DOM 是一个轻量级的、以 JavaScript 对象表示的 DOM 树的副本。\n\n**createElement 创建虚拟dom**\n\n在 React 中，`React.createElement` 函数用于创建虚拟 DOM 元素。它接受三个参数：元素类型、属性对象以及子元素。\n\n```javascript\nconst element = React.createElement(type, props, children);\n```\n\n`React.createElement` 函数会返回一个描述虚拟 DOM 元素的 JavaScript 对象。这个对象包含了元素的类型、属性和子元素等信息。例如，对于 `

Hello, React!

` 这个 JSX 语法，它被转换为以下形式：\n\n```javascript\nReact.createElement(\"div\", { className: \"container\" }, \"Hello, React!\");\n```\n\n这样就创建了一个描述 `

` 元素的虚拟 DOM 对象。虚拟 DOM 对象可以通过 `ReactDOM.render` 方法渲染到实际的 DOM 中。当虚拟 DOM 发生变化时，React 会通过比较新旧虚拟 DOM，找出差异并进行局部更新，从而最小化对实际 DOM 的操作。\n\n**createElement 原理**\n\n以下是 React 源码中 `React.createElement` 函数的简化版本：\n\n```javascript\nfunction createElement(type, props, ...children) {\n const element = {\n type,\n props: {\n ...props,\n children: children.map(child =>\n typeof child === 'object' ? child : createTextElement(child)\n )\n }\n };\n \n return element;\n}\n\nfunction createTextElement(text) {\n return {\n type: 'TEXT_ELEMENT',\n props: {\n nodeValue: text,\n children: []\n }\n };\n}\n```\n\n在上面的源码中，`createElement` 函数接收一个 `type` 参数（元素类型）、一个 `props` 参数（元素的属性对象）以及可选的 `children` 参数（子元素）。\n\n首先，通过创建一个名为 `element` 的对象，我们存储了虚拟 DOM 元素的信息。`element` 对象中的 `type` 属性保存了元素的类型，而 `props` 属性则是一个对象，用来存储元素的属性和子元素。我们使用了 ES6 中的扩展运算符将 `props` 参数中的属性分配给 `element.props`，同时也将 `children` 参数中的子元素映射为虚拟 DOM 对象。\n\n对于 `children` 参数的处理，通过 `children.map` 方法遍历 `children` 数组，并对每个子元素执行以下操作：\n\n- 如果子元素是对象类型，即已经是一个虚拟 DOM 对象，直接将其添加到 `element.props.children` 中。\n- 如果子元素是字符串或数字类型，即文本节点，那么我们调用 `createTextElement` 函数来创建一个描述该文本节点的虚拟 DOM 对象，并将其添加到 `element.props.children` 中。\n\n`createTextElement` 函数用于创建文本节点的虚拟 DOM 对象。它返回一个包含 `type` 为 `'TEXT_ELEMENT'` 的对象，且 `props` 对象中的 `nodeValue` 属性保存了文本节点的内容，`children` 属性为空数组。\n\n最后，我们将 `element` 对象作为结果返回，这样就创建了一个描述虚拟 DOM 元素的 JavaScript 对象。\n\n总结起来，`createElement` 函数通过创建一个对象来描述虚拟 DOM 元素，其中包含了元素的类型、属性和子元素等信息。对于子元素，会根据其类型进行判断，如果是对象类型，则直接添加到 `props.children` 中；如果是文本类型，则通过 `createTextElement` 函数创建对应的虚拟 DOM 对象。这样就生成了一个虚拟 DOM 元素，可以用于进行后续的渲染和更新操作。\n\n\n### 3. Diff 算法比较变化：在每次组件更新时，React 使用 Diff 算法对比前后两个虚拟 DOM 树的差异。Diff 算法能够高效地找出需要进行更新的部分。\n\nReact中通过diff算法来比较两个虚拟DOM树的差异，以确定需要更新的最小操作集合。\n\n首先，React会比较两个根节点的类型，如果不同，它们代表不同的组件，React会将原来的组件树完全替换为新的组件树。\n\n如果类型相同，React会比较两个根节点的属性，检查它们是否有任何更改。如果有更改，React会更新已有的DOM元素的属性。\n\n接下来，React会递归地比较和更新子节点。React会通过遍历子节点的方式找到相同位置上的子节点，并进行递归比较。\n\n对于子节点，React使用一种称为\"key\"的特殊属性来判断它们是否是相同的元素。如果两个子节点的key相同，React会认为它们是相同的元素，并只更新它们的属性和子节点。如果key不同，React会将旧的子节点完全替换为新的子节点。\n\n最后，React会将所有需要更新的操作记录下来，并将其发送到浏览器的渲染引擎中执行。这些操作可能包括添加、移动或删除DOM节点。\n\n通过使用diff算法，React可以最小化对真实DOM的操作，提高性能和效率。同时，React还会使用一些启发式策略和优化算法，如批处理和异步更新，来进一步提升性能。\n\n\n### 4. 生成 DOM 更新操作：根据 Diff 算法的比较结果，React 会生成一系列的 DOM 更新操作，包括添加、移除和修改节点等。这些操作被存储在更新队列中。\n\n在React中，生成DOM更新操作的过程可以概括为以下几个步骤：\n\n- 通过diff算法比较新旧虚拟DOM树的差异，得到需要更新的最小操作集合。\n\n- 对于每个需要更新的操作，React会将其转化为一个待执行的DOM更新任务。\n\n- React将这些待执行的DOM更新任务放入一个队列中，等待执行。\n\n- 当React准备执行DOM更新时，会将队列中的任务按照特定的顺序进行执行。这个顺序通常是根据DOM节点的层级和位置来确定的，以保证DOM更新的正确性。\n\n- 执行DOM更新时，React会根据操作的类型，比如添加、移动或删除DOM节点，调用浏览器提供的DOM API来执行相应的操作。\n\n- 在执行DOM更新的过程中，React会尽量优化操作，避免一些不必要的DOM操作。例如，将多个连续的DOM插入操作合并为一次操作，或者将多个DOM删除操作合并为一次操作。\n\n- 执行完所有的DOM更新任务后，React会通知浏览器进行重新渲染，将更新后的DOM树呈现给用户。\n\n总的来说，React通过将虚拟DOM树转化为真实DOM树，并通过diff算法生成DOM更新操作，然后按照特定顺序执行这些操作，最终完成DOM的更新和渲染。这样的设计可以提高性能，减少不必要的DOM操作，并保证DOM的一致性。\n\n\n### 5. 批量进行 DOM 更新：React 会将更新队列中的 DOM 更新操作批量进行，以减少浏览器的重绘和回流操作。React 会通过批量更新来优化性能。\n\nReact通过批量更新的方式来优化DOM操作，以减少不必要的性能开销。\n\n在React中，当需要更新组件状态或属性时，不会立即执行DOM更新操作，而是将更新请求加入到一个待处理的队列中。React会在适当的时机，比如在事件处理函数执行完毕或在生命周期方法结束时，对队列中的更新请求进行批量处理。\n\n具体的批量更新过程如下：\n\n- 在React中，每个组件都有一个内部的pending state队列，用于存储待处理的更新请求。\n\n- 当需要更新组件的状态或属性时，React会将更新请求添加到该组件的pending state队列中。\n\n- 在React的更新过程中，会遍历组件的pending state队列，将其中的所有更新请求合并为一个批量更新。\n\n- React会根据合并后的批量更新，生成最小化的DOM操作集合。\n\n- 最后，React会通过执行这个批量更新的DOM操作集合，将更新应用到真实的DOM树中。\n\n通过批量更新的方式，React可以减少不必要的DOM操作次数，提高性能。同时，React也提供了一些API，让开发者可以手动控制更新的时机，比如使用`setState`的回调函数、使用`ReactDom.unstable_batchedUpdates`方法等。\n\n需要注意的是，React并不保证所有的更新都会批量处理。在一些特殊情况下，比如在事件处理函数中手动调用`setState`，或者使用`ReactDOM.unstable_batchedUpdates`方法，可以强制进行批量更新。但在某些情况下，React可能会选择立即更新，以保证更新的时机和结果的一致性。\n\n### 6. 应用 DOM 更新：最后，React 将批量的 DOM 更新操作应用到实际的浏览器 DOM 中，从而更新用户界面。这个过程中，React 会尽量最小化对真实 DOM 的操作，以提高性能。\n\n原理同上，只是进行了重复操作；\n\n\n### 总结\n\n一图带千言\n\n![image](https://github.com/pro-collection/interview-question/assets/22188674/f24dad99-66fe-4206-9d05-6f7194dcc5b5)\n\n",{"_54":617,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/585/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/585/timeline",{"_54":620,"_56":57,"_58":621,"_60":622,"_62":623,"_64":624,"_66":625,"_68":626,"_70":627,"_72":628,"_74":629,"_107":630,"_127":128,"_129":26,"_130":-5,"_131":639,"_133":640,"_155":148,"_149":642,"_151":643,"_154":-5,"_159":160,"_161":644,"_166":-5,"_167":645,"_169":646,"_181":648,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/575","https://api.github.com/repos/pro-collection/interview-question/issues/575/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/575/comments","https://api.github.com/repos/pro-collection/interview-question/issues/575/events","https://github.com/pro-collection/interview-question/issues/575",1920655823,"I_kwDOJGDC6c5yeuHP",575,"XHR 和 Fetch 是否支持取消请求【热度: 122】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[631,638],{"_66":632,"_68":633,"_54":634,"_113":635,"_115":636,"_117":26,"_118":637},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":641,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-10-01T09:07:06Z","2023-10-01T09:24:37Z",{"_163":148,"_164":148,"_165":148},"**关键词**：XHR 取消请求、Fetch 取消请求\r\n\r\n**XHR 支持取消请求**\r\n\r\nXHR（XMLHttpRequest）对象支持取消请求。你可以使用 `xhr.abort()` 方法来取消正在进行的请求。\r\n\r\n下面是一个使用 XHR 取消请求的示例代码：\r\n\r\n```javascript\r\nconst xhr = new XMLHttpRequest();\r\nxhr.open('GET', 'https://api.example.com/data', true);\r\nxhr.send();\r\n\r\n// 取消请求\r\nxhr.abort();\r\n```\r\n\r\n使用 `xhr.abort()` 方法会导致 XHR 请求被中止，并触发 `abort` 事件。\r\n\r\n需要注意的是，取消请求后，XHR 对象将不再可用，不能再使用已经取消的 XHR 对象发送新的请求。\r\n\r\n\r\n**Fetch API 原生不提供直接的方法来取消请求。然而，你可以使用 AbortController 来实现取消 fetch 请求的功能。**\r\n\r\nAbortController 是一个用于控制和取消异步操作的 API，它可以与 fetch 一起使用来取消网络请求。下面是一个使用 AbortController 来取消 fetch 请求的示例代码：\r\n\r\n```javascript\r\nconst controller = new AbortController();\r\nconst signal = controller.signal;\r\n\r\nfetch('https://api.example.com/data', { signal })\r\n .then(response => {\r\n // 处理响应\r\n })\r\n .catch(error => {\r\n if (error.name === 'AbortError') {\r\n console.log('请求被取消');\r\n } else {\r\n console.log('发生错误', error);\r\n }\r\n });\r\n\r\n// 取消请求\r\ncontroller.abort();\r\n```\r\n\r\n在上面的代码中，我们创建了一个 AbortController 对象，并从中获取一个 signal 信号。然后，将 signal 信号传递给 fetch 请求的 options 参数中。当调用 `controller.abort()` 方法时，fetch 请求会被取消，并且会触发一个 `AbortError` 错误。\r\n\r\n需要注意的是，AbortController 是一个较新的 API，不是所有浏览器都完全支持。为了确保在不支持 AbortController 的情况下仍能取消 fetch 请求，你可以使用 polyfill 或使用第三方库（如 Axios）来实现取消功能。\r\n",{"_54":647,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/575/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/575/timeline",{"_54":650,"_56":57,"_58":651,"_60":652,"_62":653,"_64":654,"_66":655,"_68":656,"_70":657,"_72":658,"_74":659,"_107":660,"_127":128,"_129":26,"_130":-5,"_131":663,"_133":664,"_155":148,"_149":666,"_151":667,"_154":-5,"_159":160,"_161":668,"_166":-5,"_167":669,"_169":670,"_181":672,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/574","https://api.github.com/repos/pro-collection/interview-question/issues/574/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/574/comments","https://api.github.com/repos/pro-collection/interview-question/issues/574/events","https://github.com/pro-collection/interview-question/issues/574",1920649319,"I_kwDOJGDC6c5yeshn",574,"axios 是如何区分是 nodejs 环境还是浏览器环境的？【热度: 113】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[661,662],{"_66":632,"_68":633,"_54":634,"_113":635,"_115":636,"_117":26,"_118":637},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":250,"_64":251,"_58":252,"_66":253,"_68":254,"_70":255,"_72":256,"_118":257,"_143":665,"_145":259,"_147":148,"_127":128,"_149":260,"_151":261,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-10-01T08:51:30Z","2023-10-01T08:51:45Z",{"_163":148,"_164":148,"_165":148},"**关键词**：nodejs与浏览器环境判定\n\nAxios 是一个跨平台的 HTTP 客户端库，可以在浏览器和 Node.js 中使用。Axios 通过判断当前环境来确定是在浏览器还是在 Node.js 环境中运行。\n\n在浏览器环境中，Axios 默认会使用浏览器提供的 XMLHttpRequest 对象来发送 HTTP 请求。\n\n在 Node.js 环境中，**Axios 会检查是否存在 `process` 全局对象，以及 `process` 对象中是否存在 `nextTick` 方法**。如果存在以上两个条件，Axios 就默认在 Node.js 环境中运行，并使用 Node.js 内置的 `http` 模块发送 HTTP 请求。\n\n如果需要明确指定运行环境，可以使用 `axios.defaults.adapter` 属性来设置适配器（adapter），以便在需要时手动选择使用 XMLHttpRequest 或 Node.js 内置的 `http` 模块。\n\n例如，在 Node.js 环境中可以这样设置适配器：\n\n```javascript\nconst axios = require('axios');\nconst httpAdapter = require('axios/lib/adapters/http');\n\naxios.defaults.adapter = httpAdapter;\n```\n\n通过上述方式，Axios 可以根据环境自动选择适当的底层实现来发送 HTTP 请求，使其在不同的环境中都能正常工作。\n",{"_54":671,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/574/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/574/timeline",{"_54":674,"_56":57,"_58":675,"_60":676,"_62":677,"_64":678,"_66":679,"_68":680,"_70":681,"_72":682,"_74":683,"_107":684,"_127":128,"_129":26,"_130":-5,"_131":687,"_133":688,"_155":148,"_149":690,"_151":691,"_154":-5,"_159":160,"_161":692,"_166":-5,"_167":693,"_169":694,"_181":696,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/573","https://api.github.com/repos/pro-collection/interview-question/issues/573/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/573/comments","https://api.github.com/repos/pro-collection/interview-question/issues/573/events","https://github.com/pro-collection/interview-question/issues/573",1920648008,"I_kwDOJGDC6c5yesNI",573,"axios 有哪些特性？【热度: 464】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[685,686],{"_66":632,"_68":633,"_54":634,"_113":635,"_115":636,"_117":26,"_118":637},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":250,"_64":251,"_58":252,"_66":253,"_68":254,"_70":255,"_72":256,"_118":257,"_143":689,"_145":259,"_147":148,"_127":128,"_149":260,"_151":261,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-10-01T08:48:07Z","2023-10-01T09:01:10Z",{"_163":148,"_164":148,"_165":148},"**关键词**：axios特性\r\n\r\n直接可以参考官网链接： https://axios-http.com/docs/intro\r\n\r\n特点\r\n- 从浏览器创建XMLHttpRequest\r\n- 从node.js生成http请求\r\n- 支持 Promise API\r\n- 拦截请求和响应\r\n- 转换请求和响应数据\r\n- 取消请求\r\n- 超时时间\r\n- 支持嵌套项的查询参数序列化\r\n- 自动请求体序列化为:\r\n - JSON (应用程序/ison)\r\n - 多部分/表格数据 (多部分/表格数据)\r\n - URL编码形式 (申请书/x-www-form-urlencoded )\r\n- 以JSON格式发布HTML表单\r\n- 响应中的自动JSON数据处理\r\n- 为浏览器和node.js捕获进度，附带额外信息 (速度、剩余时间)\r\n- 设置node.is的带宽限制\r\n- 兼容符合规范的FormData和Blob (包括节点) js)\r\n- 客户端对XSRF的保护支持\r\n",{"_54":695,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/573/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/573/timeline",{"_54":698,"_56":57,"_58":699,"_60":700,"_62":701,"_64":702,"_66":703,"_68":704,"_70":705,"_72":706,"_74":707,"_107":708,"_127":128,"_129":26,"_130":-5,"_131":717,"_133":718,"_155":148,"_149":730,"_151":731,"_154":-5,"_159":160,"_161":732,"_166":-5,"_167":733,"_169":734,"_181":736,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/562","https://api.github.com/repos/pro-collection/interview-question/issues/562/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/562/comments","https://api.github.com/repos/pro-collection/interview-question/issues/562/events","https://github.com/pro-collection/interview-question/issues/562",1910274282,"I_kwDOJGDC6c5x3Hjq",562,"JavaScript 和 BOM、DOM 、ECMAScript、Nodejs 之间是什么关系",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[709,716],{"_66":710,"_68":711,"_54":712,"_113":713,"_115":714,"_117":26,"_118":715},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":719,"_64":720,"_58":721,"_66":722,"_68":723,"_70":156,"_72":724,"_118":725,"_143":726,"_145":727,"_147":148,"_127":128,"_149":728,"_151":729,"_153":-5,"_154":-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","初","初级面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-09-24T15:31:05Z","2023-09-24T15:53:12Z",{"_163":148,"_164":148,"_165":148},"**ECMAScript**\r\n\r\n`ECMAScript`是`JavaScript`的标准化规范，它定义了`JavaScript`的语法、数据类型、函数、控制流等。`ECMAScript`最早在1997年发布，由欧洲计算机制造商协会（ECMA）负责制定和维护。\r\n\r\n`ECMAScript`的目的是为了确保不同厂商的`JavaScript`实现在语法和行为方面保持一致性，以便开发者能够轻松地编写跨平台、跨浏览器的`JavaScript`代码。标准化的`ECMAScript`规范使得开发者可以在不同的`JavaScript`环境中编写相同的代码，而不必担心语法差异和行为不一致性。\r\n\r\n`ECMAScript`规范每年进行一次更新，新版本通常包含了新的语法特性、API和改进。在每个`ECMAScript`版本发布之前，由各个浏览器厂商先行实现并测试新特性，然后将其添加到浏览器中。这就是为什么不同浏览器可能对同一版本的`ECMAScript`支持程度不同的原因。\r\n\r\n常见的`ECMAScript`版本包括ES5（2009年发布）、ES6（2015年发布，也被称为ES2015）、ES7（2016年发布，也被称为ES2016）等。每个版本都引入了新的语法和功能，使得`JavaScript`变得更加强大和灵活。开发者可以根据目标浏览器的支持情况选择使用不同版本的`ECMAScript`特性。\r\n\r\n\r\n**JavaScript**是一种高级编程语言，用于为网页添加交互和动态功能。它实现了ECMAScript标准，该标准定义了`JavaScript`的语法、数据类型、函数、控制流等。`JavaScript`是一种解释性脚本语言，代码在运行时由浏览器解析和执行。\r\n\r\n**BOM**（Browser Object Model）是浏览器对象模型，它提供了与浏览器交互的API。`BOM`并不是ECMAScript的一部分，而是浏览器厂商自行实现的一组对象和方法。通过`BOM`，开发者可以操作浏览器窗口、解析URL、发送HTTP请求、控制浏览器历史记录等。其中最常见的`BOM`对象是window对象，它代表了浏览器的窗口或框架。\r\n\r\n**DOM**（Document Object Model）是文档对象模型，它定义了用于访问和操作HTML、XML等文档的API。`DOM`提供了一组对象和方法，用于表示文档的结构和内容。通过`DOM`，开发者可以通过`JavaScript`动态地创建、修改和删除HTML元素，修改样式和属性，处理事件等。`DOM`也不是ECMAScript的一部分，而是由浏览器厂商实现的标准。\r\n\r\n**Node.js**是一个基于V8引擎的`JavaScript`运行时环境，使`JavaScript`可以在服务器端运行。与浏览器中的`JavaScript`不同，`Node.js`提供了一组基于事件驱动的API，用于构建高性能和可伸缩的网络应用程序。`Node.js`可以执行文件操作、网络通信、数据库访问等服务器端任务，并且可以通过包管理器npm安装和管理第三方模块。\r\n\r\n总结来说，`JavaScript`是一种编程语言，实现了ECMAScript标准。`BOM`和`DOM`是浏览器提供的API，用于与浏览器交互并操作文档。`Node.js`是一个独立的运行时环境，使`JavaScript`可以在服务器端运行，并提供了一组用于构建网络应用程序的API。\r\n",{"_54":735,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/562/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/562/timeline",{"_54":738,"_56":57,"_58":739,"_60":740,"_62":741,"_64":742,"_66":743,"_68":744,"_70":745,"_72":746,"_74":747,"_107":748,"_127":128,"_129":26,"_130":-5,"_131":751,"_133":752,"_155":148,"_149":754,"_151":755,"_154":-5,"_159":160,"_161":756,"_166":-5,"_167":757,"_169":758,"_181":760,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/561","https://api.github.com/repos/pro-collection/interview-question/issues/561/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/561/comments","https://api.github.com/repos/pro-collection/interview-question/issues/561/events","https://github.com/pro-collection/interview-question/issues/561",1899359745,"I_kwDOJGDC6c5xNe4B",561,"weakSet 是什么数据结构，有什么应用场景【热度: 161】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[749,750],{"_66":710,"_68":711,"_54":712,"_113":713,"_115":714,"_117":26,"_118":715},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":250,"_64":251,"_58":252,"_66":253,"_68":254,"_70":255,"_72":256,"_118":257,"_143":753,"_145":259,"_147":148,"_127":128,"_149":260,"_151":261,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-09-16T08:46:05Z","2023-09-16T08:46:18Z",{"_163":148,"_164":148,"_165":148},"**关键词**：weakSet 数据、weakSet 结构、weakSet 作用\n\nWeakSet 是一种特殊的集合数据结构，它只能存储对象引用，并且这些对象是弱引用。WeakSet 中的对象是被弱引用的，意味着如果没有其他引用指向这个对象，垃圾回收机制就会自动将其回收，即使该对象存在于 WeakSet 中。与 Set 不同，WeakSet 不支持迭代和遍历。\n\n**API**\n\nWeakSet 提供了以下几个常用的 API：\n\n1. `add(value)`：向 WeakSet 中添加一个值。\n\n2. `delete(value)`：从 WeakSet 中删除指定的值。\n\n3. `has(value)`：判断 WeakSet 中是否存在指定的值，返回一个布尔值。\n\n需要注意的是，WeakSet 不支持迭代和遍历操作，所以没有类似于 Set 的 `keys()`、`values()`、`entries()` 或 `forEach()` 等方法。同时，WeakSet 也没有类似于 Set 的 `size` 属性来获取 WeakSet 中的元素个数。\n\n另外，WeakSet 是一个构造函数，可以使用 `new WeakSet()` 来创建一个空的 WeakSet。\n\n\n**使用场景**\n\nWeakSet 的主要应用场景是在需要存储对象集合，并且不希望这些对象的存在阻止它们被垃圾回收时使用。一些常见的使用场景包括：\n\n1. 对象存储：WeakSet 可以用来存储一组对象，并且不会阻止这些对象被垃圾回收。这在需要跟踪一组对象，但又不希望这些对象阻止被释放时很有用。\n\n2. 数据缓存：由于 WeakSet 中的对象是弱引用的，当对象从其他地方被删除时，它们会自动从 WeakSet 中移除。这在需要缓存一些对象，但又希望能够自动清理不再需要的对象时很有用。\n\n需要注意的是，由于 WeakSet 中的对象是弱引用的，所以不能通过遍历或迭代来访问 WeakSet 中的对象。同时，WeakSet 也不提供像 Set 那样的方法，无法判断对象是否存在于 WeakSet 中。\n",{"_54":759,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/561/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/561/timeline",{"_54":762,"_56":57,"_58":763,"_60":764,"_62":765,"_64":766,"_66":767,"_68":768,"_70":769,"_72":770,"_74":771,"_107":772,"_127":128,"_129":26,"_130":-5,"_131":775,"_133":776,"_155":148,"_149":789,"_151":790,"_154":-5,"_159":160,"_161":791,"_166":-5,"_167":792,"_169":793,"_181":795,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/547","https://api.github.com/repos/pro-collection/interview-question/issues/547/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/547/comments","https://api.github.com/repos/pro-collection/interview-question/issues/547/events","https://github.com/pro-collection/interview-question/issues/547",1878563896,"I_kwDOJGDC6c5v-Jw4",547,"前端架构和前端工程化有什么区别？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[773,774],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":777,"_64":778,"_58":779,"_66":780,"_68":781,"_70":782,"_72":783,"_118":784,"_143":785,"_145":786,"_147":148,"_127":128,"_149":787,"_151":788,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/4","https://github.com/pro-collection/interview-question/milestone/4","https://api.github.com/repos/pro-collection/interview-question/milestones/4/labels",9124550,"MI_kwDOJGDC6c4AizrG",4,"资深","资深级别面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},48,"2023-03-06T15:00:45Z","2024-10-07T08:15:55Z","2023-09-02T10:05:40Z","2023-09-02T10:05:41Z",{"_163":148,"_164":148,"_165":148},"先说说对这两个概念的看法：\n- [如何理解前端架构？](https://github.com/pro-collection/interview-question/issues/545)\n- [如何理解前端工程化？](https://github.com/pro-collection/interview-question/issues/546)\n\n**区别**\n\n前端架构和前端工程化是两个不同的概念，但它们之间有一些相互关联的特点。\n\n前端架构是指在前端开发中，对整个前端应用程序的组织结构、模块划分、框架选择等方面的设计和规划。前端架构的目标是为了提高代码的可维护性、可扩展性和可重用性，以及优化前端应用程序的性能和用户体验。常见的前端架构包括MVC（Model-View-Controller）、MVVM（Model-View-ViewModel）等。\n\n前端工程化是指使用各种工具、技术和流程对前端开发过程进行管理和优化，以提高开发效率、代码质量和团队协作能力。前端工程化的目标是通过规范化和自动化的方式，解决前端开发中的重复劳动、低效率、代码质量不稳定等问题。前端工程化包括代码管理、代码规范、模块化开发、构建工具、自动化测试、持续集成和部署、性能优化、文档和知识管理等方面。\n\n虽然前端架构和前端工程化是两个不同的概念，但它们之间存在一些相似的目标和方法。前端架构关注的是前端应用程序的结构和设计，而前端工程化关注的是前端开发的流程和工具的使用。前端架构可以通过前端工程化的方式实现，而前端工程化可以提供支持和保障，以实现良好的前端架构。\n",{"_54":794,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/547/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/547/timeline",{"_54":797,"_56":57,"_58":798,"_60":799,"_62":800,"_64":801,"_66":802,"_68":803,"_70":804,"_72":805,"_74":806,"_107":807,"_127":128,"_129":26,"_130":-5,"_131":810,"_133":811,"_155":148,"_149":813,"_151":813,"_154":-5,"_159":160,"_161":814,"_166":-5,"_167":815,"_169":816,"_181":818,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/546","https://api.github.com/repos/pro-collection/interview-question/issues/546/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/546/comments","https://api.github.com/repos/pro-collection/interview-question/issues/546/events","https://github.com/pro-collection/interview-question/issues/546",1878562376,"I_kwDOJGDC6c5v-JZI",546,"如何理解前端工程化？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[808,809],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":812,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-09-02T10:03:59Z",{"_163":148,"_164":148,"_165":148},"前端工程化是指将前端开发过程中的各种工具、技术和流程进行规范化和自动化，以提高前端开发效率、代码质量和团队协作能力的一种方法。前端工程化主要涵盖以下几个方面：\n\n1. 代码管理：使用版本控制系统（如Git）对前端项目进行代码管理，实现代码的版本控制、协作开发和代码回滚等功能。\n\n2. 代码规范：制定和遵循统一的前端代码规范，包括缩进、命名、注释等，以提高代码的可读性和可维护性。\n\n3. 模块化开发：使用模块化的开发方式，将前端代码拆分为独立的模块，以便于复用和维护。\n\n4. 构建工具：使用构建工具（如Webpack、Gulp）对前端代码进行构建、打包、压缩和优化等处理，提高开发效率和应用性能。\n\n5. 自动化测试：编写自动化测试用例，使用测试工具（如Jest、Mocha）进行自动化测试，以确保代码质量和功能的稳定性。\n\n6. 持续集成和部署：使用持续集成工具（如Jenkins、Travis CI）将代码自动构建、测试和部署到服务器，加快代码交付速度和减少人工操作。\n\n7. 性能优化：使用性能优化工具（如Webpack、Lighthouse）来分析和改进前端应用程序的性能，包括文件加载、资源压缩、缓存策略等方面。\n\n8. 文档和知识管理：编写和维护开发文档、API 文档以及团队知识库，方便团队成员之间的沟通和知识分享。\n\n通过前端工程化的实践，可以减少重复劳动、提高代码质量、加速开发流程和降低维护成本，从而更好地满足项目需求和提升用户体验。\n",{"_54":817,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/546/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/546/timeline",{"_54":820,"_56":57,"_58":821,"_60":822,"_62":823,"_64":824,"_66":825,"_68":826,"_70":827,"_72":828,"_74":829,"_107":830,"_127":128,"_129":26,"_130":-5,"_131":833,"_133":834,"_155":148,"_149":836,"_151":837,"_154":-5,"_159":160,"_161":838,"_166":-5,"_167":839,"_169":840,"_181":842,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/545","https://api.github.com/repos/pro-collection/interview-question/issues/545/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/545/comments","https://api.github.com/repos/pro-collection/interview-question/issues/545/events","https://github.com/pro-collection/interview-question/issues/545",1878558373,"I_kwDOJGDC6c5v-Ial",545,"如何理解前端架构？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[831,832],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":777,"_64":778,"_58":779,"_66":780,"_68":781,"_70":782,"_72":783,"_118":784,"_143":835,"_145":786,"_147":148,"_127":128,"_149":787,"_151":788,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-09-02T10:00:52Z","2023-09-02T10:00:53Z",{"_163":148,"_164":148,"_165":148},"前端架构是指在开发前端应用程序时，为了提高开发效率、代码可维护性和可扩展性，将前端代码组织和设计的一种架构体系。它涵盖了前端项目的整体结构、代码组织方式、技术选型、模块化开发、数据管理、状态管理、网络请求、路由管理等方面的规划和设计。\n\n前端架构的目标是使前端开发更加规范、高效和可持续。良好的前端架构可以帮助团队成员更好地协作、降低维护成本、提高开发效率、减少代码冗余和bug等。\n\n以下是一些常见的前端架构概念和思想：\n\n1. 分层架构：将前端应用程序划分为不同的层次，如视图层、业务逻辑层、数据层等，以实现各个层次的解耦和职责清晰。\n\n2. 组件化开发：将界面拆分为独立的可复用组件，通过组合不同的组件来构建页面，提高代码的可维护性和可复用性。\n\n3. 模块化开发：将代码按照功能或业务模块进行拆分，每个模块都有独立的职责和功能，便于团队协作和代码维护。\n\n4. 数据管理和状态管理：使用状态管理库（如Redux、Vuex）来管理应用程序的状态和数据流，使得数据的变化和传递更加可控和可预测。\n\n5. 路由管理：使用路由库（如React Router、Vue Router）来管理前端路由，实现页面之间的跳转和导航。\n\n6. 统一风格和规范：制定和遵循统一的编码规范、命名规范、目录结构等，以便于不同开发者之间的协作和代码的统一性。\n\n7. 自动化构建和部署：使用构建工具（如Webpack、Rollup）和自动化部署工具（如Jenkins、Travis CI）来提高开发效率和代码交付速度。\n\n8. 性能优化和项目优化：通过代码分割、懒加载、缓存、CDN 加速、前端性能监控等手段，提升应用程序的性能和用户体验。\n\n前端架构是一种组织和规划前端代码的方法论，旨在提高前端开发的效率和质量，同时也要根据具体项目的需求和规模来选择和适配合适的架构方案。\n",{"_54":841,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/545/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/545/timeline",{"_54":844,"_56":57,"_58":845,"_60":846,"_62":847,"_64":848,"_66":849,"_68":850,"_70":851,"_72":852,"_74":853,"_107":854,"_127":128,"_129":26,"_130":-5,"_131":857,"_133":858,"_155":148,"_149":860,"_151":861,"_154":-5,"_159":160,"_161":862,"_166":-5,"_167":863,"_169":864,"_181":866,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/523","https://api.github.com/repos/pro-collection/interview-question/issues/523/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/523/comments","https://api.github.com/repos/pro-collection/interview-question/issues/523/events","https://github.com/pro-collection/interview-question/issues/523",1858158524,"I_kwDOJGDC6c5uwT-8",523,"webpack tree-shaking 在什么情况下会失效？【热度: 171】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[855,856],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":859,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-08-20T15:14:19Z","2023-11-01T15:46:48Z",{"_163":148,"_164":148,"_165":148},"**关键词**：tree shaking 失效\r\n\r\n在以下情况下，`webpack` 的 `tree-shaking` 可能会失效：\r\n\r\n1. 使用了 `sideEffects` 属性：在 webpack 的配置文件中，如果设置了 `sideEffects: true`，则 webpack 会假设所有模块都有副作用，因此不会进行 tree-shaking。这通常用于避免某些模块被误标记为无用代码而被删除。\r\n\r\n2. 动态导入：如果你使用了动态导入（例如使用了 `import()` 或 `require.ensure()`），webpack 无法静态分析模块的导入和导出，因此无法进行 tree-shaking。\r\n\r\n3. 使用了 `commonjs` 模块语法：如果你的代码中使用了 `commonjs` 模块语法（例如使用了 `require()` 或 `module.exports`），webpack 无法进行静态分析，因此无法进行 tree-shaking。\r\n\r\n4. 未使用 ES6 模块语法：tree-shaking 只能对 ES6 模块语法进行优化，如果你的代码中没有使用 ES6 模块语法，webpack 将无法进行 tree-shaking。\r\n\r\n5. 模块被动态引用或条件引用：如果模块的引用方式是动态的（例如在循环或条件语句中引用），或者通过字符串拼接来引用模块，webpack 无法确定哪些模块会被引用，因此无法进行 tree-shaking。\r\n\r\n6. 使用了副作用的代码：如果你的代码中包含有副作用的代码（例如在模块的顶级作用域中执行了一些操作），webpack 无法确定哪些代码是无用的，因此无法进行 tree-shaking。\r\n\r\n需要注意的是，即使 tree-shaking 可能会失效，webpack 仍然会进行其他优化，例如代码压缩和代码分割等。同时，你可以通过设置 `mode` 为 `production`，来启用 webpack 的优化功能，包括 tree-shaking。\r\n",{"_54":865,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/523/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/523/timeline",{"_54":868,"_56":57,"_58":869,"_60":870,"_62":871,"_64":872,"_66":873,"_68":874,"_70":875,"_72":876,"_74":877,"_107":878,"_127":128,"_129":26,"_130":-5,"_131":881,"_133":882,"_155":148,"_149":884,"_151":885,"_154":-5,"_159":160,"_161":886,"_166":-5,"_167":887,"_169":888,"_181":890,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/499","https://api.github.com/repos/pro-collection/interview-question/issues/499/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/499/comments","https://api.github.com/repos/pro-collection/interview-question/issues/499/events","https://github.com/pro-collection/interview-question/issues/499",1822753118,"I_kwDOJGDC6c5spQFe",499,"如何封装一个请求，让其多次调用的时候，实际只发起一个请求的时候，返回同一份结果【热度: 636】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[879,880],{"_66":632,"_68":633,"_54":634,"_113":635,"_115":636,"_117":26,"_118":637},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":883,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-07-26T16:15:45Z","2023-07-26T16:15:46Z",{"_163":148,"_164":148,"_165":148},"**关键词**：defer函数、请求结果缓存在JS内存\n\n最优解： **使用deferred思想来实现请求的等待队列，可以借助Promise和async/await语法**。\n\n下面是使用`deferred`思想来实现的代码示例：\n\n```javascript\nclass Deferred {\n constructor() {\n this.promise = new Promise((resolve, reject) => {\n this.resolve = resolve;\n this.reject = reject;\n });\n }\n}\n\n// 创建一个全局的锁标识\nlet lock = false;\n\n// 创建一个缓存对象\nconst cache = {};\n\n// 创建一个等待队列数组\nconst waitingRequests = [];\n\n// 封装请求函数\nasync function request(url, params) {\n const cacheKey = `${url}-${JSON.stringify(params)}`;\n\n // 判断锁的状态\n if (lock) {\n const deferred = new Deferred();\n // 如果锁已经被占用，将请求添加到等待队列中\n waitingRequests.push({\n deferred,\n cacheKey\n });\n await deferred.promise;\n return cache[cacheKey];\n }\n\n // 设置锁的状态为true，表示当前请求正在执行\n lock = true;\n\n try {\n // 发起实际的请求\n const response = await fetch(url, params);\n const data = await response.json();\n // 将结果存入缓存对象\n cache[cacheKey] = data;\n return data;\n } finally {\n // 释放锁，将锁的状态设置为false\n lock = false;\n\n // 处理等待队列中的请求\n if (waitingRequests.length > 0) {\n const request = waitingRequests.shift();\n request.deferred.resolve(cache[request.cacheKey]);\n }\n }\n}\n\n// 调用请求函数\nrequest('https://api.example.com/data', { method: 'GET' })\n .then(data => {\n // 处理请求结果\n console.log(data);\n });\n\n// 同时发起另一个请求\nrequest('https://api.example.com/data', { method: 'GET' })\n .then(data => {\n // 直接从缓存中获取结果，而不发起实际的请求\n console.log(data);\n });\n```\n\n在上述代码中，`Deferred`类用于创建一个延迟对象，其中`promise`属性是一个`Promise`对象，`resolve`和`reject`方法分别用于解决和拒绝该延迟对象的`promise`。通过`await`关键字等待延迟对象的`promise`完成，当锁被占用时，将请求添加到等待队列中，并使用`await`等待对应的延迟对象的`promise`完成后再返回结果。当请求完成后，解锁并处理等待队列中的请求。\n",{"_54":889,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/499/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/499/timeline",{"_54":892,"_56":57,"_58":893,"_60":894,"_62":895,"_64":896,"_66":897,"_68":898,"_70":899,"_72":900,"_74":901,"_107":902,"_127":128,"_129":26,"_130":-5,"_131":905,"_133":906,"_155":148,"_149":908,"_151":909,"_154":-5,"_159":160,"_161":910,"_166":-5,"_167":911,"_169":912,"_181":914,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/498","https://api.github.com/repos/pro-collection/interview-question/issues/498/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/498/comments","https://api.github.com/repos/pro-collection/interview-question/issues/498/events","https://github.com/pro-collection/interview-question/issues/498",1822741263,"I_kwDOJGDC6c5spNMP",498,"一般项目里面对请求 request 都会做哪些统一封装？【热度: 916】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[903,904],{"_66":632,"_68":633,"_54":634,"_113":635,"_115":636,"_117":26,"_118":637},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":907,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-07-26T16:08:04Z","2023-07-26T16:08:05Z",{"_163":148,"_164":148,"_165":148},"**关键词**：request封装、request封装功能、request封装作用\n\n1. 统一处理错误：可以在请求封装中统一处理错误，例如网络错误、超时等，并进行统一的错误提示或处理逻辑。\n2. 统一处理认证和授权：可以在请求中添加认证信息，例如在请求头中添加 token，或者在每个请求中验证用户权限。\n3. 统一处理请求配置：可以在请求封装中设置一些全局的请求配置，例如请求超时时间、请求头部信息等。\n4. 统一处理请求拦截和响应拦截：可以在请求发送前和响应返回后进行一些统一的处理，例如请求拦截器可以添加 loading 状态，响应拦截器可以对返回数据进行预处理等。\n5. 统一处理请求取消：可以实现一个请求取消的机制，可以取消重复的请求或者在组件卸载时取消未完成的请求，避免造成资源浪费或者潜在的问题。\n6. 统一处理请求缓存：可以实现请求结果的缓存机制，可以在多次请求相同数据时，直接从缓存中获取，避免重复发送请求。\n7. 统一处理请求重试：在网络不稳定或请求失败时，可以设置请求重试的机制，可以通过封装请求函数来自动进行重试，提高请求的成功率。\n8. 统一处理请求日志：可以在请求封装中添加请求日志记录，方便追踪和排查问题。\n9. 统一处理请求埋点：可以在请求发送前后加入一些埋点逻辑，例如统计请求的次数、请求时长等，方便进行性能分析和优化。\n10. 统一处理请求参数加密：可以将敏感数据进行加密，并在请求封装中进行解密操作，提高数据安全性。\n11. 统一处理请求数据格式化：可以对请求的数据进行格式化，例如将请求参数转换为指定的数据格式（如 JSON、XML），或者进行数据的序列化和反序列化操作。\n12. 统一处理请求的并发限制：可以设置请求并发数的限制，避免同时发送过多的请求导致服务器压力过大。\n13. 统一处理请求的响应缓存：可以对请求的响应结果进行缓存，减少对服务器的请求压力，提高性能。\n14. 统一处理请求的重定向：可以对请求的重定向进行统一处理，例如自动跳转到指定的页面或进行指定的操作。\n15. 统一处理请求的跨域问题：可以在请求封装中对跨域请求进行处理，例如设置 CORS 头信息、使用代理等方式来解决跨域问题。\n\n",{"_54":913,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/498/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/498/timeline",{"_54":916,"_56":57,"_58":917,"_60":918,"_62":919,"_64":920,"_66":921,"_68":922,"_70":923,"_72":924,"_74":925,"_107":926,"_127":128,"_129":26,"_130":-5,"_131":929,"_133":930,"_155":148,"_149":932,"_151":933,"_154":-5,"_159":160,"_161":934,"_166":-5,"_167":935,"_169":936,"_181":938,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/439","https://api.github.com/repos/pro-collection/interview-question/issues/439/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/439/comments","https://api.github.com/repos/pro-collection/interview-question/issues/439/events","https://github.com/pro-collection/interview-question/issues/439",1748184698,"I_kwDOJGDC6c5oMy56",439,"escape、encodeURI、encodeURIComponent 区别【热度: 367】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[927,928],{"_66":710,"_68":711,"_54":712,"_113":713,"_115":714,"_117":26,"_118":715},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":250,"_64":251,"_58":252,"_66":253,"_68":254,"_70":255,"_72":256,"_118":257,"_143":931,"_145":259,"_147":148,"_127":128,"_149":260,"_151":261,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-06-08T15:46:51Z","2023-09-29T12:42:05Z",{"_163":148,"_164":148,"_165":148},"**关键词**：js URL 编码解码\r\n\r\n在 JavaScript 中，`escape()`、`encodeURI()` 和 `encodeURIComponent()` 都是用于编码 URL 或字符串的函数，但它们有一些区别：\r\n\r\n1. `escape()` 函数用于编码字符串中的特殊字符，使其能够安全地传输。它对字符进行编码，包括非 ASCII 字符和特殊字符。但需要注意的是，`escape()` 不会编码 URL 中的保留字符（例如 `:/?#[]@!$&'()*+,;=`），它只会编码其他字符。\r\n```javascript\r\n// 输出：%48%65%6c%6c%6f%20%57%6f%72%6c%64%21\r\nconsole.log(escape(\"Hello World!\")); \r\n```\r\n\r\n2. `encodeURI()` 函数用于对整个 URL 进行编码，用于将 URL 中的特殊字符转换为可传输的形式。它不会编码 URL 中的保留字符和一些特殊字符（例如 `:/?#[]@!$&'()*+,;=`）。它主要用于编码整个 URL，而不是编码 URL 的参数值。\r\n```javascript\r\n// 输出：http://example.com/page.php?id=123\r\nconsole.log(encodeURI(\"http://example.com/page.php?id=123\")); \r\n```\r\n\r\n3. `encodeURIComponent()` 函数用于编码 URL 的参数值，它会对所有特殊字符进行编码，包括 URL 中的保留字符和其他特殊字符。它用于编码 URL 参数中的特殊字符，以确保它们在 URL 中的传输和解析过程中不会被误解。\r\n```javascript\r\n// 输出：Hello%20World%21\r\nconsole.log(encodeURIComponent(\"Hello World!\")); \r\n```\r\n\r\n需要注意的是，`escape()` 函数已被废弃，不推荐使用。在大多数情况下，建议使用 `encodeURI()` 或 `encodeURIComponent()` 函数进行 URL 编码。选择使用哪个函数取决于具体的需求，是否需要编码整个 URL 或只是其中的一部分（如参数值）。\r\n\r\n\r\n\r\n\r\n----------\r\n\r\n**补充**\r\n\r\n| 函数 | 编码范围 | 编码空格 | 编码特殊字符 | 可逆性 |\r\n| --------------------- | ----------------- | -------- | ------------ | ------ |\r\n| `escape` | ASCII 字符外的所有字符 | `+` | 是 | 是 |\r\n| `encodeURI` | URL 中的部分字符 | 否 | 否 | 是 |\r\n| `encodeURIComponent` | URL 中的所有字符 | `%20` | 是 | 是 |\r\n\r\n下面是对每个函数的详细解释：\r\n\r\n1. `escape` 函数用于编码字符串中的所有字符，包括非 ASCII 字符和某些特殊字符。它会将这些字符转换为 `%xx` 形式的十六进制转义序列，其中 `xx` 是字符的 ASCII 值的十六进制表示。它还会将空格编码为 `+` 符号。该函数可以对编码后的字符串进行反转义，以还原原始字符串。\r\n\r\n2. `encodeURI` 函数用于对 URL 中的某些字符进行编码，包括保留字符和一些特殊字符。它会将这些字符转换为 `%xx` 形式的十六进制转义序列，其中 `xx` 是字符的 ASCII 值的十六进制表示。与 `escape` 不同，`encodeURI` 不会编码空格。该函数可以对编码后的字符串进行反转义，以还原原始字符串。\r\n\r\n3. `encodeURIComponent` 函数用于对 URL 中所有字符进行编码，包括保留字符和特殊字符。它会将这些字符转换为 `%xx` 形式的十六进制转义序列，其中 `xx` 是字符的 ASCII 值的十六进制表示。与 `encodeURI` 不同，`encodeURIComponent` 会将空格编码为 `%20`。该函数可以对编码后的字符串进行反转义，以还原原始字符串。\r\n\r\n",{"_54":937,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/439/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/439/timeline",{"_54":940,"_56":57,"_58":941,"_60":942,"_62":943,"_64":944,"_66":945,"_68":946,"_70":947,"_72":948,"_74":949,"_107":950,"_127":128,"_129":26,"_130":-5,"_131":953,"_133":954,"_155":148,"_149":956,"_151":957,"_154":-5,"_159":160,"_161":958,"_166":-5,"_167":959,"_169":960,"_181":962,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/410","https://api.github.com/repos/pro-collection/interview-question/issues/410/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/410/comments","https://api.github.com/repos/pro-collection/interview-question/issues/410/events","https://github.com/pro-collection/interview-question/issues/410",1740400209,"I_kwDOJGDC6c5nvGZR",410,"在浏览器内多个标签页之间实现通信有哪些方式【热度: 897】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[951,952],{"_66":632,"_68":633,"_54":634,"_113":635,"_115":636,"_117":26,"_118":637},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":955,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-06-04T14:18:40Z","2023-06-07T15:06:22Z",{"_163":148,"_164":148,"_165":148},"**关键词**：跨页面通信、Broadcast Channel API 通信、SharedWorker\n\n### 基本通信方式\n\n在浏览器内多个标签页之间实现通信可以通过以下几种方式：\n\n1. 使用 Broadcast Channel API：Broadcast Channel API 是 HTML5 提供的一种跨页面通信的机制。通过该 API，可以在不同的标签页之间发送消息，实现实时的双向通信。\n\n2. 使用 LocalStorage 或 SessionStorage：LocalStorage 和 SessionStorage 是浏览器提供的本地存储机制。可以通过在一个标签页中修改 LocalStorage 或 SessionStorage 中的数据，然后在其他标签页中监听该数据的变化，实现跨标签页的通信。\n\n3. 使用 SharedWorker：SharedWorker 是一种特殊的 Web Worker，可以被多个浏览器标签页所共享。通过 SharedWorker，不同标签页可以通过消息传递进行通信。\n\n4. 使用 Cookies：通过设置同一个域名下的 Cookie，不同的标签页可以共享这些 Cookie 数据。可以在一个标签页中设置 Cookie，然后在其他标签页中读取该 Cookie 实现通信。\n\n5. 使用 Window.postMessage：Window.postMessage 方法可以在不同的浏览器窗口之间进行跨域通信。可以通过在一个窗口中使用 postMessage 方法向其他窗口发送消息，接收窗口通过监听 message 事件来接收并处理消息。\n\n### Broadcast Channel API \n\nBroadcast Channel API 是 HTML5 提供的一种跨页面通信的机制，它可以在同一个域名下的多个浏览器标签页之间进行实时的双向通信。\n\n通过 Broadcast Channel API，你可以创建一个通道（channel），然后不同的标签页可以通过这个通道发送和接收消息。每个标签页都可以监听通道中的消息，并对接收到的消息做出相应的处理。\n\n使用 Broadcast Channel API 实现多页签之间的通信的步骤如下：\n\n1. 创建一个 BroadcastChannel 对象，并指定一个唯一的通道名称：\n```javascript\nconst channel = new BroadcastChannel('channelName');\n```\n\n2. 在一个标签页中发送消息：\n```javascript\nchannel.postMessage('message');\n```\n\n3. 在其他标签页中监听消息并做出响应：\n```javascript\nchannel.addEventListener('message', event => {\n const message = event.data;\n // 处理接收到的消息\n});\n```\n\n通过 Broadcast Channel API，不同的标签页可以实时地收发消息，从而实现多页签之间的通信。这对于需要在多个标签页之间共享状态、同步数据或实现协作等场景非常有用。请注意，Broadcast Channel API 只在同一域名下的标签页之间有效，不支持跨域通信。\n\n\n### SharedWorker 实现多页签之间通信\n\nSharedWorker 是 HTML5 提供的一种多页签之间共享的 Web Worker。通过 SharedWorker，多个浏览器标签页可以共享一个后台线程，实现跨页面的通信和数据共享。\n\n下面是一个使用 SharedWorker 实现多页签之间通信的示例：\n\n在一个 JavaScript 文件（worker.js）中创建 SharedWorker：\n\n```javascript\n// worker.js\n\n// 在共享 Worker 中监听消息\nself.onconnect = function(event) {\n var port = event.ports[0];\n\n // 接收消息\n port.onmessage = function(event) {\n var message = event.data;\n\n // 处理消息\n // ...\n\n // 发送消息\n port.postMessage('Response from SharedWorker');\n };\n\n // 断开连接时的处理\n port.onclose = function() {\n // ...\n };\n};\n```\n\n在多个页面中分别引入 SharedWorker，并进行通信：\n\n```javascript\n// 页面1\nvar sharedWorker = new SharedWorker('worker.js');\n\n// 获取共享 Worker 的端口\nvar port = sharedWorker.port;\n\n// 发送消息\nport.postMessage('Message from Page 1');\n\n// 接收消息\nport.onmessage = function(event) {\n var message = event.data;\n\n // 处理接收到的消息\n // ...\n};\n\n// 页面2\nvar sharedWorker = new SharedWorker('worker.js');\n\n// 获取共享 Worker 的端口\nvar port = sharedWorker.port;\n\n// 发送消息\nport.postMessage('Message from Page 2');\n\n// 接收消息\nport.onmessage = function(event) {\n var message = event.data;\n\n // 处理接收到的消息\n // ...\n};\n```\n\n以上示例中，`worker.js` 创建了一个 SharedWorker，它会监听来自多个页面的连接请求，并为每个连接创建一个端口（port）。每个页面通过创建 SharedWorker 实例，并通过获取端口对象进行消息的发送和接收。\n\n通过 SharedWorker，页面1和页面2可以实现跨页签的通信。它们可以向共享 Worker 发送消息，并监听共享 Worker 返回的消息，从而实现跨页面的数据交互和共享。\n\n需要注意的是，SharedWorker 需要在支持 SharedWorker 的浏览器中运行，而且需要在服务器环境下运行，即通过 HTTP 或 HTTPS 协议访问页面才能正常工作。\n\n\n### Window.postMessage 使用示例\n\n`Window.postMessage()` 是 HTML5 提供的一种在不同窗口之间进行跨域通信的方法。它可以安全地向其他窗口发送消息，并在接收方窗口触发消息事件。\n\n下面是一个使用 `postMessage()` 进行跨窗口通信的示例：\n\n在发送消息的窗口中：\n\n```javascript\n// 发送消息到目标窗口\nwindow.postMessage('Hello, World!', 'https://example.com');\n```\n\n在接收消息的窗口中：\n\n```javascript\n// 监听消息事件\nwindow.addEventListener('message', function(event) {\n // 确保消息来自指定域名\n if (event.origin === 'https://example.com') {\n var message = event.data;\n\n // 处理接收到的消息\n console.log('Received message:', message);\n }\n});\n```\n\n在发送消息的窗口中，使用 `window.postMessage()` 发送消息，第一个参数是要发送的消息内容，第二个参数是目标窗口的源（origin），可以是 URL、域名或通配符 '*'。\n\n在接收消息的窗口中，通过监听 `message` 事件，可以捕获来自其他窗口的消息。在事件处理程序中，通过 `event.origin` 可以判断消息来自哪个域名。可以根据需要进行安全性检查，确保只接收来自指定域名的消息。\n\n需要注意的是，`postMessage()` 通常用于跨窗口通信，可以在不同窗口或不同域名之间进行通信。在使用时需要确保目标窗口的源是可信任的，以防止安全漏洞。同时，接收消息的窗口需要显式地监听消息事件，并进行相应的处理。\n",{"_54":961,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/410/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/410/timeline",{"_54":964,"_56":57,"_58":965,"_60":966,"_62":967,"_64":968,"_66":969,"_68":970,"_70":971,"_72":972,"_74":973,"_107":974,"_127":128,"_129":26,"_130":-5,"_131":977,"_133":978,"_155":148,"_149":980,"_151":981,"_154":-5,"_159":160,"_161":982,"_166":-5,"_167":983,"_169":984,"_181":986,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/398","https://api.github.com/repos/pro-collection/interview-question/issues/398/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/398/comments","https://api.github.com/repos/pro-collection/interview-question/issues/398/events","https://github.com/pro-collection/interview-question/issues/398",1738433696,"I_kwDOJGDC6c5nnmSg",398,"有哪些场景的 http header",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[975,976],{"_66":632,"_68":633,"_54":634,"_113":635,"_115":636,"_117":26,"_118":637},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":250,"_64":251,"_58":252,"_66":253,"_68":254,"_70":255,"_72":256,"_118":257,"_143":979,"_145":259,"_147":148,"_127":128,"_149":260,"_151":261,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-06-02T15:48:14Z","2023-06-02T15:48:15Z",{"_163":148,"_164":148,"_165":148},"常见的 HTTP Header 在请求头（Request Header）和响应头（Response Header）中有许多不同的字段，它们具有各自的作用。下面是一些常见的 HTTP Header 字段及其作用的简要说明：\n\n**Request Header：**\n1. **Host**：指定目标服务器的域名或 IP 地址。\n2. **User-Agent**：发送请求的用户代理（通常是浏览器标识）。\n3. **Accept**：指定客户端可以接受的内容类型。\n4. **Content-Type**：指定请求体的媒体类型。\n5. **Authorization**：提供身份验证凭据，用于访问受保护的资源。\n6. **Cookie**：包含在上一次响应中设置的服务器的 Cookie。\n7. **Referer**：指定当前请求的来源页面 URL。\n\n**Response Header：**\n1. **Content-Type**：指定响应体的媒体类型。\n2. **Content-Length**：指定响应体的长度（以字节为单位）。\n3. **Cache-Control**：指定缓存策略，如缓存的有效期、是否可以缓存等。\n4. **Set-Cookie**：在客户端设置 Cookie。\n5. **Location**：指定重定向的目标 URL。\n6. **Access-Control-Allow-Origin**：指定允许跨域请求的来源（CORS）。\n7. **ETag**：指定实体标签，用于缓存验证。\n\n这只是一小部分常见的 HTTP Header 字段，实际上还有很多其他的字段可以在请求头和响应头中使用，每个字段都有特定的作用和用途。这些头部字段能够提供额外的信息、控制请求和响应的行为，以及实现各种功能，如身份验证、缓存控制、安全性等。\n\n\n**`Content-Type` 作用是啥，有哪些属性**\n\nContent-Type 是 HTTP 头部字段之一，用于指示请求或响应中实体（如消息体、文件等）的媒体类型。\n\nContent-Type 的值通常由媒体类型和字符集组成，使用 MIME（Multipurpose Internet Mail Extensions）类型标识。以下是一些常见的 Content-Type 值及其用途：\n\n1. **text/plain**：纯文本类型，没有指定字符集，默认使用 ASCII 编码。\n2. **text/html**：HTML 文档类型，用于表示网页内容。\n3. **text/css**：CSS 文件类型，用于表示样式表。\n4. **application/json**：JSON 数据类型，用于表示结构化数据。\n5. **application/xml**：XML 数据类型，用于表示可扩展标记语言数据。\n6. **application/octet-stream**：二进制流数据类型，用于表示任意二进制数据。\n7. **multipart/form-data**：用于在 HTML 表单中上传文件时，将表单数据和文件一起提交。\n8. **image/jpeg**、**image/png**、**image/gif**：用于表示不同格式的图像文件。\n\n这只是一小部分常见的 Content-Type 值，实际上还有很多其他类型，每种类型都有其特定的用途和格式。根据实际需求，选择适当的 Content-Type 值可以确保请求和响应中的实体以正确的格式进行解析和处理。\n\n\n",{"_54":985,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/398/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/398/timeline","pagination",{"_989":140,"_163":782},"value","actionData","errors"]