截图示例

\r\n

这是一个简单的截图示例。

\r\n \r\n

\r\n \r\n \r\n\r\n```\r\n\r\n这个例子中，在页面中创建了一个 `canvas` 元素，并设置其宽高和样式，将其放在页面最上方。在点击“截图”按钮时，通过 `toDataURL()` 方法将整个页面的截图转换为 base64 编码的图片数据，并打印到控制台上。",{"_54":274,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/188/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/188/timeline",{"_54":277,"_56":57,"_58":278,"_60":279,"_62":280,"_64":281,"_66":282,"_68":283,"_70":284,"_72":285,"_74":286,"_107":287,"_120":121,"_122":26,"_123":-5,"_124":295,"_126":296,"_148":178,"_142":308,"_144":309,"_147":-5,"_151":152,"_153":310,"_158":-5,"_159":311,"_161":312,"_173":314,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/187","https://api.github.com/repos/pro-collection/interview-question/issues/187/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/187/comments","https://api.github.com/repos/pro-collection/interview-question/issues/187/events","https://github.com/pro-collection/interview-question/issues/187",1640837439,"I_kwDOJGDC6c5hzTE_",187,"前端单页应用 History 路由模式，需要如何配置 nginx？",{"_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},[288],{"_66":289,"_68":290,"_54":291,"_113":292,"_115":293,"_117":26,"_118":294},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","工程化","1d76db","web 项目工程化",[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":304,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD","高","高级别面试问题",{"_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},425,"2023-03-06T15:00:27Z","2025-02-10T16:49:33Z","2023-03-26T09:30:59Z","2023-04-03T01:27:28Z",{"_155":141,"_156":141,"_157":141},"前端单页应用使用 History 路由模式，需要将路由的控制交给前端，而不是后端处理，因此需要配置 nginx 让其将所有请求都指向 index.html 页面，让前端来处理路由。\n\n具体配置可以参考以下 nginx 配置：\n\n```bash\nbashCopy codeserver {\n listen 80;\n server_name example.com; # 域名或 IP 地址\n\n location / {\n root /path/to/your/app; # 项目根目录\n index index.html;\n try_files $uri $uri/ /index.html; # 将所有请求都指向 index.html 页面\n }\n}\n```\n\n以上配置中，`try_files` 指令会尝试将请求映射到对应的文件，如果找不到，则会将请求转发到 `/index.html` 页面，由前端来处理路由。同时，`root` 指令需要指向前端应用的根目录。",{"_54":313,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/187/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/187/timeline",{"_54":316,"_56":57,"_58":317,"_60":318,"_62":319,"_64":320,"_66":321,"_68":322,"_70":323,"_72":324,"_74":325,"_107":326,"_120":121,"_122":26,"_123":-5,"_124":334,"_126":335,"_148":141,"_142":337,"_144":338,"_147":-5,"_151":152,"_153":339,"_158":-5,"_159":340,"_161":341,"_173":343,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/186","https://api.github.com/repos/pro-collection/interview-question/issues/186/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/186/comments","https://api.github.com/repos/pro-collection/interview-question/issues/186/events","https://github.com/pro-collection/interview-question/issues/186",1640836952,"I_kwDOJGDC6c5hzS9Y",186,"中间人攻击是什么？",{"_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},[327],{"_66":328,"_68":329,"_54":330,"_113":331,"_115":332,"_117":26,"_118":333},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":336,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T09:29:08Z","2025-02-09T15:08:50Z",{"_155":141,"_156":141,"_157":141},"中间人攻击（Man-in-the-Middle Attack，简称MITM）是一种常见的网络攻击手段，以下是关于它的详细介绍：\n\n### 定义\n中间人攻击是攻击者在通信双方不知情的情况下，插入到通信链路中间，拦截、窃听、篡改甚至伪造通信双方之间传输的数据，从而达到获取敏感信息、干扰通信或进行其他恶意操作的目的。攻击者就像处在通信双方中间的“中间人”，使得通信双方误以为是在直接与对方通信，而实际上他们之间的通信都经过了攻击者的处理。\n\n### 攻击方式\n- **嗅探与窃听**：攻击者通过将自己的设备接入目标网络，使用嗅探工具监听网络中传输的数据包。例如在未加密的公共Wi-Fi网络中，攻击者可以轻松获取用户发送和接收的信息，包括登录凭证、聊天记录、电子邮件内容等。\n- **会话劫持**：攻击者在用户与目标服务器建立会话的过程中，窃取用户的会话标识，如会话ID。一旦获取到有效的会话标识，攻击者就可以冒充用户与服务器进行交互，执行用户权限内的各种操作，如转账、修改密码等。\n- **DNS欺骗**：攻击者篡改域名系统（DNS）服务器的记录，将用户请求的域名解析到恶意服务器的IP地址。当用户访问该域名时，实际上会连接到攻击者控制的服务器，攻击者可以获取用户输入的信息，或者向用户提供伪造的内容。\n- **ARP欺骗**：在局域网中，攻击者通过发送虚假的地址解析协议（ARP）消息，将自己的MAC地址与目标设备的IP地址进行绑定，使得局域网内的其他设备将发送给目标设备的数据发送到攻击者的设备上，从而实现对数据的拦截和篡改。\n\n### 攻击场景\n- **公共网络环境**：在咖啡馆、机场等公共场所的免费Wi-Fi网络中，用户连接到网络后，攻击者可能会搭建一个与正常网络名称相似的恶意Wi-Fi热点，诱导用户连接。一旦用户连接到恶意热点，攻击者就可以实施中间人攻击，窃取用户的敏感信息。\n- **企业网络内部**：攻击者可能会利用企业网络中的漏洞或弱密码，入侵企业内部网络，然后在内部网络中实施中间人攻击，获取企业的商业机密、员工的个人信息等。\n- **移动设备通信**：攻击者可以通过伪造基站或利用移动网络中的漏洞，拦截移动设备与基站之间的通信，获取用户的通话内容、短信信息、上网数据等。\n\n### 防范措施\n- **使用加密通信**：在网络通信中，使用SSL/TLS等加密协议对数据进行加密传输，使攻击者即使拦截到数据也难以解密查看内容。\n- **验证身份**：在建立连接时，对通信双方的身份进行严格验证，确保与合法的服务器或用户进行通信。\n- **更新系统和软件**：及时更新操作系统、浏览器、应用程序等软件，修复可能存在的安全漏洞，降低被中间人攻击的风险。\n- **注意网络环境**：避免连接不明来源的Wi-Fi网络，尤其是那些没有密码或名称可疑的网络。在公共网络中，尽量使用VPN等安全连接方式。\n\n",{"_54":342,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/186/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/186/timeline",{"_54":345,"_56":57,"_58":346,"_60":347,"_62":348,"_64":349,"_66":350,"_68":351,"_70":352,"_72":353,"_74":354,"_107":355,"_120":121,"_122":26,"_123":-5,"_124":363,"_126":364,"_148":141,"_142":376,"_144":377,"_147":-5,"_151":152,"_153":378,"_158":-5,"_159":379,"_161":380,"_173":382,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/185","https://api.github.com/repos/pro-collection/interview-question/issues/185/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/185/comments","https://api.github.com/repos/pro-collection/interview-question/issues/185/events","https://github.com/pro-collection/interview-question/issues/185",1640836314,"I_kwDOJGDC6c5hzSza",185,"TypeScript is 这个关键字是做什么呢？",{"_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},[356],{"_66":357,"_68":358,"_54":359,"_113":360,"_115":361,"_117":26,"_118":362},5232527330,"LA_kwDOJGDC6c8AAAABN-IH4g","https://api.github.com/repos/pro-collection/interview-question/labels/TypeScript","TypeScript","258B51","TypeScript 语法部分",[],{"_54":365,"_64":366,"_58":367,"_66":368,"_68":369,"_70":178,"_72":370,"_118":371,"_136":372,"_138":373,"_140":141,"_120":121,"_142":374,"_144":375,"_146":-5,"_147":-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-03-26T09:26:44Z","2023-03-26T09:26:45Z",{"_155":141,"_156":141,"_157":141},"`is` 是 TypeScript 中的一个关键字，用于创建类型保护。在 TypeScript 中，类型保护是一种用于确定变量是否符合某种类型的方法。当我们使用 `is` 关键字创建一个类型保护时，它会在运行时对变量进行判断，然后返回一个布尔值。\n\n具体来说，我们可以通过定义一个返回值为布尔类型的函数，并在函数内部进行类型判断来创建类型保护。比如：\n\n```csharp\ncsharpCopy codefunction isString(value: any): value is string {\n return typeof value === 'string';\n}\n```\n\n在这个例子中，我们定义了一个名为 `isString` 的函数，它接收一个任意类型的参数 `value`，并通过 `typeof` 运算符判断 `value` 是否为字符串。如果是字符串，函数返回 `true`，否则返回 `false`。\n\n使用时，我们可以通过将变量传递给 `isString` 函数来判断变量是否为字符串类型：\n\n```rust\nrustCopy codeconst str = 'hello';\nif (isString(str)) {\n console.log(str.length);\n}\n```\n\n在这个例子中，由于 `str` 是字符串类型，所以 `isString(str)` 返回 `true`，`if` 语句内的代码会被执行，输出字符串的长度。如果 `str` 不是字符串类型，`isString(str)` 返回 `false`，`if` 语句内的代码不会被执行。\n\n这样，在使用变量之前进行类型保护，可以避免在运行时出现类型错误，提高代码的健壮性。",{"_54":381,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/185/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/185/timeline",{"_54":384,"_56":57,"_58":385,"_60":386,"_62":387,"_64":388,"_66":389,"_68":390,"_70":391,"_72":392,"_74":393,"_107":394,"_120":121,"_122":26,"_123":-5,"_124":396,"_126":397,"_148":141,"_142":399,"_144":400,"_147":-5,"_151":152,"_153":401,"_158":-5,"_159":402,"_161":403,"_173":405,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/184","https://api.github.com/repos/pro-collection/interview-question/issues/184/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/184/comments","https://api.github.com/repos/pro-collection/interview-question/issues/184/events","https://github.com/pro-collection/interview-question/issues/184",1640835602,"I_kwDOJGDC6c5hzSoS",184,"前端如何防止加载外域脚本？",{"_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},[395],{"_66":328,"_68":329,"_54":330,"_113":331,"_115":332,"_117":26,"_118":333},[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":398,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T09:24:28Z","2023-03-26T09:24:29Z",{"_155":141,"_156":141,"_157":141},"前端可以通过以下方式防止加载外域脚本：\n\n1. 使用 Content Security Policy (CSP)：CSP 是一个 HTTP 头，可以限制页面可以从哪些源加载资源。通过 CSP，可以禁止加载外域脚本，从而防止 XSS 攻击等安全问题。\n\n2. 使用 Subresource Integrity (SRI)：SRI 是一个浏览器功能，可以确保在加载外部资源时，它们的内容没有被篡改过。通过在 script 标签中添加 integrity 属性，可以指定资源的校验和，浏览器会校验资源是否与 integrity 值匹配，从而确保资源没有被篡改过。\n\n3. 避免使用动态脚本加载：使用 document.createElement('script') 创建 script 元素，并手动设置其 src 属性，可以避免使用 eval() 动态执行脚本。动态加载脚本的方式可能会受到中间人攻击，从而加载恶意脚本。\n\n4. 避免使用不安全的协议加载资源：使用 HTTPS 加载资源可以确保资源在传输过程中不会被篡改。避免使用 HTTP 或者 file 协议加载资源，这些协议容易受到中间人攻击。\n\n综上，前端可以通过以上方式防止加载外域脚本，提高应用程序的安全性。",{"_54":404,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/184/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/184/timeline",{"_54":407,"_56":57,"_58":408,"_60":409,"_62":410,"_64":411,"_66":412,"_68":413,"_70":414,"_72":415,"_74":416,"_107":417,"_120":121,"_122":26,"_123":-5,"_124":419,"_126":420,"_148":178,"_142":433,"_144":434,"_147":-5,"_151":152,"_153":435,"_158":-5,"_159":436,"_161":437,"_173":439,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/183","https://api.github.com/repos/pro-collection/interview-question/issues/183/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/183/comments","https://api.github.com/repos/pro-collection/interview-question/issues/183/events","https://github.com/pro-collection/interview-question/issues/183",1640833691,"I_kwDOJGDC6c5hzSKb",183,"HTTP/3 是基于 UDP 的协议，那么他是如何保障安全性的？",{"_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},[418],{"_66":328,"_68":329,"_54":330,"_113":331,"_115":332,"_117":26,"_118":333},[],{"_54":421,"_64":422,"_58":423,"_66":424,"_68":425,"_70":426,"_72":427,"_118":428,"_136":429,"_138":430,"_140":141,"_120":121,"_142":431,"_144":432,"_146":-5,"_147":-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-03-26T09:18:32Z","2024-07-05T09:52:10Z",{"_155":141,"_156":141,"_157":141},"HTTP/3是基于UDP的协议，因此在设计时需要考虑安全性问题。为了保障安全性，HTTP/3使用了一个新的加密协议——QUIC Crypto。\n\nQUIC Crypto使用了一种名为\"0-RTT安全连接\"的机制，允许客户端在第一次请求时就可以建立安全连接，从而减少连接建立的延迟。此外，HTTP/3还使用了数字证书来验证服务器身份，以确保通信的安全性。\n\n在HTTP/3中，每个数据包都使用一个独特的标识符（Connection ID）来标识。这个标识符会在每个数据包中包含，以便服务器能够识别它们。这种方式可以防止攻击者进行连接欺骗，从而提高了安全性。\n\n另外，HTTP/3还使用了一些其他的技术来提高安全性，如0-RTT加密、零轮延迟、源地址验证、密钥派生和更新等。\n\n综上所述，HTTP/3采用了一系列安全机制来保护通信安全，使其能够在基于UDP的网络环境下运行，并提供更好的性能和安全性。",{"_54":438,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/183/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/183/timeline",{"_54":441,"_56":57,"_58":442,"_60":443,"_62":444,"_64":445,"_66":446,"_68":447,"_70":448,"_72":449,"_74":450,"_107":451,"_120":121,"_122":26,"_123":-5,"_124":453,"_126":454,"_148":141,"_142":456,"_144":457,"_147":-5,"_151":152,"_153":458,"_158":-5,"_159":459,"_161":460,"_173":462,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/182","https://api.github.com/repos/pro-collection/interview-question/issues/182/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/182/comments","https://api.github.com/repos/pro-collection/interview-question/issues/182/events","https://github.com/pro-collection/interview-question/issues/182",1640832289,"I_kwDOJGDC6c5hzR0h",182,"http3 QUIC 是什么协议？",{"_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},[452],{"_66":328,"_68":329,"_54":330,"_113":331,"_115":332,"_117":26,"_118":333},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":455,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-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-03-26T09:13:35Z","2023-03-26T09:13:40Z",{"_155":141,"_156":141,"_157":141},"HTTP/3（或称为HTTP-over-QUIC）是一个基于QUIC协议的新版本的HTTP协议。QUIC（Quick UDP Internet Connections）是由Google设计的一个基于UDP协议的传输层协议，旨在解决HTTP/2协议存在的一些问题。\n\nHTTP/3中引入了QUIC的一些特性，如0-RTT连接建立、基于UDP的传输、数据流多路复用和快速恢复等，这些特性有助于提高性能和安全性。与HTTP/2相比，HTTP/3采用了新的二进制编码协议（QUIC Crypto）来加密和验证数据，以提供更好的安全性。\n\n此外，HTTP/3还可以更好地适应现代网络环境下的多元化应用需求。由于QUIC协议基于UDP协议，因此可以更好地适应移动网络和高丢包率网络等不稳定的网络环境。同时，HTTP/3可以更好地支持多媒体内容和实时通信等应用场景。",{"_54":461,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/182/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/182/timeline",{"_54":464,"_56":57,"_58":465,"_60":466,"_62":467,"_64":468,"_66":469,"_68":470,"_70":471,"_72":472,"_74":473,"_107":474,"_120":121,"_122":26,"_123":-5,"_124":476,"_126":477,"_148":141,"_142":479,"_144":480,"_147":-5,"_151":152,"_153":481,"_158":-5,"_159":482,"_161":483,"_173":485,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/181","https://api.github.com/repos/pro-collection/interview-question/issues/181/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/181/comments","https://api.github.com/repos/pro-collection/interview-question/issues/181/events","https://github.com/pro-collection/interview-question/issues/181",1640831977,"I_kwDOJGDC6c5hzRvp",181,"http1.1 持久连接和 http2 的多路复用有什么区别？",{"_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},[475],{"_66":328,"_68":329,"_54":330,"_113":331,"_115":332,"_117":26,"_118":333},[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":478,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T09:12:29Z","2023-03-26T09:12:30Z",{"_155":141,"_156":141,"_157":141},"HTTP/1.1和HTTP/2都是HTTP协议的不同版本，在网络传输和性能方面有很大的差别。\n\nHTTP/1.1使用的是“管线化请求”和“持久连接”来提高性能，而HTTP/2则引入了更多的特性，其中最重要的特性是“多路复用”。\n\n“管线化请求”是HTTP/1.1提出的一种优化方法，它可以让浏览器同时发出多个请求，从而避免了HTTP/1.1中因为请求阻塞导致的性能问题。但是，由于HTTP/1.1的“管线化请求”存在“队头阻塞”（head-of-line blocking）问题，即前面一个请求没有得到响应时，后面的请求必须等待，导致性能并没有得到很大提升。\n\n“持久连接”是HTTP/1.1中另一种提高性能的方法，它可以在一个TCP连接中传输多个HTTP请求和响应，避免了每个请求都需要建立和关闭连接的开销。但是，由于HTTP/1.1中的“持久连接”是按顺序发送请求和响应的，所以依然存在“队头阻塞”的问题。\n\nHTTP/2则引入了“多路复用”（multiplexing）这一特性，可以在一个TCP连接上同时传输多个HTTP请求和响应，避免了“队头阻塞”问题。它使用二进制分帧（binary framing）技术将HTTP请求和响应分成多个帧（frame），并使用流（stream）来标识不同的请求和响应，从而实现了更高效的网络传输和更低的延迟。此外，HTTP/2还引入了头部压缩（header compression）和服务器推送（server push）等特性。\n\n因此，HTTP/2的多路复用比HTTP/1.1的管线化请求和持久连接更为高效、灵活，能够更好地支持现代Web应用的性能要求。",{"_54":484,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/181/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/181/timeline",{"_54":487,"_56":57,"_58":488,"_60":489,"_62":490,"_64":491,"_66":492,"_68":493,"_70":494,"_72":495,"_74":496,"_107":497,"_120":121,"_122":26,"_123":-5,"_124":499,"_126":500,"_148":178,"_142":502,"_144":503,"_147":-5,"_151":152,"_153":504,"_158":-5,"_159":505,"_161":506,"_173":508,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/180","https://api.github.com/repos/pro-collection/interview-question/issues/180/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/180/comments","https://api.github.com/repos/pro-collection/interview-question/issues/180/events","https://github.com/pro-collection/interview-question/issues/180",1640831366,"I_kwDOJGDC6c5hzRmG",180,"HTTP协议的不同版本的主要特点有哪些？",{"_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},[498],{"_66":328,"_68":329,"_54":330,"_113":331,"_115":332,"_117":26,"_118":333},[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":501,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T09:10:32Z","2023-03-26T09:16:48Z",{"_155":141,"_156":141,"_157":141},"HTTP协议的不同版本的主要特点如下表所示：\n\n|版本|发布时间|主要特点|\n|---|---|---|\n|HTTP/0.9|1991年|只支持GET方法，没有Header和Body|\n|HTTP/1.0|1996年|引入Header、POST方法、响应码、缓存等特性|\n|HTTP/1.1|1999年|引入持久连接、管道化请求、分块传输编码、Host头、缓存控制等特性|\n|HTTP/2|2015年|引入二进制分帧、头部压缩、流量控制、多路复用等特性|\n|HTTP/3|2021年|引入QUIC协议，改进网络传输性能|\n\n\n需要注意的是，HTTP/1.x和HTTP/2都支持TLS加密传输，即HTTPS协议。HTTP/3则是基于QUIC协议的，使用TLS 1.3进行加密传输。",{"_54":507,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/180/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/180/timeline",{"_54":510,"_56":57,"_58":511,"_60":512,"_62":513,"_64":514,"_66":515,"_68":516,"_70":517,"_72":518,"_74":519,"_107":520,"_120":121,"_122":26,"_123":-5,"_124":528,"_126":529,"_148":141,"_142":531,"_144":532,"_147":-5,"_151":152,"_153":533,"_158":-5,"_159":534,"_161":535,"_173":537,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/179","https://api.github.com/repos/pro-collection/interview-question/issues/179/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/179/comments","https://api.github.com/repos/pro-collection/interview-question/issues/179/events","https://github.com/pro-collection/interview-question/issues/179",1640821953,"I_kwDOJGDC6c5hzPTB",179,"[React] useEffect的第二个参数，如何判断依赖是否发生变化？",{"_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},[521],{"_66":522,"_68":523,"_54":524,"_113":525,"_115":526,"_117":26,"_118":527},5252532904,"LA_kwDOJGDC6c8AAAABORNKqA","https://api.github.com/repos/pro-collection/interview-question/labels/web%E6%A1%86%E6%9E%B6","web框架","CB446E","web 框架相关知识",[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":530,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T08:36:21Z","2023-03-26T08:37:57Z",{"_155":141,"_156":141,"_157":141},"`useEffect`的第二个参数是一个依赖数组，用于判断副作用函数的依赖是否发生变化。React使用JavaScript的`Object.is`方法来判断依赖项是否发生变化。在比较依赖项时，React首先检查依赖项的值是否相等。如果依赖项的值是引用类型，React会比较它们的引用地址，而不是比较它们的属性值。因此，在比较引用类型时，即使对象具有相同的属性值，但它们的引用地址不同，React仍然认为它们是不同的。\n\n需要注意的是，如果依赖项是一个数组或对象，由于它们是引用类型，因此即使数组或对象中的元素或属性没有发生变化，但数组或对象本身的引用地址发生变化，也会导致React重新执行副作用函数。在这种情况下，我们可以使用`useCallback`和`useMemo`来缓存回调函数和计算结果，以便避免在依赖数组发生变化时重新计算和创建。",{"_54":536,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/179/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/179/timeline",{"_54":539,"_56":57,"_58":540,"_60":541,"_62":542,"_64":543,"_66":544,"_68":545,"_70":546,"_72":547,"_74":548,"_107":549,"_120":121,"_122":26,"_123":-5,"_124":551,"_126":552,"_148":141,"_142":554,"_144":555,"_147":-5,"_151":152,"_153":556,"_158":-5,"_159":557,"_161":558,"_173":560,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/178","https://api.github.com/repos/pro-collection/interview-question/issues/178/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/178/comments","https://api.github.com/repos/pro-collection/interview-question/issues/178/events","https://github.com/pro-collection/interview-question/issues/178",1640820151,"I_kwDOJGDC6c5hzO23",178,"[React] useRef、ref、forwardsRef 的区别是什么?",{"_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},[550],{"_66":522,"_68":523,"_54":524,"_113":525,"_115":526,"_117":26,"_118":527},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":553,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-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-03-26T08:29:41Z","2023-03-26T08:36:50Z",{"_155":141,"_156":141,"_157":141},"在 React 中，`ref` 是一种用于访问 DOM 元素或组件实例的方法，`useRef` 和 `forwardRef` 是 `ref` 的两个相关 Hook 和高阶组件。\n\n1. `ref`：`ref` 是 React 中用于访问 DOM 元素或组件实例的方法。在函数组件中，可以使用 `useRef` Hook 来创建一个 `ref` 对象，然后将其传递给需要引用的元素或组件。在类组件中，可以直接在类中定义 `ref` 属性，并将其设置为元素或组件的实例。\n\n2. `useRef`：`useRef` 是 React 中的 Hook，用于创建一个 `ref` 对象，并在组件生命周期内保持其不变。`useRef` 可以用于访问 DOM 元素或组件实例，并且在每次渲染时都会返回同一个 `ref` 对象。通常情况下，`useRef` 更适合用于存储不需要触发重新渲染的值，例如定时器的 ID 或者其他副作用。\n\n3. `forwardRef`：`forwardRef` 是一个高阶组件，用于将 `ref` 属性转发给其子组件。通常情况下，如果一个组件本身并不需要使用 `ref` 属性，但是其子组件需要使用 `ref` 属性，那么可以使用 `forwardRef` 来传递 `ref` 属性。`forwardRef` 接受一个函数作为参数，并将 `ref` 对象作为第二个参数传递给该函数，然后返回一个新的组件，该组件接受 `ref` 属性并将其传递给子组件。\n\n简而言之，`ref` 是 React 中访问 DOM 元素或组件实例的方法，`useRef` 是一个 Hook，用于创建并保持一个不变的 `ref` 对象，`forwardRef` 是一个高阶组件，用于传递 `ref` 属性给子组件。",{"_54":559,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/178/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/178/timeline",{"_54":562,"_56":57,"_58":563,"_60":564,"_62":565,"_64":566,"_66":567,"_68":568,"_70":569,"_72":570,"_74":571,"_107":572,"_120":121,"_122":26,"_123":-5,"_124":574,"_126":575,"_148":141,"_142":577,"_144":578,"_147":-5,"_151":152,"_153":579,"_158":-5,"_159":580,"_161":581,"_173":583,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/176","https://api.github.com/repos/pro-collection/interview-question/issues/176/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/176/comments","https://api.github.com/repos/pro-collection/interview-question/issues/176/events","https://github.com/pro-collection/interview-question/issues/176",1640818977,"I_kwDOJGDC6c5hzOkh",176,"WebWorker、SharedWorker 和 ServiceWorker 有哪些区别？",{"_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},[573],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":421,"_64":422,"_58":423,"_66":424,"_68":425,"_70":426,"_72":427,"_118":428,"_136":576,"_138":430,"_140":141,"_120":121,"_142":431,"_144":432,"_146":-5,"_147":-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-03-26T08:25:17Z","2023-03-26T08:25:18Z",{"_155":141,"_156":141,"_157":141},"### 前言\n\n众所周知，JavaScript 是单线程的语言。当我们面临需要大量计算的场景时（比如视频解码等），UI 线程就会被阻塞，甚至浏览器直接卡死。现在前端遇到大量计算的场景越来越多，为了有更好的体验，HTML5 中提出了 Web Worker 的概念。Web Worker 可以使脚本运行在新的线程中，它们独立于主线程，可以进行大量的计算活动，而不会影响主线程的 UI 渲染。当计算结束之后，它们可以把结果发送给主线程，从而形成了高效、良好的用户体验。Web Worker 是一个统称，具体可以细分为普通的 `Worker、SharedWorker 和 ServiceWorker` 等，接下来我们一一介绍其使用方法和适合的场景。\n\n### 普通 Worker\n\n1. 创建 Worker 通过 new 的方式来生成一个实例，参数为 url 地址，该地址必须和其创建者是同源的。\n\n```javascript\n const worker = new Worker('./worker.js'); // 参数是url，这个url必须与创建者同源 \n\n```\n\n2. Worker 的方法\n\n* onmessage 主线程中可以在 Worker 上添加 onmessage 方法，用于监听 Worker 的信息。\n* onmessageerror 主线程中可以在 Worker 上添加 onmessageerror 方法，用于监听 Worker 的错误信息。\n* postMessage() 主线程通过此方法给 Worker 发送消息，发送参数的格式不限（可以是数组、对象、字符串等），可以根据自己的业务选择。\n* terminate() 主线程通过此方法终止 Worker 的运行。\n\n\n3. 通信\n\nWorker 的作用域跟主线程中的 Window 是相互独立的，并且 Worker 中是获取不到 DOM 元素的。所以在 Worker 中你无法使用 Window 变量。取而代之的是可以用 self 来表示全局对象。self 上有哪些方法和属性，感兴趣的小伙伴可以自行输出查看。比较常用的方法是 onmessage、postMessage，主要用来跟主线程进行通信。\n\n4. Worker 中引用其他脚本的方式\n\n跟常用的 JavaScript 一样，Worker 中也是可以引入其他的模块的。但是方式不太一样，是通过 importScripts 来引入。这边我为了演示，新建了一个 constant.js。在 constant.js 定义了一些变量和函数。\n\n示例：\n\n```javascript\n // Worker.js\n importScripts('constant.js');\n // 下面就可以获取到 constant.js 中的所有变量了\n\n // constant.js\n // 可以在 Worker 中使用\n const a = 111;\n\n // 不可以在 Worker 中使用，原因未知\n const b = function () {\n console.log('test');\n };\n\n // 可以在 Worker 中使用\n function c() {\n console.log('test');\n }\n\n```\n\n5. 调试方法\n\n写代码难免要进行调试。Worker 的调试在浏览器控制台中有专门展示的地方, 以 chrome 浏览器为例： `dev tools --> source --> worker.js`\n\n6. 常见使用场景\n * 一般的视频网站以优酷为例，当我们开始播放优酷视频的时候，就能看到它会调用 Worker，解码的代码应该写在 Worker 里面。\n * 需要大量计算的网站比如 imgcook 这个网站，它能在前端解析 sketch 文件，这部分解析的逻辑就写在 Worker 里。\n\n\n### SharedWorker\n\nSharedWorker 是一种特定的 Worker。从它的命名就能知道，它是一种共享数据的 Worker。它可以同时被多个浏览器环境访问。这些浏览器环境可以是多个 window, iframes 或者甚至是多个 Worker，只要这些 Workers 处于同一主域。为跨浏览器 tab 共享数据提供了一种解决方案。\n\n1. 创建 SharedWorker\n\n 创建的方法跟上面普通 Worker 完全一模一样。\n\n```javaScript\n const worker = new SharedWorker(\"./shareWorker.js\"); // 参数是url，这个url必须与创建者同源 \n\n```\n\n2. SharedWorker 的方法\n\n SharedWorker 的方法都在 port 上，这是它与普通 Worker 不同的地方。\n\n* port.onmessage\n\n 主线程中可以在 worker 上添加 onmessage 方法，用于监听 SharedWorker 的信息\n\n\n* port.postMessage()\n\n 主线程通过此方法给 SharedWorker 发送消息，发送参数的格式不限\n\n\n* port.start()\n\n 主线程通过此方法开启 SharedWorker 之间的通信\n\n\n* port.close()\n\n 主线程通过此方法关闭 SharedWorker\n\n\n3. 通信\n\n SharedWorker 跟普通的 Worker 一样，可以用 self 来表示全局对象。不同之处是，它需要等 port 连接成功之后，利用 port 的onmessage、postMessage，来跟主线程进行通信。当你打开多个窗口的时候，SharedWorker 的作用域是公用的，这也是其特点。\n\n\n\n4. Worker 中引用其他脚本\n\n 这个与普通的 Worker 方法一样，使用 importScripts\n\n5. 调试方法\n\n 在浏览器中查看和调试 SharedWorker 的代码，需要输入 chrome://inspect/\n\n\n### ServiceWorker\n\nServiceWorker 一般作为 Web 应用程序、浏览器和网络之间的代理服务。他们旨在创建有效的离线体验，拦截网络请求，以及根据网络是否可用采取合适的行动，更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步 API。\n\n1. 创建 ServiceWorker\n\n```javaScript\n // index.js\n if ('serviceWorker' in navigator) {\n window.addEventListener('load', function () {\n navigator.serviceWorker\n .register('./serviceWorker.js', { scope: '/page/' })\n .then(\n function (registration) {\n console.log(\n 'ServiceWorker registration successful with scope: ',\n registration.scope\n );\n },\n function (err) {\n console.log('ServiceWorker registration failed: ', err);\n }\n );\n });\n }\n\n```\n\n只要创建了 ServiceWorker，不管这个创建 ServiceWorker 的 html 是否打开，这个 ServiceWorker 是一直存在的。它会代理范围是根据 scope 决定的，如果没有这个参数，则其代理范围是创建目录同级别以及子目录下所有页面的网络请求。代理的范围可以通过registration.scope 查看。\n\n2. 安装 ServiceWorker\n\n```javascript\n // serviceWorker.js\n const CACHE_NAME = 'cache-v1';\n // 需要缓存的文件\n const urlsToCache = [\n '/style/main.css',\n '/constant.js',\n '/serviceWorker.html',\n '/page/index.html',\n '/serviceWorker.js',\n '/image/131.png',\n ];\n self.oninstall = (event) => {\n event.waitUntil(\n caches\n .open(CACHE_NAME) // 这返回的是promise\n .then(function (cache) {\n return cache.addAll(urlsToCache); // 这返回的是promise\n })\n );\n };\n\n```\n\n在上述代码中，我们可以看到，在 install 事件的回调中，我们打开了名字为 cache-v1 的缓存，它返回的是一个 promise。在打开缓存之后，我们需要把要缓存的文件 add 进去，基本上所有类型的资源都可以进行缓存，例子中缓存了 css、js、html、png。如果所有缓存数据都成功，就表示 ServiceWorker 安装成功；如果控制台提示 Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed，则表示安装失败。\n\n3. 缓存和返回请求\n\n```javascript\n self.onfetch = (event) => {\n event.respondWith(\n caches\n .match(event.request) // 此方法从服务工作线程所创建的任何缓存中查找缓存的结果\n .then(function (response) {\n // response为匹配到的缓存资源，如果没有匹配到则返回undefined，需要fetch资源\n if (response) {\n return response;\n }\n return fetch(event.request);\n })\n );\n };\n\n```\n\n在 fetch 事件的回调中，我们去匹配 cache 中的资源。如果匹配到，则使用缓存资源；没有匹配到则用 fetch 请求。正因为 ServiceWorker 可以代理网络请求，所以为了安全起见，规范中规定它只能在 https 和 localhost 下才能开启。\n\n4. 调试方法\n\n 在浏览器中查看和调试 ServiceWorker 的代码，需要输入 chrome://inspect/#service-workers\n\n\n5. 常见使用场景\n\n 缓存资源文件，加快渲染速度\n\n 这个我们以语雀为例。我们在打开语雀网站的时候，可以看到它使用 ServiceWorker 缓存了很多 css、js 文件，从而达到优化的效果。\n\n\n### 总结\n\n|类型|Worker|SharedWorker|ServiceWorker|\n|:---|:---|:---|:---|\n|通信方式|postMessage|port.postMessage|单向通信，通过addEventListener 监听serviceWorker 的状态|\n|使用场景|适合大量计算的场景|适合跨 tab、iframes之间共享数据|缓存资源、网络优化|\n|兼容性|>= IE 10>= Chrome 4|不支持 IE、Safari、Android、iOS>= Chrome 4|不支持 IE>= Chrome 40|\n\n\n本文介绍了 3 种 Worker，他们分别适合不同的场景，总结如上面表格。普通的 Worker 可以在需要大量计算的时候使用，创建新的线程可以降低主线程的计算压力，不会导致 UI 卡顿。SharedWorker 主要是为不同的 window、iframes 之间共享数据提供了另外一个解决方案。ServiceWorker 可以缓存资源，提供离线服务或者是网络优化，加快 Web 应用的开启速度，更多是优化体验方面的。\n\n示例代码：[github.com/Pulset/Web-…](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FPulset%2FWeb-Worker \"https://github.com/Pulset/Web-Worker\")\n\n### 参考文献\n\n* https://juejin.cn/post/7091068088975622175\n* [在网络应用中添加服务工作线程和离线功能](https://link.juejin.cn?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ffundamentals%2Fcodelabs%2Foffline \"https://developers.google.com/web/fundamentals/codelabs/offline\")\n* [Service worker overview](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.chrome.com%2Fdocs%2Fworkbox%2Fservice-worker-overview%2F \"https://developer.chrome.com/docs/workbox/service-worker-overview/\")\n* [Workers](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FWorker \"https://developer.mozilla.org/zh-CN/docs/Web/API/Worker\")\n* [SharedWorker](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FSharedWorker \"https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker\")\n",{"_54":582,"_164":178,"_165":178,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/176/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/176/timeline",{"_54":585,"_56":57,"_58":586,"_60":587,"_62":588,"_64":589,"_66":590,"_68":591,"_70":592,"_72":593,"_74":594,"_107":595,"_120":121,"_122":26,"_123":-5,"_124":597,"_126":598,"_148":141,"_142":600,"_144":600,"_147":-5,"_151":152,"_153":601,"_158":-5,"_159":602,"_161":603,"_173":605,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/175","https://api.github.com/repos/pro-collection/interview-question/issues/175/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/175/comments","https://api.github.com/repos/pro-collection/interview-question/issues/175/events","https://github.com/pro-collection/interview-question/issues/175",1640815226,"I_kwDOJGDC6c5hzNp6",175,"Promise finally 怎么实现的？",{"_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},[596],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":599,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T08:11:20Z",{"_155":141,"_156":141,"_157":141},"`Promise.finally()` 方法是在 ES2018 中引入的，用于指定不管 Promise 状态如何都要执行的回调函数。与 `Promise.then()` 和 `Promise.catch()` 不同的是，`Promise.finally()` 方法不管 Promise 是成功还是失败都会执行回调函数，而且不会改变 Promise 的状态。如果返回的值是一个 Promise，那么 `Promise.finally()` 方法会等待该 Promise 执行完毕后再继续执行。\n\n`Promise.finally()` 方法的实现思路如下：\n\n1. `Promise.finally()` 方法接收一个回调函数作为参数，返回一个新的 Promise 实例。\n\n2. 在新的 Promise 实例的 `then()` 方法中，首先调用原 Promise 的 `then()` 方法，将原 Promise 的结果传递给下一个 `then()` 方法。\n\n3. 在新的 Promise 实例的 `then()` 方法中，调用回调函数并将原 Promise 的结果传递给回调函数。\n\n4. 如果回调函数返回一个 Promise，则需要在新的 Promise 实例的 `then()` 方法中等待该 Promise 执行完毕，再将结果传递给下一个 `then()` 方法。\n\n5. 在新的 Promise 实例的 `finally()` 方法中，返回一个新的 Promise 实例。\n\n下面是一个简单的实现示例：\n\n```javascript\nPromise.prototype.finally = function (callback) {\n let P = this.constructor;\n return this.then(\n value => P.resolve(callback()).then(() => value),\n reason => P.resolve(callback()).then(() => { throw reason })\n );\n}\n```\n\n这个实现方法中，使用了 `Promise.resolve()` 来返回一个新的 Promise 实例，因此可以避免了 Promise 链的状态改变。另外，由于 `finally()` 方法只是在 Promise 链的最后执行回调函数，因此不需要使用异步函数。",{"_54":604,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/175/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/175/timeline",{"_54":607,"_56":57,"_58":608,"_60":609,"_62":610,"_64":611,"_66":612,"_68":613,"_70":614,"_72":615,"_74":616,"_107":617,"_120":121,"_122":26,"_123":-5,"_124":619,"_126":620,"_148":141,"_142":622,"_144":622,"_147":-5,"_151":152,"_153":623,"_158":-5,"_159":624,"_161":625,"_173":627,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/174","https://api.github.com/repos/pro-collection/interview-question/issues/174/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/174/comments","https://api.github.com/repos/pro-collection/interview-question/issues/174/events","https://github.com/pro-collection/interview-question/issues/174",1640814914,"I_kwDOJGDC6c5hzNlC",174,"Promise then 第二个参数和 Promise.catch 的区别是什么?",{"_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},[618],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":621,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T08:10:06Z",{"_155":141,"_156":141,"_157":141},"`Promise.then()` 方法可以接受两个参数，第一个参数是 `onFulfilled` 回调函数，第二个参数是 `onRejected` 回调函数。当 Promise 状态变为 `fulfilled` 时，将会调用 `onFulfilled` 回调函数；当 Promise 状态变为 `rejected` 时，将会调用 `onRejected` 回调函数。其中，第二个参数 `onRejected` 是可选的。\n\n`Promise.catch()` 方法是一个特殊的 `Promise.then()` 方法，它只接受一个参数，即 `onRejected` 回调函数。如果 Promise 状态变为 `rejected`，则会调用 `onRejected` 回调函数；如果状态变为 `fulfilled`，则不会调用任何回调函数。因此，`Promise.catch()` 方法可以用来捕获 Promise 中的错误，相当于使用 `Promise.then(undefined, onRejected)`。\n\n区别主要在于使用的方式不同。`Promise.then(onFulfilled, onRejected)` 可以同时传递两个回调函数，用来处理 Promise 状态变为 `fulfilled` 或者 `rejected` 的情况；而 `Promise.catch(onRejected)` 则只能用来处理 Promise 状态变为 `rejected` 的情况，并且使用更加简洁明了。",{"_54":626,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/174/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/174/timeline",{"_54":629,"_56":57,"_58":630,"_60":631,"_62":632,"_64":633,"_66":634,"_68":635,"_70":636,"_72":637,"_74":638,"_107":639,"_120":121,"_122":26,"_123":-5,"_124":641,"_126":642,"_148":268,"_142":644,"_144":645,"_147":-5,"_151":152,"_153":646,"_158":-5,"_159":647,"_161":648,"_173":650,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/173","https://api.github.com/repos/pro-collection/interview-question/issues/173/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/173/comments","https://api.github.com/repos/pro-collection/interview-question/issues/173/events","https://github.com/pro-collection/interview-question/issues/173",1640814488,"I_kwDOJGDC6c5hzNeY",173,"为什么小程序里拿不到dom相关的api",{"_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},[640],{"_66":522,"_68":523,"_54":524,"_113":525,"_115":526,"_117":26,"_118":527},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":643,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-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-03-26T08:08:34Z","2023-09-19T07:16:43Z",{"_155":141,"_156":141,"_157":141},"小程序为了追求更高的性能和更好的安全性，采用了类Webview的渲染方案，并使用了自己的渲染引擎，与浏览器的渲染引擎不同。因此，小程序的API和浏览器的API并不完全相同。\r\n\r\n在小程序中，开发者可以使用WXML语言构建页面，WXML是一种类似HTML的标记语言，但并不是真正的HTML。小程序中的组件是由开发者提前定义好的，而不是由开发者在运行时动态生成的，因此在小程序中无法直接访问和操作DOM。相反，开发者需要使用小程序提供的API来操作组件。\r\n\r\n同时，小程序为了保证安全性，也限制了一些操作，如不允许使用eval函数和Function构造函数等动态生成代码的方式。",{"_54":649,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/173/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/173/timeline",{"_54":652,"_56":57,"_58":653,"_60":654,"_62":655,"_64":656,"_66":657,"_68":658,"_70":659,"_72":660,"_74":661,"_107":662,"_120":121,"_122":26,"_123":-5,"_124":664,"_126":665,"_148":141,"_142":667,"_144":668,"_147":-5,"_151":152,"_153":669,"_158":-5,"_159":670,"_161":671,"_173":673,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/172","https://api.github.com/repos/pro-collection/interview-question/issues/172/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/172/comments","https://api.github.com/repos/pro-collection/interview-question/issues/172/events","https://github.com/pro-collection/interview-question/issues/172",1640813780,"I_kwDOJGDC6c5hzNTU",172,"es6 class 装饰器是如何实现的？",{"_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},[663],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":666,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T08:06:20Z","2023-03-26T08:06:21Z",{"_155":141,"_156":141,"_157":141},"ES6 中的装饰器是一种特殊的语法，用于动态修改类的行为。在 JavaScript 中，装饰器本质上是一个函数，它可以接受一个类作为参数，并返回一个新的类，实现了类的增强或修改。装饰器可以被用于类、方法、属性等各种地方，可以方便地实现类似 AOP、元编程等功能。\n\n装饰器是 ES7 中的一个提案，目前还没有正式纳入标准。在 ES6 中使用装饰器需要借助第三方库，如 babel-plugin-transform-decorators-legacy。\n\n装饰器实现的基本原理是，在装饰器函数和被装饰对象之间建立一个代理层，通过代理层来实现装饰器的逻辑。在类的装饰器中，装饰器函数的第一个参数是被装饰的类本身，装饰器函数内部可以访问、修改该类的属性和方法。在方法和属性的装饰器中，装饰器函数的第一个参数分别是被装饰的方法或属性所在的类的原型对象，装饰器函数内部可以访问、修改该方法或属性的属性描述符等信息。\n\n以下是一个简单的装饰器示例，用于给类的方法添加一个计时器：\n\n```javascript\nfunction timer(target, name, descriptor) {\n const originalMethod = descriptor.value;\n descriptor.value = function (...args) {\n console.time(name);\n const result = originalMethod.apply(this, args);\n console.timeEnd(name);\n return result;\n };\n return descriptor;\n}\n\nclass MyClass {\n @timer\n myMethod() {\n // do something\n }\n}\n```\n\n在上面的示例中，timer 函数就是一个装饰器函数，它接受三个参数，分别是被装饰的方法所在类的原型对象、被装饰的方法的名称、被装饰的方法的属性描述符。在 timer 函数内部，将被装饰的方法替换为一个新的方法，新方法先执行 console.time() 方法，再执行原始方法，最后执行 console.timeEnd() 方法。最后将新的属性描述符返回，完成方法的装饰。\n\n通过类似这种方式，我们可以方便地实现各种类型的装饰器，以增强或修改类的行为。",{"_54":672,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/172/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/172/timeline",{"_54":675,"_56":57,"_58":676,"_60":677,"_62":678,"_64":679,"_66":680,"_68":681,"_70":682,"_72":683,"_74":684,"_107":685,"_120":121,"_122":26,"_123":-5,"_124":687,"_126":688,"_148":141,"_142":690,"_144":691,"_147":-5,"_151":152,"_153":692,"_158":-5,"_159":693,"_161":694,"_173":696,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/171","https://api.github.com/repos/pro-collection/interview-question/issues/171/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/171/comments","https://api.github.com/repos/pro-collection/interview-question/issues/171/events","https://github.com/pro-collection/interview-question/issues/171",1640813104,"I_kwDOJGDC6c5hzNIw",171,"[Vue] 响应式数据流驱动页面和传统的事件绑定命令式驱动页面，有何优劣？",{"_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},[686],{"_66":522,"_68":523,"_54":524,"_113":525,"_115":526,"_117":26,"_118":527},[],{"_54":365,"_64":366,"_58":367,"_66":368,"_68":369,"_70":178,"_72":370,"_118":371,"_136":689,"_138":373,"_140":141,"_120":121,"_142":374,"_144":375,"_146":-5,"_147":-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-03-26T08:04:06Z","2023-03-26T08:04:21Z",{"_155":141,"_156":141,"_157":141},"Vue 响应式数据流驱动页面和传统的事件绑定命令式驱动页面是两种不同的前端开发方式，它们的优劣势主要体现在代码编写方式、页面效果、开发效率和维护难度上。\n\n* 响应式数据流驱动页面：Vue 使用响应式的数据流来驱动页面的渲染和更新。Vue 的响应式系统会自动侦测数据的变化，并且重新渲染页面，开发者只需要专注于数据和页面的关系，而不用手动操作 DOM 元素。相比传统的命令式开发方式，响应式数据流驱动页面的代码更简洁、易于维护，开发效率更高。同时，Vue 的组件化开发模式也可以让开发者轻松地实现组件复用和代码复用。\n\n* 传统的事件绑定命令式驱动页面：传统的事件绑定命令式驱动页面是通过手动绑定事件和操作 DOM 元素来实现页面交互效果。这种开发方式需要编写大量的事件处理函数和 DOM 操作代码，容易出现逻辑混乱和代码冗余的问题。同时，由于每个事件都需要手动绑定和处理，开发效率也会受到一定的影响。\n\n综上所述，响应式数据流驱动页面和传统的事件绑定命令式驱动页面都有其优缺点，选择何种开发方式需要根据具体的需求和实际情况来决定。一般来说，响应式数据流驱动页面更适合用于构建数据驱动的、组件化的页面，而传统的事件绑定命令式驱动页面更适合用于构建交互性强、动态性高的页面。",{"_54":695,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/171/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/171/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,"_120":121,"_122":26,"_123":-5,"_124":717,"_126":718,"_148":141,"_142":720,"_144":721,"_147":-5,"_151":152,"_153":722,"_158":-5,"_159":723,"_161":724,"_173":726,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/170","https://api.github.com/repos/pro-collection/interview-question/issues/170/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/170/comments","https://api.github.com/repos/pro-collection/interview-question/issues/170/events","https://github.com/pro-collection/interview-question/issues/170",1640811026,"I_kwDOJGDC6c5hzMoS",170,"文件上传和上传文件解析的原理是啥？",{"_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,710],{"_66":328,"_68":329,"_54":330,"_113":331,"_115":332,"_117":26,"_118":333},{"_66":711,"_68":712,"_54":713,"_113":714,"_115":715,"_117":26,"_118":716},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","浏览器","f9d0c4","浏览器相关知识点",[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":719,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T07:57:45Z","2023-03-26T07:57:46Z",{"_155":141,"_156":141,"_157":141},"### 前端如何上传图片等文件\n\n在前端上传图片或其他文件字段，一般使用 HTML 中的 `` 元素，并设置 `type=\"file\"`，这样就可以让用户选择本地的文件进行上传。\n\n例如：\n\n```html\nhtmlCopy code\n```\n\n在这个例子中，`

` 元素的 `enctype` 属性设置为 `multipart/form-data`，这样就可以将文件作为二进制数据进行上传。\n\n当用户选择了本地的文件后，提交表单时就会将文件作为 `FormData` 对象的一部分进行发送。在 JavaScript 中，可以通过 `FormData` 构造函数来创建一个 `FormData` 对象，并使用 `append()` 方法向其中添加上传的文件数据。例如：\n\n```javascript\nconst formData = new FormData();\nconst fileInput = document.querySelector('input[type=\"file\"]');\nformData.append('image', fileInput.files[0]);\n```\n\n这样就可以将文件数据添加到 `formData` 对象中，然后使用 `fetch()` 方法或其他方式将其发送到后端进行处理。\n\n需要注意的是，由于安全原因，浏览器限制了用户上传文件的大小和类型。可以使用 `accept` 属性来限制文件的类型，例如 `accept=\"image/*\"` 表示只允许上传图片类型的文件。可以使用 `multiple` 属性来允许用户选择多个文件进行上传。同时，还需要在后端对上传的文件进行处理和验证，以确保安全性和正确性。\n\n### 后端如何解析？koa 为例\n\n在 Koa 中解析上传的文件需要使用一个叫做 `koa-body` 的中间件，它可以自动将 `multipart/form-data` 格式的请求体解析成 JavaScript 对象，从而获取到上传的文件和其他表单数据。\n\n以下是一个使用 `koa-body` 中间件解析上传文件的例子：\n\n```javascript\nconst Koa = require('koa');\nconst koaBody = require('koa-body');\n\nconst app = new Koa();\n\n// 注册 koa-body 中间件\napp.use(koaBody({\n multipart: true, // 支持上传文件\n}));\n\n// 处理上传文件的请求\napp.use(async (ctx) => {\n const { files, fields } = ctx.request.body; // 获取上传的文件和其他表单数据\n const file = files && files.image; // 获取上传的名为 image 的文件\n\n if (file) {\n console.log(`Received file: ${file.name}, type: ${file.type}, size: ${file.size}`);\n // 处理上传的文件\n } else {\n console.log('No file received');\n }\n\n // 返回响应\n ctx.body = 'Upload success';\n});\n\napp.listen(3000);\n```\n\n在上述代码中，使用 `koa-body` 中间件注册了一个解析请求体的函数，并在请求处理函数中获取到了上传的文件和其他表单数据。其中，`files` 对象包含了所有上传的文件，`fields` 对象包含了所有非文件类型的表单数据。\n\n可以根据实际需要从 `files` 对象中获取到需要处理的文件，例如上面的例子中使用了 `files.image` 来获取名为 `image` 的上传文件。可以使用上传文件的属性，如 `name`、`type` 和 `size` 来获取文件的信息，并进行处理。最后返回响应，表示上传成功。\n\n需要注意的是，`koa-body` 中间件需要设置 `multipart: true` 才能支持上传文件。另外，在处理上传文件时需要注意安全性和正确性，可以使用第三方的文件上传处理库来进行处理。\n\n### 解析上传文件的原理是啥？\n\n在 HTTP 协议中，上传文件的请求通常使用 `multipart/form-data` 格式的请求体。这种格式的请求体由多个部分组成，每个部分以一个 boundary 字符串作为分隔符，每个部分都代表一个字段或一个文件。\n\n对于一个上传文件的请求，浏览器会将请求体按照 `multipart/form-data` 格式构造，其中每个部分都有一些描述信息和内容，例如文件名、文件类型、文件大小、内容等。\n\n服务器端需要对这些部分进行解析，提取出所需要的信息。常见的解析方式有两种：\n\n1. 手动解析：根据 `multipart/form-data` 格式的规范，按照 boundary 字符串将请求体切分为多个部分，然后解析每个部分的头部和内容，提取出文件名、文件类型、文件大小等信息。这种方式比较麻烦，需要手动处理较多的细节，容易出错。\n\n2. 使用第三方库：可以使用第三方的解析库，如 `multer`、`formidable`、`busboy` 等，来方便地解析 `multipart/form-data` 格式的请求体。这些库通常会将解析出的信息存储到一个对象中，方便进一步处理。\n\n在 Node.js 中，使用 `http` 模块自己实现 `multipart/form-data` 的解析比较麻烦，常见的做法是使用第三方库来解析上传文件，例如在 Koa 中使用 `koa-body` 中间件就可以方便地处理上传文件。",{"_54":725,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/170/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/170/timeline",{"_54":728,"_56":57,"_58":729,"_60":730,"_62":731,"_64":732,"_66":733,"_68":734,"_70":735,"_72":736,"_74":737,"_107":738,"_120":121,"_122":26,"_123":-5,"_124":740,"_126":741,"_148":141,"_142":743,"_144":743,"_147":-5,"_151":152,"_153":744,"_158":-5,"_159":745,"_161":746,"_173":748,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/169","https://api.github.com/repos/pro-collection/interview-question/issues/169/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/169/comments","https://api.github.com/repos/pro-collection/interview-question/issues/169/events","https://github.com/pro-collection/interview-question/issues/169",1640809930,"I_kwDOJGDC6c5hzMXK",169,"[koa] body-parser 中间件实现原理？",{"_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},[739],{"_66":522,"_68":523,"_54":524,"_113":525,"_115":526,"_117":26,"_118":527},[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":742,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T07:53:06Z",{"_155":141,"_156":141,"_157":141},"Koa 中间件 `koa-bodyparser` 的原理是将 HTTP 请求中的 `request body` 解析成 JavaScript 对象，并将其挂载到 `ctx.request.body` 属性上，方便后续的处理。\n\n具体来说，`koa-bodyparser` 中间件会监听 HTTP 请求的 `data` 事件和 `end` 事件，然后将请求中的数据流解析成一个 JavaScript 对象，并将其作为参数传递给 `ctx.request.body` 属性，最后调用 `await next()`，将控制权交给下一个中间件。\n\n在实现过程中，`koa-bodyparser` 中间件会根据请求头中的 `Content-Type` 字段来判断请求体的类型，支持解析的请求体类型有 `application/json`、`application/x-www-form-urlencoded` 和 `multipart/form-data`。对于其他类型的请求体，`koa-bodyparser` 会将其解析成一个空对象 `{}`。\n\n下面是一个简单的 `koa-bodyparser` 中间件的实现示例：\n\n```javascript\nfunction bodyParser() {\n return async (ctx, next) => {\n if (ctx.request.method === 'POST' || ctx.request.method === 'PUT') {\n let data = '';\n ctx.req.on('data', (chunk) => {\n data += chunk;\n });\n ctx.req.on('end', () => {\n if (ctx.request.headers['content-type'] === 'application/json') {\n ctx.request.body = JSON.parse(data);\n } else if (ctx.request.headers['content-type'] === 'application/x-www-form-urlencoded') {\n ctx.request.body = querystring.parse(data);\n } else if (ctx.request.headers['content-type'].startsWith('multipart/form-data')) {\n // 解析 multipart/form-data 请求体\n // ...\n } else {\n ctx.request.body = {};\n }\n return next();\n });\n } else {\n return next();\n }\n };\n}\n```\n\n在这个实现中，如果请求方法为 `POST` 或者 `PUT`，则开始监听 `data` 事件和 `end` 事件，将请求体数据解析成一个 JavaScript 对象并挂载到 `ctx.request.body` 上，最后调用 `next()` 将控制权交给下一个中间件。对于其他请求方法，则直接调用 `next()` 交给下一个中间件处理。注意，这个实现只支持解析 `application/json` 和 `application/x-www-form-urlencoded` 类型的请求体，对于其他类型的请求体需要进行特殊处理。",{"_54":747,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/169/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/169/timeline",{"_54":750,"_56":57,"_58":751,"_60":752,"_62":753,"_64":754,"_66":755,"_68":756,"_70":757,"_72":758,"_74":759,"_107":760,"_120":121,"_122":26,"_123":-5,"_124":762,"_126":763,"_148":141,"_142":765,"_144":765,"_147":-5,"_151":152,"_153":766,"_158":-5,"_159":767,"_161":768,"_173":770,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/168","https://api.github.com/repos/pro-collection/interview-question/issues/168/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/168/comments","https://api.github.com/repos/pro-collection/interview-question/issues/168/events","https://github.com/pro-collection/interview-question/issues/168",1640809431,"I_kwDOJGDC6c5hzMPX",168,"[koa] 在没有async await 的时候, koa是怎么实现的洋葱模型？",{"_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},[761],{"_66":522,"_68":523,"_54":524,"_113":525,"_115":526,"_117":26,"_118":527},[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":764,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T07:51:12Z",{"_155":141,"_156":141,"_157":141},"在没有 `async/await` 的时候，Koa 通过使用 ES6 的生成器函数来实现洋葱模型。具体来说，Koa 中间件函数是一个带有 `next` 参数的生成器函数，当中间件函数调用 `next` 方法时，它会挂起当前的执行，转而执行下一个中间件函数，直到执行完最后一个中间件函数，然后将执行权返回到前一个中间件函数，继续执行下面的代码。这个过程就像一层一层剥开洋葱一样，因此被称为洋葱模型。\n\n下面是一个使用生成器函数实现的简单的 Koa 中间件函数：\n\n```javascript\nfunction* myMiddleware(next) {\n // 中间件函数的代码\n console.log('Start');\n yield next;\n console.log('End');\n}\n```\n\n在这个中间件函数中，`yield next` 表示挂起当前的执行，执行下一个中间件函数。假设我们有两个中间件函数 `middleware1` 和 `middleware2`，它们的代码如下：\n\n```javascript\nfunction* middleware1(next) {\n console.log('middleware1 Start');\n yield next;\n console.log('middleware1 End');\n}\n\nfunction* middleware2(next) {\n console.log('middleware2 Start');\n yield next;\n console.log('middleware2 End');\n}\n```\n\n我们可以使用 `compose` 函数将它们组合成一个洋葱模型：\n\n```scss\nscssCopy codeconst compose = require('koa-compose');\n\nconst app = compose([middleware1, middleware2]);\n\napp();\n```\n\n在这个例子中，`compose` 函数将 `middleware1` 和 `middleware2` 组合成一个函数 `app`，然后调用这个函数即可执行整个中间件链。执行的结果如下：\n\n```sql\nsqlCopy codemiddleware1 Start\nmiddleware2 Start\nmiddleware2 End\nmiddleware1 End\n```\n\n可以看到，这个结果与洋葱模型的特点相符。",{"_54":769,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/168/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/168/timeline",{"_54":772,"_56":57,"_58":773,"_60":774,"_62":775,"_64":776,"_66":777,"_68":778,"_70":779,"_72":780,"_74":781,"_107":782,"_120":121,"_122":26,"_123":-5,"_124":784,"_126":785,"_148":141,"_142":787,"_144":787,"_147":-5,"_151":152,"_153":788,"_158":-5,"_159":789,"_161":790,"_173":792,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/164","https://api.github.com/repos/pro-collection/interview-question/issues/164/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/164/comments","https://api.github.com/repos/pro-collection/interview-question/issues/164/events","https://github.com/pro-collection/interview-question/issues/164",1640805442,"I_kwDOJGDC6c5hzLRC",164,"[koa] 中间件的异常处理是怎么做的？",{"_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},[783],{"_66":522,"_68":523,"_54":524,"_113":525,"_115":526,"_117":26,"_118":527},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":786,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-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-03-26T07:34:30Z",{"_155":141,"_156":141,"_157":141},"在 Koa 中，中间件函数的异常处理可以通过两种方式来实现：\n\n1. 使用 `try...catch` 捕获异常：在中间件函数中使用 `try...catch` 语句来捕获异常，然后通过 `ctx.throw()` 方法抛出异常信息，例如：\n\n```vbnet\nvbnetCopy codeasync function myMiddleware(ctx, next) {\n try {\n await next();\n } catch (err) {\n ctx.throw(500, 'Internal Server Error');\n }\n}\n```\n\n在这个例子中，`await next()` 表示调用下一个中间件函数，如果这个函数抛出异常，就会被捕获到，然后通过 `ctx.throw()` 方法抛出一个包含错误状态码和错误信息的异常。\n\n2. 使用 Koa 的错误处理中间件：Koa 提供了一个错误处理中间件 `koa-json-error`，可以通过在应用程序中使用该中间件来处理异常。这个中间件会自动捕获应用程序中未被处理的异常，并将错误信息以 JSON 格式返回给客户端。例如：\n\n```javascript\nconst Koa = require('koa');\nconst jsonError = require('koa-json-error');\n\nconst app = new Koa();\n\n// 注册错误处理中间件\napp.use(jsonError());\n\n// 中间件函数\nasync function myMiddleware(ctx, next) {\n await next();\n throw new Error('Internal Server Error');\n}\n\n// 应用中间件\napp.use(myMiddleware);\n\n// 启动服务器\napp.listen(3000);\n```\n\n在这个例子中，`koa-json-error` 中间件会自动捕获应用程序中未被处理的异常，并将错误信息以 JSON 格式返回给客户端。开发人员可以通过自定义错误处理函数来处理异常，例如：\n\n```javascript\nconst Koa = require('koa');\nconst jsonError = require('koa-json-error');\n\nconst app = new Koa();\n\n// 自定义错误处理函数\nfunction errorHandler(err, ctx) {\n ctx.status = err.status || 500;\n ctx.body = {\n message: err.message,\n status: ctx.status\n };\n}\n\n// 注册错误处理中间件\napp.use(jsonError(errorHandler));\n\n// 中间件函数\nasync function myMiddleware(ctx, next) {\n await next();\n throw new Error('Internal Server Error');\n}\n\n// 应用中间件\napp.use(myMiddleware);\n\n// 启动服务器\napp.listen(3000);\n```\n\n在这个例子中，我们自定义了一个错误处理函数 `errorHandler`，将错误信息格式化为 JSON 格式，并设置响应状态码。然后将这个函数作为参数传递给 `koa-json-error` 中间件，用于处理异常。\n",{"_54":791,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/164/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/164/timeline",{"_54":794,"_56":57,"_58":795,"_60":796,"_62":797,"_64":798,"_66":799,"_68":800,"_70":801,"_72":802,"_74":803,"_107":804,"_120":121,"_122":26,"_123":-5,"_124":806,"_126":807,"_148":141,"_142":809,"_144":810,"_147":-5,"_151":152,"_153":811,"_158":-5,"_159":812,"_161":813,"_173":815,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/161","https://api.github.com/repos/pro-collection/interview-question/issues/161/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/161/comments","https://api.github.com/repos/pro-collection/interview-question/issues/161/events","https://github.com/pro-collection/interview-question/issues/161",1640793753,"I_kwDOJGDC6c5hzIaZ",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},[805],{"_66":522,"_68":523,"_54":524,"_113":525,"_115":526,"_117":26,"_118":527},[],{"_54":297,"_64":298,"_58":299,"_66":300,"_68":301,"_70":268,"_72":302,"_118":303,"_136":808,"_138":305,"_140":141,"_120":121,"_142":306,"_144":307,"_146":-5,"_147":-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-03-26T06:44:01Z","2023-03-26T06:44:02Z",{"_155":141,"_156":141,"_157":141},"**思路**\n\n* 首先调用 `use` 方法收集中间件，调用 `listen` 方法执行中间件。\n* 每一个中间件都有一个`next`参数（暂时不考虑ctx参数），`next`参数可以控制进入下一个中间件的时机。\n\n**需要解决的问题**\n- 最后一个中间件调用next如何处理\n- 如何解决同一个中间件多次调用next\n\n\n**完整代码**\n\n其中最精华的部分就是`compose`函数，细数一下，只有`11`行代码，1比1还原了`koa`的`compose`函数（去除了不影响主逻辑判断）。\n\n> koa是利用koa-compose这个库进行组合中间件的，在koa-compose里面，next返回的都是一个promise函数。\n\n```js\nfunction Koa () {\n this.middleares = [];\n}\nKoa.prototype.use = function (middleare) {\n this.middleares.push(middleare);\n return this;\n}\nKoa.prototype.listen = function () {\n const fn = compose(this.middleares);\n}\nfunction compose(middleares) {\n let index = -1;\n const dispatch = (i) => {\n if(i <= index) throw new Error('next（）不能调用多次');\n index = i;\n if(i >= middleares.length) return;\n const middleare = middleares[i];\n return middleare('ctx', dispatch.bind(null, i + 1));\n }\n return dispatch(0);\n}\n\nconst app = new Koa();\napp.use(async (ctx, next) => {\n console.log('1');\n next();\n console.log('2');\n});\napp.use(async (ctx, next) => {\n console.log('3');\n next();\n console.log('4');\n});\napp.use(async (ctx, next) => {\n console.log('5');\n next();\n console.log('6');\n});\n\napp.listen();\n\n```\n\n\n**使用**\n\n```js\nconst Koa = require('koa');\nconst app = new Koa();\n\n// 中间件过多，可以创建一个middleares文件夹，将cors函数放到middleares/cors.js文件里面\nconst cors = () => {\n return async (ctx, next) => {\n ctx.set('Access-Control-Allow-Headers', 'X-Requested-With')\n ctx.set('Access-Control-Allow-Origin', '*')\n ctx.set('Access-Control-Allow-Methods', 'GET,HEAD,PUT,POST,DELETE,PATCH')\n await next();\n }\n};\n\napp.use(cors());\napp.use(async (ctx, next) => {\n console.log('第一个中间件', ctx.request.method,ctx.request.url);\n await next();\n ctx.body = 'hello world'\n});\n\n```\n\n`koa`的中间件都是有固定模板的，首先是一个函数，并且返回一个`async`函数（闭包的应用），这个`async`函数有两个参数，一个是`koa`的`context`，一个是`next`函数。\n\n",{"_54":814,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/161/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/161/timeline",{"_54":817,"_56":57,"_58":818,"_60":819,"_62":820,"_64":821,"_66":822,"_68":823,"_70":824,"_72":825,"_74":826,"_107":827,"_120":121,"_122":26,"_123":-5,"_124":829,"_126":830,"_148":141,"_142":832,"_144":832,"_147":-5,"_151":152,"_153":833,"_158":-5,"_159":834,"_161":835,"_173":837,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/160","https://api.github.com/repos/pro-collection/interview-question/issues/160/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/160/comments","https://api.github.com/repos/pro-collection/interview-question/issues/160/events","https://github.com/pro-collection/interview-question/issues/160",1640792637,"I_kwDOJGDC6c5hzII9",160,"什么是洋葱模型？",{"_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},[828],{"_66":522,"_68":523,"_54":524,"_113":525,"_115":526,"_117":26,"_118":527},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":831,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-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-03-26T06:38:58Z",{"_155":141,"_156":141,"_157":141},"说到洋葱模型，就必须聊一聊中间件，中间件这个概念，我们并不陌生，比如平时我们用的 `redux`、`express` 、`koa` 这些库里，都离不开中间件。\n\n那 `koa` 里面的中间件是什么样的呢？其本质上是一个函数，这个函数有着特定，单一的功能，`koa`将一个个中间件注册进来，通过**组合**实现强大的功能。\n\n先看 `demo` ：\n\n```js\n// index.js\nconst Koa = require(\"koa\")\nconst app = new Koa();\n\n// 中间件1\napp.use(async (ctx, next) => {\n console.log(\"1\")\n await next()\n console.log(\"2\")\n});\n// 中间件2\napp.use(async (ctx, next) => {\n console.log(\"3\")\n await next()\n console.log(\"4\")\n});\n// 中间件3\napp.use(async (ctx, next) => {\n console.log(\"5\")\n await next()\n console.log(\"6\")\n});\napp.listen(8002);\n\n\n```\n\n先后注册了三个中间件，运行一下`index.js` ，可以看到输出结果为：\n\n```js\n1\n3\n5\n6\n4\n2\n\n```\n\n没接触过洋葱模型的人第一眼可能会疑惑，为什么调用了一个 `next` 之后，直接从`1` 跳到了 `3` ，而不是先输出`1` ，再输出`2`呢。其实这就是洋葱模型特点，下图是它的执行过程：\n\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80798be002944d67a46c456d4af3c03c~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?) 一开始我们先后注册了三个中间件，分别是中间件1，中间件2，中间件3，调用`listen`方法，打开对应端口的页面，触发了中间件的执行。\n\n首先会先执行第一个中间件的 `next` 的前置语句，相当于 `demo` 里面的 `console.log('1')` ，当调用 `next()` 之后，会直接进入第二个中间件，继续重复上述逻辑，直至最后一个中间件，就会执行 `next` 的后置语句，然后继续上一个中间件的后置语句，继续重复上述逻辑，直至执行第一个中间件的后置语句，最后输出。\n\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/935675e49480426eb517a68c224673c7~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?) 正是因为它这种执行机制，才被称为**洋葱模型**。\n\n\n",{"_54":836,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/160/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/160/timeline",{"_54":839,"_56":57,"_58":840,"_60":841,"_62":842,"_64":843,"_66":844,"_68":845,"_70":846,"_72":847,"_74":848,"_107":849,"_120":121,"_122":26,"_123":-5,"_124":851,"_126":852,"_148":141,"_142":854,"_144":855,"_147":-5,"_151":152,"_153":856,"_158":-5,"_159":857,"_161":858,"_173":860,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/159","https://api.github.com/repos/pro-collection/interview-question/issues/159/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/159/comments","https://api.github.com/repos/pro-collection/interview-question/issues/159/events","https://github.com/pro-collection/interview-question/issues/159",1640791850,"I_kwDOJGDC6c5hzH8q",159,"[Vue] 父子组件通信方式有哪些？",{"_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},[850],{"_66":522,"_68":523,"_54":524,"_113":525,"_115":526,"_117":26,"_118":527},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":853,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-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-03-26T06:34:56Z","2023-03-26T06:35:48Z",{"_155":141,"_156":141,"_157":141},"Vue 父子组件通信\r\n\r\n- Prop（常用）\r\n- $emit (组件封装用的较多)\r\n- .sync语法糖（较少）\r\n- $attrs & $listeners (组件封装用的较多)\r\n- provide & inject （高阶组件/组件库用的较多）\r\n- slot-scope & v-slot （vue@2.6.0+）新增\r\n- scopedSlots 属性\r\n- 其他方式通信\r\n\r\n\r\n具体使用场景参考链接：https://juejin.cn/post/6844903700243316749\r\n\r\n",{"_54":859,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/159/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/159/timeline",{"_54":862,"_56":57,"_58":863,"_60":864,"_62":865,"_64":866,"_66":867,"_68":868,"_70":869,"_72":870,"_74":871,"_107":872,"_120":121,"_122":26,"_123":-5,"_124":880,"_126":881,"_148":141,"_142":883,"_144":884,"_147":-5,"_151":152,"_153":885,"_158":-5,"_159":886,"_161":887,"_173":889,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/158","https://api.github.com/repos/pro-collection/interview-question/issues/158/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/158/comments","https://api.github.com/repos/pro-collection/interview-question/issues/158/events","https://github.com/pro-collection/interview-question/issues/158",1640790751,"I_kwDOJGDC6c5hzHrf",158,"CSS 中 position 常见属性有哪些，大概讲一下？",{"_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},[873],{"_66":874,"_68":875,"_54":876,"_113":877,"_115":878,"_117":26,"_118":879},5232524505,"LA_kwDOJGDC6c8AAAABN-H82Q","https://api.github.com/repos/pro-collection/interview-question/labels/CSS","CSS","A46719","CSS 相关问题",[],{"_54":365,"_64":366,"_58":367,"_66":368,"_68":369,"_70":178,"_72":370,"_118":371,"_136":882,"_138":373,"_140":141,"_120":121,"_142":374,"_144":375,"_146":-5,"_147":-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-03-26T06:29:30Z","2023-03-26T06:29:31Z",{"_155":141,"_156":141,"_157":141},"CSS 中 `position` 属性用于指定元素的定位方式，它有以下常见的属性值：\n\n1. `static`：默认值，元素在文档流中正常排列。\n\n2. `relative`：元素在文档流中正常排列，但是可以通过设置 `top`、`right`、`bottom`、`left` 属性相对于其正常位置进行偏移，不会影响其它元素的位置。\n\n3. `absolute`：元素脱离文档流，相对于最近的非 `static` 定位的祖先元素进行定位，如果没有则相对于 `` 元素进行定位。通过设置 `top`、`right`、`bottom`、`left` 属性进行偏移，如果祖先元素发生位置变化，则元素的位置也会发生相应的变化。\n\n4. `fixed`：元素脱离文档流，相对于浏览器窗口进行定位，始终保持在窗口的固定位置，不会随页面滚动而滚动。通过设置 `top`、`right`、`bottom`、`left` 属性进行偏移。\n\n5. `sticky`：元素在文档流中正常排列，当元素滚动到指定的位置时，停止滚动并固定在该位置，直到其祖先元素发生滚动时才会取消固定。通过设置 `top`、`right`、`bottom`、`left` 属性和 `z-index` 属性进行设置。\n\n以上是 `position` 属性的常见属性值和简单说明，不同的值会对元素进行不同的定位方式，开发人员可以根据需要选择合适的值来实现页面布局。",{"_54":888,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/158/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/158/timeline",{"_54":891,"_56":57,"_58":892,"_60":893,"_62":894,"_64":895,"_66":896,"_68":897,"_70":898,"_72":899,"_74":900,"_107":901,"_120":121,"_122":26,"_123":-5,"_124":903,"_126":904,"_148":141,"_142":906,"_144":907,"_147":-5,"_151":152,"_153":908,"_158":-5,"_159":909,"_161":910,"_173":912,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/157","https://api.github.com/repos/pro-collection/interview-question/issues/157/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/157/comments","https://api.github.com/repos/pro-collection/interview-question/issues/157/events","https://github.com/pro-collection/interview-question/issues/157",1640790354,"I_kwDOJGDC6c5hzHlS",157,"CSS 文档流是什么概念？",{"_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},[902],{"_66":874,"_68":875,"_54":876,"_113":877,"_115":878,"_117":26,"_118":879},[],{"_54":365,"_64":366,"_58":367,"_66":368,"_68":369,"_70":178,"_72":370,"_118":371,"_136":905,"_138":373,"_140":141,"_120":121,"_142":374,"_144":375,"_146":-5,"_147":-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-03-26T06:27:52Z","2023-03-26T06:27:53Z",{"_155":141,"_156":141,"_157":141},"CSS 的文档流（Document Flow）是指文档中元素按照其在 HTML 中出现的顺序自上而下布局的方式，也称为常规流（Normal Flow）或默认流。文档流定义了元素的布局顺序和定位方式，包括元素的位置、大小、间距等属性。\n\n在文档流中，每个元素都会占据一定的空间并尽可能充满其包含块的宽度。每个元素的位置都会受到前面元素的影响，如果前面的元素发生位置变化，那么后面的元素的位置也会发生相应的变化。\n\n文档流中的元素按照下面的规则排列：\n\n1. 块级元素：块级元素会独占一行，并在前面自动添加一个垂直间距。例如：`

`、`

` 等。\n\n2. 行内元素：行内元素会在一行中排列，并且宽度根据内容自适应。例如：``、``、`` 等。\n\n3. 行内块级元素：行内块级元素与行内元素类似，但是它可以设置宽度、高度等块级元素的属性。例如：``、`