鼠标拖拽示例

\n\n \n \n\n```\n\n### 注意事项\n\n- 这个示例仅作为演示使用，实际应用可能需要更多的错误处理和边界条件判断。\n- 为了防止拖拽时的文本选中现象，可能需要监听并阻止`mousemove`事件的默认行为。\n- 记得附加适当的样式（如`cursor: move;`），提升用户体验。\n\n根据你的需要，这个基本的逻辑和代码可以进行调整和扩展，以实现更复杂的拖拽功能。\n","reactions",{"_58":173,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/863/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/863/timeline","performed_via_github_app","state_reason","score",1,{"_58":190,"_60":61,"_62":191,"_64":192,"_66":193,"_68":194,"_70":195,"_72":196,"_74":197,"_76":198,"_78":199,"_111":200,"_124":125,"_126":24,"_127":-5,"_128":209,"_130":210,"_152":145,"_146":212,"_148":213,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":214,"_163":215,"_169":216,"_171":217,"_183":219,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/861","https://api.github.com/repos/pro-collection/interview-question/issues/861/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/861/comments","https://api.github.com/repos/pro-collection/interview-question/issues/861/events","https://github.com/pro-collection/interview-question/issues/861",2494910536,"I_kwDOJGDC6c6UtVBI",861,"长文本溢出，展开/收起如何实现【热度: 895】",{"_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},[201,202],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":203,"_72":204,"_58":205,"_117":206,"_119":207,"_121":24,"_122":208},5312231007,"LA_kwDOJGDC6c8AAAABPKI2Xw","https://api.github.com/repos/pro-collection/interview-question/labels/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4","阿里巴巴","ededed","公司标签",[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":211,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-29T15:42:09Z","2024-08-29T15:42:10Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：长文本溢出\n\n长文本溢出展开/收起功能通常需要使用一些 JavaScript 来动态控制文本的显示状态，及 CSS 来处理文本的默认显示样式。以下是一个基本实现示例，展示了如何结合 HTML、CSS 和 JavaScript 来实现这个功能。\n\n### HTML 结构\n\n我们定义一个容器来显示文本，并添加一个用于触发展开/收起操作的按钮。\n\n```html\n

\n 这是一段可能很长的文本，我们希望在一开始时只显示部分，点击“展开”按钮后显示全部内容，再次点击则“收起”文本。\n

\n\n```\n\n### CSS 样式\n\n使用 CSS 设置文本的默认显示状态为隐藏超出部分，并且用省略号表示溢出。\n\n```css\n.text-overflow {\n /* 设置一个高度限制，模拟文本“收起”时的状态 */\n max-height: 60px; /* 这个值根据需要调整 */\n overflow: hidden;\n position: relative;\n line-height: 20px; /* 根据实际情况调整 */\n padding-right: 20px;\n}\n```\n\n### JavaScript 代码\n\n使用 JavaScript 来控制文本的“展开”和“收起”状态。我们监听按钮的点击事件来切换文本的显示状态。\n\n```javascript\ndocument.getElementById(\"toggleButton\").addEventListener(\"click\", function () {\n var textContainer = document.getElementById(\"textContainer\");\n var button = document.getElementById(\"toggleButton\");\n\n // 检查当前是展开还是收起状态\n if (button.textContent === \"展开\") {\n // 修改文本容器的最大高度以显示全部文本\n textContainer.style.maxHeight = \"none\";\n button.textContent = \"收起\";\n } else {\n // 重新设置最大高度以隐藏文本\n textContainer.style.maxHeight = \"60px\"; // 与CSS中定义的相同\n button.textContent = \"展开\";\n }\n});\n```\n\n这只是实现长文本溢出展开/收起的一种基本方法。根据具体需求，这个示例可以进一步扩展或修改，比如添加动画效果使展开/收起操作更平滑，或者根据文本长度动态决定是否显示“展开/收起”按钮等。\n\n还有其他方法可以实现这一功能，包括使用纯 CSS 的技巧（虽然可能不那么灵活），或者利用现成的 JavaScript 库和框架来简化实现过程。\n\n### 更有多实现细节，可以参考以下文档\n\nhttps://juejin.cn/post/7407259487193399333\n",{"_58":218,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/861/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/861/timeline",{"_58":221,"_60":61,"_62":222,"_64":223,"_66":224,"_68":225,"_70":226,"_72":227,"_74":228,"_76":229,"_78":230,"_111":231,"_124":125,"_126":24,"_127":-5,"_128":238,"_130":239,"_152":145,"_146":252,"_148":253,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":254,"_163":255,"_169":256,"_171":257,"_183":259,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/860","https://api.github.com/repos/pro-collection/interview-question/issues/860/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/860/comments","https://api.github.com/repos/pro-collection/interview-question/issues/860/events","https://github.com/pro-collection/interview-question/issues/860",2494871825,"I_kwDOJGDC6c6UtLkR",860,"如何统计用户 pv 访问的发起请求数量（所有域名的）【热度: 469】",{"_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},[232,233],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":234,"_72":235,"_58":236,"_117":237,"_119":207,"_121":24,"_122":208},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":248,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-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",3,"高","高级别面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},454,"2023-03-06T15:00:27Z","2025-09-07T06:21:17Z","2024-08-29T15:25:45Z","2024-08-29T15:34:51Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"统计用户 PV（页面访问量）期间发起的请求数量（涵盖所有域名）可以通过几种方法实现，包括使用浏览器的 `Performance API`、监听网络请求、或者通过服务端日志分析。每种方法有其优点和适用场景。下面是一些方法的简要说明和示例：\r\n\r\n### 方法 1: 使用 Performance API\r\n\r\n`Performance API` 提供了丰富的接口来访问和利用浏览器的性能数据。通过使用这个 API，可以获取到用户 PV 时所有资源请求的详细信息，包括请求的域名信息。\r\n\r\n#### 使用 PerformanceObserver 监听资源加载\r\n\r\n```javascript\r\nconst observer = new PerformanceObserver((list) => {\r\n const entries = list.getEntriesByType(\"resource\");\r\n console.log(`当前页面共发起了 ${entries.length} 个资源请求。`);\r\n});\r\nobserver.observe({ entryTypes: [\"resource\"] });\r\n```\r\n\r\n这段代码会统计所有类型的资源加载（如图片、脚本、样式表等），不过它不会区别处理各个域名的请求。\r\n\r\n### 方法 2: 监听所有网络请求 (XMLHttpRequest 和 Fetch API)\r\n\r\n可以通过重新定义 `XMLHttpRequest` 和拦截 `fetch` API 的调用来监控所有通过这两种常见方法发起的网络请求。\r\n\r\n#### 拦截 XMLHttpRequest\r\n\r\n```javascript\r\n(function () {\r\n let oldOpen = XMLHttpRequest.prototype.open;\r\n window.requestCount = 0;\r\n XMLHttpRequest.prototype.open = function () {\r\n window.requestCount++;\r\n console.log(`请求数量: ${window.requestCount}`);\r\n return oldOpen.apply(this, arguments);\r\n };\r\n})();\r\n```\r\n\r\n#### 拦截 Fetch API\r\n\r\n```javascript\r\nlet oldFetch = window.fetch;\r\nwindow.fetch = function () {\r\n window.requestCount++;\r\n console.log(`请求数量: ${window.requestCount}`);\r\n return oldFetch.apply(this, arguments);\r\n};\r\n```\r\n\r\n这两段代码分别拦截了 `XMLHttpRequest` 和 `fetch` API 的请求，从而可以统计请求的总量。为了覆盖所有域名，代码没有对请求的 URL 进行筛选，但如果需要，可以通过分析 URL 来对请求进行分类统计。\r\n\r\n### 方法 3: 服务端日志分析\r\n\r\n如果你有权访问服务器日志，或者使用了像 Google Analytics 这样的分析工具，也可以通过分析服务端日志来统计 PV 过程中的请求数量。这种方法可能更适合统计对外部 API 的请求或者整体网站流量的分析。\r\n\r\n### 方法选择建议\r\n\r\n- 如果你想要实时在前端捕获和反馈统计数据，建议使用`Performance API`或者通过拦截网络请求的方法。\r\n- 如果希望进行更全面的数据分析或长期趋势跟踪，服务端日志分析可能是更合适的选择。\r\n",{"_58":258,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/860/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/860/timeline",{"_58":261,"_60":61,"_62":262,"_64":263,"_66":264,"_68":265,"_70":266,"_72":267,"_74":268,"_76":269,"_78":270,"_111":271,"_124":125,"_126":24,"_127":-5,"_128":278,"_130":279,"_152":145,"_146":281,"_148":282,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":283,"_163":284,"_169":285,"_171":286,"_183":288,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/859","https://api.github.com/repos/pro-collection/interview-question/issues/859/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/859/comments","https://api.github.com/repos/pro-collection/interview-question/issues/859/events","https://github.com/pro-collection/interview-question/issues/859",2494856063,"I_kwDOJGDC6c6UtHt_",859,"在页面关闭时执行方法，该如何做【热度: 334】",{"_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},[272,273],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":274,"_72":275,"_58":276,"_117":277,"_119":207,"_121":24,"_122":208},5312726360,"LA_kwDOJGDC6c8AAAABPKnFWA","https://api.github.com/repos/pro-collection/interview-question/labels/%E8%85%BE%E8%AE%AF","腾讯",[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":280,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-29T15:22:14Z","2024-08-29T15:22:15Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：beforeunload 和 unload 事件\n\n在页面关闭时执行特定的方法，你可以使用 `window` 对象的 `beforeunload` 和 `unload` 事件。不过，这两个事件有一些微妙的区别和适用场景。\n\n### 使用 `beforeunload` 事件\n\n`beforeunload` 事件在窗口、文档或其资源即将卸载时触发，这一点让它成为在页面关闭前提示用户保存未保存更改的理想选择。在绑定到该事件的处理函数中，你可以执行特定的逻辑，但请注意，按照现代浏览器的安全策略，除非你设置了 `event.returnValue`，否则不会显示自定义的离开提示信息。\n\n```javascript\nwindow.addEventListener(\"beforeunload\", (event) => {\n // 在这里执行你的清理逻辑或者其他操作\n // 例如，发送一个统计日志\n navigator.sendBeacon(\"/log\", \"用户即将离开页面\");\n\n // 显示离开提示（大多数现代浏览器不支持自定义文本）\n event.returnValue = \"您确定要离开此页面吗？\";\n});\n```\n\n### 使用 `unload` 事件\n\n`unload` 事件在用户即将从页面导航走，或关闭页面时触发。你可以在这个事件的处理函数中执行不能阻止页面卸载的清理逻辑。不过需要注意，这个事件的执行时间非常短，某些操作（例如异步操作）可能无法完成。\n\n```javascript\nwindow.addEventListener(\"unload\", (event) => {\n // 执行简短的同步操作，例如发送统计信息\n // 注意：这种情况下 navigator.sendBeacon 是更好的选择\n});\n```\n\n### 使用 `navigator.sendBeacon`\n\n对于在页面卸载时需要发送数据到服务器的情况，使用 `navigator.sendBeacon` 方法是一种更可靠的方式。它有效地解决了通过异步 AJAX 请求可能导致的数据不被送出的问题。\n\n```javascript\nwindow.addEventListener(\"unload\", (event) => {\n navigator.sendBeacon(\"/log-out\", \"用户离开\");\n});\n```\n\n### 注意事项\n\n- 不是所有浏览器都完全一样地支持这些事件和 `navigator.sendBeacon` 方法。实施时应当考虑兼容性。\n- 在 `beforeunload` 和 `unload` 事件中执行大量的同步操作或长时间运行的脚本可能会导致用户体验下降。推荐尽量使用简洁快速的逻辑。\n- `beforeunload` 事件可以控制是否提示用户离开页面的确认对话框，但自定义的确认对话框信息可能不被所有浏览器支持。\n- 使用 `navigator.sendBeacon` 来发送数据是因为它能在请求中携带足够的数据量，且即使页面卸载过程中也能确保数据被发送。\n\n根据你的应用需求，选择合适的事件和方法，确保页面关闭时能够执行你的逻辑。\n",{"_58":287,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/859/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/859/timeline",{"_58":290,"_60":61,"_62":291,"_64":292,"_66":293,"_68":294,"_70":295,"_72":296,"_74":297,"_76":298,"_78":299,"_111":300,"_124":125,"_126":24,"_127":-5,"_128":303,"_130":304,"_152":145,"_146":306,"_148":307,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":308,"_163":309,"_169":310,"_171":311,"_183":313,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/858","https://api.github.com/repos/pro-collection/interview-question/issues/858/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/858/comments","https://api.github.com/repos/pro-collection/interview-question/issues/858/events","https://github.com/pro-collection/interview-question/issues/858",2494841709,"I_kwDOJGDC6c6UtENt",858,"大文件切片上传的时候，确定切片数量的时候，有那些考量因素【热度: 366】",{"_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},[301,302],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":234,"_72":235,"_58":236,"_117":237,"_119":207,"_121":24,"_122":208},[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":305,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-29T15:19:54Z","2024-08-29T15:19:55Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：文件切片上传\n\n大文件切片上传时，切片数量取决于几个关键因素：文件总大小、每个切片的大小（即切片大小），以及任何特定于应用或服务的限制。计算切片数量的过程包括确定合理的切片大小，然后根据文件总大小来计算需要多少个这样大小的切片。以下是一些步骤和考虑因素，可以帮助你确定切片数量：\n\n### 1. 确定切片大小\n\n- **切片大小**：首先，需要确定每个切片的大小。这通常是一个权衡的结果，考虑到效率、可靠性和服务器限制。太小的切片会增加请求的数量，降低效率；而太大的切片可能会增加单个请求失败的风险，并且对于每次请求消耗更多的内存和带宽。\n- 通常，切片大小选取在 `1MB` 至 `10MB` 之间比较合适，当然这取决于具体应用和网络环境。\n\n### 2. 计算切片数量\n\n- **文件总大小**：知道文件的总大小后，可以通过简单的数学计算来决定切片的数量。公式如下：\n\n ```\n 切片数量 = 向上取整（文件总大小 / 每个切片的大小）\n ```\n\n- 例如，如果文件是 `50MB`，每个切片大小为 `5MB`，则切片数量为 `10`。\n\n### 3. 考虑特殊情况\n\n- 最后一个切片可能会小于你设定的标准切片大小，这是正常情况，需要在上传逻辑中进行处理。\n\n### 4. 示例代码\n\n```javascript\nfunction calculateChunks(fileSize, chunkSize) {\n // 文件总大小（byte），切片大小（byte）\n const chunksCount = Math.ceil(fileSize / chunkSize);\n return chunksCount;\n}\n\n// 示例：文件大小 52MB，切片大小 5MB\nconst fileSize = 52 * 1024 * 1024; // 52MB\nconst chunkSize = 5 * 1024 * 1024; // 5MB\nconst chunksCount = calculateChunks(fileSize, chunkSize);\n\nconsole.log(`需要切片数量: ${chunksCount}`);\n```\n\n### 注意事项\n\n- **网络条件**：切片大小可能需要根据网络环境调整。在网络条件较差的情况下，选择更小的切片大小可能更加可靠。\n- **服务器限制**：某些服务器或云服务可能对上传文件的大小有限制。确保了解和遵守这些限制，以避免上传失败。\n- **并发上传**：在选择切片大小和数量时，考虑是否会并行上传多个切片，因为这也会影响上传速度和效率。\n\n通过以上步骤和考虑因素，你可以合理地决定大文件上传时的切片数量，以优化上传过程的效率和可靠性。\n",{"_58":312,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/858/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/858/timeline",{"_58":315,"_60":61,"_62":316,"_64":317,"_66":318,"_68":319,"_70":320,"_72":321,"_74":322,"_76":323,"_78":324,"_111":325,"_124":125,"_126":24,"_127":-5,"_128":328,"_130":329,"_152":145,"_146":331,"_148":332,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":333,"_163":334,"_169":335,"_171":336,"_183":338,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/856","https://api.github.com/repos/pro-collection/interview-question/issues/856/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/856/comments","https://api.github.com/repos/pro-collection/interview-question/issues/856/events","https://github.com/pro-collection/interview-question/issues/856",2494800281,"I_kwDOJGDC6c6Us6GZ",856,"如果在网络带宽一定的情况下，切片上传感觉和整体上传，消费的时间应该是差不多的。这种说法正确吗【热度: 363】",{"_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},[326,327],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":234,"_72":235,"_58":236,"_117":237,"_119":207,"_121":24,"_122":208},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":330,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-29T15:13:01Z","2024-08-29T15:13:02Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：切换上传合理性\n\n这种说法在某些情况下是正确的，但实际上，切片上传相较于整体上传，在多种情况下可能更加高效，即使网络带宽固定。切片上传的优势并不仅仅在于可能节约的时间，还包括以下几点：\n\n### 1. **提高上传的可靠性**\n\n- 切片上传允许在遇到网络中断或其他传输错误时只重新上传失败的那一部分，而不是重新上传整个文件。这在大文件传输中尤其重要。\n\n### 2. **实现上传进度的精确控制**\n\n- 通过切片上传，可以更精确地控制和显示上传进度，提高用户体验。\n\n### 3. **带宽利用率**\n\n- 切片上传可以更有效地管理带宽，尤其是在网络条件不稳定的环境中。通过并行上传多个切片，可以更充分地利用可用带宽，从而在理论上减少等待时间，特别是在高延迟的环境中。\n\n### 4. **服务器处理**\n\n- 对于服务器来说，处理多个小文件比处理一个大文件具有更高的灵活性和效率，尤其是在服务器负载高的情况下。此外，小文件的处理错误不会影响到整个文件，使得错误恢复更简单。\n\n### 5. **安全性**\n\n- 切片上传还可以增强安全性，因为单个切片的加密和传输比一个大文件来得容易和安全；此外，即使攻击者截获了部分数据，也难以重构出原始文件。\n\n### 综合考虑\n\n然而，切片上传也有其缺点，例如增加了客户端和服务器端处理的复杂性，需要正确管理和重组文件的各个部分。此外，在某些情况下（尤其是文件较小时），切片上传相较于整体上传并不会带来明显的时间优势，且可能因为初始化多个连接而略微增加总体上传时间。\n\n所以，是否选择切片上传，取决于文件大小、网络稳定性、服务器能力以及应用场景。对于大文件上传、网络条件不佳或需要高可靠性的场景，切片上传通常是更优的选择。\n",{"_58":337,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/856/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/856/timeline",{"_58":340,"_60":61,"_62":341,"_64":342,"_66":343,"_68":344,"_70":345,"_72":346,"_74":347,"_76":348,"_78":349,"_111":350,"_124":125,"_126":24,"_127":-5,"_128":353,"_130":354,"_152":145,"_146":356,"_148":356,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":357,"_163":358,"_169":359,"_171":360,"_183":362,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/855","https://api.github.com/repos/pro-collection/interview-question/issues/855/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/855/comments","https://api.github.com/repos/pro-collection/interview-question/issues/855/events","https://github.com/pro-collection/interview-question/issues/855",2485096500,"I_kwDOJGDC6c6UH5A0",855,"如何判断页签是否为活跃状态【热度: 153】",{"_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},[351,352],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":234,"_72":235,"_58":236,"_117":237,"_119":207,"_121":24,"_122":208},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":355,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-25T07:07:59Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：页签活跃状态\n\n判断页面页签（Tab）是否为活跃状态，可以通过监听 `visibilitychange` 事件来实现。这个事件是由 `document` 对象触发的，可以用来判断页面是否对用户可见。当用户切换到其他标签页、最小化浏览器窗口、或是锁屏时，页面就会变为不可见状态。如果页面对用户可见，那么页面就处于活跃状态。\n\n使用 `document.visibilityState` 属性可以检查页面的当前可视状态，这个属性有以下可能的值：\n\n- **\"visible\"**：页面至少部分可见。在桌面端，这通常意味着页面是当前激活的标签页。\n- **\"hidden\"**：页面对用户不可见。\n- **\"prerender\"** 和 **\"unloaded\"**：这两个值用于特殊情况，通常较少用到。\n\n### 示例代码\n\n下面的代码演示了如何使用 `visibilitychange` 事件和 `document.visibilityState` 来判断页面是否为活跃状态：\n\n```javascript\ndocument.addEventListener(\"visibilitychange\", function () {\n if (document.visibilityState === \"visible\") {\n console.log(\"页面现在是活跃状态。\");\n } else {\n console.log(\"页面现在不是活跃状态。\");\n }\n});\n```\n\n每当用户切换到该页签或从该页签切换走时，会触发 `visibilitychange` 事件。通过检查 `document.visibilityState` 的值，你可以判断页面是变为活跃状态还是变为非活跃状态。\n\n这个功能可以用于多种场合，比如：\n\n- 停止或开始运行页面上的动画。\n- 控制媒体播放（比如自动暂停视频播放）。\n- 调整页面或应用的资源消耗（对于非活跃页签减少资源使用）。\n- 发送用户行为统计数据，以记录用户实际查看页面的时间。\n\n这种方法的优点是兼容性好，现代浏览器都支持 `visibilitychange` 事件，可以用于构建响应用户行为的 web 应用。\n",{"_58":361,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/855/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/855/timeline",{"_58":364,"_60":61,"_62":365,"_64":366,"_66":367,"_68":368,"_70":369,"_72":370,"_74":371,"_76":372,"_78":373,"_111":374,"_124":125,"_126":24,"_127":-5,"_128":377,"_130":378,"_152":145,"_146":391,"_148":391,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":392,"_163":393,"_169":394,"_171":395,"_183":397,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/854","https://api.github.com/repos/pro-collection/interview-question/issues/854/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/854/comments","https://api.github.com/repos/pro-collection/interview-question/issues/854/events","https://github.com/pro-collection/interview-question/issues/854",2485093608,"I_kwDOJGDC6c6UH4To",854,"如何组织工程项目【热度: 517】",{"_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},[375,376],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":203,"_72":204,"_58":205,"_117":206,"_119":207,"_121":24,"_122":208},[],{"_58":379,"_68":380,"_62":381,"_70":382,"_72":383,"_74":384,"_76":385,"_122":386,"_140":387,"_142":388,"_144":145,"_124":125,"_146":389,"_148":390,"_150":-5,"_151":-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,"资深","资深级别面试问题",{"_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},50,"2023-03-06T15:00:45Z","2025-07-06T12:02:25Z","2024-08-25T06:58:45Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：组织工程项目\n\n该话题是开放性话题，难度系数可高可低，请自己探索答案吧。\n",{"_58":396,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/854/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/854/timeline",{"_58":399,"_60":61,"_62":400,"_64":401,"_66":402,"_68":403,"_70":404,"_72":405,"_74":406,"_76":407,"_78":408,"_111":409,"_124":125,"_126":24,"_127":-5,"_128":411,"_130":412,"_152":245,"_146":414,"_148":415,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":416,"_163":417,"_169":418,"_171":419,"_183":421,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/853","https://api.github.com/repos/pro-collection/interview-question/issues/853/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/853/comments","https://api.github.com/repos/pro-collection/interview-question/issues/853/events","https://github.com/pro-collection/interview-question/issues/853",2485092272,"I_kwDOJGDC6c6UH3-w",853,"移动端如何实现下拉滚动加载（顶部加载）【热度: 740】",{"_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},[410],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":413,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-25T06:54:00Z","2024-08-25T07:48:53Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：移动端下拉加载\n\n> 有现成的文档可以直接参考，讲得非常的全面\n> 文章链接： https://juejin.cn/post/7340836136208859174\n> 一下是作者对于改文章的总结\n\n### 原理\n\n![prinple.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/506932c16c034452b90ae01decabf62c~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=825&h=359&s=455756&e=png&b=ffffff)\n\n如图所示，蓝色框代表视口，绿色框代表容器，橙色框代表加载动画。最开始时，加载动画处于视口外；开始下拉之后，容器向下移动，加载动画从上方进入视口；结束下拉后，容器又开始向上移动，加载动画也从上方退出视口。\n\n### 核心逻辑\n\n看完布局代码，我们再看逻辑代码。逻辑代码中，我们要监听用户的手指滑动、实现下拉手势。我们需要用到三个事件：\n\n- [touchstart](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/touchstart_event) 代表触摸开始;\n- [touchmove](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/touchmove_event) 代表触摸移动;\n- [touchend](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/touchend_event) 代表触摸结束。\n\n从 `touchstart` 和 `touchmove` 事件中我们可以获取手指的坐标，比如 `event.touches[0].clientX` 是手指相对视口左边缘的 X 坐标，`event.touches[0].clientY` 是手指相对视口上边缘的 Y 坐标；从 `touchend` 事件中我们则无法获得 `clientX` 和 `clientY`。\n\n我们可以先记录用户手指 touchstart 的 clientY 作为开始坐标，记录用户最后一次触发 touchmove 的 clientY 作为结束坐标，二者相减就得到手指移动的距离 distanceY。\n\n设置手指移动多少距离，容器就移动多少距离，就得到了我们的逻辑代码：\n\n```js\n 代码解读const box = document.getElementById('box')\nconst loader = document.getElementById('loader')\nlet startY = 0, endY = 0, distanceY = 0\n\nfunction start(e) {\n startY = e.touches[0].clientY\n}\n\nfunction move(e) {\n endY = e.touches[0].clientY\n distanceY = endY - startY\n box.style = `\n transform: translateY(${distanceY}px);\n transition: all 0.3s linear;\n `\n}\n\nfunction end() {\n setTimeout(() => {\n box.style = `\n transform: translateY(0);\n transition: all 0.3s linear;\n `\n loader.className = 'loading'\n }, 1000)\n}\n\nbox.addEventListener('touchstart', start)\nbox.addEventListener('touchmove', move)\nbox.addEventListener('touchend', end)\n```\n\n逻辑代码实现一个简陋的下拉效果，当然现在还有很多缺陷。\n\n![pull-down-basic.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fdc67efc50947e8bceb590b1e4d3df5~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=375&h=400&s=204176&e=gif&f=48&b=efefef)\n\n### 存在的 6 个个缺陷\n\n- 没有最小、最大距离限制\n- 加载动画没有停留在视口顶部\n- 重复触发\n- 没有限制方向\n- 没有阻止原生滚动\n- 没有阻止 iOS 橡皮筋效果\n\n### 修复上面缺陷\n\n请看原文\n",{"_58":420,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/853/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/853/timeline",{"_58":423,"_60":61,"_62":424,"_64":425,"_66":426,"_68":427,"_70":428,"_72":429,"_74":430,"_76":431,"_78":432,"_111":433,"_124":125,"_126":24,"_127":-5,"_128":436,"_130":437,"_152":145,"_146":439,"_148":439,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":440,"_163":441,"_169":442,"_171":443,"_183":445,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/852","https://api.github.com/repos/pro-collection/interview-question/issues/852/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/852/comments","https://api.github.com/repos/pro-collection/interview-question/issues/852/events","https://github.com/pro-collection/interview-question/issues/852",2485089017,"I_kwDOJGDC6c6UH3L5",852,"PerformanceObserver 如何测量页面性能【热度: 190】",{"_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},[434,435],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":234,"_72":235,"_58":236,"_117":237,"_119":207,"_121":24,"_122":208},[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":438,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-25T06:41:58Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：PerformanceObserver api 使用\n\n`PerformanceObserver` API 是一个强大的浏览器接口，允许开发者订阅性能相关的事件，实时收集和分析用户当前浏览器会话中的性能数据。这个 API 是 Web 性能监测工具箱的一部分，与 `window.performance` 对象紧密协作，后者提供了对网页性能数据的访问。`PerformanceObserver` 允许应用异步监听性能测量事件，而不需要定时检查 `window.performance` 的条目。\n\n### 核心功能\n\n- **实时性能数据收集**：随着网页生命周期中各种事件的触发，`PerformanceObserver` 支持实时捕获和处理性能数据条目。\n- **减少资源消耗**：与轮询 `window.performance` 对象相比，使用 `PerformanceObserver` 可以降低资源消耗，并提供更及时的数据收集。\n- **灵活的数据订阅模型**：可以指定订阅一个或多个特定类型的性能条目，根据需要接收相关数据。\n\n### 主要方法\n\n- **`observe()`**：开始观察一个或多个特定类型的性能条目。通过指定条目类型，应用可以订阅感兴趣的性能事件。\n- **`disconnect()`**：停止观察性能数据。这可以释放相关资源，并停止进一步的回调执行。\n\n### 使用示例\n\n下面的例子展示了如何使用 `PerformanceObserver` 来监听首次内容绘制 (First Contentful Paint, FCP) 和最大内容绘制 (Largest Contentful Paint, LCP) 的性能指标。\n\n```javascript\nconst perfObserver = new PerformanceObserver((entryList) => {\n for (const entry of entryList.getEntries()) {\n if (entry.name === \"first-contentful-paint\") {\n console.log(\"FCP:\", entry.startTime);\n } else if (entry.name === \"largest-contentful-paint\") {\n console.log(\"LCP:\", entry.startTime);\n }\n }\n});\n\nperfObserver.observe({ type: \"paint\", buffered: true });\n```\n\n在这个例子中，`perfObserver` 被配置为监听包含 FCP 和 LCP 的 `paint` 类型的性能条目。当这些指标被记录到性能时间线上时，回调函数将被执行，并可以对这些数据进行进一步的处理，比如打印在控制台或发送到服务器。\n\n### 注意事项\n\n- `PerformanceObserver` API 的支持程度取决于浏览器和浏览器版本。为了最好地利用这一 API，推荐检查目标用户群体最常用浏览器的兼容性。\n- 合理使用 `disconnect()` 方法来停止数据的观察（特别是在单页应用中或在不再需要收集数据时）有助于保持应用的性能。\n- `buffered` 选项允许接收到观察者激活之前已经记录的性能条目，这在页面加载阶段尤其有用。\n\n通过 `PerformanceObserver`，开发者可以精细控制性能数据的收集过程，有效监控和分析网页性能，从而提升用户体验。\n",{"_58":444,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/852/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/852/timeline",{"_58":447,"_60":61,"_62":448,"_64":449,"_66":450,"_68":451,"_70":452,"_72":453,"_74":454,"_76":455,"_78":456,"_111":457,"_124":125,"_126":24,"_127":-5,"_128":460,"_130":461,"_152":145,"_146":463,"_148":463,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":464,"_163":465,"_169":466,"_171":467,"_183":469,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/851","https://api.github.com/repos/pro-collection/interview-question/issues/851/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/851/comments","https://api.github.com/repos/pro-collection/interview-question/issues/851/events","https://github.com/pro-collection/interview-question/issues/851",2485088716,"I_kwDOJGDC6c6UH3HM",851,"如何统计页面的 long task(长任务)【热度: 140】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[458,459],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":274,"_72":275,"_58":276,"_117":277,"_119":207,"_121":24,"_122":208},[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":462,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-25T06:40:46Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：统计 long task\n\n统计网页中的 `LongTask` 是性能监控的一部分，特别是在测量和优化页面的响应能力方面非常有用。`LongTask` API 提供了一种监测浏览器主线程被长时间任务阻塞的能力，这些任务通常会影响用户体验，如使滚动卡顿或延迟输入响应。下面是一些基本步骤，帮助你开始监控 `LongTask`：\n\n1. **使用 Performance Observer API**: 这个 API 允许你注册一个观察者来获取性能相关的数据，包括 `LongTask`。\n\n2. **注册 LongTask 观察者**:\n\n - 创建一个 `PerformanceObserver` 实例，并为其提供一个回调函数。这个回调函数会在观察到 `LongTask` 时被调用。\n - 在回调函数中，你可以获取到每个 `LongTask` 的详细信息，如开始时间、持续时间等。\n - 调用 `observe()` 方法开始观察性能条目，指定 `{entryTypes: ['longtask']}` 来仅观察 `LongTask`。\n\n3. **处理 LongTask 数据**:\n - 在上述回调中，你可以收集 `LongTask` 的数据并进行处理，例如计算平均持续时间，或将数据发送到服务器进行进一步分析。\n\n下面是一个简单的示例代码，演示如何注册 `LongTask` 观察者并打印任务的一些基本信息：\n\n```javascript\nconst observer = new PerformanceObserver((list) => {\n list.getEntries().forEach((entry) => {\n console.log(`LongTask Detected:`, entry);\n console.log(`Start Time: ${entry.startTime}, Duration: ${entry.duration}`);\n // TODO: 这里可以根据需要进一步处理这些数据，比如发送给服务器\n });\n});\n\n// 开始观察长任务\nobserver.observe({ entryTypes: [\"longtask\"] });\n```\n\n4. **优化相关代码**:\n\n - 一旦你开始收集到 `LongTask` 数据，可以识别出影响性能的代码区域，并进行相应的优化。\n\n5. **监控页面性能**:\n - 持续监控并优化，根据收集到的数据调整策略。\n\n记住，只有支持 Performance Timeline Level 2 规范的浏览器才能使用 `LongTask` API。在实际部署之前，确保你有对应的浏览器兼容性检查和错误处理代码。\n",{"_58":468,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/851/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/851/timeline",{"_58":471,"_60":61,"_62":472,"_64":473,"_66":474,"_68":475,"_70":476,"_72":477,"_74":478,"_76":479,"_78":480,"_111":481,"_124":125,"_126":24,"_127":-5,"_128":484,"_130":485,"_152":145,"_146":487,"_148":487,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":488,"_163":489,"_169":490,"_171":491,"_183":493,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/850","https://api.github.com/repos/pro-collection/interview-question/issues/850/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/850/comments","https://api.github.com/repos/pro-collection/interview-question/issues/850/events","https://github.com/pro-collection/interview-question/issues/850",2485085599,"I_kwDOJGDC6c6UH2Wf",850,"如何判断用户设备【热度: 551】",{"_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},[482,483],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":203,"_72":204,"_58":205,"_117":206,"_119":207,"_121":24,"_122":208},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":486,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-25T06:29:29Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：判断设备\n\n在 Web 前端开发中，判断用户设备类型（如手机、平板、桌面电脑）主要依赖于用户代理字符串（User-Agent）和/或视口（Viewport）的尺寸。以下是一些常用方法：\n\n### 使用用户代理字符串（User-Agent）\n\n用户代理字符串包含了浏览器类型、版本、操作系统等信息，可以通过分析这些信息来大致判断用户的设备类型。`navigator.userAgent` 属性用于获取用户代理字符串。\n\n```javascript\nfunction detectDevice() {\n const userAgent = navigator.userAgent;\n\n if (/mobile/i.test(userAgent)) {\n return \"Mobile\";\n }\n if (/tablet/i.test(userAgent)) {\n return \"Tablet\";\n }\n if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {\n return \"iOS Device\";\n }\n // Android, Windows Phone, BlackBerry 识别可以类似添加\n\n return \"Desktop\";\n}\n\nconsole.log(detectDevice());\n```\n\n### 使用视口尺寸\n\n有时候用户代理字符串可能不够准确或被修改，此时可以根据视口尺寸作为补充手段。通过检测屏幕的宽度，你可以推断出设备的大致类别。\n\n```javascript\nfunction detectDeviceByViewport() {\n const width = window.innerWidth;\n\n if (width < 768) {\n return \"Mobile\";\n }\n if (width >= 768 && width < 992) {\n return \"Tablet\";\n }\n return \"Desktop\";\n}\n\nconsole.log(detectDeviceByViewport());\n```\n\n### 使用 CSS 媒体查询\n\n虽然 CSS 媒体查询主要用于响应式设计，但你也可以在 JavaScript 中使用 `window.matchMedia()` 方法来判断设备类型。这提供了一种基于 CSS 媒体查询语法来检测设备/视口特性的方式。\n\n```javascript\nfunction detectDeviceByMediaQuery() {\n if (window.matchMedia(\"(max-width: 767px)\").matches) {\n return \"Mobile\";\n } else if (window.matchMedia(\"(min-width: 768px) and (max-width: 991px)\").matches) {\n return \"Tablet\";\n } else {\n return \"Desktop\";\n }\n}\n\nconsole.log(detectDeviceByMediaQuery());\n```\n\n### 注意\n\n- **用户代理字符串被视为不可靠**：由于用户代理字符串可以被修改，某些情况下可能不能准确反映用户的设备信息。\n- **响应式设计原则**：在进行设备检测时，最佳实践是根据内容和功能的需要来适应不同设备，而不是针对特定设备进行优化或限制。\n\n综上，设备检测方法多种多样，选择合适的方法取决于你的具体需求和场景。在可能的情况下，优先考虑使用响应式设计原则，来创建能够在不同设备上良好工作的网页。\n",{"_58":492,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/850/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/850/timeline",{"_58":495,"_60":61,"_62":496,"_64":497,"_66":498,"_68":499,"_70":500,"_72":501,"_74":502,"_76":503,"_78":504,"_111":505,"_124":125,"_126":24,"_127":-5,"_128":507,"_130":508,"_152":145,"_146":510,"_148":511,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":512,"_163":513,"_169":514,"_171":515,"_183":517,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/849","https://api.github.com/repos/pro-collection/interview-question/issues/849/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/849/comments","https://api.github.com/repos/pro-collection/interview-question/issues/849/events","https://github.com/pro-collection/interview-question/issues/849",2485084623,"I_kwDOJGDC6c6UH2HP",849,"介绍一下 navigator.sendBeacon 方法【热度: 66】",{"_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},[506],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":509,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-25T06:25:47Z","2024-08-25T06:25:48Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：sendBeacon 发送请求\n\n`navigator.sendBeacon()` 方法使得网页可以异步地将数据发送到服务器，与页面的卸载过程同时进行，这一点非常重要，因为它允许在不影响用户体验的情况下，安全地结束会话或者发送统计数据。这方法主要用于追踪和诊断信息，特别是在需要确保数据被成功发送到服务器的场景中——比如记录用户在网页上的行为数据。\n\n### 基本语法\n\n```javascript\nnavigator.sendBeacon(url, data);\n```\n\n- `url`：一个字符串，代表您想要发送数据到的服务器地址。\n- `data`：可选参数，要发送的数据。可以是 `ArrayBufferView`、`Blob`、`DOMString`、或者 `FormData` 对象。\n\n### 返回值\n\n- 该方法返回一个布尔值：如果浏览器成功地将请求入队进行发送，则返回 `true`；如果请求因任何原因未能入队，则返回 `false`。\n\n### 特点\n\n1. **异步**：`sendBeacon()` 发送的请求是异步的，不会阻塞页面卸载过程或者延迟用户浏览器的关闭操作。\n2. **小数据量**：适用于发送少量数据，如统计信息和会话结束信号。\n3. **不影响关闭**：它允许在页面卸载或关闭时发送数据，而不会阻止或延迟页面的卸载过程。\n4. **可靠**：它确保数据能够在页面退出时被送出，相较于 `beforeunload` 或 `unload` 事件中使用同步的 `XMLHttpRequest` 更为可靠。\n\n### 使用示例\n\n发送一些统计数据到服务器的简单示例：\n\n```javascript\nwindow.addEventListener(\"unload\", function () {\n var data = { action: \"leave\", timestamp: Date.now() };\n navigator.sendBeacon(\"https://example.com/analytics\", JSON.stringify(data));\n});\n```\n\n在上面的例子中，当用户离开页面时，我们监听 `unload` 事件，并在该事件触发时使用 `navigator.sendBeacon()` 方法发送一些统计数据到服务器。使用 `JSON.stringify(data)` 将数据对象转换成字符串形式，因为 `sendBeacon` 需要发送的数据必须是文本或二进制形式。\n\n### 兼容性与限制\n\n- 虽然 `navigator.sendBeacon()` 被现代浏览器广泛支持，但在使用前最好检查浏览器兼容性。\n- 发送数据量有限制，一般适用于发送小量的数据。\n- 某些浏览器实现可能有细微差异，建议在实际使用前进行充分测试。\n\n通过使用 `navigator.sendBeacon()`，开发者可以确保在页面卸载过程中，重要的数据能够被可靠地发送到服务器，从而改善数据收集的准确性和用户体验。\n",{"_58":516,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/849/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/849/timeline",{"_58":519,"_60":61,"_62":520,"_64":521,"_66":522,"_68":523,"_70":524,"_72":525,"_74":526,"_76":527,"_78":528,"_111":529,"_124":125,"_126":24,"_127":-5,"_128":531,"_130":532,"_152":145,"_146":534,"_148":534,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":535,"_163":536,"_169":537,"_171":538,"_183":540,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/847","https://api.github.com/repos/pro-collection/interview-question/issues/847/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/847/comments","https://api.github.com/repos/pro-collection/interview-question/issues/847/events","https://github.com/pro-collection/interview-question/issues/847",2485083266,"I_kwDOJGDC6c6UH1yC",847,"退出浏览器之间，发送积压的埋点数据请求，该如何做【热度: 134】",{"_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},[530],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":533,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-25T06:21:21Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：退出浏览器发送积压请求数据\n\n退出浏览器时发送积压的埋点数据请求是 web 开发中的一个常见需求，尤其是在需要确保用户活动数据尽可能准确地被记录的场景下。实现这一需求的关键在于捕获用户关闭浏览器或离开页面的时刻，并在这一时刻尽可能快速地发送所有积压的数据。由于浏览器对于即将关闭时发出的请求处理方式不同，这一过程可能会有些复杂。\n\n### 使用 `navigator.sendBeacon()`\n\n`navigator.sendBeacon()` 方法允许你在浏览器会话结束时异步地向服务器发送小量数据。这个方法的设计初衷就是为了解决上述问题。`sendBeacon()` 在大多数现代浏览器中得到支持，并且其异步特性意味着它不会阻塞页面卸载或影响用户体验。\n\n```javascript\nwindow.addEventListener(\"beforeunload\", function (event) {\n var data = {\n /* 收集的埋点数据 */\n };\n var beaconUrl = \"https://yourserver.com/path\"; // 你的服务器接收端点\n\n navigator.sendBeacon(beaconUrl, JSON.stringify(data));\n});\n```\n\n### 使用 `fetch()` API 与 `keepalive` 选项\n\n如果因某种原因 `navigator.sendBeacon()` 不能满足需求，`fetch()` API 的 `keepalive` 选项是另一个选择。这个选项允许你发送一个保持存活状态的请求，即使用户已经离开页面。但是，需要注意的是，使用 `keepalive` 选项发送的请求有大小限制（大约为 64KB）。\n\n```javascript\nwindow.addEventListener(\"beforeunload\", function (event) {\n var data = {\n /* 收集的埋点数据 */\n };\n var beaconUrl = \"https://yourserver.com/path\"; // 你的服务器接收端点\n\n fetch(beaconUrl, {\n method: \"POST\",\n body: JSON.stringify(data),\n headers: {\n \"Content-Type\": \"application/json\",\n },\n keepalive: true, // 保持请求存活\n });\n});\n```\n\n### 注意事项\n\n- **浏览器兼容性**：尽管 `navigator.sendBeacon()` 和 `fetch()` 的 `keepalive` 选项被许多现代浏览器支持，但在实施解决方案时仍然需要考虑目标用户可能使用的浏览器类型和版本。\n- **数据量限制**：`sendBeacon()` 和 `keepalive` 选项的请求都有数据量限制。确保不要发送超过限制大小的数据。\n- **可靠性**：虽然这些方法能够提高数据发送的成功率，在浏览器关闭时发送数据的操作本身依然不能保证 100% 的成功率，特别是在网络状况不佳的情况下。\n\n通过上述方法，你可以在浏览器即将关闭时尝试发送积压的埋点数据，从而尽可能减少数据丢失的情况。\n",{"_58":539,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/847/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/847/timeline",{"_58":542,"_60":61,"_62":543,"_64":544,"_66":545,"_68":546,"_70":547,"_72":548,"_74":549,"_76":550,"_78":551,"_111":552,"_124":125,"_126":24,"_127":-5,"_128":554,"_130":555,"_152":145,"_146":557,"_148":558,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":559,"_163":560,"_169":561,"_171":562,"_183":564,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/846","https://api.github.com/repos/pro-collection/interview-question/issues/846/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/846/comments","https://api.github.com/repos/pro-collection/interview-question/issues/846/events","https://github.com/pro-collection/interview-question/issues/846",2485026545,"I_kwDOJGDC6c6UHn7x",846,"滚动跟随导航（电梯导航）该如何实现【热度: 498】",{"_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},[553],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":556,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-25T03:44:30Z","2024-09-15T06:48:31Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：电梯导航、混动导航\n\n> 作者备注，这个问题实际上是介于中等难度和高难度之间的问题，主要看怎么回答\n> 文本回答涉及到了 IntersectionObserver + scrollIntoView 实现，可以归为「高」里面\n\n具体 api 本文不再介绍，可以直接翻看 MDN 即可\n\n思路很简单，利用 scrollIntoView 进行导航滚动、利用 IntersectionObserver 进行可视区判断；\n\n具体实现：\n\n- 第一步：点击右边的导航菜单，利用 scrollIntoView 方法使内容区域对应的元素出现在可视区域中。\n\n```javascript\nlet rightBox = document.querySelector(\".rightBox\");\nrightBox.addEventListener(\n \"click\",\n function (e) {\n let target = e.target || e.srcElement;\n if (target && !target.classList.contains(\"rightBox\")) {\n document.querySelector(\".\" + target.className.replace(\"Li\", \"\")).scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n });\n }\n },\n false\n);\n```\n\n- 第二步：页面容器滚动时，当目标元素出现在检测区域内则联动改变对应导航的样式。\n\n```javascript\nlet observer = new IntersectionObserver(\n function (entries) {\n entries.forEach((entry) => {\n let target = document.querySelector(\".\" + entry.target.className + \"Li\");\n\n if (entry.isIntersecting && entry.intersectionRatio > 0.65) {\n document.querySelectorAll(\"li\").forEach((el) => {\n if (el.classList.contains(\"active\")) {\n el.classList.remove(\"active\");\n }\n });\n\n if (!target.classList.contains(\"active\")) {\n target.classList.add(\"active\");\n }\n }\n });\n },\n {\n threshold: [0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8],\n }\n);\n```\n\n完整效果请看下面链接： https://codepen.io/xingba-coder/pen/ZEdKRKJ\n\n**参考文档**：https://juejin.cn/post/7399982698846404649\n",{"_58":563,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/846/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/846/timeline",{"_58":566,"_60":61,"_62":567,"_64":568,"_66":569,"_68":570,"_70":571,"_72":572,"_74":573,"_76":574,"_78":575,"_111":576,"_124":125,"_126":24,"_127":-5,"_128":579,"_130":580,"_152":145,"_146":582,"_148":583,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":584,"_163":585,"_169":586,"_171":587,"_183":589,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/833","https://api.github.com/repos/pro-collection/interview-question/issues/833/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/833/comments","https://api.github.com/repos/pro-collection/interview-question/issues/833/events","https://github.com/pro-collection/interview-question/issues/833",2471505363,"I_kwDOJGDC6c6TUC3T",833,"[git] 将多次提交压缩成一次提交【热度: 412】",{"_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},[577,578],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":234,"_72":235,"_58":236,"_117":237,"_119":207,"_121":24,"_122":208},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":581,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-17T12:28:24Z","2024-08-17T12:28:25Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：多次提交压缩成一次提交\n\n将多次提交压缩成一次提交在 Git 中被称为“squash”。这通常在你完成一段工作后，想要将这段时间内的多个提交整理为一个更干净、更整洁的提交记录时使用。Git 提供了几种方法来实现提交的压缩，最常用的是通过 `git rebase` 命令配合交互模式（interactive mode）来实现。\n\n### 使用 `git rebase -i` 进行交互式压缩\n\n假设你想压缩最近的 N 次提交。首先，你需要确定从哪个提交开始进行操作。可以通过 `git log` 查看提交历史，然后选择你想要压缩的提交的前一个提交作为起点。\n\n1. **启动交互式 rebase 会话**：\n\n ```bash\n git rebase -i HEAD~N\n ```\n\n 其中 `N` 是你想要压缩的提交数量。例如，如果你想要压缩最近的 3 次提交，你应该使用 `git rebase -i HEAD~3`。\n\n2. **编辑 rebase 会话中出现的命令列表**：\n\n 执行上述命令后，你的默认文本编辑器会打开一个带有待压缩提交列表的文件。这些提交被列出来，前面默认是 `pick` 命令。\n\n ```plaintext\n pick e3a1b35 第一次提交的消息\n pick 7ac9a67 第二次提交的消息\n pick 1d2a3f4 第三次提交的消息\n ```\n\n 将除了第一个提交之外的所有 `pick` 命令改为 `squash` 或简写 `s`，表示这些提交将被压缩到前一个提交中。\n\n ```plaintext\n pick e3a1b35 第一次提交的消息\n squash 7ac9a67 第二次提交的消息\n squash 1d2a3f4 第三次提交的消息\n ```\n\n3. **保存并退出编辑器**：\n\n 一旦保存并关闭编辑器，Git 将开始 rebase 过程，并可能会要求你解决任何合并冲突。然后，它会打开你的文本编辑器，让你编辑最终的提交消息。默认情况下，这会包含你压缩的所有原始提交消息。\n\n4. **完成 rebase 过程**：\n\n 解决完所有冲突（如果有的话）并保存你的最终提交消息之后，你可以完成 rebase 过程。\n\n5. **推送更改到远端仓库（如果需要）**：\n\n 如果你已经将提交推送到了远端仓库，你可能需要使用 `--force` 参数来强制推送更改，**但请注意，这可以覆盖远端仓库的历史，因此仅在确保不会影响他人工作的情况下使用**。\n\n ```bash\n git push origin your-branch-name --force\n ```\n\n通过这种方法，你可以将多个提交压缩成一个更整洁的提交，以保持项目历史的清晰。\n",{"_58":588,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/833/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/833/timeline",{"_58":591,"_60":61,"_62":592,"_64":593,"_66":594,"_68":595,"_70":596,"_72":597,"_74":598,"_76":599,"_78":600,"_111":601,"_124":125,"_126":24,"_127":-5,"_128":604,"_130":605,"_152":145,"_146":607,"_148":607,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":608,"_163":609,"_169":610,"_171":611,"_183":613,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/822","https://api.github.com/repos/pro-collection/interview-question/issues/822/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/822/comments","https://api.github.com/repos/pro-collection/interview-question/issues/822/events","https://github.com/pro-collection/interview-question/issues/822",2471475359,"I_kwDOJGDC6c6TT7if",822,"【git] 当项目报错，你想定位是哪个 commit 引入的错误的时候，该怎么做【热度: 650】",{"_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},[602,603],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":203,"_72":204,"_58":205,"_117":206,"_119":207,"_121":24,"_122":208},[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":606,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-17T10:53:13Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：二分法查找错误 commit\n\n确实，当你不确定哪个提交(commit)引入了错误时，Git 提供了一个非常强大的工具 `git bisect` 来帮助你通过二分法快速定位出问题的提交。这个命令通过逐步缩小导致问题的提交范围，最终帮助你找出导致错误的具体提交。使用方法如下：\n\n### 如何使用 git bisect\n\n1. **开始 bisect 会话**：\n 打开终端或命令行，切换到你的项目目录下，然后使用命令开始一个 bisect 会话：\n\n```shell\ngit bisect start\n```\n\n2. **标记一个坏的提交**：\n 使用下面的命令标记当前最新的提交为'坏'的（假设当前分支上的最新提交包含了错误）：\n\n```shell\ngit bisect bad\n```\n\n如果你已经知道一个特定的坏提交，可以指定它：`git bisect bad [坏的提交id]`\n\n3. **标记一个好的提交**：\n 接下来，使用以下命令标记一个'好'的提交，即一个没有问题的旧版本：\n\n```shell\ngit bisect good [好的提交id]\n```\n\n这个好的提交应该是你确定不包含当前问题的一次提交。\n\n完成以上步骤之后，`git bisect` 将自动检出一个中间的提交供你测试。你需要编译（如果必要的话）并测试这个版本，然后根据运行结果告诉 Git 这是好是坏：\n\n- 如果这个提交版本没有问题，使用 `git bisect good`。\n- 如果这个提交版本有问题，使用 `git bisect bad`。\n\n每次你输入结果后，Git 会继续选择另一个提交进行测试，直至找到第一个'坏'的提交。\n\n### 结束 bisect 会话\n\n一旦找到了问题提交，别忘了结束 bisect 会话，释放由 `git bisect` 占用的资源：\n\n```shell\ngit bisect reset\n```\n\n这将会把你的工作目录恢复到 `git bisect` 开始之前的状态。\n\n### 注意事项\n\n- 使用 `git bisect` 时，确保有足够的测试覆盖，以准确判断某个提交是好是坏。\n- 一旦找到问题提交，你可以通过查看该提交的详情(`git show [提交id]`)来了解更多信息，从而帮助你理解为何会引入错误。\n\n### 更加详细的介绍，可以参考下面文章链接\n\nhttps://juejin.cn/post/7232591499069653051\n",{"_58":612,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/822/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/822/timeline",{"_58":615,"_60":61,"_62":616,"_64":617,"_66":618,"_68":619,"_70":620,"_72":621,"_74":622,"_76":623,"_78":624,"_111":625,"_124":125,"_126":24,"_127":-5,"_128":628,"_130":629,"_152":145,"_146":631,"_148":632,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":633,"_163":634,"_169":635,"_171":636,"_183":638,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/821","https://api.github.com/repos/pro-collection/interview-question/issues/821/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/821/comments","https://api.github.com/repos/pro-collection/interview-question/issues/821/events","https://github.com/pro-collection/interview-question/issues/821",2471472173,"I_kwDOJGDC6c6TT6wt",821,"【git] 如何移除一个指定的 commit【热度: 762】",{"_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},[626,627],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":203,"_72":204,"_58":205,"_117":206,"_119":207,"_121":24,"_122":208},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":630,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-17T10:42:34Z","2024-08-17T10:42:35Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：commit 移除\n\n移除某一个指定的 `commit` 通常意味着要在版本控制系统如 Git 中更改历史记录，这通常涉及到一些操作风险，尤其是当这个 `commit` 已经被推送到远程仓库且被其他人使用。下面是几种常见的移除指定 `commit` 的方法，但在进行这些操作前，请确保备份你的代码，以防不测：\n\n### 使用 `git rebase` 交互式命令\n\n1. 打开终端或命令行界面。\n2. 定位到你的 Git 项目路径下。\n3. 执行 `git rebase -i HEAD~X` 命令，`X` 是从当前回到你想要移除的 `commit` 的数量加 1。这条命令会打开一个交互式界面，列出最近的 `X` 次提交。\n4. 找到你想要移除的 `commit`，并将其前面的 `pick` 改为 `drop`。或者干脆删除那一行。\n5. 保存并关闭编辑器，Git 会自动开始 rebase 进程。\n\n### 如果你只是想修改最近的一次 `commit`\n\n如果你仅仅是想移除最近的一次提交，可以这样做：\n\n1. 使用命令 `git reset --soft HEAD~1` 将最后一次提交回退到暂存状态，不影响工作目录。\n2. 使用命令 `git reset --hard HEAD~1` 将最后一次提交完全撤销，包括工作目录和暂存区的改变。\n\n### 警告\n\n- 修改已经被推送到远程仓库的历史是非常危险的，如果其他人已经基于这些提交做了开发，这将引起合并冲突。\n- 如果你需要修改已经推送过的提交，完成上述操作后，需要使用 `git push --force` 来强制推送到远程仓库，这样也会影响到其他协作者的开发进程。\n",{"_58":637,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/821/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/821/timeline",{"_58":640,"_60":61,"_62":641,"_64":642,"_66":643,"_68":644,"_70":645,"_72":646,"_74":647,"_76":648,"_78":649,"_111":650,"_124":125,"_126":24,"_127":-5,"_128":657,"_130":658,"_152":145,"_146":660,"_148":661,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":662,"_163":663,"_169":664,"_171":665,"_183":667,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/811","https://api.github.com/repos/pro-collection/interview-question/issues/811/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/811/comments","https://api.github.com/repos/pro-collection/interview-question/issues/811/events","https://github.com/pro-collection/interview-question/issues/811",2458875264,"I_kwDOJGDC6c6Sj3WA",811,"日志监控：如何还原用户操作流程【热度: 450】",{"_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},[651,652],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":653,"_72":654,"_58":655,"_117":656,"_119":207,"_121":24,"_122":208},6294910473,"LA_kwDOJGDC6c8AAAABdzS2CQ","https://api.github.com/repos/pro-collection/interview-question/labels/TOP100%E4%BA%92%E8%81%94%E7%BD%91","TOP100互联网",[],{"_58":379,"_68":380,"_62":381,"_70":382,"_72":383,"_74":384,"_76":385,"_122":386,"_140":659,"_142":388,"_144":145,"_124":125,"_146":389,"_148":390,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T03:31:45Z","2024-08-10T03:31:46Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：日志监控 - 还原现场、日志监控 - 前端录制用户行为技术方案\n\n### 需求\n\n一种手段来获取用户某一时段连续的操作行为，也就是录制用户行为，包括整个会话中的每一个点击、滑动、输入等行为，同时支持回放录制的操作行为，完整且真实地重现用户行为以帮助我们回溯或分析某些使用场景。\n\n### 实现方式\n\n**方案对比**\n\n| 对比内容 | 视频录制 | 页面截图 | Dom 快照录制 |\n| ---------- | -------------------- | ------------------------ | ------------------------- |\n| 开源库 | WebRTC 原生支持 | html2canvas | rrweb |\n| 用户感知 | 录制有感 | 录制无感 | 录制无感 |\n| 产物大小 | 大 | 大 | 相对较小 |\n| 兼容性 | 详见相关 API 兼容性 | 部分场景内容截图无法显示 | 兼容性相对较好 |\n| 信息安全 | 无法脱敏 | 无法脱敏 | 可以脱敏 |\n| 可操作性 | 弱 | 弱 | 强（支持数据脱敏/加密等） |\n| 回放清晰度 | 录制时决定，有损录制 | 录制时决定，有损录制 | 高保真 |\n\n### 实操\n\n#### 视频录制\n\n录制用户行为最容易想到的就是将屏幕操作通过视频的方式录制下来，目前浏览器本身已经提供了一套基于音视轨的实时数据流传输方案 [WebRTC](https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API)（Web Real-Time Communications），在我们的录屏使用场景主要关注以下几个 API：\n\n- [getDisplayMedia()](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia) - 提示用户给予使用媒体输入的许可从而获取屏幕的流；\n- [MediaRecorder()](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder/MediaRecorder) - 生成对指定的媒体流进行录制的 MediaRecorder 对象；\n- [ondataavailable](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder/dataavailable_event) - 当 MediaRecorder 将媒体数据传递到应用程序以供使用时将触发该事件；\n\n整体录制流程如下：\n\n1. 调用`mediaDevices.getDisplayMedia()`由用户授权选择屏幕进行录制，获取到数据流；\n2. 生成一个`new MediaRecorder()`对象录制获取的屏幕的数据流；\n3. 在 MediaRecorder 对象上设置`ondataavailable`监听事件用于获取录制的 Blob 数据。\n\n```html\n代码解读\n\n\n```\n\n![Untitled 1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c4204442dc649d8af7027d85652bbcd~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=3582&h=2118&s=1544515&e=png&b=fcfcfc)\n\n#### 页面截图\n\n众所周知，视频是由一帧帧的画面组合而成的，因此我们可以按照一定时间间隔来截图的方式保存当前页面快照，然后将快照按照相同的截取速度播放形成视频就能实现用户行为录制了。最常用的截图方法就是以 [html2canvas](https://www.npmjs.com/package/html2canvas) 库为代表的 canvas 截图，我们在使用过程中也发现了较多问题：\n\n1. canvas 截图有较多局限之处，例如无法绘制动画、样式错位、[不支持部分 CSS 样式](https://html2canvas.hertzen.com/features)等；\n2. 截图性能开销较大，可能会导致掉帧，例如我们在尝试中 css 动画有非常明显的卡顿等；\n3. 截图资源体积大，我们尝试中截图时单张图片体积为 200k 左右，以 24 帧来算一分钟录制的图片体积将近 300MB，对带宽和资源存储都是浪费；\n4. 在需要忽略的元素上增加 data-html2canvas-ignore 属性或者设置 ignoreElements 属性删除特定元素可以对某些特定数据或内容进行脱敏，但会直接删除元素无法做到“有占位但无内容”效果，影响页面布局。\n\n```html\n代码解读\n\n\n```\n\n#### Dom 快照录制\n\n> 💡 **Dom 快照录制 - rrweb 库** 是目前最为流行的解决方案，一些商业化平台解决方案也都主要基于 rrweb 库来进行录制与回放的功能开发。\n\nrrweb 主要由 3 部分组成：\n\n1. [rrweb-snapshot](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot/)，包含 snapshot 和 rebuild 两部分，snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识，rebuild 是将 snapshot 记录的数据结构重建为对应 DOM。\n2. [rrweb](https://github.com/rrweb-io/rrweb)，包含 record 和 replay 两个功能，record 用于记录 DOM 中的所有变更，replay 则是将记录的变更按照对应的时间一一重放。\n3. [rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player/)，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。\n\n![Untitled 4.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c837f24b84d444db31b8941d2df4021~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1822&h=602&s=18559&e=png&a=1&b=fdf2f2)\n\n**分别设计到了【录制】和【回访】两个场景**\n\n细节可以参考官网文档即可\n\n### 参考文档\n\nhttps://juejin.cn/post/7280429214607769658\n",{"_58":666,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/811/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/811/timeline",{"_58":669,"_60":61,"_62":670,"_64":671,"_66":672,"_68":673,"_70":674,"_72":675,"_74":676,"_76":677,"_78":678,"_111":679,"_124":125,"_126":24,"_127":-5,"_128":682,"_130":683,"_152":145,"_146":685,"_148":686,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":687,"_163":688,"_169":689,"_171":690,"_183":692,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/808","https://api.github.com/repos/pro-collection/interview-question/issues/808/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/808/comments","https://api.github.com/repos/pro-collection/interview-question/issues/808/events","https://github.com/pro-collection/interview-question/issues/808",2458862560,"I_kwDOJGDC6c6Sj0Pg",808,"日志监控问题：可有办法将请求的调用源码地址包括代码行数也上报上去？【热度: 814】",{"_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},[680,681],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":203,"_72":204,"_58":205,"_117":206,"_119":207,"_121":24,"_122":208},[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":684,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T02:43:39Z","2024-08-10T02:43:40Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：日志监控问题\n\n在使用了代码混淆（例如 Webpack 的 mina-hash、chunkhash 或 contenthash）的前端代码中，即使执行了混淆，依然可以通过以下方法在日志监控时提供足够的上下文信息，主要包括被请求的源代码地址以及代码行数：\n\n### 源码映射(Source Maps)\n\n1. **生成 Source Maps:**\n 在构建过程中生成功能强大的源码映射（Source Maps）文件是标准做法。Source Maps 主要用于将混淆、压缩后的 JavaScript 代码映射回到其原始版本，允许在浏览器调试工具中查看原始代码和追踪错误。\n\n - **保存映射文件:** 在生产版本中生成如`.map`的 Source Map 文件，并确保它们正常处理（通常是将它们放置在服务器上的一个公开但安全的位置）。\n - **反映在 Source Maps 中的映射:** Source Maps 文件应将原始的源文件路径和行号映射到构建后的代码中对应的位置。\n\n2. **错误跟踪系统集成:**\n 使用错误跟踪工具（也常被称为 Error Monitoring 平台, 如 Sentry、LogRocket、Bugsnag 等），这些工具通常兼容并支持 Source Maps:\n\n - **自动和源码追踪:**\n 漏洞和崩溃报告将自动包含被未混淆的源码引用，您只需确保生产版本的 Source Maps 配置正确。\n\n - **代码行号报告:**\n 用户报告的堆栈跟踪信息将包括对应底层源文件，而非混淆后的行号。\n\n### 自定义错误日志逻辑\n\n1. **覆盖全局的错误处理器：**\n 对于更高级的错误追踪，你可能需要在前端代码中维护自定义的错误处理逻辑。\n\n - **使用`.Window.onerror`或`try...catch`:**\n 在`Window.onerror`中捕捉到运行时错误时，或者在自定义函数内`try...catch`捕获的错误，你可以从错误的堆栈跟踪中提取当前运行代码的位置，并尝试将符号化的堆栈信息发送到后端服务器。\n\n2. **在后端查阅符号化堆栈:**\n 为了安全和性能的考虑，源码映射通常不包括在客户端的部署中。因此固体堆栈信息需要在服务器端符号化，这是针对转换后的堆栈轨迹进行处理，将反向转换为源代码行。\n\n### 注意:\n\n- 确保 Source Maps 不公开到客户端以避免潜在的安全风险。应该将它们存放于受控的服务器环境，以避免源码泄露或不当使用。\n- 以上方案更适合于开发或测试环境提供详细调试信息，确保在最终部署产品之前只公开给授权的人员。\n",{"_58":691,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/808/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/808/timeline",{"_58":694,"_60":61,"_62":695,"_64":696,"_66":697,"_68":698,"_70":699,"_72":700,"_74":701,"_76":702,"_78":703,"_111":704,"_124":125,"_126":24,"_127":-5,"_128":711,"_130":712,"_152":145,"_146":714,"_148":715,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":716,"_163":717,"_169":718,"_171":719,"_183":721,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/806","https://api.github.com/repos/pro-collection/interview-question/issues/806/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/806/comments","https://api.github.com/repos/pro-collection/interview-question/issues/806/events","https://github.com/pro-collection/interview-question/issues/806",2421184970,"I_kwDOJGDC6c6QUFnK",806,"如何减少项目里面 if-else【热度: 310】",{"_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},[705,706],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":707,"_72":708,"_58":709,"_117":710,"_119":207,"_121":24,"_122":208},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团",[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":713,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-07-21T02:52:59Z","2024-07-21T02:53:00Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：减少 if-else\n\n当项目中存在大量的 `if-else` 语句时，可以考虑以下几种优化方法：\n\n1. 策略模式\n\n - 创建一组策略对象，每个对象对应一种条件和处理逻辑。根据不同的条件选择相应的策略对象来执行操作。\n\n2. 表驱动法\n\n - 建立一个数据结构（如对象或数组），将条件与对应的处理函数或值关联起来，通过查找表来获取相应的处理方式。\n\n3. 多态\n\n - 如果条件判断基于不同的对象类型，可以使用多态性，让每个对象类型实现自己的处理方法。\n\n4. 提取函数\n\n - 将每个 `if-else` 分支中的复杂逻辑提取为独立的函数，以提高代码的可读性和可维护性。\n\n5. 状态模式\n - 当条件判断反映的是对象的不同状态时，可以使用状态模式来处理。\n\n例如，使用表驱动法的示例代码如下：\n\n```javascript\nconst handlers = {\n condition1: () => {\n // 处理条件 1 的逻辑\n },\n condition2: () => {\n // 处理条件 2 的逻辑\n },\n // 更多条件和处理函数\n};\n\nconst condition = \"condition1\"; // 实际的条件\n\nif (handlers[condition]) {\n handlers[condition]();\n}\n```\n\n通过这些方法，可以使代码更加简洁、灵活和易于维护，减少大量 `if-else` 带来的复杂性和混乱。\n\n**参考文档**\n\n- https://juejin.cn/post/7368777511952924698\n",{"_58":720,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/806/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/806/timeline",{"_58":723,"_60":61,"_62":724,"_64":725,"_66":726,"_68":727,"_70":728,"_72":729,"_74":730,"_76":731,"_78":732,"_111":733,"_124":125,"_126":24,"_127":-5,"_128":735,"_130":736,"_152":145,"_146":738,"_148":738,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":739,"_163":740,"_169":741,"_171":742,"_183":744,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/803","https://api.github.com/repos/pro-collection/interview-question/issues/803/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/803/comments","https://api.github.com/repos/pro-collection/interview-question/issues/803/events","https://github.com/pro-collection/interview-question/issues/803",2407249943,"I_kwDOJGDC6c6Pe7gX",803,"如何实现预览 PDF 文件【热度: 173】",{"_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},[734],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":737,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-07-14T03:35:01Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：预览 PDF 文件\n\n在前端实现 PDF 文件预览功能，主要有以下几种常用方法：\n\n### 1. 使用浏览器内置的 PDF 查看器\n\n浏览器像 Chrome 和 Firefox 等内置了 PDF 查看器，可以直接在浏览器中打开和预览 PDF 文件。实现方式非常简单，只需将 PDF 文件的 URL 设置为``标签的`href`属性，或者使用`window.open`方法在新标签页中打开 PDF 文件。\n\n```html\n\n 预览PDF\n\n\n\n```\n\n### 2. 使用 PDF.js\n\n[PDF.js](https://mozilla.github.io/pdf.js/)是一个由 Mozilla 开发的开源库，它使用 HTML5 Canvas 来渲染 PDF 文件。PDF.js 提供了广泛的 API 来实现 PDF 的加载、渲染、缩放、打印等功能。\n\n#### 如何使用：\n\n1. **引入 PDF.js**\n 首先，你需要在你的项目中包含 PDF.js。可以从其[GitHub 仓库](https://github.com/mozilla/pdf.js)中直接下载或使用 CDN。\n\n```html\n\n\n\n```\n\n2. **渲染 PDF 文件**\n 使用 PDF.js 提供的 API 来加载和渲染 PDF 文件。\n\n```html\n\n

\n\n\n```\n\n### 3. 使用第三方服务\n\n也可以使用第三方服务如 Google Docs Viewer 来预览 PDF。这种方法的优点是容易实现，但依赖于外部服务。\n\n```html\n\n```\n\n其中，将`http://path.to/your/document.pdf`替换为你的 PDF 文件的真实 URL。\n\n### 选择适合的方法\n\n- **简单预览**：如果只需要一个简单的 PDF 文件预览，使用浏览器的内置功能是最快的方法。\n- **复杂的 PDF 交互**：对于需要复杂交互（如注释、填写表单）的 PDF 文件，PDF.js 提供了更多控制和定制选项。\n- **简易集成但依赖第三方**：使用第三方服务是最容易实现的，但您的数据可能会通过第三方服务器传递，需要考虑隐私和安全性。\n",{"_58":743,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/803/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/803/timeline",{"_58":746,"_60":61,"_62":747,"_64":748,"_66":749,"_68":750,"_70":751,"_72":752,"_74":753,"_76":754,"_78":755,"_111":756,"_124":125,"_126":24,"_127":-5,"_128":759,"_130":760,"_152":145,"_146":762,"_148":762,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":763,"_163":764,"_169":765,"_171":766,"_183":768,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/802","https://api.github.com/repos/pro-collection/interview-question/issues/802/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/802/comments","https://api.github.com/repos/pro-collection/interview-question/issues/802/events","https://github.com/pro-collection/interview-question/issues/802",2407246213,"I_kwDOJGDC6c6Pe6mF",802,"如何在划词选择的文本上添加右键菜单（划词：鼠标滑动选择一组字符，对组字符进行操作）【热度: 100】",{"_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},[757,758],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":653,"_72":654,"_58":655,"_117":656,"_119":207,"_121":24,"_122":208},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":761,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-07-14T03:17:01Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：DOM getSelection 方法应用场景\n\n> 主要考察 dom 方法， `getSelection`\n> 属于很冷门知识，只会在做过富文本的同学面试过程中可能会问得到。\n\n要在划词选择的文本上添加右键菜单，可以按照以下步骤进行操作：\n\n1. 监听鼠标右键事件\n 在文档或富文本区域上添加 `contextmenu` 事件的监听。\n\n```javascript\ndocument.addEventListener(\"contextmenu\", function (event) {\n // 阻止默认的浏览器右键菜单\n event.preventDefault();\n\n // 在此处显示自定义右键菜单\n showCustomMenu(event);\n});\n```\n\n2. 显示自定义右键菜单\n 创建一个自定义的菜单元素，并根据选择的文本设置菜单选项。\n\n```javascript\nfunction showCustomMenu(event) {\n const customMenu = document.createElement(\"div\");\n customMenu.style.position = \"absolute\";\n customMenu.style.left = event.clientX + \"px\";\n customMenu.style.top = event.clientY + \"px\";\n\n // 添加菜单选项\n const menuItem1 = document.createElement(\"div\");\n menuItem1.textContent = \"复制\";\n menuItem1.addEventListener(\"click\", function () {\n // 处理复制操作\n copySelectedText();\n });\n customMenu.appendChild(menuItem1);\n\n // 可以添加更多的菜单选项\n\n document.body.appendChild(customMenu);\n}\n```\n\n3. 处理菜单选项的操作\n 例如，实现复制选中文本的功能。\n\n```javascript\nfunction copySelectedText() {\n const selection = window.getSelection();\n if (selection) {\n const range = selection.getRangeAt(0);\n const clipboardData = new ClipboardEvent(\"copy\", {\n clipboardData: { text: range.toString() },\n bubbles: true,\n }).clipboardData;\n document.execCommand(\"copy\", false, clipboardData);\n }\n}\n```\n\n4. 隐藏右键菜单\n 当用户点击菜单之外的区域时，隐藏自定义右键菜单。\n\n```javascript\ndocument.addEventListener(\"click\", function (event) {\n const customMenu = document.querySelector(\".custom-menu\");\n if (customMenu && !customMenu.contains(event.target)) {\n customMenu.remove();\n }\n});\n```\n",{"_58":767,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/802/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/802/timeline",{"_58":770,"_60":61,"_62":771,"_64":772,"_66":773,"_68":774,"_70":775,"_72":776,"_74":777,"_76":778,"_78":779,"_111":780,"_124":125,"_126":24,"_127":-5,"_128":783,"_130":784,"_152":145,"_146":786,"_148":787,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":788,"_163":789,"_169":790,"_171":791,"_183":793,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/801","https://api.github.com/repos/pro-collection/interview-question/issues/801/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/801/comments","https://api.github.com/repos/pro-collection/interview-question/issues/801/events","https://github.com/pro-collection/interview-question/issues/801",2407245719,"I_kwDOJGDC6c6Pe6eX",801,"富文本里面，是如何做到划词的（鼠标滑动选择一组字符，对组字符进行操作）？【热度: 100】",{"_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},[781,782],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":653,"_72":654,"_58":655,"_117":656,"_119":207,"_121":24,"_122":208},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":785,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-07-14T03:14:56Z","2024-07-14T03:14:57Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：DOM getSelection 方法\n\n> 主要考察 dom 方法， `getSelection`\n> 属于很冷门知识，只会在做过富文本的同学面试过程中可能会问得到。\n\n在富文本环境中实现划词（鼠标滑动选择一组字符并对其进行操作）通常涉及以下几个关键步骤和技术：\n\n1. 事件监听\n\n - 监听鼠标按下、鼠标移动和鼠标松开这三个主要的鼠标事件。当鼠标按下时，标记选择的开始；在鼠标移动过程中，根据鼠标的位置更新选择范围；鼠标松开时，确定最终的选择。\n\n2. 选择范围计算\n\n - 使用浏览器提供的 `Selection` 对象来获取和管理选择的范围。在鼠标移动过程中，不断更新 `Selection` 对象的范围。\n\n3. 操作处理\n - 一旦选择完成，可以根据具体的需求对选中的字符进行操作。例如，修改样式（如加粗、变色）、获取选中的文本内容、执行复制粘贴等操作。\n\n以下是一个简单的 JavaScript 示例，展示了如何获取选中的文本：\n\n```html\n\n\n \n \n \n \n Document\n \n\n \n

这是一段示例文本，您可以尝试选中一部分。

\n\n \n \n\n```\n",{"_58":792,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/801/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/801/timeline",{"_58":795,"_60":61,"_62":796,"_64":797,"_66":798,"_68":799,"_70":800,"_72":801,"_74":802,"_76":803,"_78":804,"_111":805,"_124":125,"_126":24,"_127":-5,"_128":807,"_130":808,"_152":145,"_146":810,"_148":810,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":811,"_163":812,"_169":813,"_171":814,"_183":816,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/800","https://api.github.com/repos/pro-collection/interview-question/issues/800/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/800/comments","https://api.github.com/repos/pro-collection/interview-question/issues/800/events","https://github.com/pro-collection/interview-question/issues/800",2407242357,"I_kwDOJGDC6c6Pe5p1",800,"如何做好前端监控方案【热度: 672】",{"_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},[806],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":379,"_68":380,"_62":381,"_70":382,"_72":383,"_74":384,"_76":385,"_122":386,"_140":809,"_142":388,"_144":145,"_124":125,"_146":389,"_148":390,"_150":-5,"_151":-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-07-14T02:59:24Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：前端监控\n\n> 作者推荐可以直接参考下面这个文章就好了，写的挺不错的。\n> https://juejin.cn/post/7285608128040206391\n\n作者在这里，对上面的文章进行一下简单的总结\n\n**全文总结：**\nWeb 前端监控的方案，包括前端监控的意义、内容、形式、总体方案设计、监控指标、前端埋点方案、上报逻辑、监控数据存储、管理平台展示、报警通知、优化整改等方面。\n\n**重要：**\n\n- **前端监控的意义**：如同城市探头，实时监测保证系统稳定高效，为业务赋能获取更多用户。能够快速解决用户线上问题、用户性能问题；给予产品决策提供数据支撑。\n- **2-5-8 原则**：阐述不同响应时间用户的感受和可能的行为。\n- **监控的内容**：包括用户行为程序异常、运行性能。\n- **监控的形式**：分为主动和被动监控。\n- **总体方案设计**：涵盖页面埋点、数据上报、后台存储、汇总统计、报警展示、优化整改等环节。\n- **监控指标**：性能指标如 FP、FCP、FMP 等以及 Google Web Vitals 中的 LCP、FID、CLS 等，还有用户指标如 UV、PV 等。\n- **前端埋点方案**：介绍了写死在业务代码、全量埋点、动态埋点三种方式，推荐动态埋点。\n- **上报逻辑**：ajax、fetch 上报、image 上报、jsonp 上报、sendBeacon 上报，推荐 sendBeacon 上报。\n- **监控数据的存储**：可存于 Hadoop 大数据平台、MySQL 关系数据库、NoSQL 存储。\n- **管理平台展示**：包括注册和管理业务项目、查看监控数据、配置监控规则和阈值。\n- **报警通知**：通过定时任务读取配置表，根据规则查询数据，有多种通知形式。\n- **优化整改**：针对性能不达标和用户留存低提出多种措施。\n",{"_58":815,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/800/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/800/timeline",{"_58":818,"_60":61,"_62":819,"_64":820,"_66":821,"_68":822,"_70":823,"_72":824,"_74":825,"_76":826,"_78":827,"_111":828,"_124":125,"_126":24,"_127":-5,"_128":830,"_130":831,"_152":145,"_146":833,"_148":834,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":835,"_163":836,"_169":837,"_171":838,"_183":840,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/799","https://api.github.com/repos/pro-collection/interview-question/issues/799/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/799/comments","https://api.github.com/repos/pro-collection/interview-question/issues/799/events","https://github.com/pro-collection/interview-question/issues/799",2406814114,"I_kwDOJGDC6c6PdRGi",799,"如何标准化处理线上用户反馈的问题【热度: 631】",{"_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},[829],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":379,"_68":380,"_62":381,"_70":382,"_72":383,"_74":384,"_76":385,"_122":386,"_140":832,"_142":388,"_144":145,"_124":125,"_146":389,"_148":390,"_150":-5,"_151":-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-07-13T09:14:56Z","2024-07-13T09:14:57Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：处理线上用户反馈\n\n> 作者之所以要将这个问题定义为【master】级别，是因为这个问题，说简单又简单，说难又是有不小难度的。 \n> 作者认为：在一个团队里面，能够快速解决用户的线上反馈问题，这个是中级、高级开发的能力要求。\n> 但是，**在一个团队里面，提供一个完整的线上问题反馈的解决方案，是一个资深研发工程师的能力要求模型。**\n>\n> 还有这个是一个开放型的问题，各位小伙伴可以根据各自的情况，自由发挥吧\n\n修复 bug 研发往往需要先复现，而复现需要依赖一些关键信息，比如用户操作路径，日志信息等等；但站在组织架构角度，研发同学一般不会直接跟客户打交道，所以在客户提出问题的同时尝试搜集必要的 bug 信息对于整个 bug 修复流程很有重要。\n\n当然在很多公司，用户问题是会先反馈给销售团队或者技术支持团队。我们这里讨论的情况是，问题就已经反馈到了研发同学的情况。\n\n### 客户沟通原则\n\n原则很简单，就是尝试自己复现，如果自己无法复现，再去尝试跟客户沟通。\n\n![https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf0b164ff3dd49b08b266ae4d2fb35a0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf0b164ff3dd49b08b266ae4d2fb35a0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp)\n\n### 前期通用排查手段\n\n#### 1. 是否受缓存影响？\n\n浏览器缓存：包裹 cookies、本地缓存、indexDB 等等，这些缓存一般存储用户数据，账号信息，关键逻辑缓存等等。验证是否受浏览器缓存影响最直接的是让用户新开一个无痕浏览器测试功能是否正常即可，如果无痕正常但非无痕有问题，那就可以确定是这个问题了。\n\n#### 2. 是否受浏览器插件影响？\n\n也是直接使用无痕浏览器验证功能是否正常\n\n#### 3. 浏览器版本问题\n\n尝试升级浏览器即可，或者换一个浏览器\n\n#### 4. 网络网关问题\n\n遇到这个问题，应该该用户整个网内都有该问题。\n\n可以通过心跳检测，资源加载检测等手段，确认是否是网络问题。\n\n### 信息收集\n\n这部分主要收集用户的一些操作信息，例如用户操作路径、报错信息、运行日志等。\n\n这里就直接整理一下需要收集的一些信息。\n\n- 用户复现问题路径\n- 用户信息\n- 客户出现问题使用的操作系统和版本\n- 客户使用的浏览器类型与具体版本\n- 报错信息\n- 客户遇到问题时的截图或录屏\n- 此问题是否是近期突然出现还是一直存在\n- 对于公司群体用户是否只有特定用户遇到了这个问题\n- 性能问题的 performance 文件\n\n这里只是列举了一些常用的信息，建议信息收集的时候，直接介入一个完整的日志报警平台。通过上报日志与监控报警的方式来收集这部分信息。\n\n这里如果公司没有自检报警监控的框架，我这里直接就推荐开源日志框架的 `Sentry`\n\n`Sentry`：一个功能强大的错误监控和日志收集工具。支持多种前端框架和语言，能够实时捕获和报告前端应用中的错误和异常，并提供详细的错误上下文信息。\n\n### 参考文档\n\n- https://juejin.cn/post/7238259557989613627\n",{"_58":839,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/799/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/799/timeline",{"_58":842,"_60":61,"_62":843,"_64":844,"_66":845,"_68":846,"_70":847,"_72":848,"_74":849,"_76":850,"_78":851,"_111":852,"_124":125,"_126":24,"_127":-5,"_128":862,"_130":863,"_152":145,"_146":865,"_148":866,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":867,"_163":868,"_169":869,"_171":870,"_183":872,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/795","https://api.github.com/repos/pro-collection/interview-question/issues/795/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/795/comments","https://api.github.com/repos/pro-collection/interview-question/issues/795/events","https://github.com/pro-collection/interview-question/issues/795",2405618886,"I_kwDOJGDC6c6PYtTG",795,"axios 是否可以取消请求【热度: 532】",{"_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},[853,860,861],{"_70":854,"_72":855,"_58":856,"_117":857,"_119":858,"_121":24,"_122":859},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":653,"_72":654,"_58":655,"_117":656,"_119":207,"_121":24,"_122":208},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":864,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-07-12T13:27:41Z","2024-07-12T13:34:32Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：取消请求\n\nAxios 可以取消请求。官方文档指出有两种方法可以取消请求，分别是`cancelToken`和`AbortController`，示例代码如下：\n\n- 使用`cancelToken`的方法一：\n\n```javascript\nconst CancelToken = axios.CancelToken;\nconst source = CancelToken.source();\naxios.post(\"/user/12345\", { name: \"new name\" }, { cancelToken: source.token });\nsource.cancel(\"Operation canceled by the user.\");\n```\n\n- 使用` cancelToken`的方法二：\n\n```javascript\nconst CancelToken = axios.CancelToken;\nlet cancel;\naxios.get(\"/user/12345\", {\n cancelToken: new CancelToken(function executor(c) {\n cancel = c;\n }),\n});\ncancel();\n```\n\n- 使用`AbortController`：\n\n```javascript\nconst controller = new AbortController();\naxios.get(\"/foo/bar\", { signal: controller.signal }).then(function (response) {\n //...\n});\ncontroller.abort();\n```\n\n通过文档描述和示例代码，可以总结出以下功能点：\n\n- 支持`cancelToken`取消请求，`cancelToken`可以通过工厂函数产生，也可以通过构造函数生成；\n- 支持 Fetch API 的`AbortController`取消请求；\n- 一个`token`/`signal`可以取消多个请求，一个请求也可同时使用`token`/`signal`；\n- 如果在开始`axios request`之前执行了取消请求，则并不会发出真实的请求。\n",{"_58":871,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/795/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/795/timeline",{"_58":874,"_60":61,"_62":875,"_64":876,"_66":877,"_68":878,"_70":879,"_72":880,"_74":881,"_76":882,"_78":883,"_111":884,"_124":125,"_126":24,"_127":-5,"_128":887,"_130":888,"_152":145,"_146":890,"_148":891,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":892,"_163":893,"_169":894,"_171":895,"_183":897,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/794","https://api.github.com/repos/pro-collection/interview-question/issues/794/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/794/comments","https://api.github.com/repos/pro-collection/interview-question/issues/794/events","https://github.com/pro-collection/interview-question/issues/794",2405559209,"I_kwDOJGDC6c6PYeup",794,"前端如何实现折叠面板效果？【热度: 113】",{"_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},[885,886],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":653,"_72":654,"_58":655,"_117":656,"_119":207,"_121":24,"_122":208},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":889,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-07-12T13:07:50Z","2024-07-12T13:08:41Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：transition 过度动画\r\n\r\n以下是在您给出的折叠面板示例基础上添加动画效果的版本：\r\n\r\n**HTML 结构**（与您之前给出的相同）\r\n\r\n```html\r\n

\r\n

标题 1

\r\n

这是内容 1

\r\n

标题 2

\r\n

这是内容 2

\r\n

\r\n \r\n

\r\n```\r\n\r\n**CSS 样式**\r\n\r\n```css\r\n.accordion {\r\n width: 300px;\r\n}\r\n\r\n.accordion-item {\r\n border: 1px solid #ccc;\r\n margin-bottom: 5px;\r\n}\r\n\r\n.accordion-header {\r\n background-color: #f1f1f1;\r\n padding: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.accordion-content {\r\n padding: 10px;\r\n overflow: hidden;\r\n max-height: 0;\r\n transition: max-height 0.3s ease;\r\n}\r\n\r\n.accordion-item.open.accordion-content {\r\n max-height: 500px; /* 您可以根据内容的实际高度进行调整 */\r\n}\r\n```\r\n\r\n**JavaScript 功能**\r\n\r\n```javascript\r\nconst accordionHeaders = document.querySelectorAll(\".accordion-header\");\r\n\r\naccordionHeaders.forEach((header) => {\r\n header.addEventListener(\"click\", () => {\r\n const item = header.parentElement;\r\n item.classList.toggle(\"open\");\r\n });\r\n});\r\n```\r\n\r\n这样，当点击折叠面板的标题时，内容会以平滑的动画效果展开或收起。您可以根据实际需求调整动画的时长和内容展开的最大高度等参数。\r\n",{"_58":896,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/794/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/794/timeline",{"_58":899,"_60":61,"_62":900,"_64":901,"_66":902,"_68":903,"_70":904,"_72":905,"_74":906,"_76":907,"_78":908,"_111":909,"_124":125,"_126":24,"_127":-5,"_128":912,"_130":913,"_152":145,"_146":915,"_148":915,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":916,"_163":917,"_169":918,"_171":919,"_183":921,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/793","https://api.github.com/repos/pro-collection/interview-question/issues/793/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/793/comments","https://api.github.com/repos/pro-collection/interview-question/issues/793/events","https://github.com/pro-collection/interview-question/issues/793",2405552031,"I_kwDOJGDC6c6PYc-f",793,"dom 里面，如何判定 a 元素是否是 b 元素的子元素【热度: 400】",{"_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},[910,911],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":653,"_72":654,"_58":655,"_117":656,"_119":207,"_121":24,"_122":208},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":914,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-07-12T13:05:37Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：dom.contains 方法\n\n在 DOM（文档对象模型）中，要判断元素 `a` 是否是元素 `b` 的子元素，您可以使用以下的 JavaScript 代码：\n\n```javascript\nfunction isChildElement(a, b) {\n return b.contains(a);\n}\n```\n\n可以这样使用上述函数：\n\n```javascript\nconst elementA = document.getElementById(\"elementA\");\nconst elementB = document.getElementById(\"elementB\");\n\nif (isChildElement(elementA, elementB)) {\n console.log(\"元素 A 是元素 B 的子元素\");\n} else {\n console.log(\"元素 A 不是元素 B 的子元素\");\n}\n```\n",{"_58":920,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/793/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/793/timeline",{"_58":923,"_60":61,"_62":924,"_64":925,"_66":926,"_68":927,"_70":928,"_72":929,"_74":930,"_76":931,"_78":932,"_111":933,"_124":125,"_126":24,"_127":-5,"_128":940,"_130":941,"_152":145,"_146":943,"_148":943,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":944,"_163":945,"_169":946,"_171":947,"_183":949,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/788","https://api.github.com/repos/pro-collection/interview-question/issues/788/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/788/comments","https://api.github.com/repos/pro-collection/interview-question/issues/788/events","https://github.com/pro-collection/interview-question/issues/788",2405461842,"I_kwDOJGDC6c6PYG9S",788,"请求失败会弹出一个 toast , 如何保证批量请求失败，只弹出一个 toast【热度: 420】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[934,935],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":936,"_72":937,"_58":938,"_117":939,"_119":207,"_121":24,"_122":208},5597035813,"LA_kwDOJGDC6c8AAAABTZv9JQ","https://api.github.com/repos/pro-collection/interview-question/labels/PDD","PDD",[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":942,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-07-12T12:28:53Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：单例 toast\n\n要确保批量请求失败时只弹出一个 toast，可以通过以下几种方式实现：\n\n1. 设置全局标志位：定义一个全局变量（如 `isToastShown`）来表示是否已经弹出过 toast。在请求失败的处理逻辑中，首先检查该标志位。如果尚未弹出 toast，则进行弹出操作，并设置标志位为 `true`；如果标志位已经为 `true`，则直接忽略后续的弹出操作。\n2. 使用防抖或节流函数：防抖（debounce）或节流（throttle）函数可以限制某个函数在一定时间内的执行次数。将弹出 toast 的操作封装在防抖或节流函数中，确保在短时间内的多个请求失败时，不会频繁弹出 toast。\n3. 集中处理错误：将所有请求的错误集中处理，而不是在每个请求的 catch 块中直接弹出 toast。例如，把所有请求的 Promise 添加到一个数组中，然后使用 `Promise.all()` 或其他类似方法来统一处理这些 Promise 的结果。如果所有请求都失败了，再弹出一个 toast。\n\n以下是使用全局标志位和集中处理错误的示例代码：\n\n```javascript\nlet isToastShown = false; // 全局标志位\n\nfunction makeRequests() {\n const requests = [fetchPost(), fetchComments()]; // 多个请求的 Promise\n\n Promise.all(requests)\n .then(() => {\n // 所有请求成功的处理逻辑\n })\n .catch(errors => {\n if (!isToastShown) { // 检查标志位\n notify(errors[0]); // 弹出 toast\n isToastShown = true; // 设置标志位为 true\n }\n });\n}\n\nfunction fetchJSON(url, input) {\n return fetch(url, input)\n .then(res => {\n if (res.ok) {\n return res.json();\n }\n const err = new HttpError(res);\n if (!isToastShown) { // 检查标志位\n notify(err); // 弹出 toast\n is toastShown = true; // 设置标志位为 true\n }\n throw err;\n });\n}\n```\n\n在上述代码中，定义了一个全局变量 `isToastShown` 来标记是否已经弹出过 toast。在 `fetchJSON` 函数中，当请求失败时，如果 `isToastShown` 为 `false`，则弹出 toast 并设置其为 `true`。在 `makeRequests` 函数中，使用 `Promise.all` 来处理多个请求。如果所有请求都失败（即 `errors` 数组有内容），并且 `isToastShown` 为 `false`，则弹出 toast 并设置标志位。\n\n这样，无论有多少个请求失败，都只会弹出一个 toast。当有新的批量请求时，记得在请求开始前将 `isToastShown` 重置为 `false`。\n\n另外，如果使用的是一些前端框架或库，它们可能提供了更方便的方式来处理这种情况。例如，在 Vue.js 中，可以使用 Vuex 来管理全局状态，实现类似的功能。具体的实现方式可能会因项目的架构和使用的技术而有所不同，但基本思路是相似的。\n",{"_58":948,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/788/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/788/timeline",{"_58":951,"_60":61,"_62":952,"_64":953,"_66":954,"_68":955,"_70":956,"_72":957,"_74":958,"_76":959,"_78":960,"_111":961,"_124":125,"_126":24,"_127":-5,"_128":964,"_130":965,"_152":145,"_146":967,"_148":968,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":969,"_163":970,"_169":971,"_171":972,"_183":974,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/786","https://api.github.com/repos/pro-collection/interview-question/issues/786/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/786/comments","https://api.github.com/repos/pro-collection/interview-question/issues/786/events","https://github.com/pro-collection/interview-question/issues/786",2405455215,"I_kwDOJGDC6c6PYFVv",786,"一般是怎么做代码重构的【热度: 191】",{"_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},[962,963],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":936,"_72":937,"_58":938,"_117":939,"_119":207,"_121":24,"_122":208},[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":966,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-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-07-12T12:24:49Z","2024-07-12T12:24:50Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：代码重构\n\n在前端项目中进行代码重构，一般可以遵循以下步骤：\n\n1. 明确重构目标\n\n - 确定需要解决的问题，例如提高代码的可读性、可维护性、性能，或者去除重复代码等。\n\n2. 代码分析\n\n - 对现有代码进行全面的审查和理解，包括代码结构、逻辑流程、函数和模块之间的关系等。\n - 可以使用工具如 ESLint 检查代码风格和潜在问题，使用性能分析工具如 Chrome DevTools 的 Performance 面板来检测性能瓶颈。\n\n3. 制定重构计划\n\n - 根据分析结果，确定重构的步骤和顺序。\n - 将大型的重构任务分解为较小的、可管理的子任务。\n\n4. 重写代码结构\n\n - 对模块和组件进行合理的拆分和组织，使代码结构更加清晰。\n - 例如，将功能相关的代码提取到单独的函数或模块中，提高代码的内聚性和复用性。\n\n5. 优化函数和方法\n\n - 检查函数的长度和复杂性，对过长或过于复杂的函数进行分解。\n - 去除不必要的参数传递和全局变量的使用。\n\n6. 处理数据结构\n\n - 评估数据的存储和使用方式，选择更合适的数据结构（如从数组切换到对象，或者使用 Map、Set 等）来提高数据操作的效率。\n\n7. 优化性能\n\n - 例如，减少不必要的计算、优化 DOM 操作、合理使用缓存等。\n\n8. 测试和验证\n\n - 对重构后的代码进行全面的单元测试、集成测试和端到端测试，确保功能的正确性和稳定性。\n\n9. 代码审查\n\n - 邀请团队成员对重构后的代码进行审查，获取反馈和建议，进一步优化代码。\n\n10. 文档更新\n - 对重构后的代码功能、接口和使用方法进行文档更新，方便其他开发人员理解和使用。\n\n以一个简单的前端项目为例，假设有一个处理用户数据展示的模块，最初的代码可能是所有功能都写在一个大型的函数中，并且数据存储在全局变量中。\n\n重构时：\n\n- 将数据处理、数据获取和数据展示的功能分别提取到不同的函数中。\n\n- 将数据从全局变量改为使用模块内部的私有变量或通过参数传递。\n\n- 对数据处理函数进行优化，去除重复的代码逻辑。\n\n- 为新的函数和模块添加必要的注释和文档说明。\n\n通过这样的重构过程，可以使前端项目的代码质量得到显著提升，为后续的开发和维护提供更好的基础。\n",{"_58":973,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/786/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/786/timeline",{"_58":976,"_60":61,"_62":977,"_64":978,"_66":979,"_68":980,"_70":981,"_72":982,"_74":983,"_76":984,"_78":985,"_111":986,"_124":125,"_126":24,"_127":-5,"_128":989,"_130":990,"_152":145,"_146":992,"_148":993,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":994,"_163":995,"_169":996,"_171":997,"_183":999,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/785","https://api.github.com/repos/pro-collection/interview-question/issues/785/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/785/comments","https://api.github.com/repos/pro-collection/interview-question/issues/785/events","https://github.com/pro-collection/interview-question/issues/785",2405451365,"I_kwDOJGDC6c6PYEZl",785,"如何清理源码里面没有被应用的代码，主要是 JS、TS、CSS 代码【热度: 329】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[987,988],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":274,"_72":275,"_58":276,"_117":277,"_119":207,"_121":24,"_122":208},[],{"_58":240,"_68":241,"_62":242,"_70":243,"_72":244,"_74":245,"_76":246,"_122":247,"_140":991,"_142":249,"_144":145,"_124":125,"_146":250,"_148":251,"_150":-5,"_151":-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-07-12T12:22:27Z","2024-07-12T12:22:28Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**关键词**：代码清理\n\n清理源码中未被应用的 JavaScript (JS)、TypeScript (TS) 和 CSS 代码的关键在于合理利用工具和策略，来识别和移除这些废弃的代码。下面是一份指南，帮助你高效完成这一任务：\n\n### 对于 JavaScript 和 TypeScript\n\n#### 1. 使用 ESLint\n\n- **初始化 ESLint**：如果你还没有使用 ESLint，可以通过`npx eslint --init`命令来初始化配置。\n- **配置规则**：确保在`.eslintrc`配置文件中启用了`no-unused-vars`规则，以识别未使用的变量和函数。\n\n```json\n{\n \"rules\": {\n \"no-unused-vars\": \"warn\"\n }\n}\n```\n\n- **使用 ESLint 的 --fix 选项**: 虽然 ESLint 主要用于识别问题，但它的 --fix 选项可以自动修复一些问题，包括删除未使用的变量等。不过，这种方式相对保守，无法删除大块的未使用代码\n\n#### 2. 使用 TypeScript 编译器选项\n\n- 对于 TypeScript 项目，可以在`tsconfig.json`文件中启用`noUnusedLocals`和`noUnusedParameters`选项，以识别未使用的本地变量和函数参数。\n\n```json\n{\n \"compilerOptions\": {\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true\n }\n}\n```\n\n#### 3. 利用 Webpack 的 Tree Shaking\n\n- 确保在生产模式下使用 Webpack，它自带 Tree Shaking 功能，可以去除死代码（未被使用的代码）。\n- 使用 ES6 模块语法（即`import`和`export`），因为 Tree Shaking 仅支持静态导入。\n\n### 对于 CSS\n\n#### 1. 使用 PurgeCSS\n\n- **PurgeCSS**分析你的内容和 CSS 文件，去除不匹配的选择器。非常适用于清楚在 HTML 或 JS 文件中未引用的 CSS 代码。\n- 可以通过 Webpack、Gulp 或 PostCSS 等多种方式与 PurgeCSS 集成。\n\n```bash\nnpm install purgecss\n```\n\n使用 PurgeCSS 时，配置你的内容文件路径（如 HTML 或 JSX 文件），它会扫描这些文件以确定哪些 CSS 选择器被使用：\n\n```javascript\n// 一个基本的PurgeCSS配置例子\nnew PurgecssPlugin({\n paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),\n});\n```\n\n### 使用 Codemods\n\nCodemods 是 Facebook 提出的一种工具，允许你对代码库进行大规模的自动化重构。通过编写特定的脚本，你可以自定义删除或修改未被调用的代码的逻辑。例如，使用 `jscodeshift` 工具可以配合具体规则进行代码修改。\n\n### 注意事项\n\n- **测试**：自动删除代码后，务必执行完整的测试套件，确认改动不会影响现有功能。\n- **版本控制**：在进行删除操作之前，确保代码已经提交到版本控制系统，以便必要时可以恢复。\n- **逐步执行**：尤其是在较大或复杂的项目中，建议分步骤、逐渐移除未使用的代码，每次删除后都进行测试和评估。\n\n使用这些策略和工具可以帮助自动化清理未使用的代码，但是请注意，完全自动化的过程可能会有风险，依然需要人工审核和测试以确保代码的质量和应用的稳定性。\n",{"_58":998,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/785/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/785/timeline","pagination",{"_1002":384,"_160":1003},"value",7,"actionData","errors"]