Your Page Title

`元素一样）。\r\n\r\n另外还有一些新的、较少使用或是实验性的`display`属性值，例如：\r\n\r\n- `inline-flex`: 使元素的内容为弹性容器，与`flex`相似，但是元素自身会像`inline`元素一样排列。\r\n- `inline-grid`: 类似于`grid`, 但是元素自身表现为`inline`级别。\r\n\r\nCSS3 引入了更多复杂的布局模式，包括上述的`flex`和`grid`以及其他的一些属性值。根据您使用的 CSS 版本，可能还有更多其他属性值存在。这些布局模式为网页布局提供了更为强大和灵活的控制手段。\r\n",{"_58":629,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/681/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/681/timeline",{"_58":632,"_60":61,"_62":633,"_64":634,"_66":635,"_68":636,"_70":637,"_72":638,"_74":639,"_76":640,"_78":641,"_111":642,"_131":132,"_133":24,"_134":645,"_136":646,"_158":151,"_152":648,"_154":648,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":649,"_169":650,"_175":651,"_177":652,"_189":654,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/680","https://api.github.com/repos/pro-collection/interview-question/issues/680/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/680/comments","https://api.github.com/repos/pro-collection/interview-question/issues/680/events","https://github.com/pro-collection/interview-question/issues/680",2240201447,"I_kwDOJGDC6c6FhsLn",680,"HTTP是一个无状态的协议，那么Web应用要怎么保持用户的登录态呢？【热度: 1,092】",{"_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},[643,644],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":647,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-04-12T13:49:48Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：登录状态问题\n\n涉及到的几个知识点:\n\n1. cookie，session，token(json web token,jwt)的区别\n2. node 中 jwt 的应用\n\n直接参考文档即可：\nhttps://juejin.cn/post/7356788983483842587\n",{"_58":653,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/680/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/680/timeline",{"_58":656,"_60":61,"_62":657,"_64":658,"_66":659,"_68":660,"_70":661,"_72":662,"_74":663,"_76":664,"_78":665,"_111":666,"_131":132,"_133":24,"_134":673,"_136":674,"_158":151,"_152":676,"_154":677,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":678,"_169":679,"_175":680,"_177":681,"_189":683,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/679","https://api.github.com/repos/pro-collection/interview-question/issues/679/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/679/comments","https://api.github.com/repos/pro-collection/interview-question/issues/679/events","https://github.com/pro-collection/interview-question/issues/679",2229683676,"I_kwDOJGDC6c6E5kXc",679,"如何检测网页空闲状态(一定时间内无操作)【热度: 329】",{"_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},[667,668],{"_70":499,"_72":500,"_58":501,"_117":502,"_119":503,"_121":24,"_122":504},{"_70":669,"_72":670,"_58":671,"_117":672,"_119":129,"_121":24,"_122":130},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":675,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-04-07T10:27:39Z","2024-04-15T14:55:47Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"### 如何判断页面是否空闲\r\n\r\n首先，我们要知道什么是空闲？用户一定时间内，没有对网页进行任何操作，则当前网页为空闲状态。\r\n\r\n用户操作网页，无非就是通过`鼠标`、`键盘`两个输入设备(暂不考虑手柄等设备)。因而我们可以监听相应的输入事件，来判断网页是否空闲(用户是否有操作网页)。\r\n\r\n1. 监听鼠标移动事件`mousemove`；\r\n2. 监听键盘按下事件`mousedown`；\r\n3. 在用户进入网页后，设置延时跳转，如果触发以上事件，则移除延时器，并重新开始。\r\n\r\n### 网页空闲检测实现\r\n\r\n实现点：\r\n1. 需要使用防抖方式实现，避免性能问题\r\n2. 监听`visibilitychange`事件，在页面隐藏时移除延时器，然后页面显示时继续计时，从而解决这个问题。\r\n\r\n实现：\r\n```js\r\n/**\r\n * 网页空闲检测\r\n * @param {() => void} callback 空闲时执行，即一定时长无操作时触发\r\n * @param {number} [timeout=15] 时长，默认15s，单位：秒\r\n * @param {boolean} [immediate=false] 是否立即开始，默认 false\r\n * @returns\r\n */\r\nconst onIdleDetection = (callback, timeout = 15, immediate = false) => {\r\n let pageTimer;\r\n let beginTime = 0;\r\n const onClearTimer = () => {\r\n pageTimer && clearTimeout(pageTimer);\r\n pageTimer = undefined;\r\n };\r\n const onStartTimer = () => {\r\n const currentTime = Date.now();\r\n if (pageTimer && currentTime - beginTime < 100) {\r\n return;\r\n }\r\n\r\n onClearTimer();\r\n beginTime = currentTime;\r\n pageTimer = setTimeout(() => {\r\n callback();\r\n }, timeout * 1000);\r\n };\r\n\r\n const onPageVisibility = () => {\r\n // 页面显示状态改变时，移除延时器\r\n onClearTimer();\r\n\r\n if (document.visibilityState === 'visible') {\r\n const currentTime = Date.now();\r\n // 页面显示时，计算时间，如果超出限制时间则直接执行回调函数\r\n if (currentTime - beginTime >= timeout * 1000) {\r\n callback();\r\n return;\r\n }\r\n // 继续计时\r\n pageTimer = setTimeout(() => {\r\n callback();\r\n }, timeout * 1000 - (currentTime - beginTime));\r\n }\r\n };\r\n\r\n const startDetection = () => {\r\n onStartTimer();\r\n document.addEventListener('mousedown', onStartTimer);\r\n document.addEventListener('mousemove', onStartTimer);\r\n document.addEventListener('visibilitychange', onPageVisibility);\r\n };\r\n\r\n const stopDetection = () => {\r\n onClearTimer();\r\n document.removeEventListener('mousedown', onStartTimer);\r\n document.removeEventListener('mousemove', onStartTimer);\r\n document.removeEventListener('visibilitychange', onPageVisibility);\r\n };\r\n\r\n const restartDetection = () => {\r\n onClearTimer();\r\n onStartTimer();\r\n };\r\n\r\n if (immediate) {\r\n startDetection();\r\n }\r\n\r\n return {\r\n startDetection,\r\n stopDetection,\r\n restartDetection\r\n };\r\n};\r\n```\r\n\r\n### 扩展\r\nchrome浏览器其实提供了一个`Idle Detection`API，来实现网页空闲状态的检测，但是这个API还是一个实验性特性，并且Firefox与Safari不支持。\r\n\r\n### 参考文档\r\n- https://juejin.cn/post/7344670957405405223",{"_58":682,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/679/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/679/timeline",{"_58":685,"_60":61,"_62":686,"_64":687,"_66":688,"_68":689,"_70":690,"_72":691,"_74":692,"_76":693,"_78":694,"_111":695,"_131":132,"_133":24,"_134":698,"_136":699,"_158":151,"_152":701,"_154":701,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":702,"_169":703,"_175":704,"_177":705,"_189":707,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/678","https://api.github.com/repos/pro-collection/interview-question/issues/678/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/678/comments","https://api.github.com/repos/pro-collection/interview-question/issues/678/events","https://github.com/pro-collection/interview-question/issues/678",2229673640,"I_kwDOJGDC6c6E5h6o",678,"为什么 Vite 速度比 Webpack 快？【热度: 382】",{"_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},[696,697],{"_70":343,"_72":344,"_58":345,"_117":346,"_119":347,"_121":24,"_122":348},{"_70":471,"_72":472,"_58":473,"_117":474,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":700,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-04-07T10:00:17Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：vite 编译速度、vite 速度与 webpack 速度\n\n#### 1、开发模式的差异\n\n在开发环境中，`Webpack` 是先打包再启动开发服务器，而 `Vite` 则是直接启动，然后再按需编译依赖文件。（大家可以启动项目后检查源码 `Sources` 那里看到）\n\n这意味着，当使用 `Webpack` 时，所有的模块都需要在开发前进行打包，这会增加启动时间和构建时间。\n\n而 `Vite` 则采用了不同的策略，它会在请求模块时再进行实时编译，这种按需动态编译的模式极大地缩短了编译时间，特别是在大型项目中，文件数量众多，`Vite` 的优势更为明显。\n\n**Webpack启动**\n\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31fa5a46d4e74c5db56928f1bb2087c4~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1029&h=552&s=47251&e=png&b=fcfcfc)\n\n**Vite启动**\n\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfa5c4618b75419d8b3a9139425972e5~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=892&h=838&s=50064&e=png&b=ffffff)\n\n#### 2、对ES Modules的支持\n\n现代浏览器本身就支持 `ES Modules`，会`主动发起`请求去获取所需文件。Vite充分利用了这一点，将开发环境下的模块文件直接作为浏览器要执行的文件，而不是像 Webpack 那样`先打包`，再交给浏览器执行。这种方式减少了中间环节，提高了效率。\n\n**什么是ES Modules？**\n\n通过使用 `export` 和 `import` 语句，ES Modules 允许在浏览器端导入和导出模块。\n\n当使用 ES Modules 进行开发时，开发者实际上是在构建一个`依赖关系图`，不同依赖项之间通过导入语句进行关联。\n\n主流浏览器（除IE外）均支持ES Modules，并且可以通过在 script 标签中设置 `type=\"module\"`来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件前。\n\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b03dbc4400c745c8bca371a9ab63f52b~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=2059&h=823&s=194009&e=png&b=f0e6d2)\n\n#### 3、底层语言的差异\n\nWebpack 是基于 `Node.js` 构建的，而 Vite 则是基于 `esbuild` 进行预构建依赖。esbuild 是采用 `Go` 语言编写的，Go 语言是`纳秒`级别的，而 Node.js 是`毫秒`级别的。因此，Vite 在打包速度上相比Webpack 有 `10-100` 倍的提升。\n\n**什么是预构建依赖？**\n\n预构建依赖通常指的是在项目`启动或构建`之前，对项目中所需的依赖项进行预先的`处理或构建`。这样做的好处在于，当项目实际运行时，可以`直接使用`这些已经预构建好的依赖，而无需再进行实时的编译或构建，从而提高了应用程序的运行速度和效率。\n\n#### 4、热更新的处理\n\n在 Webpack 中，当一个模块或其依赖的模块内容改变时，需要`重新编译`这些模块。\n\n而在 Vite 中，当某个模块内容改变时，只需要让浏览器`重新请求`该模块即可，这大大减少了热更新的时间。\n\n#### 总结\n\n总的来说，Vite 之所以比 Webpack 快，主要是因为它采用了`不同的开发模式`、`充分利用了现代浏览器的 ES Modules 支持`、`使用了更高效的底层语言`，`并优化了热更新的处理`。这些特点使得 Vite在大型项目中具有显著的优势，能够快速启动和构建，提高开发效率。\n\n\n#### 参考文档：\nhttps://juejin.cn/post/7344916114204049445\n",{"_58":706,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/678/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/678/timeline",{"_58":709,"_60":61,"_62":710,"_64":711,"_66":712,"_68":713,"_70":714,"_72":715,"_74":716,"_76":717,"_78":718,"_111":719,"_131":132,"_133":24,"_134":722,"_136":723,"_158":151,"_152":735,"_154":736,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":737,"_169":738,"_175":739,"_177":740,"_189":742,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/677","https://api.github.com/repos/pro-collection/interview-question/issues/677/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/677/comments","https://api.github.com/repos/pro-collection/interview-question/issues/677/events","https://github.com/pro-collection/interview-question/issues/677",2229137016,"I_kwDOJGDC6c6E3e54",677,"JS 放在 head 里和放在 body 里有什么区别？【热度: 420】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[720,721],{"_70":499,"_72":500,"_58":501,"_117":502,"_119":503,"_121":24,"_122":504},{"_70":535,"_72":536,"_58":537,"_117":538,"_119":129,"_121":24,"_122":130},[],{"_58":724,"_68":725,"_62":726,"_70":727,"_72":728,"_74":195,"_76":729,"_122":730,"_146":731,"_148":732,"_150":151,"_131":132,"_152":733,"_154":734,"_156":-5,"_157":-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-04-06T08:14:36Z","2024-04-06T08:15:38Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"将 JavaScript 代码放在 `` 标签内部和放在 `` 标签内部有一些区别：\n1. **加载顺序**：放在 `` 里会在页面加载之前执行 JavaScript 代码，而放在 `` 里会在页面加载后执行。\n2. **页面渲染**：如果 JavaScript 代码影响了页面的布局或样式，放在 `` 里可能会导致页面渲染延迟，而放在 `` 里可以减少这种影响。\n3. **代码依赖**：如果 JavaScript 代码依赖其他元素，放在 `` 里可以确保这些元素已经加载。\n4. **全局变量和函数**：放在 `` 里的 JavaScript 代码中的全局变量和函数在整个页面生命周期内都可用。\n\n以下是一个简单的示例代码，展示了如何在 `` 和 `` 中放置 JavaScript 代码：\n\n```html\n\n\n\n\n \n\n\n\n \n\n\n\n```\n在这个示例中，分别在 `` 和 `` 中放置了简单的 JavaScript 代码，用于在控制台输出信息，以便观察执行顺序。\n",{"_58":741,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/677/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/677/timeline",{"_58":744,"_60":61,"_62":745,"_64":746,"_66":747,"_68":748,"_70":749,"_72":750,"_74":751,"_76":752,"_78":753,"_111":754,"_131":132,"_133":24,"_134":757,"_136":758,"_158":195,"_152":760,"_154":761,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":762,"_169":763,"_175":764,"_177":765,"_189":767,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/676","https://api.github.com/repos/pro-collection/interview-question/issues/676/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/676/comments","https://api.github.com/repos/pro-collection/interview-question/issues/676/events","https://github.com/pro-collection/interview-question/issues/676",2229099782,"I_kwDOJGDC6c6E3V0G",676,"列表分页，快速翻页下的竞态问题【热度: 444】",{"_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},[755,756],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":535,"_72":536,"_58":537,"_117":538,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":759,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-04-06T06:14:46Z","2024-08-23T01:28:52Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：翻页场景竞态问题\r\n\r\n**列表分页，快速翻页下的竞态问题**\r\n\r\n> 问题描述：比如在前端分页请求的时候，因为翻页很快，所以请求还没有来得及回来的时候，就发起了下一次请求，且请求返回的时间也是不固定的。 \r\n> 如何保证最后一次请求结果和其请求页码是对应上的。\r\n\r\n在处理这种情况时，一种常见的方法是使用请求标记或唯一标识符来确保请求和结果之间的对应关系。\r\n\r\n以下是一个示例代码片段，展示了一种可能的解决方案：\r\n\r\n```javascript\r\n// 存储请求的标记\r\nlet requestId = 0;\r\n\r\n// 发起请求的函数\r\nfunction sendRequest(page) {\r\n requestId++;\r\n\r\n // 将请求标记与页码一起发送\r\n fetch(`/api?requestId=${requestId}&page=${page}`)\r\n\r\n .then(response => response.json())\r\n\r\n .then(data => {\r\n // 根据请求标记处理返回的数据\r\n handleResponseData(requestId, data);\r\n });\r\n}\r\n\r\n// 处理返回数据的函数\r\nfunction handleResponseData(requestId, data) {\r\n if (requestId === currentRequestId) {\r\n // 在这里处理数据并更新页面\r\n }\r\n}\r\n\r\n// 在翻页时调用 sendRequest 函数\r\n```\r\n\r\n在这个示例中，每次发起请求时都会增加请求标记 `requestId`，并将其与页码一起发送到服务器。在处理返回的数据时，根据请求标记来确保与当前的请求对应。\r\n\r\n另外，还可以考虑以下几点：\r\n- 对快速翻页进行限制或优化，避免过于频繁的请求。\r\n- 在服务器端处理请求时，可以根据请求标记来保证返回的数据与特定的请求相关联。\r\n- 可以使用缓存来存储部分数据，减少不必要的请求。\r\n\r\n**保证唯一性**\r\n\r\n保证请求标记的唯一性可以通过以下几种方式：\r\n1. 使用递增的数字：就像上面示例中的 `requestId` 一样，每次增加 1。\r\n2. 使用随机数：生成一个随机的数字作为请求标记。\r\n3. 使用时间戳：结合当前时间生成唯一的标记。\r\n4. 组合多种因素：例如，将数字、时间戳或其他相关信息组合起来创建唯一标记。\r\n\r\n例如，使用时间戳作为请求标记的示例代码如下：\r\n\r\n```javascript\r\nlet requestId = Date.now();\r\n```\r\n这样每次请求时，`requestId` 都会是一个唯一的时间戳值。\r\n\r\n",{"_58":766,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/676/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/676/timeline",{"_58":769,"_60":61,"_62":770,"_64":771,"_66":772,"_68":773,"_70":774,"_72":775,"_74":776,"_76":777,"_78":778,"_111":779,"_131":132,"_133":24,"_134":782,"_136":783,"_158":151,"_152":785,"_154":786,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":787,"_169":788,"_175":789,"_177":790,"_189":792,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/675","https://api.github.com/repos/pro-collection/interview-question/issues/675/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/675/comments","https://api.github.com/repos/pro-collection/interview-question/issues/675/events","https://github.com/pro-collection/interview-question/issues/675",2105867760,"I_kwDOJGDC6c59hP3w",675,"CORS 请求中，是如何触发预检请求【热度: 229】",{"_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},[780,781],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":535,"_72":536,"_58":537,"_117":538,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":784,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-01-29T16:20:56Z","2024-01-29T16:20:57Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：CORS 预检请求条件\n\n其动机是，`HTML 4.0` 中的 `

` 元素（早于跨站 `XMLHttpRequest 和 fetch`）可以向任何来源提交简单请求，所以任何编写服务器的人一定已经在保护跨站请求伪造攻击`（CSRF）`。在这个假设下，服务器不必选择加入（通过响应预检请求）来接收任何看起来像表单提交的请求，因为 CSRF 的威胁并不比表单提交的威胁差。然而，服务器仍然必须提供 `Access-Control-Allow-Origin`的选择，以便与脚本共享响应。\n\n若请求满足所有下述条件，则该请求可视为简单请求：\n\n- 使用下列方法之一：\n - `GET`\n - `HEAD`\n - `POST`\n\n- 除了被用户代理自动设置的标头字段（例如 Connection、User-Agent 或其他在 Fetch 规范中定义为禁用标头名称的标头），允许人为设置的字段为 Fetch 规范定义的对 CORS 安全的标头字段集合。该集合为：\n - `Accept`\n - `Accept-Language`\n - `Content-Language`\n - `Content-Type（需要注意额外的限制）`\n - `Range（只允许简单的范围标头值如 bytes=256- 或 bytes=127-255）`\n\n- Content-Type 标头所指定的媒体类型的值仅限于下列三者之一：\n - `text/plain`\n - `multipart/form-data`\n - `application/x-www-form-urlencoded`\n\n- 如果请求是使用 `XMLHttpRequest` 对象发出的，在返回的 `XMLHttpRequest.upload` 对象属性上没有注册任何事件监听器；也就是说，给定一个 `XMLHttpRequest` 实例 `xhr`，没有调用 `xhr.upload.addEventListener()`，以监听该上传请求。\n\n- 请求中没有使用 `ReadableStream` 对象。\n\n比如说，假如站点 https://foo.example 的网页应用想要访问 https://bar.other 的资源。foo.example 的网页中可能包含类似于下面的 JavaScript 代码：\n",{"_58":791,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/675/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/675/timeline",{"_58":794,"_60":61,"_62":795,"_64":796,"_66":797,"_68":798,"_70":799,"_72":800,"_74":801,"_76":802,"_78":803,"_111":804,"_131":132,"_133":24,"_134":807,"_136":808,"_158":151,"_152":810,"_154":811,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":812,"_169":813,"_175":814,"_177":815,"_189":817,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/674","https://api.github.com/repos/pro-collection/interview-question/issues/674/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/674/comments","https://api.github.com/repos/pro-collection/interview-question/issues/674/events","https://github.com/pro-collection/interview-question/issues/674",2105712097,"I_kwDOJGDC6c59gp3h",674,"http 中 HSTS 是什么【热度: 374】",{"_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},[805,806],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":535,"_72":536,"_58":537,"_117":538,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":809,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-01-29T15:07:23Z","2024-01-29T15:07:24Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：http HSTS\n\nHTTP `Strict-Transport-Security`（HSTS）是一种安全策略，它通过 HTTP 头部告诉浏览器只能通过安全的 HTTPS 连接访问网站，从而增加网站的安全性。HSTS 有助于防止恶意攻击者通过中间人攻击（如SSL剥离攻击）窃取敏感信息。\n\nHSTS 的主要作用包括：\n\n- **强制使用 HTTPS：** 通过 HSTS，网站可以强制浏览器在一定时间内只能通过 HTTPS 访问，提高数据的安全性。\n\n- **防止 SSL 剥离攻击：** HSTS 通过告知浏览器只能通过安全的连接访问网站，有效地防止了一些中间人攻击，例如 SSL 剥离攻击，其中攻击者试图将 HTTPS 连接降级为不安全的 HTTP 连接。\n\n- **增加网站的安全性：** HSTS 是一种增加网站安全性的简单而有效的手段，尤其是对于那些强调隐私和数据保护的网站。\n\n\nHSTS 的工作原理如下：\n\n1. **首次访问：** 当用户首次通过 HTTPS 访问网站时，服务器可以在响应头中包含 HSTS 头部，指定网站的 HSTS 策略。例如：\n```\nStrict-Transport-Security: max-age=31536000; includeSubDomains; preload\n```\n\n- `max-age=31536000`: 告诉浏览器在接下来的 1 年内，只能通过 HTTPS 访问该网站。\n- `includeSubDomains`: 表示该策略也适用于所有子域名。\n- `preload`: 表示网站希望被添加到浏览器的 HSTS 预加载列表中。\n\n2. **以后的访问：** 一旦浏览器接收到包含 HSTS 头部的响应后，它会记住这个信息。在接下来的一年内，浏览器将强制使用 HTTPS 访问该网站，即使用户尝试通过 HTTP 访问。\n\n一旦网站启用了 `HSTS`，并且用户第一次通过 HTTPS 访问该网站，浏览器将在 `HSTS` 头部指定的时间内（`max-age` 参数指定的时间）记住这个策略，即使用户以后尝试通过 HTTP 访问，浏览器仍然会强制使用 HTTPS。因此，使用 HSTS 需要谨慎，确保网站支持 HTTPS 并且配置正确。\n\n**如何取消 `HSTS`**\n\n> 如果之前的请求设置了 HTTP Strict-Transport-Security 这个 header 了，时间是 max-age=31536000；\n> 之后因为一些原因，取消了 Strict-Transport-Security 这个 header，那么还是不能使用 http 吗?\n\n一旦浏览器接收到包含 HTTP `Strict-Transport-Security`（HSTS）头部的响应，并且在响应中设置了 `max-age` 参数，浏览器会在指定的时间内坚持使用 HTTPS 连接，即使后续的请求中不再包含 HSTS 头部。\n\n如果之前的请求设置了 `max-age=31536000`，那么浏览器将在接下来的一年内坚持使用 HTTPS 连接，即使后续的请求中不再包含 HSTS 头部。即使之后取消了 HSTS 头部，浏览器仍然会在 `max-age` 规定的时间内执行强制使用 HTTPS 的策略。\n\n如果由于一些原因需要取消 HSTS，可以采取以下步骤之一：\n\n1. **在 HTTP 响应中不再包含 HSTS 头部：** 在服务器的 HTTPS 响应中，不再包含 `Strict-Transport-Security` 头部，或者将 `max-age` 设置为较短的时间，以便更快地使浏览器放弃 HSTS 策略。\n\n2. **使用 `includeSubDomains` 指令进行逐步取消：** 如果之前设置了 `includeSubDomains`，并且想逐步取消 HSTS，可以在不同的子域名上逐步取消。例如，可以在某个子域名上不再包含 HSTS 头部，而其他子域名仍然保持 HSTS。\n\n请注意，取消 HSTS 头部可能导致用户在一定时间内无法通过 HTTPS 访问网站，因为浏览器会在 `max-age` 规定的时间内继续强制使用 HTTPS。确保在取消 HSTS 头部之前，确保网站的 HTTPS 配置是正确的，以避免访问问题。\n",{"_58":816,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/674/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/674/timeline",{"_58":819,"_60":61,"_62":820,"_64":821,"_66":822,"_68":823,"_70":824,"_72":825,"_74":826,"_76":827,"_78":828,"_111":829,"_131":132,"_133":24,"_134":832,"_136":833,"_158":151,"_152":835,"_154":836,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":837,"_169":838,"_175":839,"_177":840,"_189":842,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/673","https://api.github.com/repos/pro-collection/interview-question/issues/673/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/673/comments","https://api.github.com/repos/pro-collection/interview-question/issues/673/events","https://github.com/pro-collection/interview-question/issues/673",2105665554,"I_kwDOJGDC6c59gegS",673,"http 中 CSP 是什么【热度: 323】",{"_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},[830,831],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":535,"_72":536,"_58":537,"_117":538,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":834,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-01-29T14:46:34Z","2024-01-29T14:46:35Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：http CSP\n\n在 HTTP 协议中，CSP 指的是 \"Content Security Policy\"（内容安全策略）。CSP 是一种用于增强网站安全性的安全策略机制，通过指定浏览器只能加载指定来源的资源，以减少恶意攻击的风险。\n\nCSP 的主要目标是防止和减缓特定类型的攻击，例如跨站脚本攻击 (XSS) 和数据注入攻击。通过配置 CSP，网站管理员可以告诉浏览器哪些资源是被信任的，从而减少恶意代码的执行。\n\nCSP 的一些常见配置项包括：\n\n1. **default-src：** 指定默认情况下可以从哪些来源加载资源。\n2. **script-src：** 指定允许加载脚本的来源。\n3. **style-src：** 指定允许加载样式表的来源。\n4. **img-src：** 指定允许加载图片的来源。\n5. **font-src：** 指定允许加载字体的来源。\n6. **connect-src：** 指定允许进行网络请求的来源（例如 Ajax 请求）。\n7. **frame-src：** 指定允许加载框架的来源。\n8. **media-src：** 指定允许加载媒体资源的来源。\n\n等等。\n\n以下是一个简单的 CSP 示例：\n\n```http\nContent-Security-Policy: default-src 'self'; script-src 'self' example.com; img-src 'self' data:;\n```\n\n上述 CSP 规则的含义是：\n\n- `default-src 'self'`: 允许从同一站点加载默认来源的资源。\n- `script-src 'self' example.com`: 允许从同一站点和 example.com 加载脚本。\n- `img-src 'self' data:`: 允许从同一站点和 data: 协议加载图片。\n\nCSP 可以通过 HTTP 头部来设置，也可以通过 `` 标签嵌入在 HTML 页面中。使用 CSP 可以帮助网站减少受到恶意攻击的风险，提高网站的安全性。\n\n**如何通过 meta 标签设置 CSP**\n\n通过 `` 标签设置 Content Security Policy (CSP) 的方式如下：\n\n```html\n\n\n\n \n \n Your Page Title\n\n\n \n\n\n```\n\n在上面的代码中，`` 标签的 `http-equiv` 属性被设置为 \"Content-Security-Policy\"，而 `content` 属性中则包含了 CSP 指令（directives）。你需要将 \"directives\" 替换为你实际想要设置的 CSP 规则。\n\n以下是一个具体的例子：\n\n```html\n\n```\n\n在这个例子中，CSP 规则指定了默认来源是同一站点，允许加载同一站点和 example.com 的脚本，允许加载同一站点和 data: 协议的图片。\n\n注意：通过 `` 标签设置的 CSP 规则只对当前页面生效，而通过 HTTP 头部设置的 CSP 规则对整个站点生效。因此，如果你希望 CSP 规则对整个站点生效，最好在服务器端通过 HTTP 头部设置 CSP。\n",{"_58":841,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/673/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/673/timeline",{"_58":844,"_60":61,"_62":845,"_64":846,"_66":847,"_68":848,"_70":849,"_72":850,"_74":851,"_76":852,"_78":853,"_111":854,"_131":132,"_133":24,"_134":857,"_136":858,"_158":151,"_152":860,"_154":861,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":862,"_169":863,"_175":864,"_177":865,"_189":867,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/672","https://api.github.com/repos/pro-collection/interview-question/issues/672/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/672/comments","https://api.github.com/repos/pro-collection/interview-question/issues/672/events","https://github.com/pro-collection/interview-question/issues/672",2103583884,"I_kwDOJGDC6c59YiSM",672,"JS 执行 100 万个任务，如何保证浏览器不卡顿？【热度: 806】",{"_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},[855,856],{"_70":499,"_72":500,"_58":501,"_117":502,"_119":503,"_121":24,"_122":504},{"_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,"_146":859,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-01-27T13:15:57Z","2024-01-28T14:05:05Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：大批量执行任务不卡顿\r\n\r\n**Web Workers**\r\n\r\n要确保浏览器在执行100万个任务时不会卡顿，你可以考虑使用Web Workers来将这些任务从主线程中分离出来。Web Workers允许在后台线程中运行脚本，从而避免阻塞主线程，保持页面的响应性。\r\n\r\n以下是一个使用Web Workers的简单示例：\r\n\r\n```javascript\r\n// 主线程代码\r\nconst worker = new Worker('worker.js'); // 创建一个新的Web Worker\r\n\r\nworker.postMessage({ start: 0, end: 1000000 }); // 向Web Worker发送消息\r\n\r\nworker.onmessage = function(event) {\r\n const result = event.data;\r\n console.log('任务完成：', result);\r\n};\r\n\r\n// worker.js - Web Worker代码\r\nonmessage = function(event) {\r\n const start = event.data.start;\r\n const end = event.data.end;\r\n let sum = 0;\r\n for (let i = start; i <= end; i++) {\r\n sum += i;\r\n }\r\n postMessage(sum); // 向主线程发送消息\r\n};\r\n```\r\n\r\n在这个示例中，主线程创建了一个新的Web Worker，并向其发送了一个包含任务范围的消息。Web Worker在后台线程中执行任务，并将结果发送回主线程。\r\n\r\n**requestAnimationFrame 来实现任务分割**\r\n\r\n使用`requestAnimationFrame`来实现任务分割是一种常见的方式，它可以确保任务在浏览器的每一帧之间执行，从而避免卡顿。以下是一个使用`requestAnimationFrame`来分割任务的简单例子：\r\n\r\n```javascript\r\n// 假设有一个包含大量元素的数组\r\nconst bigArray = Array.from({ length: 1000000 }, (_, i) => i + 1);\r\n\r\n// 定义一个处理函数，例如对数组中的每个元素进行平方操作\r\nfunction processChunk(chunk) {\r\n return chunk.map(num => num * num);\r\n}\r\n\r\n// 分割任务并使用requestAnimationFrame\r\nconst chunkSize = 1000; // 每个小块的大小\r\nlet index = 0;\r\n\r\nfunction processArrayWithRAF() {\r\n function processChunkWithRAF() {\r\n const chunk = bigArray.slice(index, index + chunkSize); // 从大数组中取出一个小块\r\n const result = processChunk(chunk); // 处理小块任务\r\n console.log('处理完成：', result);\r\n index += chunkSize;\r\n\r\n if (index < bigArray.length) {\r\n requestAnimationFrame(processChunkWithRAF); // 继续处理下一个小块\r\n }\r\n }\r\n\r\n requestAnimationFrame(processChunkWithRAF); // 开始处理大数组\r\n}\r\n\r\nprocessArrayWithRAF();\r\n```\r\n\r\n在这个例子中，我们使用`requestAnimationFrame`来循环执行处理小块任务的函数`processChunkWithRAF`，从而实现对大数组的任务分割。这样可以确保任务在每一帧之间执行，避免卡顿。\r\n\r\n**针对上面的改进一下**\r\n\r\n`const chunkSize = 1000; // 每个小块的大小` 是不能保证不卡的，那么久需要动态调整 `chunkSize` 的大小，代码可以参考下面的示范：\r\n\r\n```javascript\r\n const $result = document.getElementById(\"result\");\r\n\r\n// 假设有一个包含大量元素的数组\r\nconst bigArray = Array.from({ length: 1000000 }, (_, i) => i + 1);\r\n\r\n// 定义一个处理函数，对数组中的每个元素执行一次\r\nfunction processChunk(chunk) {\r\n return `chunk: ${chunk}`;\r\n}\r\n\r\n// 动态调整 chunkSize 的优化方式\r\nlet chunkSize = 1000; // 初始的 chunkSize\r\nlet index = 0;\r\n\r\nfunction processArrayWithDynamicChunkSize() {\r\n function processChunkWithRAF() {\r\n let startTime = performance.now(); // 记录结束时间\r\n for (let i = 0; i < chunkSize; i++) {\r\n if (index < bigArray.length) {\r\n const result = processChunk(bigArray[index]); // 对每个元素执行处理函数\r\n $result.innerText = result;\r\n index++;\r\n }\r\n }\r\n let endTime = performance.now();\r\n let timeTaken = endTime - startTime; // 计算处理时间\r\n\r\n // 根据处理时间动态调整 chunkSize\r\n if (timeTaken > 16) { // 如果处理时间超过一帧的时间（16毫秒），则减小 chunkSize\r\n chunkSize = Math.floor(chunkSize * 0.9); // 减小10%\r\n } else if (timeTaken < 16) { // 如果处理时间远小于一帧的时间（8毫秒），则增加 chunkSize\r\n chunkSize = Math.floor(chunkSize * 1.1); // 增加10%\r\n }\r\n\r\n if (index < bigArray.length) {\r\n requestAnimationFrame(processChunkWithRAF); // 继续处理下一个小块\r\n }\r\n }\r\n\r\n requestAnimationFrame(processChunkWithRAF); // 开始处理大数组\r\n}\r\n\r\nprocessArrayWithDynamicChunkSize();\r\n```\r\n\r\n在这个例子中，我们动态调整`chunkSize`的大小，根据处理时间来优化任务分割。根据处理时间的表现，动态调整`chunkSize`的大小，以确保在处理大量任务时，浏览器能够保持流畅，避免卡顿。\r\n\r\n\r\n参考文档： [100万个函数执行保证浏览器不卡](https://github.com/yanlele/node-index/tree/master/books/%E7%9F%A5%E8%AF%86%E5%BA%93/01%E3%80%81%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E7%9F%A5%E8%AF%86/29.100%E4%B8%87%E4%B8%AA%E5%87%BD%E6%95%B0%E6%89%A7%E8%A1%8C%E4%BF%9D%E8%AF%81%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E5%8D%A1)\r\n\r\n\r\n**requestIdleCallback**\r\n\r\n`window.requestIdleCallback` 是一个用于在浏览器空闲时执行任务的API。它允许开发者在浏览器的主线程空闲时执行一些任务，而不会影响用户界面的流畅性和响应性。\r\n\r\n这个 API 的基本思想是利用浏览器在空闲时的空闲时间来执行任务，这样就可以避免在用户执行交互操作时造成卡顿。`requestIdleCallback` 接受一个回调函数作为参数，该回调函数会在浏览器空闲时被调用。\r\n\r\n以下是 `window.requestIdleCallback` 的基本用法：\r\n\r\n```javascript\r\nwindow.requestIdleCallback(function(deadline) {\r\n // 在空闲时执行的任务\r\n // deadline 参数提供了一些信息，比如剩余的空闲时间等\r\n});\r\n```\r\n\r\n`requestIdleCallback` 的回调函数接收一个 `deadline` 参数，它包含了一些有关当前空闲时间的信息。通过这个参数，你可以决定是否继续执行任务或者推迟到下一次空闲时段。\r\n\r\n此外，还有一个配套的 `window.cancelIdleCallback` 方法，用于取消通过 `requestIdleCallback` 请求的回调：\r\n\r\n```javascript\r\nconst id = window.requestIdleCallback(function(deadline) {\r\n // 在空闲时执行的任务\r\n});\r\n\r\n// 取消回调\r\nwindow.cancelIdleCallback(id);\r\n```\r\n\r\n需要注意的是，`requestIdleCallback` 并不是所有浏览器都支持的标准，因此在使用时要注意检查浏览器的兼容性。在一些现代浏览器中，这个 API 已经得到了广泛的支持，但在某些老旧的浏览器中可能并不可用。\r\n\r\n",{"_58":866,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/672/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/672/timeline",{"_58":869,"_60":61,"_62":870,"_64":871,"_66":872,"_68":873,"_70":874,"_72":875,"_74":876,"_76":877,"_78":878,"_111":879,"_131":132,"_133":24,"_134":882,"_136":883,"_158":151,"_152":885,"_154":886,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":887,"_169":888,"_175":889,"_177":890,"_189":892,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/671","https://api.github.com/repos/pro-collection/interview-question/issues/671/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/671/comments","https://api.github.com/repos/pro-collection/interview-question/issues/671/events","https://github.com/pro-collection/interview-question/issues/671",2080785938,"I_kwDOJGDC6c58BkYS",671,"grpc 和 protobuf 是什么关系？【热度: 320】",{"_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},[880,881],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_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,"_146":884,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-01-14T16:01:29Z","2024-01-14T16:01:30Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"`gRPC（gRPC Remote Procedure Call）`和 `Protocol Buffers（protobuf）`有密切的关系，可以理解为它们之间是一种上下游的关系：\n\n- **Protocol Buffers（protobuf）：** 这是一种由 Google 设计的数据序列化格式，用于结构化数据的序列化和反序列化。protobuf 使用 .proto 文件定义消息结构，然后通过编译器生成相应语言的代码，使得开发者可以在应用中使用这些结构化的消息。\n\n- **gRPC：** 这是一个由 Google 开发的基于 HTTP/2 的远程过程调用（RPC）框架。gRPC 使用 Protocol Buffers 作为默认的序列化格式，以便在客户端和服务器之间传递结构化的消息。 gRPC 通过生成的代码支持多语言，使得开发者可以轻松地定义 RPC 服务、消息和调用远程方法。\n\n因此，关系可以总结为：\n\n- **gRPC 使用 protobuf：** gRPC 首选 Protocol Buffers 作为其默认的序列化格式，这意味着 gRPC 中的消息通信使用 protobuf 格式定义，而 gRPC 编译器将根据 protobuf 文件生成相应语言的代码，包括消息结构和 RPC 服务接口。\n\n- **protobuf 不依赖于 gRPC：** 尽管 protobuf 最初是为 gRPC 设计的，但它本身并不限定于 gRPC。您可以使用 protobuf 来序列化和反序列化数据，而不仅限于在 gRPC 中使用。\n\n总的来说，gRPC 和 protobuf 是两个相关但独立的概念。gRPC 是一个使用 Protocol Buffers 的 RPC 框架，而 Protocol Buffers 是一个通用的数据序列化工具，可以在多种场景中使用。\n",{"_58":891,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/671/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/671/timeline",{"_58":894,"_60":61,"_62":895,"_64":896,"_66":897,"_68":898,"_70":899,"_72":900,"_74":901,"_76":902,"_78":903,"_111":904,"_131":132,"_133":24,"_134":907,"_136":908,"_158":151,"_152":910,"_154":911,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":912,"_169":913,"_175":914,"_177":915,"_189":917,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/669","https://api.github.com/repos/pro-collection/interview-question/issues/669/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/669/comments","https://api.github.com/repos/pro-collection/interview-question/issues/669/events","https://github.com/pro-collection/interview-question/issues/669",2080783118,"I_kwDOJGDC6c58BjsO",669,"常见网络协议有哪些【热度: 724】",{"_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},[905,906],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":909,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-01-14T15:53:43Z","2024-01-14T15:53:44Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：网络协议\n\n\n| 协议 | 层次 | 说明 |\n| ------------- | ------- | ----------------------------------------------------- |\n| HTTP/HTTPS | 应用层 | 用于在 Web 浏览器和 Web 服务器之间传输超文本的协议。 |\n| TCP | 传输层 | 面向连接、可靠的传输层协议，以字节流的形式传输数据。 |\n| UDP | 传输层 | 无连接、不可靠的传输层协议，以数据包的形式传输数据。 |\n| FTP | 应用层 | 用于在客户端和服务器之间传输文件的协议。 |\n| SFTP | 应用层 | 在安全通道上传输文件的协议，基于 SSH 协议。 |\n| SMTP | 应用层 | 用于在邮件服务器之间传递电子邮件的协议。 |\n| POP3 | 应用层 | 用于从邮件服务器接收电子邮件的协议。 |\n| IMAP | 应用层 | 用于在邮件客户端和邮件服务器之间管理和检索电子邮件的协议。|\n| SSH | 应用层 | 用于在网络上安全地进行远程登录和执行命令的协议。 |\n| WebSocket | 应用层 | 在单个 TCP 连接上进行全双工通信的协议，用于实时双向通信。 |\n| gRPC | 应用层 | 基于 HTTP/2 的远程过程调用（RPC）框架，支持多语言、双向流等特性。 |\n",{"_58":916,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/669/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/669/timeline",{"_58":919,"_60":61,"_62":920,"_64":921,"_66":922,"_68":923,"_70":924,"_72":925,"_74":926,"_76":927,"_78":928,"_111":929,"_131":132,"_133":24,"_134":932,"_136":933,"_158":151,"_152":935,"_154":936,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":937,"_169":938,"_175":939,"_177":940,"_189":942,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/668","https://api.github.com/repos/pro-collection/interview-question/issues/668/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/668/comments","https://api.github.com/repos/pro-collection/interview-question/issues/668/events","https://github.com/pro-collection/interview-question/issues/668",2080778192,"I_kwDOJGDC6c58BifQ",668,"权限管理模型相关概念【热度: 670】",{"_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},[930,931],{"_70":499,"_72":500,"_58":501,"_117":502,"_119":503,"_121":24,"_122":504},{"_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,"_146":934,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-01-14T15:40:19Z","2024-01-14T15:53:58Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：权限管理模型\n\n### 常见的权限管理模型\n\n- **DAC (Discretionary Access Control):** 用户对资源有自主权，资源的所有者可以自由地授予或撤销其他用户的访问权限。\n\n- **MAC (Mandatory Access Control):** 系统管理员定义了一组强制性的规则，控制用户对资源的访问。用户不能改变这些规则，这通常应用于一些需要高度安全性的环境。\n\n- **RBAC (Role-Based Access Control):** 根据用户的角色分配权限，用户被分组为角色，每个角色被赋予一定的权限。这简化了权限管理，特别适用于大型组织。\n\n- **ABAC (Attribute-Based Access Control):** 根据用户的属性来控制访问权限。这可以包括用户的属性、环境信息等，提供更细粒度的控制。\n\n- **PBAC (Policy-Based Access Control):** 根据预定义的策略来控制访问权限。策略可以包括多个规则和条件，灵活适应各种访问控制需求。\n\n#### DAC\n\nDiscretionary Access Control（DAC）自主访问控制，是一种权限管理模型，强调资源的所有者对其资源拥有自主权，可以自由决定其他用户对其资源的访问权限。每个用户被赋予特定的权限，这些权限决定了用户能够对资源执行哪些操作，如读取、写入、执行等。资源的所有者通常是创建该资源的用户，而DAC模型提供了一定的灵活性，因为资源的所有者可以根据实际需要灵活地管理对其资源的访问。在 DAC 模型中，文件系统是一个常见的应用场景，其中文件和文件夹具有所有者，所有者决定了其他用户的访问权限。这是一种相对简单而直观的权限管理方式，适用于一些相对简单的场景。\n\n这种设计最常见的应用就是文件系统的权限设计，如微软的 NTFS。\n![01](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/2/5/17010f5b773f5aa1~tplv-t2oaga2asx-jj-mark:3024:0:0:0:q75.awebp)\n\n#### MAC\n\nMandatory Access Control（MAC，强制访问控制）是一种权限管理模型，其核心特点在于由系统管理员预先定义一组强制性规则，这些规则决定了用户对资源的访问权限。在 MAC 模型中，用户无法自行修改这些规则，这种不可修改性使得 MAC 模型适用于高度安全性的环境。与 Discretionary Access Control（DAC）不同，MAC 强调系统级别上的强制性控制，而不是资源所有者的自主权。此模型通常使用标签或级别来表示用户和资源的安全属性，并支持多级别的安全控制。 MAC 在军事、政府和情报机构等对安全性要求极高的领域中得到广泛应用。在 MAC 模型下，系统管理员的定义对于用户和资源的访问权限至关重要，确保了系统的整体安全性和合规性。\n\n这个权限最大的一个特点就是：**权限标签和分级**。使用标签或级别来表示用户和资源的安全级别。这些标签反映了用户和资源的安全属性，用于决定是否允许访问。\n\n举例：MAC 模型通常在对安全性要求极高的领域中得到广泛应用，如军事、政府和情报机构。\n\n例如：考虑一个政府机构的文件系统，其中包含了各种敏感信息。在 MAC 模型下：\n\n- 系统管理员定义了访问控制规则，例如只有具有 \"Top Secret\" 标签的用户才能访问 \"Top Secret\" 级别的文件。\n- 用户无法自行更改其安全级别或绕过系统管理员定义的规则来进行查看。\n- 文件的创建者是某个用户，该用户也是一位普通用户，但是只能查看，不能篡改文件的访问级别和编辑级别。\n\n#### RBAC\n\nRole-Based Access Control（RBAC，基于角色的访问控制）是一种权限管理模型，其核心思想是根据用户的角色进行访问控制。在 RBAC 模型中，用户被分配到一个或多个角色，而每个角色都具有特定的权限，用户通过角色来获取相应的访问权限。\n目前来说基于角色的访问控制模型是应用较广的一个，特别是 2B 方向 SAAS 领域，应用尤其常见。\n\n![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6faeff4a2984a3fb04053e0abe2fc6e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1231&h=720&s=536982&e=png&b=ffffff)\n\n其中最重要的两个关键因素就是：权限与角色关联、角色再分配给具体的用户；\n\n#### ABAC\n\n基于属性的访问控制模型(ABAC: Attribute-Based Access Control)，被一些人称为是权限系统设计的未来。\n不同于常见的将用户通过某种方式关联到权限的方式，ABAC 则是通过动态计算一个或一组属性是否满足某种条件来进行授权判断（可以编写简单的逻辑）。\n用户、资源和环境都有各自的属性。这些属性可以包括用户的身份、角色、部门、资源的类型、敏感级别、时间等。\n访问控制策略通过属性的匹配和条件评估来确定是否允许访问。例如，如果用户的角色属性是 \"Manager\" 且资源的敏感级别属性是 \"High\"，则允许访问。\n\n举例子：考虑一个企业的文档管理系统，使用 Attribute-Based Access Control (ABAC) 模型来控制对文档的访问。在这个例子中，访问控制的决策基于用户的属性、文档的属性以及其他环境因素。\n\n1. **用户属性：**\n - 属性 1：用户角色（Role） - 可能的值包括 \"Employee\"（员工）和 \"Manager\"（经理）。\n - 属性 2：用户部门（Department） - 包括 \"Sales\"（销售部门）和 \"Engineering\"（工程部门）。\n\n2. **文档属性：**\n - 属性 1：文档类型（Document Type） - 包括 \"Internal\"（内部文档）和 \"Confidential\"（机密文档）。\n - 属性 2：文档部门（Document Department） - 指定文档所属的部门。\n\n3. **环境属性：**\n - 属性 1：访问时间（Access Time） - 确定用户访问文档的时间。\n\n4. **策略定义：**\n - 规则 1：如果用户角色是 \"Manager\" 且文档类型是 \"Confidential\"，允许访问。\n - 规则 2：如果文档部门是 \"Sales\" 且访问时间是工作时间，允许员工访问。\n\n5. **访问请求示例：**\n - 用户A是 \"Manager\"，想要访问一个 \"Confidential\" 类型的文档，由于规则 1 的匹配，允许访问。\n - 用户B是 \"Employee\"，想要访问一个 \"Internal\" 类型的文档，在工作时间内，由于规则 2 的匹配，允许访问。\n\n在这个例子中，ABAC 模型通过匹配用户、文档和环境的属性来决定访问权限。管理员可以根据组织的需求定义和更新访问规则，以实现更精细和动态的访问控制。\n\n这种权限设计侧重点，在于**数据属性**；\n\n#### PBAC\nPolicy-Based Access Control (PBAC) 是一种基于策略的访问控制模型，它的核心思想是通过定义和实施一组策略来管理对系统资源的访问。在 PBAC 中，访问控制是通过规则和条件的集合来决定的，这些规则描述了在特定条件下用户能够执行的操作。\n\n跟 ABAC 是同属于一个级别的权限控制模型，只是侧重点不同， PBAC 更加侧重于： **重定义和实施访问控制策略。这些策略是由一组规则组成，这些规则描述了在特定条件下用户能够执行的操作。**\n\n举例子：\n\n考虑一个企业的文件管理系统，管理员使用 Policy-Based Access Control (PBAC) 来定义访问控制策略，以确保对文件的访问仅限于授权用户和特定条件下的访问。\n\n1. **用户和角色定义：**\n - 角色 1：Employee（普通员工）\n - 角色 2：Manager（经理）\n - 角色 3：Admin（管理员）\n\n2. **资源定义：**\n - 资源 1：Project Documents（项目文件夹）\n - 资源 2：Financial Reports（财务报告文件夹）\n\n3. **策略定义：**\n - 策略 1：如果用户是经理，允许访问项目文件夹。\n - 策略 2：如果用户是管理员，允许访问财务报告文件夹。\n - 策略 3：如果访问时间在工作时间内，允许访问项目文件夹和财务报告文件夹。\n - 策略 4：如果用户是普通员工，仅在工作时间内允许访问项目文件夹。\n\n这些策略和规则的组合允许管理员定义对文件的访问控制。例如，一个经理在工作时间内可以访问项目文件夹，而管理员可以在任何时间访问财务报告文件夹。这个例子展示了 PBAC 模型如何通过灵活的策略定义，实现对资源访问的细粒度控制。管理员可以根据企业需求调整和更新这些策略，以适应不同的访问控制需求。\n\n-----------------------\n\n**参考文档**： https://juejin.cn/post/6844904056876433416\n",{"_58":941,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/668/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/668/timeline",{"_58":944,"_60":61,"_62":945,"_64":946,"_66":947,"_68":948,"_70":949,"_72":950,"_74":951,"_76":952,"_78":953,"_111":954,"_131":132,"_133":24,"_134":957,"_136":958,"_158":151,"_152":960,"_154":960,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":961,"_169":962,"_175":963,"_177":964,"_189":966,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/667","https://api.github.com/repos/pro-collection/interview-question/issues/667/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/667/comments","https://api.github.com/repos/pro-collection/interview-question/issues/667/events","https://github.com/pro-collection/interview-question/issues/667",2079185674,"I_kwDOJGDC6c577dsK",667,"Protobuf 相关知识【热度: 216】",{"_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},[955,956],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":535,"_72":536,"_58":537,"_117":538,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":959,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-01-12T16:04:54Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：Protobuf 基本概念\n\n`Protobuf（Protocol Buffers）`是由 Google 开发的一种轻量级、高效的数据交换格式，它被用于结构化数据的序列化、反序列化和传输。相比于 XML 和 JSON 等文本格式，Protobuf 具有更小的数据体积、更快的解析速度和更强的可扩展性。\nProtobuf 的核心思想是使用协议（Protocol）来定义数据的结构和编码方式。使用 Protobuf，可以先定义数据的结构和各字段的类型、字段等信息，然后使用Protobuf提供的编译器生成对应的代码，用于序列化和反序列化数据。由于 Protobuf 是基于二进制编码的，因此可以在数据传输和存储中实现更高效的数据交换，同时也可以跨语言使用。\n\n相比于 XML 和 JSON，Protobuf 有以下几个优势：\n\n1. **可扩展性：** Protobuf 支持向已有的消息类型中添加新的字段，而不会破坏对旧数据的兼容性。这使得系统能够逐渐演进而不需要修改所有的代码。\n\n2. **高效性：** 相对于一些文本格式的序列化（如XML和JSON），Protobuf 使用二进制格式，因此更为紧凑，更高效地进行数据存储和传输。\n\n3. **语言中立：** Protobuf 支持多种编程语言，包括但不限于C++, Java, Python, Go等，这使得不同语言的系统能够使用相同的数据结构进行通信。\n\n4. **自动代码生成：** Protobuf 通过使用 .proto 文件定义消息结构，然后利用相应语言的编译器生成与消息结构对应的代码。这简化了开发过程，减少了手动编写序列化和反序列化代码的工作。\n\n5. **支持多种数据类型：** Protobuf 提供了丰富的基本数据类型，包括整数、浮点数、布尔值、字符串等，以及可以嵌套的消息类型，使得可以构建复杂的数据结构。\n\n6. **适用于网络通信：** Protobuf 在网络通信领域广泛应用，特别是在 gRPC 中作为默认的消息序列化格式。\n\n**可以参考文档**：https://zhuanlan.zhihu.com/p/141415216\n",{"_58":965,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/667/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/667/timeline",{"_58":968,"_60":61,"_62":969,"_64":970,"_66":971,"_68":972,"_70":973,"_72":974,"_74":975,"_76":976,"_78":977,"_111":978,"_131":132,"_133":24,"_134":985,"_136":986,"_158":151,"_152":988,"_154":989,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":990,"_169":991,"_175":992,"_177":993,"_189":995,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/666","https://api.github.com/repos/pro-collection/interview-question/issues/666/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/666/comments","https://api.github.com/repos/pro-collection/interview-question/issues/666/events","https://github.com/pro-collection/interview-question/issues/666",2079163200,"I_kwDOJGDC6c577YNA",666,"git 仓库迁移应该怎么操作【热度: 160】",{"_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},[979,980],{"_70":499,"_72":500,"_58":501,"_117":502,"_119":503,"_121":24,"_122":504},{"_70":981,"_72":982,"_58":983,"_117":984,"_119":129,"_121":24,"_122":130},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":987,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-01-12T15:55:20Z","2024-01-12T15:55:21Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：git 仓库迁移\n\n如果你想迁移仓库并保留原始仓库的所有提交历史、分支和标签，你可以使用以下步骤：\n\n### 方法一：使用 `git clone` 和 `git push`\n\n1. **在仓库 B 中创建新的仓库。**\n\n2. **在本地克隆仓库 A：**\n```bash\ngit clone --mirror <仓库 A URL>\ncd <仓库 A 目录>\n```\n\n使用 `--mirror` 选项克隆仓库会保留所有分支、标签和提交历史。\n\n3. **修改远程仓库地址为仓库 B：**\n```bash\ngit remote set-url --push origin <仓库 B URL>\n```\n\n4. **推送到仓库 B：**\n```bash\ngit push --mirror\n```\n\n### 方法二：使用 `git bundle`\n\n1. **在仓库 A 中创建 bundle 文件：**\n```bash\ngit bundle create repoA.bundle --all\n```\n\n2. **将 `repoA.bundle` 文件传输到仓库 B 所在位置。**\n\n3. **在仓库 B 中克隆：**\n```bash\ngit clone repoA.bundle <仓库 B 目录>\n```\n\n这两种方法都会保留所有分支、标签和提交历史。选择哪种方法取决于你的具体需求和迁移环境。\n\n**注意：**\n- 使用 `--mirror` 或 `--all` 选项在 `git clone` 或 `git bundle` 中时，会将所有的分支和标签复制到目标仓库。\n- 在执行之前，请确保仓库 B 是空的或者是一个你可以覆盖的目标仓库，因为这些操作会覆盖目标仓库的内容。\n- 如果仓库 A 中包含子模块，你可能需要额外处理子模块的迁移。\n",{"_58":994,"_180":195,"_181":195,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/666/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/666/timeline",{"_58":997,"_60":61,"_62":998,"_64":999,"_66":1000,"_68":1001,"_70":1002,"_72":1003,"_74":1004,"_76":1005,"_78":1006,"_111":1007,"_131":132,"_133":24,"_134":1010,"_136":1011,"_158":151,"_152":1013,"_154":1014,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":1015,"_169":1016,"_175":1017,"_177":1018,"_189":1020,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/665","https://api.github.com/repos/pro-collection/interview-question/issues/665/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/665/comments","https://api.github.com/repos/pro-collection/interview-question/issues/665/events","https://github.com/pro-collection/interview-question/issues/665",2069197134,"I_kwDOJGDC6c57VXFO",665,"TypeScript 内置的类型方法和工具类型【热度: 492】",{"_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},[1008,1009],{"_70":287,"_72":288,"_58":289,"_117":290,"_119":291,"_121":24,"_122":292},{"_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,"_146":1012,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-01-07T16:37:24Z","2024-01-07T16:37:25Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：ts 内置类型方法、ts 内置工具类型\n\nTypeScript 提供了许多内置的类型方法和工具类型，用于处理和操作类型。以下是其中一些常用的内置类型方法：\n\n### 分类\n\n1. **Utility Types（工具类型）**：\n - **Partial\\**: 将类型 T 的所有属性变为可选。\n - **Required\\**: 将类型 T 的所有属性变为必选。\n - **Readonly\\**: 将类型 T 的所有属性变为只读。\n - **Record\\**: 创建一个具有指定键类型 K 和值类型 T 的新对象类型。\n - **Pick\\**: 从类型 T 中选择指定属性 K 形成新类型。\n - **Omit\\**: 从类型 T 中排除指定属性 K 形成新类型。\n - **Exclude\\**: 从类型 T 中排除可以赋值给类型 U 的类型。\n - **Extract\\**: 从类型 T 中提取可以赋值给类型 U 的类型。\n - **NonNullable\\**: 从类型 T 中排除 null 和 undefined 类型。\n - **ReturnType\\**: 获取函数类型 T 的返回类型。\n - **Parameters\\**: 获取函数类型 T 的参数类型组成的元组类型。\n\n2. **条件判定类型**：\n - **Conditional Types（条件类型）**: 根据类型关系进行条件判断生成不同的类型。\n - **Distribute Conditional Types（分布式条件类型）**: 分发条件类型，允许条件类型在联合类型上进行分发。\n\n3. **Mapped Types（映射类型）**：根据已有类型创建新类型，通过映射类型可以生成新的类型结构。\n\n4. **Template Literal Types（模板文字类型）**：使用字符串模板创建新类型。\n\n5. **类型推断关键字**：\n - **keyof关键字**：关键字允许在泛型条件类型中推断类型变量。\n - **instanceof**：运算符用于检查对象是否是特定类的实例。\n - **in**：用于检查对象是否具有特定属性。\n - **type guards**：类型守卫是自定义的函数或条件语句，用于在代码块内缩小变量的类型范围。\n - **as**：用于类型断言，允许将一个变量断言为特定的类型。\n \n\n这些工具类型和方法使得在 TypeScript 中能够更灵活地操作和利用类型系统，增强了类型的安全性和可读性。\n\n### Utility Types（工具类型）介绍\n\n当涉及到 TypeScript 中的这些工具类型时，它们都是为了便捷地处理和操作类型而设计的。让我为你逐个介绍并提供代码示例：\n\n#### 1. Partial\\\n\n这个类型将类型 `T` 的所有属性变为可选。\n\n示例：\n\n```typescript\ninterface User {\n name: string;\n age: number;\n}\n\ntype PartialUser = Partial;\n// PartialUser 的类型为 { name?: string; age?: number; }\n\nconst partialUserData: PartialUser = {}; // 全部属性变为可选\n```\n\n#### 2. Required\\\n\n与 `Partial` 相反，该类型将类型 `T` 的所有属性变为必选。\n\n示例：\n\n```typescript\ninterface PartialUser {\n name?: string;\n age?: number;\n}\n\ntype RequiredUser = Required;\n// RequiredUser 的类型为 { name: string; age: number; }\n\nconst requiredUserData: RequiredUser = { name: 'John', age: 25 }; // 全部属性变为必选\n```\n\n#### 3. Readonly\\\n\n将类型 `T` 的所有属性变为只读。一旦复制之后是不允许更改的。\n\n示例：\n\n```typescript\ninterface User {\n name: string;\n age: number;\n}\n\ntype ReadonlyUser = Readonly;\n// ReadonlyUser 的类型为 { readonly name: string; readonly age: number; }\n\nconst user: ReadonlyUser = { name: 'Alice', age: 30 };\n// user.name = 'Bob'; // 这里会报错，因为属性是只读的\n```\n\n#### 4. Record\\\n\n该类型创建一个具有指定键类型 `K` 和值类型 `T` 的新对象类型。\n\n示例：\n\n```typescript\ntype PageInfo = {\n title: string;\n};\n\ntype Page = 'home' | 'about' | 'contact';\n\nconst pages: Record = {\n home: { title: 'Home' },\n about: { title: 'About' },\n contact: { title: 'Contact' },\n};\n// pages 的类型为 { home: PageInfo; about: PageInfo; contact: PageInfo; }\n```\n\n#### 5. Pick\\\n\n从类型 `T` 中选择指定属性 `K` 形成新类型。\n\n示例：\n\n```typescript\ninterface User {\n name: string;\n age: number;\n email: string;\n}\n\ntype UserBasicInfo = Pick;\n// UserBasicInfo 的类型为 { name: string; email: string; }\n\nconst basicUserInfo: UserBasicInfo = { name: 'Sarah', email: 'sarah@example.com' };\n```\n\n#### 6. Omit\\\n\n与 `Pick` 相反，该类型从类型 `T` 中排除指定属性 `K` 形成新类型。\n\n示例：\n\n```typescript\ninterface User {\n name: string;\n age: number;\n email: string;\n}\n\ntype UserWithoutAge = Omit;\n// UserWithoutAge 的类型为 { name: string; email: string; }\n\nconst userWithoutAge: UserWithoutAge = { name: 'Alex', email: 'alex@example.com' };\n```\n\n当涉及到 `Exclude` 和 `Extract` 时，让我们进一步丰富例子来更好地说明它们的用法。\n\n#### 7. Exclude\\\n\n`Exclude` 从类型 `T` 中排除可以赋值给类型 `U` 的类型。\n\n举例：\n\n```typescript\ntype T = string | number | boolean;\ntype U = string | boolean;\n\ntype OnlyNumber = Exclude;\n// OnlyNumber 的类型为 number\n\nconst example1: OnlyNumber = 10; // 可以赋值，因为只有 number 类型被提取\n// const example2: OnlyNumber = 'Hello'; // 这行会报错，因为 string 类型被排除\n// const example3: OnlyNumber = true; // 这行也会报错，因为 boolean 类型被排除\n\nfunction printValue(val: OnlyNumber) {\n console.log(val);\n}\n\nprintValue(20); // 可以传入，因为参数类型为 OnlyNumber\n// printValue('Hi'); // 这行会报错，因为参数类型不是 OnlyNumber\n```\n\n在这个例子中，`T` 是 `string | number | boolean`，`U` 是 `string | boolean`。`Exclude` 从 `T` 中排除了 `U` 中包含的类型，所以 `OnlyNumber`\n的类型就只有 `number`。这个类型可以在函数参数上提供类型安全性，确保只接受特定类型的参数。\n\n#### 8. Extract\\\n\n`Extract` 从类型 `T` 中提取可以赋值给类型 `U` 的类型。\n\n举例：\n\n```typescript\ntype T = string | number | boolean;\ntype U = string | boolean;\n\ntype OnlyStringOrBoolean = Extract;\n// OnlyStringOrBoolean 的类型为 string | boolean\n\nconst example1: OnlyStringOrBoolean = 'Hello'; // 可以赋值，因为 string 类型被提取\nconst example2: OnlyStringOrBoolean = true; // 也可以赋值，因为 boolean 类型也被提取\n// const example3: OnlyStringOrBoolean = 10; // 这行会报错，因为 number 类型被排除\n\nfunction printValue(val: OnlyStringOrBoolean) {\n console.log(val);\n}\n\nprintValue('Hey'); // 可以传入，因为参数类型为 OnlyStringOrBoolean\nprintValue(true); // 也可以传入，因为参数类型为 OnlyStringOrBoolean\n// printValue(30); // 这行会报错，因为参数类型不是 OnlyStringOrBoolean\n```\n\n在这个例子中，`T` 是 `string | number | boolean`，`U` 是 `string | boolean`。`Extract` 从 `T` 中提取了 `U`\n中包含的类型，所以 `OnlyStringOrBoolean` 的类型就是 `string | boolean`。这个类型可以用在函数参数上，确保只接受特定的类型作为参数，提高代码的类型安全性。\n\n#### 9. NonNullable\\\n\n`NonNullable` 类型从类型 `T` 中排除 `null` 和 `undefined` 类型。\n\n示例：\n\n```typescript\ntype T = string | null | undefined;\n\ntype NonNullString = NonNullable;\n// NonNullString 的类型为 string\n\nconst example: NonNullString = 'Hello'; // 可以赋值，因为 null 和 undefined 被排除\n// const example2: NonNullString = null; // 这行会报错，因为 null 被排除\n```\n\n在这个例子中，`NonNullable` 从 `string | null | undefined` 中排除了 `null` 和 `undefined` 类型，只保留了 `string` 类型。\n\n#### 10. ReturnType\\\n\n`ReturnType` 类型获取函数类型 `T` 的返回类型。\n\n示例：\n\n```typescript\nfunction greet(): string {\n return 'Hello!';\n}\n\ntype GreetReturnType = ReturnType;\n// GreetReturnType 的类型为 string\n\nconst result: GreetReturnType = 'Hi'; // 可以赋值，因为函数的返回类型是 string\n// const result2: GreetReturnType = 10; // 这行会报错，因为类型不匹配\n```\n\n`ReturnType` 获取了 `greet` 函数的返回类型，因此 `GreetReturnType` 就是 `string` 类型。\n\n#### 11. Parameters\\\n\n`Parameters` 类型获取函数类型 `T` 的参数类型组成的元组类型。\n\n示例：\n\n```typescript\nfunction greet(name: string, age: number): void {\n console.log(`Hello, ${name}! You are ${age} years old.`);\n}\n\ntype GreetFunctionParams = Parameters;\n// GreetFunctionParams 的类型为 [string, number]\n\nconst example: GreetFunctionParams = ['Alice', 30]; // 可以赋值，因为参数类型匹配\n// const example2: GreetFunctionParams = ['Bob', '20']; // 这行会报错，因为参数类型不匹配\n```\n\n`Parameters` 获取了 `greet` 函数的参数类型组成的元组类型 `[string, number]`，因此 `GreetFunctionParams` 就是包含了函数参数类型的元组类型。\n\n### 条件判定类型\n\n条件类型是 TypeScript 中强大且灵活的类型构造方式，它允许根据类型关系进行条件判断生成不同的类型。分布式条件类型是条件类型的一种特殊形式，它允许条件类型在联合类型上进行分发，以便更精确地推断和处理类型。\n\n#### Conditional Types（条件类型）\n\n条件类型基于输入的类型关系来确定最终的类型。它使用 `infer` 关键字来推断和定义类型。条件类型通常结合了 TypeScript 中的`extends`关键字，这样就可以根据条件来确定最终的类型。\n\n当谈到 TypeScript 中的条件类型时，让我们通过更多的例子来深入了解它们的应用和灵活性。\n\n**1. 根据输入类型选择不同的类型**\n条件类型基于输入的类型关系来确定最终的类型。它使用 infer 关键字来推断和定义类型。条件类型通常结合了 TypeScript 中的extends关键字，这样就可以根据条件来确定最终的类型。\n\n示例：\n\n```typescript\ntype TypeName =\n T extends string ? \"string\" :\n T extends number ? \"number\" :\n T extends boolean ? \"boolean\" :\n \"other\";\n\ntype A = TypeName; // A 的类型为 \"string\"\ntype B = TypeName; // B 的类型为 \"number\"\ntype C = TypeName; // C 的类型为 \"boolean\"\ntype D = TypeName