css阻塞

`元素一样）。\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":485,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/681/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/681/timeline",{"_58":488,"_60":61,"_62":489,"_64":490,"_66":491,"_68":492,"_70":493,"_72":494,"_74":495,"_76":496,"_78":497,"_111":498,"_131":132,"_133":24,"_134":-5,"_135":507,"_137":508,"_159":152,"_153":510,"_155":510,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":511,"_170":512,"_176":513,"_178":514,"_190":516,"_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},[499,506],{"_70":500,"_72":501,"_58":502,"_117":503,"_119":504,"_121":24,"_122":505},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":509,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-12T13:49:48Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：登录状态问题\n\n涉及到的几个知识点:\n\n1. cookie，session，token(json web token,jwt)的区别\n2. node 中 jwt 的应用\n\n直接参考文档即可：\nhttps://juejin.cn/post/7356788983483842587\n",{"_58":515,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/680/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/680/timeline",{"_58":518,"_60":61,"_62":519,"_64":520,"_66":521,"_68":522,"_70":523,"_72":524,"_74":525,"_76":526,"_78":527,"_111":528,"_131":132,"_133":24,"_134":-5,"_135":537,"_137":538,"_159":152,"_153":540,"_155":541,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":542,"_170":543,"_176":544,"_178":545,"_190":547,"_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},[529,536],{"_70":530,"_72":531,"_58":532,"_117":533,"_119":534,"_121":24,"_122":535},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":309,"_68":310,"_62":311,"_70":312,"_72":313,"_74":314,"_76":315,"_122":316,"_147":539,"_149":318,"_151":152,"_131":132,"_153":319,"_155":320,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-01-27T13:15:57Z","2024-01-28T14:05:05Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：大批量执行任务不卡顿\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":546,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/672/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/672/timeline",{"_58":549,"_60":61,"_62":550,"_64":551,"_66":552,"_68":553,"_70":554,"_72":555,"_74":556,"_76":557,"_78":558,"_111":559,"_131":132,"_133":24,"_134":-5,"_135":562,"_137":563,"_159":152,"_153":565,"_155":566,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":567,"_170":568,"_176":569,"_178":570,"_190":572,"_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},[560,561],{"_70":500,"_72":501,"_58":502,"_117":503,"_119":504,"_121":24,"_122":505},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":309,"_68":310,"_62":311,"_70":312,"_72":313,"_74":314,"_76":315,"_122":316,"_147":564,"_149":318,"_151":152,"_131":132,"_153":319,"_155":320,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-01-14T16:01:29Z","2024-01-14T16:01:30Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"`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":571,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/671/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/671/timeline",{"_58":574,"_60":61,"_62":575,"_64":576,"_66":577,"_68":578,"_70":579,"_72":580,"_74":581,"_76":582,"_78":583,"_111":584,"_131":132,"_133":24,"_134":-5,"_135":587,"_137":588,"_159":152,"_153":590,"_155":591,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":592,"_170":593,"_176":594,"_178":595,"_190":597,"_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},[585,586],{"_70":500,"_72":501,"_58":502,"_117":503,"_119":504,"_121":24,"_122":505},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":589,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-01-14T15:53:43Z","2024-01-14T15:53:44Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：网络协议\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":596,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/669/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/669/timeline",{"_58":599,"_60":61,"_62":600,"_64":601,"_66":602,"_68":603,"_70":604,"_72":605,"_74":606,"_76":607,"_78":608,"_111":609,"_131":132,"_133":24,"_134":-5,"_135":612,"_137":613,"_159":152,"_153":615,"_155":616,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":617,"_170":618,"_176":619,"_178":620,"_190":622,"_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},[610,611],{"_70":530,"_72":531,"_58":532,"_117":533,"_119":534,"_121":24,"_122":535},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":309,"_68":310,"_62":311,"_70":312,"_72":313,"_74":314,"_76":315,"_122":316,"_147":614,"_149":318,"_151":152,"_131":132,"_153":319,"_155":320,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-01-14T15:40:19Z","2024-01-14T15:53:58Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：权限管理模型\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":621,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/668/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/668/timeline",{"_58":624,"_60":61,"_62":625,"_64":626,"_66":627,"_68":628,"_70":629,"_72":630,"_74":631,"_76":632,"_78":633,"_111":634,"_131":132,"_133":24,"_134":-5,"_135":637,"_137":638,"_159":152,"_153":640,"_155":641,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":642,"_170":643,"_176":644,"_178":645,"_190":647,"_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},[635,636],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":309,"_68":310,"_62":311,"_70":312,"_72":313,"_74":314,"_76":315,"_122":316,"_147":639,"_149":318,"_151":152,"_131":132,"_153":319,"_155":320,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-01-07T16:37:24Z","2024-01-07T16:37:25Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：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

这是红色的

这是红色的