Document

\n $\"\"$ \n

\n ......省略了19个box\n

\n \n \n\n```\n\n此时的页面:\n\n![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4948c01e92814e9583a34ea2ce4bbd42~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1928&h=1040&s=1053345&e=png&b=ffffff)\n\n### JavaScript 部分\n\n### 实现原理：\n\n1.使用一个父容器 container 包裹子容器 box\n\n2.图片容器 box-img 包裹在容器 box 中，用来展示\n\n3.通过 js 获取父容器的 DOM 结构，再获取其子元素图片容器 box\n\n4.将其按照瀑布流的规则使用绝对定位放置\n\n5.获取屏幕大小计算该屏幕最多能放下几张图片，将前 n 张图片放在第一行\n\n6.使用一个 heightArr 高度数组,在放置的时候记录每一列图片的高度,后面的图片放置在高度最低的那一列\n\n### 图解:\n\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2e0b52959ea49df9cb63ab2a5aa9bd2~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=905&h=636&s=34819&e=png&b=ffffff)\n\n### js 代码实现:\n\n```javascript\n//获取用户屏幕宽度，决定一行几张图\n//操作下一张图，放到上一行最矮的列下\nimgLocation(\"container\", \"box\");\n\nfunction imgLocation(parent, content) {\n var cparent = document.getElementById(parent);\n var ccontent = getChildElement(cparent, content); //document.querySelectorAll('#container .box')\n // console.log(ccontent)\n var imgWidth = ccontent[0].offsetWidth;\n var num = Math.floor(document.documentElement.clientWidth / imgWidth);\n cparent.style.width = `${imgWidth * num}px`;\n //要操作的是哪张，每一列的高度\n\n var BoxHeightArr = [];\n for (var i = 0; i < ccontent.length; i++) {\n if (i < num) {\n //记录第一行\n BoxHeightArr[i] = ccontent[i].offsetHeight;\n } else {\n //开始操作，找到最矮的高度及列数\n minHeight = Math.min.apply(null, BoxHeightArr);\n var minIndex = BoxHeightArr.indexOf(minHeight);\n\n //摆放图片位置\n ccontent[i].style.position = \"absolute\";\n ccontent[i].style.top = minHeight + \"px\";\n ccontent[i].style.left = ccontent[minIndex].offsetLeft + \"px\";\n //更新这一列图片高度\n BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;\n }\n }\n console.log(BoxHeightArr);\n}\n\nfunction getChildElement(parent, child) {\n //获取parent中所有child\n var childArr = [];\n var allChild = parent.getElementsByTagName(\"*\");\n //找出所有box\n for (var i = 0; i < allChild.length; i++) {\n if (allChild[i].className == child) {\n childArr.push(allChild[i]);\n }\n }\n return childArr;\n}\n```\n\n### 最终效果:\n\n![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19e9ec489a484120b12c43fe87b532e7~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1920&h=911&s=1021235&e=png&b=fefcfc)\n",{"_58":383,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/820/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/820/timeline",{"_58":386,"_60":61,"_62":387,"_64":388,"_66":389,"_68":390,"_70":391,"_72":392,"_74":393,"_76":394,"_78":395,"_111":396,"_131":132,"_133":24,"_134":409,"_136":410,"_158":196,"_152":412,"_154":413,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":414,"_170":415,"_176":416,"_178":417,"_190":419,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/819","https://api.github.com/repos/pro-collection/interview-question/issues/819/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/819/comments","https://api.github.com/repos/pro-collection/interview-question/issues/819/events","https://github.com/pro-collection/interview-question/issues/819",2458939269,"I_kwDOJGDC6c6SkG-F",819,"[React] 为什么要自定义合成事件【热度: 132】",{"_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},[397,404],{"_70":398,"_72":399,"_58":400,"_117":401,"_119":402,"_121":24,"_122":403},5252532904,"LA_kwDOJGDC6c8AAAABORNKqA","https://api.github.com/repos/pro-collection/interview-question/labels/web%E6%A1%86%E6%9E%B6","web框架","CB446E","web 框架相关知识",{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},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":258,"_68":259,"_62":260,"_70":261,"_72":262,"_74":263,"_76":264,"_122":265,"_146":411,"_148":267,"_150":151,"_131":132,"_152":268,"_154":269,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T06:37:44Z","2024-11-12T11:40:37Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：React 合成事件\n\nReact 选择自定义合成事件系统主要是为了提供一个统一的事件处理接口，解决浏览器原生事件的兼容性问题，并优化性能。以下是自定义合成事件系统的几个关键原因：\n\n1. **跨浏览器一致性**：\n 不同的浏览器对事件的实现存在差异，这可能导致在不同浏览器上运行的代码行为不一致。React 的合成事件系统提供了一个统一的 API，使得开发者可以编写一次代码，而无需担心浏览器兼容性问题。\n\n2. **性能优化**：\n React 的合成事件系统允许事件处理在事件冒泡阶段进行，而不是在捕获阶段。这样可以减少不必要的事件处理调用，因为事件在冒泡阶段到达目标元素时，通常意味着用户与页面的交互已经完成。此外，React 还可以将多个事件合并处理，减少对 DOM 的操作次数，从而提高性能。\n\n3. **简化事件处理**：\n 在原生事件中，事件处理函数需要处理事件的捕获和冒泡阶段，这可能会导致代码复杂且难以维护。React 的合成事件系统抽象了这些细节，开发者只需要关注事件的冒泡阶段，简化了事件处理逻辑。\n\n4. **事件池**：\n React 的合成事件对象是池化的，这意味着在事件处理函数执行完毕后，事件对象会被重用，以减少垃圾回收的压力。这有助于提高应用的性能。\n\n5. **安全性和可控性**：\n React 的合成事件系统提供了一个安全的环境，可以防止一些常见的安全问题，如跨站脚本攻击（XSS）。同时，它也使得开发者可以更容易地控制事件的行为。\n\n6. **与 React 的生命周期集成**：\n React 的合成事件系统与组件的生命周期紧密集成，例如，事件处理函数可以在组件卸载时自动清理，避免内存泄漏。\n\n7. **与 React 的其他特性集成**：\n 合成事件系统与 React 的其他特性（如虚拟 DOM、组件状态管理等）紧密集成，提供了一致的开发体验。\n\n8. **便于调试和开发工具**：\n React 的合成事件系统使得开发者可以更容易地调试事件处理代码，因为事件对象具有一致的结构和属性。\n\n综上所述，React 的自定义合成事件系统是为了提供一个更加一致、高效和安全的事件处理机制，使得开发者可以更容易地构建高性能的用户界面。\n",{"_58":418,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/819/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/819/timeline",{"_58":421,"_60":61,"_62":422,"_64":423,"_66":424,"_68":425,"_70":426,"_72":427,"_74":428,"_76":429,"_78":430,"_111":431,"_131":132,"_133":24,"_134":434,"_136":435,"_158":151,"_152":437,"_154":437,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":438,"_170":439,"_176":440,"_178":441,"_190":443,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/818","https://api.github.com/repos/pro-collection/interview-question/issues/818/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/818/comments","https://api.github.com/repos/pro-collection/interview-question/issues/818/events","https://github.com/pro-collection/interview-question/issues/818",2458890021,"I_kwDOJGDC6c6Sj68l",818,"[React] useState 的原理是什么，背后怎么执行的【热度: 446】",{"_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},[432,433],{"_70":398,"_72":399,"_58":400,"_117":401,"_119":402,"_121":24,"_122":403},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":258,"_68":259,"_62":260,"_70":261,"_72":262,"_74":263,"_76":264,"_122":265,"_146":436,"_148":267,"_150":151,"_131":132,"_152":268,"_154":269,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T04:22:36Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：useState 的原理\n\n`useState` 是 React 库中的一个 Hook，它允许你在函数组件中添加 React 状态。使用 `useState`，你可以给组件添加内部状态，并且能够通过调用这个 Hook 来更新状态，从而触发组件的重新渲染。\n\n### 原理简述\n\n`useState` 的工作原理基于 React 的渲染机制和 Fiber 架构。以下是 `useState` 工作流程的简要概述：\n\n1. **初始化状态**：当你在函数组件中调用 `useState` 时，React 会为该组件创建一个状态变量。如果提供了初始值，状态将被初始化为该值。\n\n2. **返回更新函数**：`useState` 返回一个数组，包含当前的状态值和一个更新该状态的函数（通常命名为 `setState`）。\n\n3. **调用更新函数**：当你调用这个更新函数并传入一个新的状态值时，React 会将这个新的状态值与当前状态合并，并计划重新渲染组件。\n\n4. **重新渲染**：在下一次的渲染周期中，React 会使用新的状态值重新渲染组件。\n\n5. **状态持久化**：React 通过内部机制确保状态在组件的多次渲染之间保持不变。\n\n### 执行过程\n\n以下是 `useState` 在 React 内部可能的执行过程：\n\n1. **调用 useState**：在函数组件中调用 `useState(initialState)`。\n\n2. **创建状态对象**：React 创建一个状态对象，存储状态值和与之关联的更新函数。\n\n3. **渲染组件**：使用当前的状态值渲染组件。\n\n4. **更新状态**：当组件需要更新状态时，调用由 `useState` 返回的更新函数，例如 `setState(newState)`。\n\n5. **调度更新**：React 将更新调度到下一个渲染周期，并标记组件为需要重新渲染。\n\n6. **批量处理**：React 可能会将多个状态更新批处理在一起，以避免不必要的多次渲染。\n\n7. **重新渲染组件**：在下一个渲染周期，React 使用新的状态值重新渲染组件。\n\n8. **状态持久化**：React 的状态持久化机制确保即使在组件卸载和重新挂载后，状态也能被正确地恢复。\n\n### 代码示例\n\n```javascript\nimport React, { useState } from \"react\";\n\nfunction Counter() {\n const [count, setCount] = useState(0); // 初始化状态为 0\n\n return (\n

Count: {count}

\n \n

\n );\n}\n```\n\n在这个例子中，`useState` 被用来初始化 `count` 状态，并提供了一个 `setCount` 函数来更新它。每次点击按钮时，`setCount` 被调用，React 计划重新渲染组件，并在下一次渲染周期中使用新的状态值。\n",{"_58":442,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/818/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/818/timeline",{"_58":445,"_60":61,"_62":446,"_64":447,"_66":448,"_68":449,"_70":450,"_72":451,"_74":452,"_76":453,"_78":454,"_111":455,"_131":132,"_133":24,"_134":458,"_136":459,"_158":151,"_152":461,"_154":462,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":463,"_170":464,"_176":465,"_178":466,"_190":468,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/817","https://api.github.com/repos/pro-collection/interview-question/issues/817/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/817/comments","https://api.github.com/repos/pro-collection/interview-question/issues/817/events","https://github.com/pro-collection/interview-question/issues/817",2458889146,"I_kwDOJGDC6c6Sj6u6",817,"[React] 类组件里面 setState 做了哪些事儿【热度: 200】",{"_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},[456,457],{"_70":398,"_72":399,"_58":400,"_117":401,"_119":402,"_121":24,"_122":403},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":460,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T04:19:32Z","2024-08-10T04:19:33Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：setState 做了哪些事儿\n\n在 React 的类组件中，`setState` 方法主要做了以下几件事情：\n\n1. 触发组件的重新渲染：当调用 `setState` 时，React 会标记该组件为“脏”状态，在下一个渲染周期中重新渲染组件。\n\n2. 合并状态更新：`setState` 接受一个对象或函数作为参数。如果是对象，它会与当前组件的状态进行合并。如果是函数，该函数会接收当前的状态作为参数，并返回一个新的状态对象，然后与当前状态合并。\n\n3. 异步更新：在大多数情况下，`setState` 是异步执行的，这是为了优化性能，避免不必要的频繁渲染。但在某些特殊情况下，如在事件处理函数中，可以通过给 `setState` 传递一个函数作为第二个参数来在状态更新完成后执行一些操作。\n\n例如：\n\n```javascript\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = { count: 0 };\n }\n\n handleClick = () => {\n // 方式一：对象形式\n this.setState({ count: this.state.count + 1 });\n // 方式二：函数形式\n this.setState((prevState) => ({ count: prevState.count + 1 }));\n };\n}\n```\n",{"_58":467,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/817/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/817/timeline",{"_58":470,"_60":61,"_62":471,"_64":472,"_66":473,"_68":474,"_70":475,"_72":476,"_74":477,"_76":478,"_78":479,"_111":480,"_131":132,"_133":24,"_134":489,"_136":490,"_158":151,"_152":492,"_154":493,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":494,"_170":495,"_176":496,"_178":497,"_190":499,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/816","https://api.github.com/repos/pro-collection/interview-question/issues/816/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/816/comments","https://api.github.com/repos/pro-collection/interview-question/issues/816/events","https://github.com/pro-collection/interview-question/issues/816",2458887841,"I_kwDOJGDC6c6Sj6ah",816,"[webpack] 构建过程中，是如何将我们 es6 代码编译为 es5【热度: 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},[481,488],{"_70":482,"_72":483,"_58":484,"_117":485,"_119":486,"_121":24,"_122":487},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","工程化","1d76db","web 项目工程化",{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":491,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T04:15:18Z","2024-08-10T04:15:19Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：es6 编译为 es5\n\nWebpack 本身是一个模块打包器（bundler），它并不直接负责将 ES6 代码编译为 ES5 代码。Webpack 的主要功能是将项目中的所有模块（JavaScript、图片、CSS 等）打包成一个或多个 bundle，以供浏览器加载。然而，Webpack 可以通过加载器（loaders）和插件（plugins）来扩展其功能，实现代码的转换和编译。\n\n将 ES6 代码编译为 ES5 的过程通常涉及以下几个步骤：\n\n1. **Babel 转换**：\n Babel 是一个流行的 JavaScript 编译器，可以将 ES6+ 代码转换为向后兼容的 JavaScript 版本，即 ES5。Webpack 可以与 Babel 配合使用，通过 Babel Loader 来实现代码的转换。\n\n2. **Loader 配置**：\n 在 Webpack 配置中，你可以指定使用 Babel Loader 来处理 `.js` 文件。当 Webpack 处理 JavaScript 文件时，Babel Loader 会被调用，并将 ES6 代码转换为 ES5。\n\n ```javascript\n // webpack.config.js\n module.exports = {\n // ...\n module: {\n rules: [\n {\n test: /\\.js$/,\n use: {\n loader: \"babel-loader\",\n options: {\n presets: [\"@babel/preset-env\"],\n },\n },\n },\n ],\n },\n // ...\n };\n ```\n\n3. **Babel 预设**：\n Babel 使用预设（presets）来定义转换规则。`@babel/preset-env` 是一个常用的预设，它会自动配置 Babel 以兼容目标浏览器的版本。\n\n4. **Polyfills**：\n 为了支持旧浏览器，Babel 还可以引入 polyfills，这些是提供现代 JavaScript 特性的第三方代码片段。例如，`core-js` 和 `regenerator-runtime` 是两个常用的 polyfill 库。\n\n5. **转换过程**：\n\n - **解析**：Babel 首先解析 ES6 代码为 AST（抽象语法树）。\n - **转换**：然后，Babel 遍历 AST，将 ES6 语法转换为 ES5 语法。\n - **生成**：最后，Babel 生成新的 ES5 代码。\n\n6. **Tree Shaking**：\n Webpack 支持 Tree Shaking，这是一种去除未使用代码的技术，可以进一步减小最终打包文件的大小。\n\n7. **代码分割**：\n Webpack 还可以进行代码分割，将代码拆分成多个 chunk，按需加载，提高应用的加载性能。\n\n8. **优化**：\n Webpack 还提供了多种优化选项，如压缩代码、合并模块等，以减小最终输出文件的大小。\n\n总结来说，Webpack 本身不直接编译 ES6 代码为 ES5，**而是通过与 Babel 等工具的配合使用，实现代码的转换和编译。Webpack 的主要作用是模块打包，而 Babel 负责将现代 JavaScript 代码转换为广泛兼容的格式。**通过合理配置 Webpack 和 Babel，可以高效地构建和优化前端应用。\n",{"_58":498,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/816/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/816/timeline",{"_58":501,"_60":61,"_62":502,"_64":503,"_66":504,"_68":505,"_70":506,"_72":507,"_74":508,"_76":509,"_78":510,"_111":511,"_131":132,"_133":24,"_134":513,"_136":514,"_158":196,"_152":516,"_154":517,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":518,"_170":519,"_176":520,"_178":521,"_190":523,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/815","https://api.github.com/repos/pro-collection/interview-question/issues/815/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/815/comments","https://api.github.com/repos/pro-collection/interview-question/issues/815/events","https://github.com/pro-collection/interview-question/issues/815",2458886530,"I_kwDOJGDC6c6Sj6GC",815,"0.1 + 0.2 不等于 0.3 这是什么原因，要怎么解决【热度: 389】",{"_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},[512],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":515,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T04:10:34Z","2025-07-10T09:14:15Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：精度计算\n\n在 JavaScript 中，`0.1 + 0.2` 不等于 `0.3` 的原因是浮点数的精度问题。\n\n在计算机中，浮点数采用二进制存储，而有些十进制小数无法精确地用二进制表示。`0.1` 和 `0.2` 在二进制表示中是无限循环的，在进行运算时会产生舍入误差。\n\n要解决这个问题，可以使用以下方法：\n\n1. 使用 `Number.EPSILON` 来比较两个浮点数是否接近：\n\n```javascript\nfunction numbersAreCloseEnough(num1, num2) {\n return Math.abs(num1 - num2) < Number.EPSILON;\n}\n\nlet result = 0.1 + 0.2;\nconsole.log(numbersAreCloseEnough(result, 0.3));\n```\n\n2. 将浮点数乘以一个适当的倍数转换为整数进行计算，计算完成后再除以这个倍数转换回浮点数：\n\n```javascript\nlet num1 = 0.1 * 10;\nlet num2 = 0.2 * 10;\nlet sum = (num1 + num2) / 10;\nconsole.log(sum === 0.3);\n```\n\n3. 使用第三方库，如 `decimal.js` ，它提供了更精确的十进制运算：\n\n```javascript\nconst Decimal = require(\"decimal.js\");\n\nlet num1 = new Decimal(\"0.1\");\nlet num2 = new Decimal(\"0.2\");\nlet sum = num1.plus(num2);\nconsole.log(sum.eq(0.3));\n```\n\n这些方法可以帮助您在处理浮点数运算时更准确地得到预期的结果。\n",{"_58":522,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/815/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/815/timeline",{"_58":525,"_60":61,"_62":526,"_64":527,"_66":528,"_68":529,"_70":530,"_72":531,"_74":532,"_76":533,"_78":534,"_111":535,"_131":132,"_133":24,"_134":543,"_136":544,"_158":151,"_152":546,"_154":546,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":547,"_170":548,"_176":549,"_178":550,"_190":552,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/814","https://api.github.com/repos/pro-collection/interview-question/issues/814/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/814/comments","https://api.github.com/repos/pro-collection/interview-question/issues/814/events","https://github.com/pro-collection/interview-question/issues/814",2458879592,"I_kwDOJGDC6c6Sj4Zo",814,"盒模型【热度: 753】",{"_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},[536],{"_70":537,"_72":538,"_58":539,"_117":540,"_119":541,"_121":24,"_122":542},5232524505,"LA_kwDOJGDC6c8AAAABN-H82Q","https://api.github.com/repos/pro-collection/interview-question/labels/CSS","CSS","A46719","CSS 相关问题",[],{"_58":213,"_68":214,"_62":215,"_70":216,"_72":217,"_74":196,"_76":218,"_122":219,"_146":545,"_148":221,"_150":151,"_131":132,"_152":222,"_154":223,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T03:49:12Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：盒模型\n\n### 盒模型\n\nCSS3 中的盒模型有以下两种：标准盒子模型、IE 盒子模型\n\n盒模型都是由四个部分组成的，分别是 margin、border、padding 和 content。\n\n**在标准盒模型性中**\n\n![画板 (5)_看图王.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bdd6da8a5db4f188a9a7d79c30ebcb6~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)\n\n盒子在网页中实际占用: \n宽 = `width + padding2 + border2 + margin2` \n高 = `height + padding2 + border2 + margin2`\n\n盒模型实际大小: \n宽 = `width + padding2 + border2` \n高 = `height + padding2 + border2`\n\n**在 IE 盒模型性中**\n\n![画板 (4)_看图王.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bc8aaa0306845e4a03ef9e78f55a9d5~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)\n\n盒子在网页中实际占用: \n宽 = `width + margin2` \n高 = `height + margin2`\n\n盒模型实际大小: \n宽 = `width` \n高 = `height`\n\n可以通过修改元素的 box-sizing 属性来改变元素的盒模型：\n\n- `box-sizeing: content-box`表示标准盒模型\n- `box-sizeing: border-box`表示 IE 盒模型\n",{"_58":551,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/814/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/814/timeline",{"_58":554,"_60":61,"_62":555,"_64":556,"_66":557,"_68":558,"_70":559,"_72":560,"_74":561,"_76":562,"_78":563,"_111":564,"_131":132,"_133":24,"_134":567,"_136":568,"_158":151,"_152":581,"_154":581,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":582,"_170":583,"_176":584,"_178":585,"_190":587,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/813","https://api.github.com/repos/pro-collection/interview-question/issues/813/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/813/comments","https://api.github.com/repos/pro-collection/interview-question/issues/813/events","https://github.com/pro-collection/interview-question/issues/813",2458878431,"I_kwDOJGDC6c6Sj4Hf",813,"[React] useRef 是如何实现的【热度: 299】",{"_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},[565,566],{"_70":398,"_72":399,"_58":400,"_117":401,"_119":402,"_121":24,"_122":403},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":569,"_68":570,"_62":571,"_70":572,"_72":573,"_74":574,"_76":575,"_122":576,"_146":577,"_148":578,"_150":151,"_131":132,"_152":579,"_154":580,"_156":-5,"_157":-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-10T03:44:14Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：useRef 实现\n\n该问题也是非常复杂，需要深入源码，可以看下面文章解析：\n\nhttps://juejin.cn/post/7341757372188065792\n\n> 以下是题库作者对上面文档的一些提炼总结\n\n- 什么是数据共享层\n- hooks\n - 如何确定 fiber 对应的 hook 上下文？\n - hook 是如何存在的？保存在什么地方？\n - 多个 hook 如何处理？\n- useRef\n - 实现原理\n - 标记 Ref\n - 执行 Ref 操作\n- mount 该如何操作\n- update 的时候该如何操作\n- 整体执行流程\n - 标记\n - 执行\n",{"_58":586,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/813/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/813/timeline",{"_58":589,"_60":61,"_62":590,"_64":591,"_66":592,"_68":593,"_70":594,"_72":595,"_74":596,"_76":597,"_78":598,"_111":599,"_131":132,"_133":24,"_134":602,"_136":603,"_158":151,"_152":605,"_154":605,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":606,"_170":607,"_176":608,"_178":609,"_190":611,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/812","https://api.github.com/repos/pro-collection/interview-question/issues/812/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/812/comments","https://api.github.com/repos/pro-collection/interview-question/issues/812/events","https://github.com/pro-collection/interview-question/issues/812",2458876292,"I_kwDOJGDC6c6Sj3mE",812,"[React] scheduler 调度机制原理【热度: 660】",{"_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},[600,601],{"_70":398,"_72":399,"_58":400,"_117":401,"_119":402,"_121":24,"_122":403},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":569,"_68":570,"_62":571,"_70":572,"_72":573,"_74":574,"_76":575,"_122":576,"_146":604,"_148":578,"_150":151,"_131":132,"_152":579,"_154":580,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T03:36:06Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：scheduler 调度机制原理\n\n细节过于复杂，可以参考一下文档：\n\n- https://juejin.cn/post/7331135154209308687\n\n后续是题库作者对上述文档的一些重点信息总结：\n\n1. scheduler 概念\n2. 时间片与优先级概念\n3. 优先级切分\n4. 任务队列\n5. scheduleCallback\n6. requestHostCallback\n7. MessageChannel\n8. performWorkUntilDeadline\n - 任务的中断和恢复\n - 判断任务的完成状态\n - 取消任务\n",{"_58":610,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/812/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/812/timeline",{"_58":613,"_60":61,"_62":614,"_64":615,"_66":616,"_68":617,"_70":618,"_72":619,"_74":620,"_76":621,"_78":622,"_111":623,"_131":132,"_133":24,"_134":626,"_136":627,"_158":151,"_152":629,"_154":630,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":631,"_170":632,"_176":633,"_178":634,"_190":636,"_192":-5,"_193":-5,"_194":-5,"_195":196},"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},[624,625],{"_70":315,"_72":316,"_58":317,"_117":318,"_119":319,"_121":24,"_122":320},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":569,"_68":570,"_62":571,"_70":572,"_72":573,"_74":574,"_76":575,"_122":576,"_146":628,"_148":578,"_150":151,"_131":132,"_152":579,"_154":580,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T03:31:45Z","2024-08-10T03:31:46Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：日志监控 - 还原现场、日志监控 - 前端录制用户行为技术方案\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":635,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"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":638,"_60":61,"_62":639,"_64":640,"_66":641,"_68":642,"_70":643,"_72":644,"_74":645,"_76":646,"_78":647,"_111":648,"_131":132,"_133":24,"_134":651,"_136":652,"_158":151,"_152":654,"_154":654,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":655,"_170":656,"_176":657,"_178":658,"_190":660,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/810","https://api.github.com/repos/pro-collection/interview-question/issues/810/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/810/comments","https://api.github.com/repos/pro-collection/interview-question/issues/810/events","https://github.com/pro-collection/interview-question/issues/810",2458865291,"I_kwDOJGDC6c6Sj06L",810,"axios 请求的底层依赖是什么？【热度: 266】",{"_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},[649,650],{"_70":245,"_72":246,"_58":247,"_117":248,"_119":249,"_121":24,"_122":250},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":653,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T02:54:22Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：axios 请求依赖\n\nAxios 的底层依赖会根据运行环境而有所不同：\n\n在浏览器环境中，Axios 通常会优先使用 `XMLHttpRequest` 对象来发送请求。但它也可以使用 `fetch` API （如果浏览器支持）。\n\n在 Node.js 环境中，Axios 依赖于 Node.js 的 `http` 或 `https` 模块来发送请求。\n",{"_58":659,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/810/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/810/timeline",{"_58":662,"_60":61,"_62":663,"_64":664,"_66":665,"_68":666,"_70":667,"_72":668,"_74":669,"_76":670,"_78":671,"_111":672,"_131":132,"_133":24,"_134":675,"_136":676,"_158":151,"_152":678,"_154":679,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":680,"_170":681,"_176":682,"_178":683,"_190":685,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/809","https://api.github.com/repos/pro-collection/interview-question/issues/809/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/809/comments","https://api.github.com/repos/pro-collection/interview-question/issues/809/events","https://github.com/pro-collection/interview-question/issues/809",2458864919,"I_kwDOJGDC6c6Sj00X",809,"ajax 和 xhr 是什么关系？【热度: 332】",{"_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},[673,674],{"_70":245,"_72":246,"_58":247,"_117":248,"_119":249,"_121":24,"_122":250},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":677,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T02:52:57Z","2024-08-10T02:52:58Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：ajax 和 xhr\n\n**Ajax**\n\n全称为 Asynchronous JavaScript and XML（异步 JavaScript 和 XML），是一种在不重新加载整个网页的情况下，与服务器进行数据交换并更新部分网页内容的技术方法。\n\nAjax 主要基于以下几个关键概念和技术：\n\n1. 异步通信：允许网页在发送请求后继续执行其他操作，无需等待服务器响应。\n\n2. JavaScript：用于处理请求的发送、响应的接收和页面的动态更新。\n\n3. XML 或其他数据格式：虽然名称中包含 XML，但实际上服务器返回的数据可以是 XML、JSON、HTML 等各种格式。\n\n**关系**\n\n`Ajax`（Asynchronous JavaScript and XML）是一种使用多种技术（包括 `XMLHttpRequest`（XHR）对象）在后台与服务器进行异步数据交换，而无需重新加载整个网页的 Web 开发技术。\n\n`XMLHttpRequest` 是实现 `Ajax` 技术的关键对象之一。通过创建 `XMLHttpRequest` 对象，我们可以使用 JavaScript 向服务器发送请求，并处理服务器返回的响应。\n\n简单来说，`XMLHttpRequest` 是实现 `Ajax` 的一种底层机制或工具。`Ajax` 是一个更广泛的概念，涵盖了使用包括 `XMLHttpRequest` 在内的技术来实现异步数据交互的方法和模式。\n\n例如，以下是一个使用 `XMLHttpRequest` 实现简单 `Ajax` 请求的示例：\n\n```javascript\nlet xhr = new XMLHttpRequest();\n\nxhr.open(\"GET\", \"https://example.com/data\");\n\nxhr.onreadystatechange = function () {\n if (xhr.readyState === 4 && xhr.status === 200) {\n let data = xhr.responseText;\n\n console.log(data);\n }\n};\n\nxhr.send();\n```\n\n在这个示例中，我们通过操作 `XMLHttpRequest` 对象来完成了一个异步获取数据的过程，这就是 `Ajax` 技术的一种应用。\n\n**其他实现方式**\n\n除了使用 `XMLHttpRequest` 实现 `Ajax` 之外，还有以下几种常见的实现方式：\n\n1. `fetch` API：这是现代浏览器中提供的一种更简洁的异步请求方式，基于 `Promise` 。\n\n```javascript\nfetch(\"https://example.com/data\")\n .then((response) => response.json())\n\n .then((data) => console.log(data))\n\n .catch((error) => console.error(error));\n```\n\n2. `Axios` 库：一个流行的第三方 `Ajax` 库，提供了丰富的功能和简洁的接口。\n\n```javascript\naxios\n .get(\"https://example.com/data\")\n\n .then((response) => console.log(response.data))\n\n .catch((error) => console.error(error));\n```\n\n3. `jQuery` 的 `$.ajax()` 方法：如果项目中使用了 `jQuery` 库，可以使用其提供的 `ajax` 方法。\n\n```javascript\n$.ajax({\n url: \"https://example.com/data\",\n\n method: \"GET\",\n\n success: function (data) {\n console.log(data);\n },\n\n error: function (error) {\n console.error(error);\n },\n});\n```\n\n这些方式各有特点，可以根据项目的需求和技术架构选择合适的 `Ajax` 实现方式。\n",{"_58":684,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/809/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/809/timeline",{"_58":687,"_60":61,"_62":688,"_64":689,"_66":690,"_68":691,"_70":692,"_72":693,"_74":694,"_76":695,"_78":696,"_111":697,"_131":132,"_133":24,"_134":700,"_136":701,"_158":151,"_152":703,"_154":704,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":705,"_170":706,"_176":707,"_178":708,"_190":710,"_192":-5,"_193":-5,"_194":-5,"_195":196},"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},[698,699],{"_70":315,"_72":316,"_58":317,"_117":318,"_119":319,"_121":24,"_122":320},{"_70":322,"_72":323,"_58":324,"_117":325,"_119":129,"_121":24,"_122":130},[],{"_58":258,"_68":259,"_62":260,"_70":261,"_72":262,"_74":263,"_76":264,"_122":265,"_146":702,"_148":267,"_150":151,"_131":132,"_152":268,"_154":269,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T02:43:39Z","2024-08-10T02:43:40Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：日志监控问题\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":709,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"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":712,"_60":61,"_62":713,"_64":714,"_66":715,"_68":716,"_70":717,"_72":718,"_74":719,"_76":720,"_78":721,"_111":722,"_131":132,"_133":24,"_134":725,"_136":726,"_158":151,"_152":728,"_154":728,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":729,"_170":730,"_176":731,"_178":732,"_190":734,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/807","https://api.github.com/repos/pro-collection/interview-question/issues/807/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/807/comments","https://api.github.com/repos/pro-collection/interview-question/issues/807/events","https://github.com/pro-collection/interview-question/issues/807",2458859728,"I_kwDOJGDC6c6SjzjQ",807,"[React] hooks 调用是可以写在 if 语句里面吗【热度: 337】",{"_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},[723,724],{"_70":398,"_72":399,"_58":400,"_117":401,"_119":402,"_121":24,"_122":403},{"_70":252,"_72":253,"_58":254,"_117":255,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":727,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-10T02:32:59Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：hooks 调用问题\n\n**hooks 写在 if 语句里面，也是可以执行的，但是会带来很多不可预期的异常**\n\n在 React 中，Hooks 的调用不应该直接写在 `if` 语句里面。\n\nHooks 必须在函数组件的顶层（不在循环、条件判断或嵌套函数中）按顺序调用。这是因为 React 需要在每次渲染时以相同的顺序调用 Hooks，以正确管理组件的状态和副作用。\n\n如果在 `if` 语句中调用 Hooks，可能会导致以下错误：\n\n1. 状态不一致：由于渲染顺序的不确定性，可能会导致状态的更新和获取出现不一致的情况。\n\n2. 难以预测的行为：React 依赖于 Hooks 的调用顺序来正确管理组件的内部逻辑，如果在条件语句中调用，可能会导致难以理解和调试的问题。\n\n例如，下面的代码是错误的：\n\n```jsx\nfunction MyComponent() {\n if (someCondition) {\n const [count, setCount] = useState(0); // 错误：不允许在条件语句中调用 useState\n }\n\n // 后续代码\n}\n```\n\n为了遵循规则，应该将 Hooks 的调用始终保持在函数组件的最顶层。\n",{"_58":733,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/807/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/807/timeline",{"_58":736,"_60":61,"_62":737,"_64":738,"_66":739,"_68":740,"_70":741,"_72":742,"_74":743,"_76":744,"_78":745,"_111":746,"_131":132,"_133":24,"_134":749,"_136":750,"_158":151,"_152":752,"_154":753,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":754,"_170":755,"_176":756,"_178":757,"_190":759,"_192":-5,"_193":-5,"_194":-5,"_195":196},"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},[747,748],{"_70":315,"_72":316,"_58":317,"_117":318,"_119":319,"_121":24,"_122":320},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":751,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-21T02:52:59Z","2024-07-21T02:53:00Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：减少 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":758,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"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":761,"_60":61,"_62":762,"_64":763,"_66":764,"_68":765,"_70":766,"_72":767,"_74":768,"_76":769,"_78":770,"_111":771,"_131":132,"_133":24,"_134":774,"_136":775,"_158":151,"_152":777,"_154":778,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":779,"_170":780,"_176":781,"_178":782,"_190":784,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/805","https://api.github.com/repos/pro-collection/interview-question/issues/805/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/805/comments","https://api.github.com/repos/pro-collection/interview-question/issues/805/events","https://github.com/pro-collection/interview-question/issues/805",2421178435,"I_kwDOJGDC6c6QUEBD",805,"babel-runtime 作用是啥【热度: 200】",{"_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},[772,773],{"_70":482,"_72":483,"_58":484,"_117":485,"_119":486,"_121":24,"_122":487},{"_70":252,"_72":253,"_58":254,"_117":255,"_119":129,"_121":24,"_122":130},[],{"_58":258,"_68":259,"_62":260,"_70":261,"_72":262,"_74":263,"_76":264,"_122":265,"_146":776,"_148":267,"_150":151,"_131":132,"_152":268,"_154":269,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-21T02:25:24Z","2024-07-21T02:25:25Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：babel-runtime 作用\n\n`babel-runtime` 是一个包含 `babel` 模块化运行时助手的库。\n\n在使用 `babel` 进行代码转换时，有时会注入一些在多个文件中相同且可能被重复使用的代码。例如，使用类转换（无松散模式）时，每个包含类的文件都会重复出现类似 `_classcallcheck` 这样的函数。\n\n`babel-runtime` 的主要作用就是将这些可能被重用的代码抽取成单独的模块，以避免在每个文件中重复出现相同的代码。它通过模块导入的方式引入这些功能，从而避免了对全局作用域的修改或污染。\n\n具体来说，`babel-runtime` 包含了诸如 `core-js`（提供 JavaScript 内置库的垫片，如 `array`、`json`、`math`、`promise`、`symbol` 等）、`regenerator-runtime`（实现了 `generator/yield`、`async/await`）以及一些语法转换的辅助函数（如 `es5` 与 `es6` 的继承转换等）。\n\n使用 `babel-runtime` 通常需要配合 `babel-plugin-transform-runtime` 插件一起使用。`babel-plugin-transform-runtime` 插件会进行一些处理，例如自动导入 `babel-runtime/core-js`，并将全局静态方法、全局内置对象映射到对应的模块；将内联的工具函数移除，改成通过 `babel-runtime/helpers` 模块进行导入；如果使用了 `async/generator` 函数，则自动导入 `babel-runtime/regenerator` 模块等。\n\n这样，在代码中如果需要使用特定的功能，只需从 `babel-runtime` 相应的模块中导入即可，而不是直接使用全局的对象或函数。\n\n例如，如果代码中使用了 `promise`，可以这样导入：\n\n```javascript\nimport promise from \"babel-runtime/core-js/promise\";\n```\n\n总的来说，`babel-runtime` 更像是一种按需加载的实现方式，适用于开发库、工具等场景，可避免对全局作用域的污染，同时减少重复代码。\n",{"_58":783,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/805/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/805/timeline",{"_58":786,"_60":61,"_62":787,"_64":788,"_66":789,"_68":790,"_70":791,"_72":792,"_74":793,"_76":794,"_78":795,"_111":796,"_131":132,"_133":24,"_134":799,"_136":800,"_158":151,"_152":802,"_154":803,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":804,"_170":805,"_176":806,"_178":807,"_190":809,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/804","https://api.github.com/repos/pro-collection/interview-question/issues/804/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/804/comments","https://api.github.com/repos/pro-collection/interview-question/issues/804/events","https://github.com/pro-collection/interview-question/issues/804",2407251166,"I_kwDOJGDC6c6Pe7ze",804,"[React] 生态有哪些【热度: 442】",{"_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},[797,798],{"_70":398,"_72":399,"_58":400,"_117":401,"_119":402,"_121":24,"_122":403},{"_70":252,"_72":253,"_58":254,"_117":255,"_119":129,"_121":24,"_122":130},[],{"_58":258,"_68":259,"_62":260,"_70":261,"_72":262,"_74":263,"_76":264,"_122":265,"_146":801,"_148":267,"_150":151,"_131":132,"_152":268,"_154":269,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-14T03:41:28Z","2024-07-14T03:41:29Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：React 生态\n\n> 直接抄作业即可，参考文档如下\n>\n> https://juejin.cn/post/7297908859175780364\n",{"_58":808,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/804/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/804/timeline",{"_58":811,"_60":61,"_62":812,"_64":813,"_66":814,"_68":815,"_70":816,"_72":817,"_74":818,"_76":819,"_78":820,"_111":821,"_131":132,"_133":24,"_134":823,"_136":824,"_158":151,"_152":826,"_154":826,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":827,"_170":828,"_176":829,"_178":830,"_190":832,"_192":-5,"_193":-5,"_194":-5,"_195":196},"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},[822],{"_70":315,"_72":316,"_58":317,"_117":318,"_119":319,"_121":24,"_122":320},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":825,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-14T03:35:01Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：预览 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":831,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"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":834,"_60":61,"_62":835,"_64":836,"_66":837,"_68":838,"_70":839,"_72":840,"_74":841,"_76":842,"_78":843,"_111":844,"_131":132,"_133":24,"_134":847,"_136":848,"_158":151,"_152":850,"_154":850,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":851,"_170":852,"_176":853,"_178":854,"_190":856,"_192":-5,"_193":-5,"_194":-5,"_195":196},"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},[845,846],{"_70":315,"_72":316,"_58":317,"_117":318,"_119":319,"_121":24,"_122":320},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":849,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-14T03:17:01Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：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":855,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"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":858,"_60":61,"_62":859,"_64":860,"_66":861,"_68":862,"_70":863,"_72":864,"_74":865,"_76":866,"_78":867,"_111":868,"_131":132,"_133":24,"_134":871,"_136":872,"_158":151,"_152":874,"_154":875,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":876,"_170":877,"_176":878,"_178":879,"_190":881,"_192":-5,"_193":-5,"_194":-5,"_195":196},"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},[869,870],{"_70":315,"_72":316,"_58":317,"_117":318,"_119":319,"_121":24,"_122":320},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":873,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-14T03:14:56Z","2024-07-14T03:14:57Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：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":880,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"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":883,"_60":61,"_62":884,"_64":885,"_66":886,"_68":887,"_70":888,"_72":889,"_74":890,"_76":891,"_78":892,"_111":893,"_131":132,"_133":24,"_134":895,"_136":896,"_158":151,"_152":898,"_154":898,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":899,"_170":900,"_176":901,"_178":902,"_190":904,"_192":-5,"_193":-5,"_194":-5,"_195":196},"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},[894],{"_70":315,"_72":316,"_58":317,"_117":318,"_119":319,"_121":24,"_122":320},[],{"_58":569,"_68":570,"_62":571,"_70":572,"_72":573,"_74":574,"_76":575,"_122":576,"_146":897,"_148":578,"_150":151,"_131":132,"_152":579,"_154":580,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-14T02:59:24Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：前端监控\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":903,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"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":906,"_60":61,"_62":907,"_64":908,"_66":909,"_68":910,"_70":911,"_72":912,"_74":913,"_76":914,"_78":915,"_111":916,"_131":132,"_133":24,"_134":918,"_136":919,"_158":151,"_152":921,"_154":922,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":923,"_170":924,"_176":925,"_178":926,"_190":928,"_192":-5,"_193":-5,"_194":-5,"_195":196},"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},[917],{"_70":315,"_72":316,"_58":317,"_117":318,"_119":319,"_121":24,"_122":320},[],{"_58":569,"_68":570,"_62":571,"_70":572,"_72":573,"_74":574,"_76":575,"_122":576,"_146":920,"_148":578,"_150":151,"_131":132,"_152":579,"_154":580,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-13T09:14:56Z","2024-07-13T09:14:57Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：处理线上用户反馈\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":927,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"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":930,"_60":61,"_62":931,"_64":932,"_66":933,"_68":934,"_70":935,"_72":936,"_74":937,"_76":938,"_78":939,"_111":940,"_131":132,"_133":24,"_134":942,"_136":943,"_158":151,"_152":945,"_154":945,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":946,"_170":947,"_176":948,"_178":949,"_190":951,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/798","https://api.github.com/repos/pro-collection/interview-question/issues/798/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/798/comments","https://api.github.com/repos/pro-collection/interview-question/issues/798/events","https://github.com/pro-collection/interview-question/issues/798",2406801827,"I_kwDOJGDC6c6PdOGj",798,"px 如何转为 rem【热度: 545】",{"_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},[941],{"_70":537,"_72":538,"_58":539,"_117":540,"_119":541,"_121":24,"_122":542},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":944,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-13T08:39:01Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：移动端适配\n\n`px`（像素）转换为 `rem`（根元素字体大小的相对单位）需要先确定一个基准的根元素字体大小。\n\n通常，我们将根元素（``）的字体大小设置为一个特定的值，比如 `16px`（这是常见的默认值，但您可以根据设计需求进行修改）。\n\n假设根元素的字体大小为 `16px`，那么转换公式为：`rem 值 = px 值 / 16` 。\n\n例如，如果有一个元素的宽度为 `100px`，转换为 `rem` 就是：`100 / 16 = 6.25rem` 。\n\n在实际开发中，可以使用预处理器（如 Sass、Less）或者 JavaScript 来实现自动转换。\n\n**追问：可有什么办法让 px 自动转为 rem，在开发中就直接使用 px**\n\n在前端开发中，要实现输入 `px` 但自动转换为 `rem` ，可以通过以下几种方式：\n\n1. 使用 CSS 预处理器（如 Sass、Less）\n\n- Sass：\n\n```scss\n@function pxToRem($pxValue) {\n @return $pxValue / 16 + rem;\n}\n\n.element {\n width: pxToRem(100);\n}\n```\n\n- Less：\n\n```less\n.pxToRem(@pxValue) {\n @remValue: @pxValue / 16;\n @return @remValue + rem;\n}\n\n.element {\n width: pxToRem(100);\n}\n```\n\n1. 使用构建工具（如 Webpack）的插件\n\n - 例如 `postcss-pxtorem` 插件，它可以在构建过程中自动将 `px` 转换为 `rem` 。您需要在配置中设置根元素的字体大小等相关参数。\n\n2. 自己编写脚本进行转换\n - 可以在开发过程中使用 JavaScript 脚本来处理样式表中的 `px` 值，并将其转换为 `rem` 。但这种方式相对复杂，并且可能会影响开发效率。\n",{"_58":950,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/798/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/798/timeline",{"_58":953,"_60":61,"_62":954,"_64":955,"_66":956,"_68":957,"_70":958,"_72":959,"_74":960,"_76":961,"_78":962,"_111":963,"_131":132,"_133":24,"_134":966,"_136":967,"_158":151,"_152":969,"_154":970,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":971,"_170":972,"_176":973,"_178":974,"_190":976,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/797","https://api.github.com/repos/pro-collection/interview-question/issues/797/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/797/comments","https://api.github.com/repos/pro-collection/interview-question/issues/797/events","https://github.com/pro-collection/interview-question/issues/797",2406658420,"I_kwDOJGDC6c6PcrF0",797,"浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制【热度: 579】",{"_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},[964,965],{"_70":245,"_72":246,"_58":247,"_117":248,"_119":249,"_121":24,"_122":250},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":258,"_68":259,"_62":260,"_70":261,"_72":262,"_74":263,"_76":264,"_122":265,"_146":968,"_148":267,"_150":151,"_131":132,"_152":268,"_154":269,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-13T03:19:04Z","2024-07-13T03:19:05Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：同源策略、跨域限制\n\n### 同源策略是啥\n\n浏览器的同源策略（Same-origin policy）是一种重要的安全机制，用于限制不同源的文档或脚本之间的交互操作。\n\n“源”（origin）由三部分组成：协议（protocol）、域名（domain）和端口（port）。如果两个 URL 的协议、域名和端口都完全相同，那么它们就是同源的；否则，就是不同源的。\n\n同源策略的主要作用和规则如下：\n\n1. **阻止文档或脚本读取来自不同源的文档内容**\n\n - 比如，在 `https://example.com/page1.html` 页面中的 JavaScript 脚本，不能读取 `https://anotherdomain.com/page2.html` 的文档内容。\n\n2. **限制不同源的脚本之间的交互**\n\n - 不同源的脚本不能相互调用方法、访问对象属性或修改对方的 DOM（文档对象模型）。\n\n3. **限制跨源的网络请求**\n - 例如，使用 `XMLHttpRequest` 或 `Fetch API` 发起的网络请求，如果目标地址与当前页面的源不同，会受到同源策略的限制。不过，一些跨源请求可以通过 CORS（跨源资源共享，Cross-Origin Resource Sharing）机制来实现合法的跨源访问。\n\n同源策略的目的是防止恶意网站窃取用户在其他网站上的敏感信息或进行未经授权的操作，保护用户数据的安全性和隐私性。\n\n举个例子，如果没有同源策略，恶意网站 `malicious-site.com` 可能会在其页面中嵌入脚本，尝试读取用户正在访问的银行网站 `bank-site.com` 的页面内容，获取用户的账户信息、交易记录等敏感数据，这将给用户带来极大的安全风险。\n\n### 浏览器有同源策略，但是为何 cdn 请求资源的时候不跨域\n\n一些 CDN 资源不受同源策略限制，是因为同源策略主要是浏览器的一种安全机制，用于限制不同源的文档或脚本之间的交互操作，但对于某些特定类型的资源访问，浏览器会有一些例外情况。\n**在 HTML 中，``加载来自 CDN 的 Vue.js 库。\n\n这样做的主要原因是为了保证 Web 的开放性和可扩展性。如果这些资源也严格受到同源策略的限制，那么将所有相关资源都部署在同一个服务器下会违背 Web 开放的初衷，并且不利于资源的分发和缓存。\n然而，虽然浏览器允许这些资源的跨域加载，但在加载 JavaScript 时，会限制对返回内容的读写权限，以防止恶意脚本获取或修改其他域的信息。\n另外，CDN 服务提供商通常也会采取一些措施来确保资源的安全性和合法性。他们会对资源进行管理和配置，只允许合法的请求访问资源，并防止恶意使用或滥用 CDN 资源。\n需要注意的是，同源策略仍然是非常重要的安全机制，它能有效防止恶意网站窃取用户在其他网站上的敏感信息或进行未经授权的操作。在涉及到敏感数据的交互或需要更严格安全控制的情况下，仍然需要遵循同源策略或采用适当的跨域解决方案，如 CORS（跨域资源共享）等。CORS 通过在服务器端设置响应头，明确允许哪些源可以访问资源，从而在保证安全的前提下实现跨域数据交互。\n\n### img src 指向的任何资源都是可以跨域访问吗\n\n一般情况下，`` 元素的 `src` 属性指向的资源是可以进行跨域访问的。\n\n当您在网页中使用 `` 标签加载图片资源时，浏览器会向指定的 URL 发送请求获取图片数据，并将其显示在页面上，即使该资源的源与当前页面的源不同。\n\n然而，也存在一些特殊情况和限制：\n\n1. 如果图片资源所在的服务器设置了严格的访问控制策略（例如通过服务器端的配置限制某些来源的访问），那么可能会导致您的请求被拒绝。\n\n2. 对于一些受版权保护或有特殊访问权限要求的图片资源，如果您没有相应的授权或访问权限，即使浏览器本身允许跨域访问，您也无法获取和显示这些图片。\n\n总的来说，在大多数常规情况下，`` 元素的 `src` 属性指向的图片资源能够实现跨域访问，但需要考虑服务器端的配置和资源本身的权限要求等因素。\n",{"_58":975,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/797/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/797/timeline",{"_58":978,"_60":61,"_62":979,"_64":980,"_66":981,"_68":982,"_70":983,"_72":984,"_74":985,"_76":986,"_78":987,"_111":988,"_131":132,"_133":24,"_134":991,"_136":992,"_158":151,"_152":994,"_154":995,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":996,"_170":997,"_176":998,"_178":999,"_190":1001,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/796","https://api.github.com/repos/pro-collection/interview-question/issues/796/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/796/comments","https://api.github.com/repos/pro-collection/interview-question/issues/796/events","https://github.com/pro-collection/interview-question/issues/796",2405632503,"I_kwDOJGDC6c6PYwn3",796,"cookie 可以实现不同域共享吗【热度: 533】",{"_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},[989,990],{"_70":245,"_72":246,"_58":247,"_117":248,"_119":249,"_121":24,"_122":250},{"_70":405,"_72":406,"_58":407,"_117":408,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":993,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-07-12T13:34:16Z","2025-02-09T15:10:07Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：cookie 共享\n\n通常，Cookie不能直接在不同域间共享，这源于浏览器同源策略，该策略由协议、域名和端口号共同界定“源”，只有三者完全相同才属同源，Cookie才能在其间共享。但在特定条件和技术手段下，可实现不同域间一定程度的Cookie共享，同时，Cookie也能设置为在同主域下的子域间共享，具体如下：\n\n### 不同域共享Cookie\n- **跨域资源共享（CORS）**：在服务端设置`Access-Control-Allow-Origin`等CORS头信息，允许特定跨域请求。但主要用于解决跨域资源请求，对Cookie共享支持有限，一般仅能共享简单、非敏感的Cookie信息，且需客户端与服务端配合。\n- **设置P3P头**：P3P用于网站向用户传达隐私策略，通过在响应头设置相关信息，理论上可让浏览器允许跨域设置Cookie。不过，该方法存在兼容性问题，在现代浏览器中支持程度不一，且有安全风险。\n- **JSONP**：利用`