\n\n\n $\"预览图\"$ \n```\n\n总体来说，图片懒加载是一种这很简单，但非常实用的优化技术，能够显著提高网页的性能和用户体验。\n",{"_58":280,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/329/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/329/timeline",{"_58":283,"_60":61,"_62":284,"_64":285,"_66":286,"_68":287,"_70":288,"_72":289,"_74":290,"_76":291,"_78":292,"_111":293,"_138":139,"_140":24,"_141":-5,"_142":296,"_144":297,"_166":159,"_160":310,"_162":311,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":312,"_177":313,"_183":314,"_185":315,"_197":317,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/328","https://api.github.com/repos/pro-collection/interview-question/issues/328/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/328/comments","https://api.github.com/repos/pro-collection/interview-question/issues/328/events","https://github.com/pro-collection/interview-question/issues/328",1696325482,"I_kwDOJGDC6c5lG99q",328,"script 预加载方式有哪些，这些加载方式有何区别？【热度: 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},[294,295],{"_70":240,"_72":241,"_58":242,"_117":243,"_119":244,"_121":24,"_122":245},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":298,"_68":299,"_62":300,"_70":301,"_72":302,"_74":303,"_76":304,"_122":305,"_154":306,"_156":307,"_158":159,"_138":139,"_160":308,"_162":309,"_164":-5,"_165":-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","2023-05-04T16:33:13Z","2023-05-04T16:36:59Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：script 预加载\n\n在浏览器中，可以通过预加载 JavaScript 脚本来提高性能和用户体验。预加载是指在浏览器解析完当前页面之前，提前加载并解析相关资源（例如 JavaScript 文件、CSS 文件等）。这样可以在用户请求访问其他页面时，减少资源加载的时间和延迟，从而提高页面加载速度和用户体验。\n\n以下是两种预加载 JavaScript 脚本的方法：\n\n1. defer 属性\n\n`\n \n \n \n ...\n \n\n```\n\n2. prefetch 和 preload\n\n预加载的另一种方法是使用 `Link` 标签的 `prefetch` 或 `preload` 属性。这种方法可以在不影响当前页面加载的情况下，预先加载需要后续页面需要的 JavaScript 文件和其他资源。\n\n其中，`prefetch` 属性指示浏览器预先加载并缓存 JavaScript 文件，但不会立即执行文件。而 `preload` 属性则会在浏览器空闲时立即加载文件，并且可以指定文件的类型、优先级等属性。\n\n```html\n\n My Page\n \n \n\n```\n\n需要注意的是，使用 `prefetch` 和 `preload` 属性时，应该避免将其用于太多的资源文件，否则可能会引发网络瓶颈和性能问题。可以在需要优化的资源文件上使用这些属性，并通过测试和性能分析来调整其预加载的优先级和时机，以达到最优化的预加载效果。\n\n",{"_58":316,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/328/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/328/timeline",{"_58":319,"_60":61,"_62":320,"_64":321,"_66":322,"_68":323,"_70":324,"_72":325,"_74":326,"_76":327,"_78":328,"_111":329,"_138":139,"_140":24,"_141":-5,"_142":331,"_144":332,"_166":159,"_160":334,"_162":335,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":336,"_177":337,"_183":338,"_185":339,"_197":341,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/308","https://api.github.com/repos/pro-collection/interview-question/issues/308/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/308/comments","https://api.github.com/repos/pro-collection/interview-question/issues/308/events","https://github.com/pro-collection/interview-question/issues/308",1680059011,"I_kwDOJGDC6c5kI6qD",308,"web components 了解多少？【热度: 1,206】",{"_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},[330],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":298,"_68":299,"_62":300,"_70":301,"_72":302,"_74":303,"_76":304,"_122":305,"_154":333,"_156":307,"_158":159,"_138":139,"_160":308,"_162":309,"_164":-5,"_165":-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},"2023-04-23T15:06:09Z","2023-04-23T15:09:09Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"`Web Components` 是一套不同的技术，允许您创建可重用的定制元素并且在您的 web 应用中使用它们\r\n\r\n### 三要素\r\n\r\n1. `Custom elements`（自定义元素）：一组 `JavaScript` API，允许您定义 `custom elements` 及其行为，然后可以在您的用户界面中按照需要使用它们。\r\n * 通过 `class A extends HTMLElement {}` 定义组件，\r\n * 通过 `window.customElements.define('a-b', A)` 挂载已定义组件。\r\n2. `Shadow DOM`（影子 DOM ）：一组 `JavaScript` API，用于将封装的“影子” DOM 树附加到元素（**与主文档 DOM 分开呈现**）并控制其关联的功能。\r\n * 通过这种方式，您可以**保持元素的功能私有**，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。\r\n * 使用 `const shadow = this.attachShadow({mode : 'open'})` 在 `WebComponents` 中开启。\r\n3. `HTML templates`（HTML 模板）`slot` ：`template` 可以简化生成 `dom` 元素的操作，不再需要 `createElement` 每一个节点。\r\n\r\n虽然 `WebComponents` 有三个要素，但却不是缺一不可的，`WebComponents`\r\n\r\n> * 借助 `shadow dom` 来实现**样式隔离**，\r\n> * 借助 `templates` 来**简化标签**的操作。\r\n\r\n\r\n\r\n### 内部生命周期函数（4个）\r\n\r\n1. `connectedCallback`: 当 `WebComponents`**第一次**被挂在到 `dom` 上是触发的钩子，并且只会触发一次。\r\n * 类似 `React` 中的 `useEffect(() => {}, [])`，`componentDidMount`。\r\n2. `disconnectedCallback`: 当自定义元素与文档 `DOM`**断开连接**时被调用。\r\n3. `adoptedCallback`: 当自定义元素被**移动**到新文档时被调用。\r\n4. `attributeChangedCallback`: 当自定义元素的被监听属性变化时被调用。\r\n\r\n\r\n\r\n### 组件通信\r\n\r\n### 传入复杂数据类型\r\n\r\n* 传入一个 `JSON` 字符串配饰`attribute`\r\n\r\n * `JSON.stringify`配置指定属性\r\n * 在组件`attributeChangedCallback`中判断对应属性，然后用`JSON.parse()`获取\r\n\r\n* 配置DOM的`property`属性\r\n\r\n * `xx.dataSource = [{ name: 'xxx', age: 19 }]`\r\n * 但是，自定义组件中没有办法监听到这个属性的变化\r\n * 如果想实现，复杂的结构，不是通过配置，而是在定义组件时候，就确定\r\n\r\n### 状态的双向绑定\r\n\r\n```kotlin\r\n { data = e.detail }\">\r\n\r\n\r\n// js\r\n(function () {\r\n const template = document.createElement('template')\r\n template.innerHTML = `\r\n \r\n \r\n `\r\n class WlInput extends HTMLElement {\r\n constructor() {\r\n super()\r\n const shadow = this.attachShadow({\r\n mode: 'closed'\r\n })\r\n const content = template.content.cloneNode(true)\r\n this._input = content.querySelector('#wlInput')\r\n this._input.value = this.getAttribute('value')\r\n shadow.appendChild(content)\r\n this._input.addEventListener(\"input\", ev => {\r\n const target = ev.target;\r\n const value = target.value;\r\n this.value = value;\r\n this.dispatchEvent(\r\n new CustomEvent(\"change\", { detail: value })\r\n );\r\n });\r\n }\r\n get value() {\r\n return this.getAttribute(\"value\");\r\n }\r\n set value(value) {\r\n this.setAttribute(\"value\", value);\r\n }\r\n }\r\n window.customElements.define('wl-input', WlInput)\r\n})()\r\n\r\n```\r\n\r\n监听了这个表单的 `input` 事件，并且在每次触发 `input` 事件的时候触发自定义的 `change` 事件，并且把输入的参数回传。\r\n\r\n\r\n\r\n### 样式设置\r\n\r\n### 直接给自定义标签添加样式\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### 定义元素内部子元素设置样式\r\n\r\n分为两种场景：\r\n\r\n1. 在主 DOM 使用 JS\r\n2. 在 Custom Elements 构造函数中使用 JS\r\n\r\n#### 在主 DOM 使用 JS 给 Shadow DOM 增加 style 标签：\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n#### 在 Custom Elements 构造函数中使用 JS 增加 style 标签：\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n### 引入 CSS 文件\r\n\r\n使用 JS 创建 link 标签，然后引入 CSS 文件给自定义元素内部的子元素设置样式\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n样式文件\r\n\r\n```css\r\n.input-header{\r\n padding:10px;\r\n background-color: yellow;\r\n font-size: 16px;\r\n font-weight: bold;\r\n}\r\n\r\n```\r\n\r\n\r\n",{"_58":340,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/308/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/308/timeline",{"_58":343,"_60":61,"_62":344,"_64":345,"_66":346,"_68":347,"_70":348,"_72":349,"_74":350,"_76":351,"_78":352,"_111":353,"_138":139,"_140":24,"_141":-5,"_142":355,"_144":356,"_166":159,"_160":358,"_162":359,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":360,"_177":361,"_183":362,"_185":363,"_197":365,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/307","https://api.github.com/repos/pro-collection/interview-question/issues/307/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/307/comments","https://api.github.com/repos/pro-collection/interview-question/issues/307/events","https://github.com/pro-collection/interview-question/issues/307",1680057817,"I_kwDOJGDC6c5kI6XZ",307,"CSR、SSR、SSG、NSR、ESR、ISR 都是啥？【热度: 3,492】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[354],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":298,"_68":299,"_62":300,"_70":301,"_72":302,"_74":303,"_76":304,"_122":305,"_154":357,"_156":307,"_158":159,"_138":139,"_160":308,"_162":309,"_164":-5,"_165":-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},"2023-04-23T15:02:29Z","2023-04-23T15:02:30Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"CSR、SSR、SSG、NSR、ESR、ISR 都是啥？\n\n根据不同的构建、渲染过程有不同的优劣势和适用情况。\n\n* 现代 UI 库加持下常用的 `CSR`、\n* 具有更好 `SEO` 效果的 `SSR` (`SPR`)、\n* 转换思路主打**构建时生成**的 `SSG`、\n* 大架构视野之上的 `ISR`、`DPR`，\n* 还有更少听到的 `NSR`、`ESR`。\n\n### CSR(Client Side Rendering)\n\n> 页面托管服务器只需要对页面的**访问请求响应**一个如下的**空页面**\n\n```html\n\n\n \n \n \n \n \n \n \n \n

\n \n \n \n \n\n\n```\n\n页面中留出一个用于填充渲染内容的视图节点 (`div#root`)，并插入指向项目**编译压缩后**的\n\n* `JS Bundle` 文件的 `script` 节点\n* 指向 `CSS` 文件的 `link.stylesheet` 节点等。\n\n浏览器接收到这样的文档响应之后，会根据文档内的链接加载脚本与样式资源，并完成以下几方面主要工作：\n\n> 1. **执行脚本**\n> 2. 进行**网络访问以获取在线数据**\n> 3. 使用 DOM API **更新页面结构**\n> 4. **绑定交互事件**\n> 5. **注入样式**\n\n以此完成整个渲染过程。\n\nCSR 模式有以下几方面优点：\n\n* UI 库支持\n* **前后端分离**\n* **服务器负担轻**\n\n\n\n\n### SSR (Server Side Rendering)\n\nSSR 的概念，即与 `CSR` 相对地，在服务端完成大部分渲染工作，服务器在响应站点访问请求的时候，就已经渲染好可供呈现的页面。\n\n像 `React`、`Vue` 这样的 UI 生态巨头，其实都有一个关键的 `Virtual DOM` (or VDOM) 概念,先自己**建模处理视图表现与更新**、再批量调 `DOM API` 完成视图渲染更新。这就带来了一种 `SSR` 方案：\n\n`VDOM` 是**自建模型**，是一种抽象的嵌套数据结构，也就可以在 `Node` 环境（或者说一切服务端环境）下跑起来，**把原来的视图代码拿来在服务端跑**，通过 `VDOM` 维护，再在最后**拼接好字符串作为页面响应**，生成文档作为响应页面，此时的页面内容已经基本生成完毕，把逻辑代码、样式代码附上，则可以实现完整的、可呈现页面的响应。\n\n### SSR优点\n\n* 呈现速度和用户体验佳\n* `SEO` 友好\n\n### SSR缺点\n\n1. 引入成本高\n * 将视图渲染的工作交给了服务器做，引入了新的概念和技术栈（如 Node）\n2. 响应时间长\n * SSR 在完成访问响应的时候需要做更多的计算和生成工作\n * 关键指标 `TTFB` (`Time To First Byte`) 将变得更大\n3. 首屏交互不佳\n * 虽然 SSR 可以让页面请求响应后更快在浏览器上渲染出来\n * 但在首帧出现，需要客户端加载激活的逻辑代码（如事件绑定）还没有初始化完毕的时候，其实是不可交互的状态\n\n\n\n### SSR-React 原理\n\n1. VDOM\n2. 同构\n3. 双端对比\n\n几大概念：\n- VDOM\n- 同构\n- 双端对比\n- renderToString()\n- renderToStaticMarkup()\n\n```javascript\nReactDOMServer.renderToStaticMarkup(element)\n\n```\n\n仅仅是为了将组件渲染为html字符串，不会带有`data-react-checksum`属性\n\n\n\n### SPR (Serverless Pre-Rendering)\n\n无服务预渲染，这是 `Serverless` 话题之下的一项渲染技术。`SPR` 是指在 `SSR` 架构下通过预渲染与缓存能力，将部分页面转化为静态页面，以避免其在服务器接收到请求的时候频繁被渲染的能力，同时一些框架还支持**设置静态资源过期时间**，以确保这部分“静态页面”也能有一定的即时性。\n\n\n\n### SSG (Static Site Generation)\n\n* 它与 `CSR` 一样，只需要**页面托管**，不需要真正编写并部署服务端，页面资源在编译完成部署之前就已经确定；\n* 但它又与 `SSR` 一样，属于一种 `Prerender` 预渲染操作，即在用户浏览器得到页面响应之前，页面内容和结构就已经渲染好了。\n* 当然形式和特征来看，它更接近 SSR。\n\n> `SSG` 模式，把原本日益动态化、交互性增强的页面，变成了大部分已经填充好，托管在页面服务 / CDN 上的**静态页面**\n\n\n\n### NSR (Native Side Rendering)\n\n`Native` 就是客户端，万物皆可**分布式**，可以理解为这就是一种分布式的 `SSR`，不过这里的渲染工作交给了客户端去做而不是远端服务器。在用户即将访问页面的**上级页面预取页面数据，由客户端缓存 HTML 结构，以达到用户真正访问时快速响应的效果**。\n\nNSR 见于各种移动端 + `Webview` 的 `Hybrid` 场景，是需要页面与客户端研发协作的一种优化手段。\n\n\n\n### ESR (Edge Side Rendering)\n\n`Edge` 就是边缘，类比前面的各种 `XSR`，`ESR` 就是将渲染工作交给边缘服务器节点，常见的就是 `CDN` 的边缘节点。这个方案主打的是**边缘节点相比核心服务器与用户的距离优势**，利用了 `CDN` 分级缓存的概念，渲染和内容填充也可以是分级进行并缓存下来的。\n\n`ESR` 之下静态内容与动态内容是分流的，\n\n1. 边缘 CDN 节点可以将静态页面内容先响应给用户\n2. 然后再自己发起动态内容请求，得到核心服务器响应之后再返回给用户\n\n是在大型网络架构下非常极致的一种优化，但这也就依赖更庞大的技术基建体系了。\n\n\n\n### ISR (Incremental Site Rendering)\n\n**增量式网站渲染**，就是对待页面内容小刀切，**有更细的差异化渲染粒度**，能渐进、分层地进行渲染。\n\n常见的选择是：\n\n* 对于重要页面如首屏、访问量较大的直接落地页，进行**预渲染并添加缓存**，保证最佳的访问性能；\n* 对于次要页面，则确保有兜底内容可以即时 `fallback`，再将其实时数据的渲染留到 CSR 层次完成，同时触发异步缓存更新。\n\n对于“异步缓存更新”，则需要提到一个常见的内容缓存策略：`Stale While Revalidate`，CDN 对于数据请求始终首先响应缓存内容，如果这份内容已经过期，则**在响应之后再触发异步更新**——这也是对于次要元素或页面的缓存处理方式。\n\n",{"_58":364,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/307/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/307/timeline",{"_58":367,"_60":61,"_62":368,"_64":369,"_66":370,"_68":371,"_70":372,"_72":373,"_74":374,"_76":375,"_78":376,"_111":377,"_138":139,"_140":24,"_141":-5,"_142":379,"_144":380,"_166":159,"_160":382,"_162":383,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":384,"_177":385,"_183":386,"_185":387,"_197":389,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/298","https://api.github.com/repos/pro-collection/interview-question/issues/298/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/298/comments","https://api.github.com/repos/pro-collection/interview-question/issues/298/events","https://github.com/pro-collection/interview-question/issues/298",1673461119,"I_kwDOJGDC6c5jvv1_",298,"git merge 和 git rebase 区别【热度: 1,150】",{"_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},[378],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":381,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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},"2023-04-18T16:20:56Z","2023-11-26T15:22:03Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"`git merge` 和 `git rebase` 都是用来合并不同分支的命令，但是它们的实现方式和结果不同。\r\n\r\n`git merge` 会把两个分支的最新提交点合并起来，生成一个新的合并提交，并且会保留两个分支各自的提交记录，形成一条分支合并的历史线。合并后的代码中，两个分支的修改都会被保留下来。\r\n\r\n`git rebase` 也是用来合并分支的，但是它会将当前分支的提交“移动”到目标分支的最后面，然后再将目标分支的修改合并进来。这个过程中，会改变当前分支的提交记录，使它看起来像是在目标分支上进行的修改，从而保持一条干净的提交历史。如果发生冲突，需要手动解决冲突并进行提交。\r\n\r\n总的来说，`git merge` 适合用于简单的合并场景，保留分支历史记录，而 `git rebase` 则适合用于合并长期存在分支的场景，可以保持一个干净的提交历史。但是在合并公共分支时，使用 `git rebase` 可能会破坏代码的协作性，因此需要谨慎使用。\r\n\r\n\r\n---------------------\r\n补充更新：\r\n\r\n假设你现在基于远程分支\"origin\"，创建一个叫\"mywork\"的分支。\r\n\r\n`$ git checkout -b mywork origin`\r\n\r\n![image](https://github.com/pro-collection/interview-question/assets/22188674/b40fdca9-4844-4996-b008-f24d0d486acb)\r\n\r\n现在我们在这个分支做一些修改，然后生成两个提交(commit).\r\n\r\n```\r\n$ vi file.txt\r\n$ git commit\r\n$ vi otherfile.txt\r\n$ git commit\r\n...\r\n```\r\n\r\n但是与此同时，有些人也在\"origin\"分支上做了一些修改并且做了提交了. 这就意味着\"origin\"和\"mywork\"这两个分支各自\"前进\"了，它们之间\"分叉\"了。\r\n\r\n![image](https://github.com/pro-collection/interview-question/assets/22188674/82286270-6422-4b34-a1b3-9d5367b50a78)\r\n\r\n在这里，你可以用\"pull\"命令把\"origin\"分支上的修改拉下来并且和你的修改合并；结果看起来就像一个新的\"合并的提交\"(merge commit):\r\n\r\n![image](https://github.com/pro-collection/interview-question/assets/22188674/5f29e4cd-e1c5-4b8d-b4cd-2dd4db047e8a)\r\n\r\n但是，如果你想让\"mywork\"分支历史看起来像没有经过任何合并一样，你也许可以用 `git rebase`\r\n\r\n```\r\n$ git checkout mywork\r\n$ git rebase origin\r\n```\r\n\r\n这些命令会把你的\"mywork\"分支里的每个提交(commit)取消掉，并且把它们临时保存为补丁(patch)(这些补丁放到\".git/rebase\"目录中),然后把\"mywork\"分支更新到最新的\"origin\"分支，最后把保存的这些补丁应用到\"mywork\"分支上。\r\n\r\n![image](https://github.com/pro-collection/interview-question/assets/22188674/e0157351-163a-40e9-85d5-fbc1e35f5ba8)\r\n\r\n当'mywork'分支更新之后，它会指向这些新创建的提交(commit),而那些老的提交会被丢弃。如果运行垃圾收集命令(pruning garbage collection), 这些被丢弃的提交就会删除. \r\n\r\n![image](https://github.com/pro-collection/interview-question/assets/22188674/4937b995-8e48-4c32-b101-4fb551b60d01)\r\n\r\n现在我们可以看一下用合并(merge)和用rebase所产生的历史的区别：\r\n\r\n![image](https://github.com/pro-collection/interview-question/assets/22188674/0d85e67e-8366-4591-8118-50695129dd3c)\r\n![image](https://github.com/pro-collection/interview-question/assets/22188674/b871d1a2-b8e5-4807-9b97-2de8ec103e07)\r\n\r\n在rebase的过程中，也许会出现冲突(conflict). 在这种情况，Git会停止rebase并会让你去解决冲突；在解决完冲突后，用\"git-add\"命令去更新这些内容的索引(index), 然后，你无需执行 git-commit,只要执行:\r\n\r\n`$ git rebase --continue`\r\n\r\n这样git会继续应用(apply)余下的补丁。\r\n\r\n在任何时候，你可以用--abort参数来终止rebase的行动，并且\"mywork\" 分支会回到rebase开始前的状态。\r\n\r\n`$ git rebase --abort`\r\n\r\n\r\n",{"_58":388,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/298/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/298/timeline",{"_58":391,"_60":61,"_62":392,"_64":393,"_66":394,"_68":395,"_70":396,"_72":397,"_74":398,"_76":399,"_78":400,"_111":401,"_138":139,"_140":24,"_141":-5,"_142":408,"_144":409,"_166":159,"_160":411,"_162":411,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":412,"_177":413,"_183":414,"_185":415,"_197":417,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/294","https://api.github.com/repos/pro-collection/interview-question/issues/294/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/294/comments","https://api.github.com/repos/pro-collection/interview-question/issues/294/events","https://github.com/pro-collection/interview-question/issues/294",1670026823,"I_kwDOJGDC6c5jipZH",294,"如何实现网页加载进度条？",{"_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},[402,403],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":404,"_72":405,"_58":406,"_117":407,"_119":136,"_121":24,"_122":137},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":410,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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},"2023-04-16T15:57:53Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"### 监听静态资源加载情况\n可以通过 `window.performance` 对象来监听页面资源加载进度。该对象提供了各种方法来获取资源加载的详细信息。\n\n可以使用 `performance.getEntries()` 方法获取页面上所有的资源加载信息。可以使用该方法来监测每个资源的加载状态，计算加载时间，并据此来实现一个资源加载进度条。\n\n下面是一个简单的实现方式：\n\n```javascript\nconst resources = window.performance.getEntriesByType('resource');\nconst totalResources = resources.length;\nlet loadedResources = 0;\n\nresources.forEach((resource) => {\n if (resource.initiatorType !== 'xmlhttprequest') {\n // 排除 AJAX 请求\n resource.onload = () => {\n loadedResources++;\n const progress = Math.round((loadedResources / totalResources) * 100);\n updateProgress(progress);\n };\n }\n});\n\nfunction updateProgress(progress) {\n // 更新进度条\n}\n```\n\n该代码会遍历所有资源，并注册一个 `onload` 事件处理函数。当每个资源加载完成后，会更新 `loadedResources` 变量，并计算当前的进度百分比，然后调用 `updateProgress()` 函数来更新进度条。需要注意的是，这里排除了 AJAX 请求，因为它们不属于页面资源。\n\n当所有资源加载完成后，页面就会完全加载。\n\n\n\n### 实现进度条\n\n网页加载进度条可以通过前端技术实现，一般的实现思路是通过监听浏览器的页面加载事件和资源加载事件，来实时更新进度条的状态。下面介绍两种实现方式。\n\n#### 1. 使用原生进度条\n\n在 HTML5 中提供了 `progress` 元素，可以通过它来实现一个原生的进度条。\n\n```html\n\n```\n\n然后在 JavaScript 中，监听页面加载事件和资源加载事件，实时更新 `progress` 元素的 `value` 属性。\n\n```javascript\nconst progressBar = document.getElementById('progressBar');\n\nwindow.addEventListener('load', () => {\n progressBar.value = 100;\n});\n\ndocument.addEventListener('readystatechange', () => {\n const progress = Math.floor((document.readyState / 4) * 100);\n progressBar.value = progress;\n});\n```\n\n#### 2. 使用第三方库\n\n使用第三方库可以更加方便地实现网页加载进度条，下面以 `nprogress` 库为例：\n\n1. 安装 `nprogress` 库\n\n```bash\nbashCopy codenpm install nprogress --save\n```\n\n2. 在页面中引入 `nprogress.css` 和 `nprogress.js`\n\n```html\n\n\n```\n\n3. 在 JavaScript 中初始化 `nprogress` 并监听页面加载事件和资源加载事件\n\n```javascript\n// 初始化 nprogress\nNProgress.configure({ showSpinner: false });\n\n// 监听页面加载事件\nwindow.addEventListener('load', () => {\n NProgress.done();\n});\n\n// 监听资源加载事件\ndocument.addEventListener('readystatechange', () => {\n if (document.readyState === 'interactive') {\n NProgress.start();\n } else if (document.readyState === 'complete') {\n NProgress.done();\n }\n});\n```\n\n使用 `nprogress` 可以自定义进度条的样式，同时也提供了更多的 API 供我们使用，比如说手动控制进度条的显示和隐藏，以及支持 Promise 和 Ajax 请求的进度条等等。\n",{"_58":416,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/294/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/294/timeline",{"_58":419,"_60":61,"_62":420,"_64":421,"_66":422,"_68":423,"_70":424,"_72":425,"_74":426,"_76":427,"_78":428,"_111":429,"_138":139,"_140":24,"_141":-5,"_142":432,"_144":433,"_166":159,"_160":435,"_162":436,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":437,"_177":438,"_183":439,"_185":440,"_197":442,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/293","https://api.github.com/repos/pro-collection/interview-question/issues/293/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/293/comments","https://api.github.com/repos/pro-collection/interview-question/issues/293/events","https://github.com/pro-collection/interview-question/issues/293",1670025320,"I_kwDOJGDC6c5jipBo",293,"站点一键换肤的实现方式有哪些？",{"_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},[430,431],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":404,"_72":405,"_58":406,"_117":407,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":434,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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},"2023-04-16T15:53:28Z","2023-04-16T15:53:30Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"### 网站一键换肤实现方式有以下几种\n\n1. 使用 CSS 变量：通过定义一些变量来控制颜色、字体等，然后在切换主题时动态修改这些变量的值。\n\n2. 使用 class 切换：在 HTML 的根元素上添加不同的 class 名称，每个 class 名称对应不同的主题样式，在切换主题时切换根元素的 class 名称即可。\n\n3. 使用 JavaScript 切换：使用 JavaScript 动态修改页面的样式，如修改元素的背景颜色、字体颜色等。\n\n4. 使用 Less/Sass 等 CSS 预处理器：通过预处理器提供的变量、函数等功能来实现主题切换。\n\n需要注意的是，无论采用哪种方式实现，都需要在设计页面样式时尽量遵循一些规范，如不使用绝对的像素值，使用相对单位等，以便更好地适应不同的屏幕大小和分辨率。\n\n\n### 以 less 举例，详细讲述一下具体操作流程\n\n通过 Less 实现网页换肤可以使用 CSS 变量和 Less 变量。CSS 变量的语法如下：\n\n```css\n:root {\n --primary-color: #007bff;\n}\n\n.btn {\n background-color: var(--primary-color);\n}\n```\n\n而 Less 变量则是通过 Less 预编译器提供的变量语法来实现的，如下所示：\n\n```less\nlessCopy code@primary-color: #007bff;\n\n.btn {\n background-color: @primary-color;\n}\n```\n\n通过 Less 变量来实现网页换肤的方式可以在运行时使用 JavaScript 来修改 Less 变量的值，从而实现换肤效果。具体步骤如下：\n\n1. 使用 Less 预编译器来编译 Less 文件为 CSS 文件。\n2. 在 HTML 文件中引入编译后的 CSS 文件。\n3. 在 JavaScript 中动态修改 Less 变量的值。\n4. 使用 JavaScript 将新的 Less 变量值注入到编译后的 CSS 文件中。\n5. 将注入后的 CSS 样式应用到页面上。\n\n以下是一段实现通过 Less 变量来实现网页换肤的示例代码：\n\n```less\n// base.less 文件\n@primary-color: #007bff;\n\n.btn {\n background-color: @primary-color;\n}\n\n// dark.less 文件\n@primary-color: #343a40;\n```\n\n```html\n\n\n\n\n \n 网页换肤示例\n \n \n\n\n \n \n \n\n\n```\n\n在上面的示例代码中，我们引入了两个 Less 文件，一个是 `base.less`，一个是 `dark.less`。其中 `base.less` 定义了一些基础的样式，而 `dark.less` 则是定义了一个暗黑色的主题样式。在 JavaScript 中，我们使用 `less.modifyVars` 方法来修改 Less 变量的值，从而实现了换肤的效果。当然，这只是一个简单的示例代码，实际的换肤功能还需要根据实际需求来进行设计和实现。\n",{"_58":441,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/293/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/293/timeline",{"_58":444,"_60":61,"_62":445,"_64":446,"_66":447,"_68":448,"_70":449,"_72":450,"_74":451,"_76":452,"_78":453,"_111":454,"_138":139,"_140":24,"_141":-5,"_142":457,"_144":458,"_166":159,"_160":460,"_162":461,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":462,"_177":463,"_183":464,"_185":465,"_197":467,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/292","https://api.github.com/repos/pro-collection/interview-question/issues/292/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/292/comments","https://api.github.com/repos/pro-collection/interview-question/issues/292/events","https://github.com/pro-collection/interview-question/issues/292",1670023132,"I_kwDOJGDC6c5jiofc",292,"H5 如何解决移动端适配问题",{"_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},[455,456],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":404,"_72":405,"_58":406,"_117":407,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":459,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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},"2023-04-16T15:46:24Z","2023-04-16T15:46:25Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"移动端适配问题是指如何让网页在不同的移动设备上显示效果相同。下面是一些常见的 H5 移动端适配方案：\n\n1. 使用 viewport 标签\n\n通过设置 viewport 标签的 meta 属性，来控制页面的缩放比例和宽度，以适配不同的设备。例如：\n\n```html\n\n```\n\n其中 `width=device-width` 表示设置 viewport 的宽度为设备宽度，`initial-scale=1.0` 表示初始缩放比例为 1。\n\n2. 使用 CSS3 的媒体查询\n\n通过 CSS3 的媒体查询，根据不同的设备宽度设置不同的样式，以适配不同的设备。例如：\n\n```arduino\narduinoCopy code@media screen and (max-width: 640px) {\n /* 样式 */\n}\n```\n\n其中 `max-width` 表示最大宽度，当屏幕宽度小于等于 640px 时，应用这些样式。\n\n3. 使用 rem 单位\n\n通过将 px 转化为 rem 单位，根据不同的设备字体大小设置不同的样式，以适配不同的设备。例如：\n\n```css\nhtml {\n font-size: 16px;\n}\n\n@media screen and (max-width: 640px) {\n html {\n font-size: 14px;\n }\n}\n\ndiv {\n width: 10rem;\n}\n```\n\n其中 `font-size: 16px` 表示将网页的基准字体大小设置为 16px，`font-size: 14px` 表示在屏幕宽度小于等于 640px 时将基准字体大小设置为 14px，`div` 元素的 `width: 10rem` 表示该元素的宽度为 10 个基准字体大小。\n\n4. 使用 flexible 布局方案\n\n通过使用 flexible 布局方案，将 px 转化为 rem 单位，并且动态计算根节点的字体大小，以适配不同的设备。例如使用 lib-flexible 库：\n\n```html\narduinoCopy code// index.html\n\n\n// index.js\nimport 'lib-flexible/flexible.js'\n```\n\n其中 `flexible.js` 会在页面加载时动态计算根节点的字体大小，并将 px 转化为 rem 单位。在样式中可以直接使用 px 单位，例如：\n\n```css\ndiv {\n width: 100px;\n height: 100px;\n}\n```\n\n这个 div 元素的大小会根据设备屏幕的宽度进行适配。\n",{"_58":466,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/292/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/292/timeline",{"_58":469,"_60":61,"_62":470,"_64":471,"_66":472,"_68":473,"_70":474,"_72":475,"_74":476,"_76":477,"_78":478,"_111":479,"_138":139,"_140":24,"_141":-5,"_142":482,"_144":483,"_166":159,"_160":485,"_162":486,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":487,"_177":488,"_183":489,"_185":490,"_197":492,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/278","https://api.github.com/repos/pro-collection/interview-question/issues/278/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/278/comments","https://api.github.com/repos/pro-collection/interview-question/issues/278/events","https://github.com/pro-collection/interview-question/issues/278",1662779556,"I_kwDOJGDC6c5jHACk",278,"大文件上传了解多少",{"_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},[480,481],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":404,"_72":405,"_58":406,"_117":407,"_119":136,"_121":24,"_122":137},[],{"_58":298,"_68":299,"_62":300,"_70":301,"_72":302,"_74":303,"_76":304,"_122":305,"_154":484,"_156":307,"_158":159,"_138":139,"_160":308,"_162":309,"_164":-5,"_165":-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},"2023-04-11T15:43:37Z","2023-04-11T15:43:38Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"### 大文件分片上传\n\n如果太大的文件，比如一个视频1g 2g那么大，直接采用上面的栗子中的方法上传可能会出链接现超时的情况，而且也会超过服务端允许上传文件的大小限制，所以解决这个问题我们可以将文件进行分片上传，每次只上传很小的一部分比如2M。\n\n`Blob` 它表示原始数据, 也就是二进制数据，同时提供了对数据截取的方法 `slice`,而 `File` 继承了 `Blob` 的功能，所以可以直接使用此方法对数据进行分段截图。\n\n过程如下：\n\n* 把大文件进行分段比如2M，发送到服务器携带一个标志，暂时用当前的时间戳，用于标识一个完整的文件\n* 服务端保存各段文件\n* 浏览器端所有分片上传完成，发送给服务端一个合并文件的请求\n* 服务端根据文件标识、类型、各分片顺序进行文件合并\n* 删除分片文件\n\n客户端 JS 代码实现如下\n\n```js\nfunction submitUpload() {\n var chunkSize = 2 * 1024 * 1024;//分片大小 2M\n var file = document.getElementById('f1').files[0];\n var chunks = [], //保存分片数据\n token = (+new Date()),//时间戳\n name = file.name, chunkCount = 0, sendChunkCount = 0;\n\n //拆分文件像操作字符串一样\n if (file.size > chunkSize) {\n //拆分文件\n var start = 0, end = 0;\n while (true) {\n end += chunkSize;\n var blob = file.slice(start, end);\n start += chunkSize;\n\n //截取的数据为空则结束\n if (!blob.size) {\n //拆分结束\n break;\n }\n\n chunks.push(blob);//保存分段数据\n }\n } else {\n chunks.push(file.slice(0));\n }\n\n chunkCount = chunks.length;//分片的个数\n\n//没有做并发限制，较大文件导致并发过多，tcp 链接被占光，需要做下并发控制，比如只有4个在请求在发送\n\n for (var i = 0; i < chunkCount; i++) {\n var fd = new FormData(); //构造FormData对象\n fd.append('token', token);\n fd.append('f1', chunks[i]);\n fd.append('index', i);\n xhrSend(fd, function() {\n sendChunkCount += 1;\n if (sendChunkCount === chunkCount) {//上传完成，发送合并请求\n console.log('上传完成，发送合并请求');\n var formD = new FormData();\n formD.append('type', 'merge');\n formD.append('token', token);\n formD.append('chunkCount', chunkCount);\n formD.append('filename', name);\n xhrSend(formD);\n }\n });\n }\n}\n\nfunction xhrSend(fd, cb) {\n\n var xhr = new XMLHttpRequest(); //创建对象\n xhr.open('POST', 'http://localhost:8100/', true);\n xhr.onreadystatechange = function() {\n console.log('state change', xhr.readyState);\n if (xhr.readyState == 4) {\n console.log(xhr.responseText);\n cb && cb();\n }\n }\n xhr.send(fd);//发送\n}\n\n//绑定提交事件\ndocument.getElementById('btn-submit').addEventListener('click', submitUpload);\n```\n\n服务端 node 实现代码如下：合并文件这里使用 stream pipe 实现，这样更节省内存，边读边写入，占用内存更小，效率更高，代码见fnMergeFile方法。\n\n```js\n//二次处理文件，修改名称\napp.use((ctx) => {\n var body = ctx.request.body;\n var files = ctx.request.files ? ctx.request.files.f1 : [];//得到上传文件的数组\n var result = [];\n var fileToken = ctx.request.body.token;// 文件标识\n var fileIndex = ctx.request.body.index;//文件顺序\n\n if (files && !Array.isArray(files)) {//单文件上传容错\n files = [files];\n }\n\n files && files.forEach(item => {\n var path = item.path;\n var fname = item.name;//原文件名称\n var nextPath = path.slice(0, path.lastIndexOf('/') + 1) + fileIndex + '-' + fileToken;\n if (item.size > 0 && path) {\n //得到扩展名\n var extArr = fname.split('.');\n var ext = extArr[extArr.length - 1];\n //var nextPath = path + '.' + ext;\n //重命名文件\n fs.renameSync(path, nextPath);\n result.push(uploadHost + nextPath.slice(nextPath.lastIndexOf('/') + 1));\n }\n });\n\n if (body.type === 'merge') {//合并分片文件\n var filename = body.filename,\n chunkCount = body.chunkCount,\n folder = path.resolve(__dirname, '../static/uploads') + '/';\n\n var writeStream = fs.createWriteStream(`${folder}${filename}`);\n\n var cindex = 0;\n\n //合并文件\n function fnMergeFile() {\n var fname = `${folder}${cindex}-${fileToken}`;\n var readStream = fs.createReadStream(fname);\n readStream.pipe(writeStream, { end: false });\n readStream.on(\"end\", function() {\n fs.unlink(fname, function(err) {\n if (err) {\n throw err;\n }\n });\n if (cindex + 1 < chunkCount) {\n cindex += 1;\n fnMergeFile();\n }\n });\n }\n\n fnMergeFile();\n ctx.body = 'merge ok 200';\n }\n\n});\n```\n\n### 大文件上传断点续传\n\n在上面我们实现了文件分片上传和最终的合并，现在要做的就是如何检测这些分片，不再重新上传即可。这里我们可以在本地进行保存已上传成功的分片，重新上传的时候使用`spark-md5`来生成文件 hash，区分此文件是否已上传。\n\n- 为每个分段生成 hash 值，使用 `spark-md5` 库\n- 将上传成功的分段信息保存到本地\n- 重新上传时，进行和本地分段 hash 值的对比，如果相同的话则跳过，继续下一个分段的上传\n\n**方案一**：保存在本地 `indexDB/localStorage` 等地方，推荐使用 `localForage` 这个库 \n`npm install localforage`\n\n**客户端 JS 代码**：\n\n```js\n//获得本地缓存的数据\nfunction getUploadedFromStorage() {\n return JSON.parse(localforage.getItem(saveChunkKey) || \"{}\");\n}\n\n//写入缓存\nfunction setUploadedToStorage(index) {\n var obj = getUploadedFromStorage();\n obj[index] = true;\n localforage.setItem(saveChunkKey, JSON.stringify(obj));\n}\n\n//分段对比\n\nvar uploadedInfo = getUploadedFromStorage();//获得已上传的分段信息\n\nfor (var i = 0; i < chunkCount; i++) {\n console.log('index', i, uploadedInfo[i] ? '已上传过' : '未上传');\n\n if (uploadedInfo[i]) {//对比分段\n sendChunkCount = i + 1;//记录已上传的索引\n continue;//如果已上传则跳过\n }\n var fd = new FormData(); //构造FormData对象\n fd.append('token', token);\n fd.append('f1', chunks[i]);\n fd.append('index', i);\n\n (function(index) {\n xhrSend(fd, function() {\n sendChunkCount += 1;\n //将成功信息保存到本地\n setUploadedToStorage(index);\n if (sendChunkCount === chunkCount) {\n console.log('上传完成，发送合并请求');\n var formD = new FormData();\n formD.append('type', 'merge');\n formD.append('token', token);\n formD.append('chunkCount', chunkCount);\n formD.append('filename', name);\n xhrSend(formD);\n }\n });\n })(i);\n}\n```\n\n**方案2**：服务端用于保存分片坐标信息，返回给前端 \n\n需要服务端添加一个接口只是服务端需要增加一个接口。基于上面一个栗子进行改进，服务端已保存了部分片段，客户端上传前需要从服务端获取已上传的分片信息（上面是保存在了本地浏览器），本地对比每个分片的 hash 值，跳过已上传的部分，只传未上传的分片。 \n\n方法1是从本地获取分片信息,这里只需要将此方法的能力改为从服务端获取分片信息就行了。 \n\n\n\n",{"_58":491,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/278/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/278/timeline",{"_58":494,"_60":61,"_62":495,"_64":496,"_66":497,"_68":498,"_70":499,"_72":500,"_74":501,"_76":502,"_78":503,"_111":504,"_138":139,"_140":24,"_141":-5,"_142":511,"_144":512,"_166":159,"_160":514,"_162":515,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":516,"_177":517,"_183":518,"_185":519,"_197":521,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/256","https://api.github.com/repos/pro-collection/interview-question/issues/256/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/256/comments","https://api.github.com/repos/pro-collection/interview-question/issues/256/events","https://github.com/pro-collection/interview-question/issues/256",1655829466,"I_kwDOJGDC6c5isfPa",256,"Server-sent events(SSE) 了解多少（服务端推送）",{"_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},[505,506],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":507,"_72":508,"_58":509,"_117":510,"_119":136,"_121":24,"_122":137},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东",[],{"_58":298,"_68":299,"_62":300,"_70":301,"_72":302,"_74":303,"_76":304,"_122":305,"_154":513,"_156":307,"_158":159,"_138":139,"_160":308,"_162":309,"_164":-5,"_165":-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},"2023-04-05T15:19:25Z","2023-10-11T03:02:24Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"一个网页获取新的数据通常需要发送一个请求到服务器，也就是向服务器请求的页面。使用 server-sent 事件，服务器可以在任何时刻向我们的 Web 页面推送数据和信息。这些被推送进来的信息可以在这个页面上作为 Events + data 的形式来处理。\n\n### 从服务器接受事件\n服务器发送事件 API 也就是 EventSource 接口，在你创建一个新的 EventSource 对象的同时，你可以指定一个接受事件的 URI。例如：\n\n```js\nconst evtSource = new EventSource(\"ssedemo.php\");\n```\n\n如果发送事件的脚本不同源，应该创建一个新的包含 URL 和 options 参数的EventSource对象。例如，假设客户端脚本在 example.com 上：\n\n```js\nconst evtSource = new EventSource(\"//api.example.com/ssedemo.php\", { withCredentials: true } );\n```\n\n一旦你成功初始化了一个事件源，就可以对 message 事件添加一个处理函数开始监听从服务器发出的消息了：\n\n```js\nevtSource.onmessage = function(event) {\n const newElement = document.createElement(\"li\");\n const eventList = document.getElementById(\"list\");\n\n newElement.innerHTML = \"message: \" + event.data;\n eventList.appendChild(newElement);\n}\n```\n\n你也可以使用addEventListener()方法来监听其他类型的事件：\n\n```js\nevtSource.addEventListener(\"ping\", function(event) {\n const newElement = document.createElement(\"li\");\n const time = JSON.parse(event.data).time;\n newElement.innerHTML = \"ping at \" + time;\n eventList.appendChild(newElement);\n});\n```\n\n> 警告：当不通过 HTTP / 2 使用时，SSE（server-sent events）会受到最大连接数的限制，这在打开各种选项卡时特别麻烦，因为该限制是针对每个浏览器的，并且被设置为一个非常低的数字（6）。该问题在 Chrome 和 Firefox中被标记为“无法解决”。此限制是针对每个浏览器 + 域的，因此这意味着您可以跨所有选项卡打开 6 个 SSE 连接到 www.example1.com，并打开 6 个 SSE 连接到 www.example2.com。（来自 Stackoverflow）。使用 HTTP / 2 时，HTTP 同一时间内的最大连接数由服务器和客户端之间协商（默认为 100）。\n\n### SSE 的 API\n\n**属性（只读）**\n\n|名称|作用|类型|备注|\n|:---|:---|:---|:---|\n|readyState|当前状态|Number|`0` — connecting`1` — open`2` — closed|\n|url|当前连接的地址|String||\n|withCredentials|是否开启凭据收集|Boolean||\n\n**方法**\n\n|名称|作用|返回值|\n|:---|:---|:---|\n|close|客户端主动关闭连接|\\-|\n\n**事件**\n\n|名称|作用|返回值|\n|:---|:---|:---|\n|onclose|连接关闭触发|event|\n|onopen|连接开启触发|event|\n|onmessage|服务端消息推动消息触发|event|\n\n\n### 服务端 API\n\n|名称|作用|类型|备注|\n|:---|:---|:---|:---|\n|data|传输的文本|String（默认）. 可以传输JSON|可以多行累加|\n|event|事件名称|String|可自定义|\n|id|当前推送 id|String|作为消息的标识|\n|retry|超时重试时间|Number|客户端在感知 server 连接异常后。会通过 retry 设定时间进行重新连接|\n\n\n\n\n### 补充： SSE 与 WS 有什么区别？\n\n|方式|协议|交互通道|内容编码|重连|事件类型|总结|\n|:---|:---|:---|:---|:---|:---|:---|\n|SSE|HTTP|服务端单向推送|默认文本|默认支持断线重连|支持自定义消息类型|轻量级|\n|WebSocket|WS（基于 TCP 传输层的应用层协议，[RFC6455](https://link.juejin.cn?target=https%3A%2F%2Ftools.ietf.org%2Fhtml%2Frfc6455 \"https://tools.ietf.org/html/rfc6455\") `[1]` 对于它的定义标准）|双向推送|默认二进制|手动实现|NO|扩展性、功能性强大|\n\n\n### 参考文档\n- https://developer.mozilla.org/zh-CN/docs/Web/API/Server-sent_events/Using_server-sent_events\n- https://juejin.cn/post/7148762958470381575\n\n",{"_58":520,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/256/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/256/timeline",{"_58":523,"_60":61,"_62":524,"_64":525,"_66":526,"_68":527,"_70":528,"_72":529,"_74":530,"_76":531,"_78":532,"_111":533,"_138":139,"_140":24,"_141":-5,"_142":536,"_144":537,"_166":159,"_160":539,"_162":540,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":541,"_177":542,"_183":543,"_185":544,"_197":546,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/254","https://api.github.com/repos/pro-collection/interview-question/issues/254/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/254/comments","https://api.github.com/repos/pro-collection/interview-question/issues/254/events","https://github.com/pro-collection/interview-question/issues/254",1655665241,"I_kwDOJGDC6c5ir3JZ",254,"Service Worker 是如何缓存 http 请求资源的？",{"_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},[534,535],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":507,"_72":508,"_58":509,"_117":510,"_119":136,"_121":24,"_122":137},[],{"_58":298,"_68":299,"_62":300,"_70":301,"_72":302,"_74":303,"_76":304,"_122":305,"_154":538,"_156":307,"_158":159,"_138":139,"_160":308,"_162":309,"_164":-5,"_165":-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},"2023-04-05T13:53:20Z","2023-04-05T13:53:21Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"Service Worker 是一种在浏览器后台运行的脚本，可以拦截和处理浏览器网络请求。因此，可以使用 Service Worker 来缓存 http 请求资源。\n\nService Worker 可以通过以下步骤来缓存 http 请求资源：\n\n1. 注册 Service Worker：通过在页面中注册 Service Worker，可以告诉浏览器使用 Service Worker 来处理网络请求。\n\n2. 安装 Service Worker：一旦 Service Worker 被注册，浏览器就会下载并安装它。在安装过程中，Service Worker 可以缓存一些静态资源（如 HTML、CSS 和 JavaScript 文件）。\n\n3. 激活 Service Worker：一旦 Service Worker 安装成功，它就可以被激活。在激活过程中，Service Worker 可以删除旧版本的缓存，或者执行其他一些操作。\n\n4. 拦截网络请求：一旦 Service Worker 被激活，它就可以拦截浏览器发送的网络请求。\n\n5. 处理网络请求：当 Service Worker 拦截到网络请求时，它可以执行一些自定义的逻辑来处理这些请求。例如，它可以检查缓存中是否已经存在该请求的响应，如果存在，则直接返回缓存中的响应，否则，它可以将请求发送到服务器并缓存服务器的响应。\n\n6. 更新缓存：如果缓存中的资源发生了变化，Service Worker 可以自动更新缓存。例如，它可以在后台下载最新的资源，并更新缓存中的文件。\n\n需要注意的是，使用 Service Worker 来缓存 http 请求资源需要一些额外的工作。例如，**需要编写 Service Worker 脚本来处理请求，并且需要将该脚本注册到浏览器中**。此外，还需要考虑一些缓存策略，以确保缓存的数据与服务器上的数据保持同步。\n\n**下面是一个使用 Service Worker 实现缓存的示例代码：**\n```js\n// 注册 Service Worker\nif ('serviceWorker' in navigator) {\n window.addEventListener('load', function() {\n navigator.serviceWorker.register('/service-worker.js').then(function(registration) {\n console.log('ServiceWorker registration successful with scope: ', registration.scope);\n }, function(err) {\n console.log('ServiceWorker registration failed: ', err);\n });\n });\n}\n\n// 安装 Service Worker\nself.addEventListener('install', function(event) {\n console.log('ServiceWorker install');\n event.waitUntil(\n caches.open('my-cache').then(function(cache) {\n return cache.addAll([\n '/',\n '/index.html',\n '/styles.css',\n '/script.js',\n '/image.png'\n ]);\n })\n );\n});\n\n// 激活 Service Worker\nself.addEventListener('activate', function(event) {\n console.log('ServiceWorker activate');\n});\n\n// 拦截网络请求\nself.addEventListener('fetch', function(event) {\n event.respondWith(\n caches.match(event.request).then(function(response) {\n if (response) {\n console.log('ServiceWorker fetch from cache:', event.request.url);\n return response;\n } else {\n console.log('ServiceWorker fetch from network:', event.request.url);\n return fetch(event.request);\n }\n })\n );\n});\n\n// 更新缓存\nself.addEventListener('activate', event => {\n event.waitUntil(\n caches.keys().then(cacheNames => {\n return Promise.all(\n cacheNames.filter(cacheName => {\n return cacheName.startsWith('my-cache') &&\n cacheName !== 'my-cache';\n }).map(cacheName => {\n return caches.delete(cacheName);\n })\n );\n })\n );\n});\n```\n\n当网络请求到来时，会首先在缓存中查找对应的资源，如果有则直接返回缓存中的资源，否则从网络中获取资源并返回。这样就可以实现基本的离线缓存功能。\n\n在这个示例中，当 Service Worker 被安装时，我们打开一个新的缓存并将应用程序的静态资源添加到缓存中。在 fetch 事件中，我们拦截每个网络请求并尝试匹配它们到我们的缓存中，如果匹配到了则返回缓存的响应，否则通过 fetch 方法从网络中获取资源。在 activate 事件中，我们可以更新缓存，删除旧的缓存项并将新的缓存项添加到缓存中。\n",{"_58":545,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/254/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/254/timeline",{"_58":548,"_60":61,"_62":549,"_64":550,"_66":551,"_68":552,"_70":553,"_72":554,"_74":555,"_76":556,"_78":557,"_111":558,"_138":139,"_140":24,"_141":-5,"_142":565,"_144":566,"_166":202,"_160":568,"_162":569,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":570,"_177":571,"_183":572,"_185":573,"_197":575,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/252","https://api.github.com/repos/pro-collection/interview-question/issues/252/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/252/comments","https://api.github.com/repos/pro-collection/interview-question/issues/252/events","https://github.com/pro-collection/interview-question/issues/252",1651192374,"I_kwDOJGDC6c5iazI2",252,"设计一套全站请求耗时统计工具",{"_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},[559,560],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":561,"_72":562,"_58":563,"_117":564,"_119":136,"_121":24,"_122":137},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","阿里巴巴",[],{"_58":298,"_68":299,"_62":300,"_70":301,"_72":302,"_74":303,"_76":304,"_122":305,"_154":567,"_156":307,"_158":159,"_138":139,"_160":308,"_162":309,"_164":-5,"_165":-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},"2023-04-03T01:44:12Z","2023-04-03T15:32:35Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"### 首先我们要知道有哪些方式可以统计前端请求耗时\n\n从代码层面上统计全站所有请求的耗时方式主要有以下几种：\n\n1. Performance API：Performance API 是浏览器提供的一组 API，可以用于测量网页性能。通过 Performance API，可以获取页面各个阶段的时间、资源加载时间等。其中，Performance Timing API 可以获取到每个资源的加载时间，从而计算出所有请求的耗时。\n\n2. XMLHttpRequest 的 load 事件：在发送 XMLHttpRequest 请求时，可以为其添加 load 事件，在请求完成时执行回调函数，从而记录请求的耗时。\n\n3. fetch 的 Performance API：类似 XMLHttpRequest，fetch 也提供了 Performance API，可以通过 Performance API 获取请求耗时。\n\n4. 自定义封装的请求函数：可以自己封装一个请求函数，在请求开始和结束时记录时间，从而计算请求耗时。\n\n\n\n### 设计一套前端全站请求耗时统计工具\n\n可以遵循以下步骤：\n\n1. 实现一个性能监控模块，用于记录每个请求的开始时间和结束时间，并计算耗时。\n\n2. 在应用入口处引入该模块，将每个请求的开始时间记录下来。\n\n3. 在每个请求的响应拦截器中，记录响应结束时间，并计算请求耗时。\n\n4. 将每个请求的耗时信息发送到服务端，以便进行进一步的统计和分析。\n\n5. 在服务端实现数据存储和展示，可以使用图表等方式展示请求耗时情况。\n\n6. 对于请求耗时较长的接口，可以进行优化和分析，如使用缓存、使用异步加载、优化查询语句等。\n\n7. 在前端应用中可以提供开关，允许用户自主开启和关闭全站请求耗时统计功能。\n\n以下是一个简单的实现示例：\n\n```js\n// performance.js\n\nconst performance = {\n timings: {},\n config: {\n reportUrl: '/report',\n },\n init() {\n // 监听所有请求的开始时间\n window.addEventListener('fetchStart', (event) => {\n this.timings[event.detail.id] = {\n startTime: Date.now(),\n };\n });\n\n // 监听所有请求的结束时间，并计算请求耗时\n window.addEventListener('fetchEnd', (event) => {\n const id = event.detail.id;\n if (this.timings[id]) {\n const timing = this.timings[id];\n timing.endTime = Date.now();\n timing.duration = timing.endTime - timing.startTime;\n\n // 将耗时信息发送到服务端\n const reportData = {\n url: event.detail.url,\n method: event.detail.method,\n duration: timing.duration,\n };\n this.report(reportData);\n }\n });\n },\n report(data) {\n // 将耗时信息发送到服务端\n const xhr = new XMLHttpRequest();\n xhr.open('POST', this.config.reportUrl);\n xhr.setRequestHeader('Content-Type', 'application/json');\n xhr.send(JSON.stringify(data));\n },\n};\n\nexport default performance;\n```\n\n在应用入口处引入该模块：\n\n```js\n// main.js\n\nimport performance from './performance';\n\nperformance.init();\n```\n\n在每个请求的响应拦截器中触发 `fetchEnd` 事件：\n\n```js\n// fetch.js\n\nimport EventBus from './EventBus';\n\nconst fetch = (url, options) => {\n const id = Math.random().toString(36).slice(2);\n const fetchStartEvent = new CustomEvent('fetchStart', {\n detail: {\n id,\n url,\n method: options.method || 'GET',\n },\n });\n EventBus.dispatchEvent(fetchStartEvent);\n\n return window.fetch(url, options)\n .then((response) => {\n const fetchEndEvent = new CustomEvent('fetchEnd', {\n detail: {\n id,\n url,\n method: options.method || 'GET',\n },\n });\n EventBus.dispatchEvent(fetchEndEvent);\n\n return response;\n });\n};\n\nexport default fetch;\n```\n\n在服务端实现数据存储和展示，可以使用图表等方式展示请求耗\n",{"_58":574,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/252/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/252/timeline",{"_58":577,"_60":61,"_62":578,"_64":579,"_66":580,"_68":581,"_70":582,"_72":583,"_74":584,"_76":585,"_78":586,"_111":587,"_138":139,"_140":24,"_141":-5,"_142":594,"_144":595,"_166":159,"_160":597,"_162":598,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":599,"_177":600,"_183":601,"_185":602,"_197":604,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/250","https://api.github.com/repos/pro-collection/interview-question/issues/250/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/250/comments","https://api.github.com/repos/pro-collection/interview-question/issues/250/events","https://github.com/pro-collection/interview-question/issues/250",1651183235,"I_kwDOJGDC6c5iaw6D",250,"如何解决页面请求接口大规模并发问题",{"_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},[588,589],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":590,"_72":591,"_58":592,"_117":593,"_119":136,"_121":24,"_122":137},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团",[],{"_58":298,"_68":299,"_62":300,"_70":301,"_72":302,"_74":303,"_76":304,"_122":305,"_154":596,"_156":307,"_158":159,"_138":139,"_160":308,"_162":309,"_164":-5,"_165":-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},"2023-04-03T01:31:39Z","2023-04-03T01:31:40Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"如何解决页面请求接口大规模并发问题，不仅仅是包含了接口并发，还有前端资源下载的请求并发。\n\n应该说这是一个话题讨论了；\n\n**个人认为可以从以下几个方面来考虑如何解决这个并发问题:** \n\n1. 后端优化：可以对接口进行优化，采用缓存技术，对数据进行预处理，减少数据库操作等。使用集群技术，将请求分散到不同的服务器上，提高并发量。另外可以使用反向代理、负载均衡等技术，分担服务器压力。\n\n2. 做 BFF 聚合：把所有首屏需要依赖的接口，利用服务中间层给聚合为一个接口。\n\n3. CDN加速：使用CDN缓存技术可以有效减少服务器请求压力，提高网站访问速度。CDN缓存可以将接口的数据存储在缓存服务器中，减少对原始服务器的访问，加速数据传输速度。\n\n4. 使用 WebSocket：使用 WebSocket 可以建立一个持久的连接，避免反复连接请求。WebSocket 可以实现双向通信，大幅降低服务器响应时间。\n\n5. 使用 HTTP2 及其以上版本，使用多路复用。\n\n6. 使用浏览器缓存技术：强缓存、协商缓存、离线缓存、Service Worker 缓存等方向。\n\n7. 聚合一定量的静态资源：比如提取页面公用复用部分代码打包到一个文件里面、对图片进行雪碧图处理，多个图片只下载一个图片。\n\n8. 采用微前端工程架构：只是对当前访问页面的静态资源进行下载，而不是下载整站静态资源。\n\n9. 使用服务端渲染技术：从服务端把页面首屏直接渲染好返回，就可以避免掉首屏需要的数据再做额外加载和执行。\n",{"_58":603,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/250/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/250/timeline",{"_58":606,"_60":61,"_62":607,"_64":608,"_66":609,"_68":610,"_70":611,"_72":612,"_74":613,"_76":614,"_78":615,"_111":616,"_138":139,"_140":24,"_141":-5,"_142":619,"_144":620,"_166":151,"_160":622,"_162":623,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":624,"_177":625,"_183":626,"_185":627,"_197":629,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/245","https://api.github.com/repos/pro-collection/interview-question/issues/245/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/245/comments","https://api.github.com/repos/pro-collection/interview-question/issues/245/events","https://github.com/pro-collection/interview-question/issues/245",1650992187,"I_kwDOJGDC6c5iaCQ7",245,"react 中是如何实现下拉菜单场景，点击区域外关闭下拉组件？",{"_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},[617,618],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":404,"_72":405,"_58":406,"_117":407,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":621,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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},"2023-04-02T15:32:52Z","2023-09-15T06:29:39Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"在 React 中，要实现点击区域外关闭下拉组件，一般可以使用以下几种方法：\n\n1. 在下拉组件的根元素上监听点击事件，当点击区域不在下拉组件内时，触发关闭下拉组件的操作。这可以通过添加全局点击事件，然后在事件处理程序中判断点击区域是否在下拉组件内来实现。具体实现如下：\n\n```jsx\nimport React, { useRef, useEffect } from 'react';\n\nfunction DropdownMenu(props) {\n const menuRef = useRef(null);\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (menuRef.current && !menuRef.current.contains(event.target)) {\n props.onClose();\n }\n }\n\n document.addEventListener('click', handleClickOutside);\n return () => {\n document.removeEventListener('click', handleClickOutside);\n };\n }, [props]);\n\n return (\n

\n {/* 下拉菜单内容 */}\n

\n );\n}\n```\n\n2. 在下拉组件的父元素上监听点击事件，当点击区域不在下拉组件及其父元素内时，触发关闭下拉组件的操作。具体实现如下：\n\n```jsx\nimport React, { useState } from 'react';\n\nfunction Dropdown(props) {\n const [isOpen, setIsOpen] = useState(false);\n\n function toggleDropdown() {\n setIsOpen(!isOpen);\n }\n\n function handleClickOutside(event) {\n if (!event.target.closest('.dropdown')) {\n setIsOpen(false);\n }\n }\n\n return (\n

\n \n {isOpen && setIsOpen(false)} />}\n

\n );\n}\n```\n\n在上述代码中，我们在 `Dropdown` 组件的根元素上添加了点击事件处理程序 `handleClickOutside`，当点击区域不在 `.dropdown` 元素内时，触发关闭下拉组件的操作。由于 `DropdownMenu` 组件位于 `Dropdown` 组件内部，因此当点击下拉菜单时，事件会冒泡到 `Dropdown` 组件，从而不会触发关闭操作。\n\n3. 除了上述方法外，还可以使用 `useRef` 钩子来监听鼠标点击事件。具体实现可以在下拉组件的根元素上使用 `ref` 属性来获取 DOM 元素的引用，然后在组件挂载时使用 `addEventListener` 方法绑定 `mousedown` 事件，最后在事件处理函数中判断鼠标点击的位置是否在下拉组件内，如果不在，则关闭下拉组件。\n\n示例代码如下：\n\n```jsx\nimport { useRef, useState, useEffect } from 'react';\n\nfunction Dropdown() {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef(null);\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [dropdownRef]);\n\n return (\n

\n \n {isOpen && (\n

Option 1
Option 2
Option 3

\n )}\n

\n );\n}\n```\n\n这种方法可以在组件内部处理点击事件，不需要将事件处理函数传递给父组件。但是相对而言代码会比较繁琐，需要手动处理事件绑定和解绑。\n\n",{"_58":628,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/245/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/245/timeline",{"_58":631,"_60":61,"_62":632,"_64":633,"_66":634,"_68":635,"_70":636,"_72":637,"_74":638,"_76":639,"_78":640,"_111":641,"_138":139,"_140":24,"_141":-5,"_142":644,"_144":645,"_166":159,"_160":647,"_162":648,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":649,"_177":650,"_183":651,"_185":652,"_197":654,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/238","https://api.github.com/repos/pro-collection/interview-question/issues/238/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/238/comments","https://api.github.com/repos/pro-collection/interview-question/issues/238/events","https://github.com/pro-collection/interview-question/issues/238",1647970228,"I_kwDOJGDC6c5iOge0",238,"如何保证用户的使用体验",{"_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},[642,643],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":298,"_68":299,"_62":300,"_70":301,"_72":302,"_74":303,"_76":304,"_122":305,"_154":646,"_156":307,"_158":159,"_138":139,"_160":308,"_162":309,"_164":-5,"_165":-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},"2023-03-30T16:47:54Z","2023-03-30T16:47:55Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"【如何保证用户的使用体验】这个也是一个较为复杂的话题，这个也不是问题了，这个算是话题吧；\n\n主要从以下几个方面思考问题：\n\n1. 性能方向的思考\n\n2. 用户线上问题反馈，线上 on call 的思考\n\n3. 用户使用体验的思考，交互体验使用方向\n\n4. 提升用户能效方向思考\n",{"_58":653,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/238/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/238/timeline",{"_58":656,"_60":61,"_62":657,"_64":658,"_66":659,"_68":660,"_70":661,"_72":662,"_74":663,"_76":664,"_78":665,"_111":666,"_138":139,"_140":24,"_141":-5,"_142":669,"_144":670,"_166":159,"_160":672,"_162":673,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":674,"_177":675,"_183":676,"_185":677,"_197":679,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/237","https://api.github.com/repos/pro-collection/interview-question/issues/237/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/237/comments","https://api.github.com/repos/pro-collection/interview-question/issues/237/events","https://github.com/pro-collection/interview-question/issues/237",1646077597,"I_kwDOJGDC6c5iHSad",237,"canvas 与 svg 在可视化领域优劣如何",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[667,668],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":298,"_68":299,"_62":300,"_70":301,"_72":302,"_74":303,"_76":304,"_122":305,"_154":671,"_156":307,"_158":159,"_138":139,"_160":308,"_162":309,"_164":-5,"_165":-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},"2023-03-29T15:42:42Z","2023-10-11T03:08:31Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"SVG、Canvas和WebGL在可视化方向各有优劣，具体如下：\r\n\r\n**SVG（Scalable Vector Graphics）：**\r\n\r\n- 优势：\r\n1. 矢量图形：SVG 使用矢量图形描述，图形会根据缩放和放大而保持清晰，适用于需要无损放大的情况。\r\n2. 文本处理：SVG 对于文本处理较好，可以方便地添加和编辑文本。\r\n3. 简单图形绘制：SVG 支持直接绘制基本图形，如矩形、圆形、线条等，方便快速绘制简单图表。\r\n\r\n- 劣势：\r\n1. 复杂图形处理：当图形复杂度较高时，SVG 的性能会受到影响，特别是在处理大量数据时。\r\n2. 动画效果：SVG 的动画效果相对较弱，复杂的动画效果可能导致性能下降。\r\n\r\n**Canvas：**\r\n\r\n- 优势：\r\n1. 像素级控制：Canvas 提供了像素级别的控制，可以绘制复杂的图形和图表。\r\n2. 性能较好：Canvas 可以通过 JavaScript 直接操作像素，适用于处理大量数据和复杂图形的场景。\r\n3. 动画效果：Canvas 可以通过 JavaScript 控制每一帧的绘制，实现复杂的动画效果。\r\n\r\n- 劣势：\r\n1. 缩放和放大：Canvas 绘制的图形是像素级别的，当需要缩放和放大时会导致图形模糊。\r\n2. 文本处理：相对于 SVG，Canvas 对于文本处理较为复杂，需要手动进行字体设置和绘制。\r\n\r\n**WebGL（Web Graphics Library）：**\r\n\r\n- 优势：\r\n1. 3D 图形渲染：WebGL 可以进行硬件加速的 3D 图形渲染，适用于创建复杂的 3D 场景和效果。\r\n2. 性能优异：WebGL 可以充分利用 GPU 的并行计算能力，具有较好的性能表现。\r\n\r\n- 劣势：\r\n1. 学习成本高：WebGL 使用 OpenGL ES 的接口，对于开发者要求一定的图形学和计算机图形学的知识。\r\n2. 兼容性问题：WebGL 需要浏览器支持，并且在某些设备和浏览器上可能存在兼容性问题。\r\n\r\n综上所述，选择适合的技术取决于具体的需求，如图形复杂性、数据量大小、动画效果的需求、对文本处理的要求等。在实际开发中，也可以结合使用不同的技术来满足不同的需求。\r\n\r\n\r\n**表格对比**\r\n\r\n|特性|Canvas|SVG|\r\n|---|---|---|\r\n|图形质量|像素级别的图形，适合绘制大量复杂动态的图形|矢量图，图形不会失真，适合绘制静态图形|\r\n|图形渲染|快速渲染，适合处理大量图形数据|慢速渲染，适合处理小规模静态图形|\r\n|交互性|事件处理复杂，需要手动编写交互逻辑|事件处理简单，内置事件处理机制|\r\n|动画效果|动画效果需要手动实现，实现复杂动画困难|内置 SMIL 动画支持，可实现较复杂动画效果|\r\n|浏览器支持|除 IE8 及以下版本外，其他浏览器都支持|除 IE9 及以下版本外，其他浏览器都支持|\r\n|适用场景|处理大量动态图形，如游戏开发、数据可视化等|绘制简单静态图形，如图标、线条、文字等|\r\n",{"_58":678,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/237/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/237/timeline",{"_58":681,"_60":61,"_62":682,"_64":683,"_66":684,"_68":685,"_70":686,"_72":687,"_74":688,"_76":689,"_78":690,"_111":691,"_138":139,"_140":24,"_141":-5,"_142":698,"_144":699,"_166":159,"_160":712,"_162":713,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":714,"_177":715,"_183":716,"_185":717,"_197":719,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/232","https://api.github.com/repos/pro-collection/interview-question/issues/232/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/232/comments","https://api.github.com/repos/pro-collection/interview-question/issues/232/events","https://github.com/pro-collection/interview-question/issues/232",1646029883,"I_kwDOJGDC6c5iHGw7",232,"使用同一个链接，如何实现 PC 打开是 web 应用、手机打开是一个 H5 应用？",{"_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},[692,693],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":694,"_72":695,"_58":696,"_117":697,"_119":136,"_121":24,"_122":137},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_58":700,"_68":701,"_62":702,"_70":703,"_72":704,"_74":705,"_76":706,"_122":707,"_154":708,"_156":709,"_158":159,"_138":139,"_160":710,"_162":711,"_164":-5,"_165":-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","2023-03-29T15:15:05Z","2023-03-29T15:15:06Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"可以通过根据请求来源（User-Agent）来判断访问设备的类型，然后在服务器端进行适配。例如，可以在服务器端使用 Node.js 的 Express 框架，在路由中对不同的 User-Agent 进行判断，返回不同的页面或数据。具体实现可以参考以下步骤：\n\n1. 根据 User-Agent 判断访问设备的类型，例如判断是否为移动设备。可以使用第三方库如 ua-parser-js 进行 User-Agent 的解析。\n\n2. 如果是移动设备，可以返回一个 H5 页面或接口数据。\n\n3. 如果是 PC 设备，可以返回一个 web 应用页面或接口数据。\n\n具体实现方式还取决于应用的具体场景和需求，以上只是一个大致的思路。",{"_58":718,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/232/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/232/timeline",{"_58":721,"_60":61,"_62":722,"_64":723,"_66":724,"_68":725,"_70":726,"_72":727,"_74":728,"_76":729,"_78":730,"_111":731,"_138":139,"_140":24,"_141":-5,"_142":733,"_144":734,"_166":159,"_160":736,"_162":737,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":738,"_177":739,"_183":740,"_185":741,"_197":743,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/190","https://api.github.com/repos/pro-collection/interview-question/issues/190/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/190/comments","https://api.github.com/repos/pro-collection/interview-question/issues/190/events","https://github.com/pro-collection/interview-question/issues/190",1640839774,"I_kwDOJGDC6c5hzTpe",190,"js 超过 Number 最大值的数怎么处理？",{"_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},[732],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":735,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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},"2023-03-26T09:39:36Z","2023-03-26T09:39:37Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"### js 超过 Number 最大值的数怎么处理\n\n在 JavaScript 中，超过 `Number.MAX_VALUE` 的数值被认为是 `Infinity`（正无穷大）。如果要处理超过 `Number.MAX_VALUE` 的数值，可以使用第三方的 JavaScript 库，如 `big.js` 或 `bignumber.js`，这些库可以处理任意精度的数值。\n\n例如，使用 `big.js` 库可以将两个超过 `Number.MAX_VALUE` 的数相加：\n\n```javascript\nconst big = require('big.js');\n\nconst x = new big('9007199254740993');\nconst y = new big('100000000000000000');\n\nconst result = x.plus(y);\n\nconsole.log(result.toString()); // 输出：100009007194925474093\n```\n\n这里创建了两个 `big.js` 对象 `x` 和 `y`，分别存储超过 `Number.MAX_VALUE` 的数值。通过 `plus` 方法将它们相加，得到了正确的结果。最后，通过 `toString` 方法将结果转换为字符串。\n\n### 如果不依赖外部库，咋处理\n\nJavaScript 中，数值超过了 Number 最大值时，可以使用 BigInt 类型来处理，它可以表示任意精度的整数。\n\n使用 BigInt 类型时，需要在数值后面添加一个 `n` 后缀来表示 BigInt 类型。例如：\n\n```javascript\nconst bigNum = 9007199254740993n; // 注意：数字后面添加了 'n' 后缀\n```\n\n注意，BigInt 类型是 ECMAScript 2020 新增的特性，因此在某些浏览器中可能不被支持。如果需要在不支持 BigInt 的环境中使用 BigInt，可以使用 polyfill 或者第三方库来实现。",{"_58":742,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/190/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/190/timeline",{"_58":745,"_60":61,"_62":746,"_64":747,"_66":748,"_68":749,"_70":750,"_72":751,"_74":752,"_76":753,"_78":754,"_111":755,"_138":139,"_140":24,"_141":-5,"_142":757,"_144":758,"_166":159,"_160":760,"_162":760,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":761,"_177":762,"_183":763,"_185":764,"_197":766,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/189","https://api.github.com/repos/pro-collection/interview-question/issues/189/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/189/comments","https://api.github.com/repos/pro-collection/interview-question/issues/189/events","https://github.com/pro-collection/interview-question/issues/189",1640838857,"I_kwDOJGDC6c5hzTbJ",189,"当QPS达到峰值时, 该如何处理？",{"_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},[756],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":759,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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},"2023-03-26T09:36:22Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"当QPS达到峰值时，可以从以下几个方面来进行优化：\n\n1. 数据库优化：数据库的优化包括优化SQL语句、使用索引、避免全表扫描、分表分库等措施，以提高数据库的读写性能。\n\n2. 缓存优化：缓存可以降低对数据库的访问频率，提高响应速度。可以使用Redis、Memcached等缓存技术，减轻服务器负载。\n\n3. 代码优化：优化代码可以提高代码的执行效率，减少不必要的开销。可以通过一些优化手段，如减少不必要的代码执行、避免循环嵌套、避免不必要的递归调用等来提高代码的性能。\n\n4. 负载均衡：负载均衡可以将请求分发到多个服务器上，减少单个服务器的负载，提高整个系统的性能和可用性。\n\n5. 异步处理：将一些计算量大、耗时长的操作异步处理，减少对主线程的阻塞，提高响应速度。\n\n6. CDN加速：使用CDN技术可以将静态资源缓存到CDN节点上，提高资源的加载速度，减少服务器的负载。\n\n7. 硬件升级：可以通过升级服务器硬件，增加带宽等方式来提高系统的处理能力。\n\n以上是一些常见的优化手段，需要根据具体情况进行选择和实施。",{"_58":765,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/189/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/189/timeline",{"_58":768,"_60":61,"_62":769,"_64":770,"_66":771,"_68":772,"_70":773,"_72":774,"_74":775,"_76":776,"_78":777,"_111":778,"_138":139,"_140":24,"_141":-5,"_142":780,"_144":781,"_166":303,"_160":783,"_162":784,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":785,"_177":786,"_183":787,"_185":788,"_197":790,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/188","https://api.github.com/repos/pro-collection/interview-question/issues/188/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/188/comments","https://api.github.com/repos/pro-collection/interview-question/issues/188/events","https://github.com/pro-collection/interview-question/issues/188",1640838379,"I_kwDOJGDC6c5hzTTr",188,"前端如何实现截图？",{"_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},[779],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":782,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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},"2023-03-26T09:34:41Z","2025-03-05T03:53:42Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"前端实现截图需要使用 HTML5 的 Canvas 和相关 API，具体步骤如下：\r\n\r\n1. 首先在页面中创建一个 Canvas 元素，并设置其宽高和样式。\r\n2. 使用 Canvas API 在 Canvas 上绘制需要截图的内容，比如页面的某个区域、某个元素、图片等。\r\n3. 调用 Canvas API 中的 `toDataURL()` 方法将 Canvas 转化为 base64 编码的图片数据。\r\n4. 将 base64 编码的图片数据传递给后端进行处理或者直接在前端进行显示。\r\n\r\n以下是一个简单的例子，实现了对整个页面的截图：\r\n\r\n```html\r\n\r\n\r\n \r\n \r\n 截图示例\r\n \r\n \r\n \r\n

截图示例

\r\n

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

\r\n \r\n

\r\n \r\n \r\n\r\n```\r\n\r\n这个例子中，在页面中创建了一个 `canvas` 元素，并设置其宽高和样式，将其放在页面最上方。在点击“截图”按钮时，通过 `toDataURL()` 方法将整个页面的截图转换为 base64 编码的图片数据，并打印到控制台上。",{"_58":789,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/188/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/188/timeline","pagination",{"_793":794,"_174":794},"value",7,"actionData","errors"]