子组件

;\n }\n}\n\nclass Super extends Component {\n constructor(props) {\n super(props);\n this.sub = React.createRef();\n }\n handleOnClick() {\n this.sub.callback();\n }\n render() {\n return (\n

\n \n

\n );\n }\n}\n\n\n```\n\n#### ref的函数式声明\n\n* 优点：ref写法简洁\n* 缺点：使用了HOC的子组件不可用，无法指向真是子组件（同上）\n\n使用方法和上述的一样，就是定义ref的方式不同。\n\n```csharp\n...\n\n_{this.sub = ref}>}\n\n...\n\n\n```\n\n#### 使用props自定义onRef属性\n\n* 优点：假如子组件是嵌套了HOC，也可以指向真实子组件。\n* 缺点：需要自定义props属性\n\n```typescript\nimport React, { Component } from 'react';\nimport { observer } from 'mobx-react'\n\n@observer\nclass Sub extends Component {\n\tcomponentDidMount(){\n // 将子组件指向父组件的变量\n\t\tthis.props.onRef && this.props.onRef(this);\n\t}\n\tcallback(){\n\t\tconsole.log(\"执行我\")\n\t}\n\trender(){\n\t\treturn (

子组件

);\n\t}\n}\n\nclass Super extends Component {\n\thandleOnClick(){\n // 可以调用子组件方法\n\t\tthis.Sub.callback();\n\t}\n\trender(){\n\t\treturn (\n

\n\t\t\t

click

\n\t\t\t_{this.Sub = node }>}\n\t \t

)\n\t}\n}\n\n\n```\n\n### 函数组件、Hook组件\n\n#### useImperativeHandle\n\n* 优点： 1、写法简单易懂 2、假如子组件嵌套了HOC，也可以指向真实子组件\n* 缺点： 1、需要自定义props属性 2、需要自定义暴露的方法\n\n```javascript\nimport React, { useImperativeHandle } from 'react';\nimport { observer } from 'mobx-react'\n\n\nconst Parent = () => {\n let ChildRef = React.createRef();\n\n function handleOnClick() {\n ChildRef.current.func();\n }\n\n return (\n

\n \n \n

\n );\n};\n\nconst Child = observer(props => {\n //用useImperativeHandle暴露一些外部ref能访问的属性\n useImperativeHandle(props.onRef, () => {\n // 需要将暴露的接口返回出去\n return {\n func: func,\n };\n });\n function func() {\n console.log('执行我');\n }\n return

子组件

;\n});\n\nexport default Parent;\n\n```\n\n#### forwardRef\n\n使用forwardRef抛出子组件的ref\n\n这个方法其实更适合自定义HOC。但问题是，withRouter、connect、Form.create等方法并不能抛出ref，假如Child本身就需要嵌套这些方法，那基本就不能混着用了。forwardRef本身也是用来抛出子元素，如input等原生元素的ref的，并不适合做组件ref抛出，因为组件的使用场景太复杂了。\n\n```javascript\nimport React, { useRef, useImperativeHandle } from 'react';\nimport ReactDOM from 'react-dom';\nimport { observer } from 'mobx-react'\n\nconst FancyInput = React.forwardRef((props, ref) => {\n const inputRef = useRef();\n useImperativeHandle(ref, () => ({\n focus: () => {\n inputRef.current.focus();\n }\n }));\n\n return \n});\n\nconst Sub = observer(FancyInput)\n\nconst App = props => {\n const fancyInputRef = useRef();\n\n return (\n

\n \n fancyInputRef.current.focus()}\n >父组件调用子组件的 focus\n

\n )\n}\n\nexport default App;\n\n\n```\n\n### 总结\n\n父组件调子组件函数有两种情况\n\n* 子组件无HOC嵌套：推荐使用ref直接调用\n* 有HOC嵌套：推荐使用自定义props的方式\n",{"_58":236,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/286/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/286/timeline",{"_58":239,"_60":61,"_62":240,"_64":241,"_66":242,"_68":243,"_70":244,"_72":245,"_74":246,"_76":247,"_78":248,"_111":249,"_131":132,"_133":24,"_134":-5,"_135":256,"_137":257,"_159":152,"_153":259,"_155":260,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":261,"_170":262,"_176":263,"_178":264,"_190":266,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/285","https://api.github.com/repos/pro-collection/interview-question/issues/285/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/285/comments","https://api.github.com/repos/pro-collection/interview-question/issues/285/events","https://github.com/pro-collection/interview-question/issues/285",1666757233,"I_kwDOJGDC6c5jWLJx",285,"[React] Hooks 实现原理是什么, 简单描述一下",{"_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},[250,251],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":252,"_72":253,"_58":254,"_117":255,"_119":129,"_121":24,"_122":130},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":258,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-13T16:38:09Z","2023-08-20T08:02:17Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"在探索 useEffect 原理的时候，一直被一个问题困扰：useEffect 作用和用途是什么？当然，用于函数的副作用这句话谁都会讲。举个例子吧：\n\n```typescript jsx\nfunction App() {\n const [num, setNum] = useState(0);\n\n useEffect(() => {\n // 模拟异步请求后端数据\n setTimeout(() => {\n setNum(num + 1);\n }, 1000);\n }, []);\n\n return

{!num ? \"请求后端数据...\" : `后端数据是 ${num}`}

;\n}\n```\n\n这段代码，虽然这样组织可读性更高，毕竟可以将这个请求理解为函数的副作用。**但这并不是必要的**。完全可以不使用`useEffect`，直接使用`setTimeout`，并且它的回调函数中更新函数组件的 state。\n\n在 useEffect 的第二个参数中，我们可以指定一个数组，如果下次渲染时，数组中的元素没变，那么就不会触发这个副作用（可以类比 Class 类的关于 nextprops 和 prevProps 的生命周期）。好处显然易见，**相比于直接裸写在函数组件顶层，useEffect 能根据需要，避免多余的 render**。\n\n下面是一个不包括销毁副作用功能的 useEffect 的 TypeScript 实现：\n\n```ini\n// 还是利用 Array + Cursor的思路\nconst allDeps: any[][] = [];\nlet effectCursor: number = 0;\n\nfunction useEffect(callback: () => void, deps: any[]) {\n if (!allDeps[effectCursor]) {\n // 初次渲染：赋值 + 调用回调函数\n allDeps[effectCursor] = deps;\n ++effectCursor;\n callback();\n return;\n }\n\n const currenEffectCursor = effectCursor;\n const rawDeps = allDeps[currenEffectCursor];\n // 检测依赖项是否发生变化，发生变化需要重新render\n const isChanged = rawDeps.some(\n (dep: any, index: number) => dep !== deps[index]\n );\n if (isChanged) {\n callback();\n allDeps[effectCursor] = deps; // 感谢 juejin@carlzzz 的指正\n }\n ++effectCursor;\n}\n\nfunction render() {\n ReactDOM.render(, document.getElementById(\"root\"));\n effectCursor = 0; // 注意将 effectCursor 重置为0\n}\n\n```\n\n对于 useEffect 的实现，配合下面案例的使用会更容易理解。当然，你也可以在这个 useEffect 中发起异步请求，并在接受数据后，调用 state 的更新函数，不会发生爆栈的情况。\n\n```typescript jsx\nfunction App() {\n const [num, setNum] = useState < number > 0;\n const [num2] = useState < number > 1;\n\n // 多次触发\n // 每次点击按钮，都会触发 setNum 函数\n // 副作用检测到 num 变化，会自动调用回调函数\n useEffect(() => {\n console.log(\"num update: \", num);\n }, [num]);\n\n // 仅第一次触发\n // 只会在compoentDidMount时，触发一次\n // 副作用函数不会多次执行\n useEffect(() => {\n console.log(\"num2 update: \", num2);\n }, [num2]);\n\n return (\n

num: {num}

\n \n \n

\n );\n}\n\n```\n\nuseEffect 第一个回调函数可以返回一个用于销毁副作用的函数，相当于 Class 组件的 unmount 生命周期。这里为了方便说明，没有进行实现。\n\n参考文档：\n- https://juejin.cn/post/6844903975838285838\n",{"_58":265,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/285/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/285/timeline",{"_58":268,"_60":61,"_62":269,"_64":270,"_66":271,"_68":272,"_70":273,"_72":274,"_74":275,"_76":276,"_78":277,"_111":278,"_131":132,"_133":24,"_134":-5,"_135":280,"_137":281,"_159":195,"_153":294,"_155":295,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":296,"_170":297,"_176":298,"_178":299,"_190":301,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/284","https://api.github.com/repos/pro-collection/interview-question/issues/284/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/284/comments","https://api.github.com/repos/pro-collection/interview-question/issues/284/events","https://github.com/pro-collection/interview-question/issues/284",1664723460,"I_kwDOJGDC6c5jOaoE",284,"[webpack] 核心库 - tapable 的设计思路与实现原理是什么？",{"_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},[279],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":282,"_68":283,"_62":284,"_70":285,"_72":286,"_74":287,"_76":288,"_122":289,"_147":290,"_149":291,"_151":152,"_131":132,"_153":292,"_155":293,"_157":-5,"_158":-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-04-12T14:51:55Z","2023-04-12T14:56:38Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### Webpack Tapable 的设计思路 \n\nWebpack Tapable 的设计思路主要基于观察者模式（Observer Pattern）和发布-订阅模式（Publish-Subscribe Pattern），用于解耦各个插件之间的依赖关系，让插件能够独立作用于特定的钩子（Hook），从而实现可扩展性和灵活性。\n\n具体来说，Tapable 采用了钩子（Hook）的概念，每个钩子对应一组事件，Webpack 在不同的时刻触发这些钩子，插件可以注册自己的事件处理函数到对应的钩子上，以实现各种功能。\n\n为了避免插件之间的耦合，Tapable 将事件处理函数按照钩子类型分为同步钩子（Sync Hook）、异步钩子（Async Hook）、单向异步钩子（Async Parallel Hook）和多向异步钩子（Async Series Hook）四种类型。这样，不同类型的钩子对应着不同的事件处理顺序和调用方式，插件在注册自己的事件处理函数时，可以选择不同的钩子类型来适应不同的应用场景。\n\n除此之外，Tapable 还提供了一些辅助方法和工具函数，用于方便地创建和管理钩子、向钩子注册事件处理函数、调用钩子的事件处理函数等。这些工具函数的设计思路也遵循了解耦、简单易用的原则，为插件开发提供了很大的便利性。\n\n### Tapable 的使用\n\nWebpack Tapable 的使用分为三个步骤：\n\n1. 定义一个新的 Tapable 实例：在 Webpack 插件中定义一个新的 Tapable 实例，并定义需要监听的事件。\n\n```javascript\nconst { SyncHook } = require('tapable');\n\nclass MyPlugin {\n constructor() {\n this.hooks = {\n beforeRun: new SyncHook(['compiler']),\n done: new SyncHook(['stats'])\n };\n }\n\n apply(compiler) {\n this.hooks.beforeRun.tap('MyPlugin', compiler => {\n console.log('Webpack is starting to run...');\n });\n\n this.hooks.done.tap('MyPlugin', stats => {\n console.log('Webpack has finished running.');\n });\n }\n}\n```\n\n2. 触发事件：在 Webpack 的编译过程中，调用 Tapable 实例的触发方法，触发事件。\n\n```javascript\ncompiler.hooks.beforeRun.call(compiler);\n// Webpack is starting to run...\n\ncompiler.run((err, stats) => {\n if (err) {\n console.error(err);\n return;\n }\n\n console.log(stats);\n compiler.hooks.done.call(stats);\n // Webpack has finished running.\n});\n```\n\n3. 注册插件：在 Webpack 的配置文件中，将插件实例注册到 Webpack 中。\n\n```javascript\nconst MyPlugin = require('./my-plugin');\n\nmodule.exports = {\n plugins: [new MyPlugin()]\n};\n```\n\n以上是使用 Tapable 的基本流程，通过 Tapable 可以监听到编译过程中的各个事件，并对编译过程进行修改，从而实现各种插件。以下是一些常见的 Tapable 类型和用法：\n\n* SyncHook：同步 Hook，按照注册的顺序同步执行所有回调函数。\n\n```javascript\nconst { SyncHook } = require('tapable');\n\nconst hook = new SyncHook(['arg1', 'arg2']);\n\nhook.tap('MyPlugin', (arg1, arg2) => {\n console.log(`Hook is triggered with arguments: ${arg1}, ${arg2}`);\n});\n\nhook.tap('MyPlugin', (arg1, arg2) => {\n console.log('Second callback is called');\n});\n\nhook.call('Hello', 'world');\n// Hook is triggered with arguments: Hello, world\n// Second callback is called\n```\n\n* AsyncParallelHook：异步 Hook，按照注册的顺序异步执行所有回调函数，不关心回调函数的返回值。\n\n```javascript\nconst { AsyncParallelHook } = require('tapable');\n\nconst hook = new AsyncParallelHook(['arg1', 'arg2']);\n\nhook.tap('MyPlugin', (arg1, arg2, callback) => {\n setTimeout(() => {\n console.log(`Hook is triggered with arguments: ${arg1}, ${arg2}`);\n callback();\n }, 1000);\n});\n\nhook.tap('MyPlugin', (arg1, arg2, callback) => {\n setTimeout(() => {\n console.log('Second callback is called');\n callback();\n }, 500)\n})\n```\n\n\n### Tapable 是如何实现的？代码简单实现一下？\n\nWebpack Tapable 是基于发布-订阅模式的一个插件系统，它提供了一组钩子函数，让插件可以在相应的时机执行自己的逻辑。\n\n下面是一个简单的自定义 Tapable 的实现：\n\n```javascript\nclass Tapable {\n constructor() {\n this.hooks = {};\n }\n\n // 注册事件监听函数\n tap(name, callback) {\n if (!this.hooks[name]) {\n this.hooks[name] = [];\n }\n this.hooks[name].push(callback);\n }\n\n // 触发事件\n call(name, ...args) {\n const callbacks = this.hooks[name];\n if (callbacks && callbacks.length) {\n callbacks.forEach((callback) => callback(...args));\n }\n }\n}\n```\n\n在这个例子中，我们定义了一个 `Tapable` 类，它有一个 `hooks` 对象属性，用于存储各个事件对应的监听函数。然后我们定义了 `tap` 方法，用于注册事件监听函数，以及 `call` 方法，用于触发事件。\n\n下面是一个使用自定义 Tapable 的例子：\n\n```javascript\nconst tapable = new Tapable();\n\ntapable.tap('event1', (arg1, arg2) => {\n console.log('event1 is triggered with arguments:', arg1, arg2);\n});\n\ntapable.tap('event2', (arg1, arg2) => {\n console.log('event2 is triggered with arguments:', arg1, arg2);\n});\n\ntapable.call('event1', 'hello', 'world');\ntapable.call('event2', 'foo', 'bar');\n```\n\n在这个例子中，我们定义了两个事件 `event1` 和 `event2`，并为它们注册了监听函数。当我们调用 `call` 方法触发事件时，注册的监听函数就会依次执行。\n\n这个自定义 Tapable 的实现虽然简单，但它体现了 Tapable 的设计思路和核心功能。在实际使用中，Webpack 的 Tapable 提供了更多的功能和钩子，可以满足不同场景的需求。\n",{"_58":300,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/284/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/284/timeline",{"_58":303,"_60":61,"_62":304,"_64":305,"_66":306,"_68":307,"_70":308,"_72":309,"_74":310,"_76":311,"_78":312,"_111":313,"_131":132,"_133":24,"_134":-5,"_135":315,"_137":316,"_159":195,"_153":318,"_155":319,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":320,"_170":321,"_176":322,"_178":323,"_190":325,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/283","https://api.github.com/repos/pro-collection/interview-question/issues/283/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/283/comments","https://api.github.com/repos/pro-collection/interview-question/issues/283/events","https://github.com/pro-collection/interview-question/issues/283",1664677383,"I_kwDOJGDC6c5jOPYH",283,"[webpack] 构建流程是怎么样的？",{"_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},[314],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":317,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-12T14:25:39Z","2023-05-31T14:45:00Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"`webpack` 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来\n\n在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条`webpack`机制中，去改变`webpack`的运作，使得整个系统扩展性良好\n\n从启动到结束会依次执行以下三大步骤：\n\n* 初始化流程：从配置文件和 `Shell` 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数\n* 编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理\n* 输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统\n\n\n### 初始化流程\n\n从配置文件和 `Shell` 语句中读取与合并参数，得出最终的参数\n\n配置文件默认下为`webpack.config.js`，也或者通过命令的形式指定配置文件，主要作用是用于激活`webpack`的加载项和插件\n\n`webpack` 将 `webpack.config.js` 中的各个配置项拷贝到 `options` 对象中，并加载用户配置的 `plugins` \n完成上述步骤之后，则开始初始化`Compiler`编译对象，该对象掌控者`webpack`声明周期，不执行具体的任务，只是进行一些调度工作\n\n```js\nclass Compiler extends Tapable {\n constructor(context) {\n super();\n this.hooks = {\n beforeCompile: new AsyncSeriesHook([\"params\"]),\n compile: new SyncHook([\"params\"]),\n afterCompile: new AsyncSeriesHook([\"compilation\"]),\n make: new AsyncParallelHook([\"compilation\"]),\n entryOption: new SyncBailHook([\"context\", \"entry\"])\n // 定义了很多不同类型的钩子\n };\n // ...\n }\n}\n\nfunction webpack(options) {\n var compiler = new Compiler();\n ...// 检查options,若watch字段为true,则开启watch线程\n return compiler;\n}\n...\n\n```\n\n`Compiler` 对象继承自 `Tapable`，初始化时定义了很多钩子函数\n\n### 编译构建流程\n\n根据配置中的 `entry` 找出所有的入口文件\n\n```js\nmodule.exports = {\n entry: './src/file.js'\n}\n\n```\n\n初始化完成后会调用`Compiler`的`run`来真正启动`webpack`编译构建流程，主要流程如下：\n\n* `compile` 开始编译\n* `make` 从入口点分析模块及其依赖的模块，创建这些模块对象\n* `build-module` 构建模块\n* `seal` 封装构建结果\n* `emit` 把各个chunk输出到结果文件\n\n#### compile 编译\n\n执行了`run`方法后，首先会触发`compile`，主要是构建一个`Compilation`对象\n\n该对象是编译阶段的主要执行者，主要会依次下述流程：执行模块创建、依赖收集、分块、打包等主要任务的对象\n\n#### make 编译模块\n\n当完成了上述的`compilation`对象后，就开始从`Entry`入口文件开始读取，主要执行`_addModuleChain()`函数，如下：\n\n```js\n_addModuleChain(context, dependency, onModule, callback) {\n ...\n // 根据依赖查找对应的工厂函数\n const Dep = /** @type {DepConstructor} */ (dependency.constructor);\n const moduleFactory = this.dependencyFactories.get(Dep);\n\n // 调用工厂函数NormalModuleFactory的create来生成一个空的NormalModule对象\n moduleFactory.create({\n dependencies: [dependency]\n ...\n }, (err, module) => {\n ...\n const afterBuild = () => {\n this.processModuleDependencies(module, err => {\n if (err) return callback(err);\n callback(null, module);\n });\n };\n\n this.buildModule(module, false, null, null, err => {\n ...\n afterBuild();\n })\n })\n}\n\n```\n\n过程如下：\n\n`_addModuleChain`中接收参数`dependency`传入的入口依赖，使用对应的工厂函数`NormalModuleFactory.create`方法生成一个空的`module`对象\n\n回调中会把此`module`存入`compilation.modules`对象和`dependencies.module`对象中，由于是入口文件，也会存入`compilation.entries`中\n\n随后执行`buildModule`进入真正的构建模块`module`内容的过程\n\n#### build module 完成模块编译\n\n这里主要调用配置的`loaders`，将我们的模块转成标准的`JS`模块\n\n在用`Loader` 对一个模块转换完后，使用 `acorn` 解析转换后的内容，输出对应的抽象语法树（`AST`），以方便 `Webpack`后面对代码的分析\n\n从配置的入口模块开始，分析其 `AST`，当遇到`require`等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清所有模块的依赖关系\n\n### 输出流程\n\n#### seal 输出资源\n\n`seal`方法主要是要生成`chunks`，对`chunks`进行一系列的优化操作，并生成要输出的代码\n\n`webpack` 中的 `chunk` ，可以理解为配置在 `entry` 中的模块，或者是动态引入的模块\n\n根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 `Chunk`，再把每个 `Chunk` 转换成一个单独的文件加入到输出列表\n\n#### emit 输出完成\n\n在确定好输出内容后，根据配置确定输出的路径和文件名\n\n```js\noutput: {\n path: path.resolve(__dirname, 'build'),\n filename: '[name].js'\n}\n\n```\n\n在 `Compiler` 开始生成文件前，钩子 `emit` 会被执行，这是我们修改最终文件的最后一个机会\n\n从而`webpack`整个打包过程则结束了\n\n### 小结\n\n![](https://foruda.gitee.com/images/1681308948652266689/0b4f6e27_7819612.png)\n",{"_58":324,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/283/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/283/timeline",{"_58":327,"_60":61,"_62":328,"_64":329,"_66":330,"_68":331,"_70":332,"_72":333,"_74":334,"_76":335,"_78":336,"_111":337,"_131":132,"_133":24,"_134":-5,"_135":344,"_137":345,"_159":152,"_153":347,"_155":348,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":349,"_170":350,"_176":351,"_178":352,"_190":354,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/279","https://api.github.com/repos/pro-collection/interview-question/issues/279/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/279/comments","https://api.github.com/repos/pro-collection/interview-question/issues/279/events","https://github.com/pro-collection/interview-question/issues/279",1664633718,"I_kwDOJGDC6c5jOEt2",279,"[代码实现] 简单实现一个洋葱模式中间件",{"_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},[338],{"_70":339,"_72":340,"_58":341,"_117":342,"_119":120,"_121":24,"_122":343},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","代码实现或者算法实现",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":346,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-12T14:02:02Z","2023-09-06T15:52:33Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"洋葱模型是一种常用的中间件模型，例如在 Koa 框架中就广泛应用了这种模型。这种模型的特点是请求被传递到下一个中间件之前，需要先经过当前中间件处理，然后再逐层返回。\n\n下面是一个简单的洋葱模型的示例代码：\n\n```javascript\nfunction middleware1(next) {\n return function(ctx) {\n console.log('middleware1 before');\n next(ctx);\n console.log('middleware1 after');\n }\n}\n\nfunction middleware2(next) {\n return function(ctx) {\n console.log('middleware2 before');\n next(ctx);\n console.log('middleware2 after');\n }\n}\n\nfunction middleware3(next) {\n return function(ctx) {\n console.log('middleware3 before');\n next(ctx);\n console.log('middleware3 after');\n }\n}\n\nfunction compose(middlewares) {\n return function(ctx) {\n function dispatch(i) {\n if (i === middlewares.length) {\n return;\n }\n const middleware = middlewares[i];\n const next = dispatch.bind(null, i + 1);\n middleware(next)(ctx);\n }\n dispatch(0);\n }\n}\n\nconst middlewares = [middleware1, middleware2, middleware3];\nconst composed = compose(middlewares);\ncomposed({});\n```\n\n这个示例中有三个中间件函数 `middleware1`、`middleware2` 和 `middleware3`，它们都是接受一个 `next` 函数作为参数的高阶函数。当这个中间件被执行时，它将接受一个 `ctx` 对象作为参数，并且调用 `next(ctx)` 将请求传递给下一个中间件。\n\n`compose` 函数接受一个中间件函数数组作为参数，返回一个新的函数，这个函数可以将请求传递给第一个中间件函数。每个中间件函数都将接收一个 `next` 函数作为参数，并返回一个新的函数，这个新的函数将接收 `ctx` 对象作为参数，并且在调用 `next(ctx)` 之前和之后都会执行一些操作。当 `next(ctx)` 被调用时，请求将被传递到下一个中间件函数。\n\n在 `composed` 函数中，我们将一个空的 `ctx` 对象作为参数传递给第一个中间件函数。`dispatch` 函数递归地调用中间件数组中的每一个中间件函数，并将 `ctx` 对象和下一个中间件函数作为参数传递。当最后一个中间件函数完成处理时，递归调用结束，请求处理完成。\n",{"_58":353,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/279/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/279/timeline",{"_58":356,"_60":61,"_62":357,"_64":358,"_66":359,"_68":360,"_70":361,"_72":362,"_74":363,"_76":364,"_78":365,"_111":366,"_131":132,"_133":24,"_134":-5,"_135":375,"_137":376,"_159":152,"_153":378,"_155":379,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":380,"_170":381,"_176":382,"_178":383,"_190":385,"_192":-5,"_193":-5,"_194":195},"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},[367,374],{"_70":368,"_72":369,"_58":370,"_117":371,"_119":372,"_121":24,"_122":373},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",{"_70":252,"_72":253,"_58":254,"_117":255,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":377,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-11T15:43:37Z","2023-04-11T15:43:38Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 大文件分片上传\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":384,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/278/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/278/timeline",{"_58":387,"_60":61,"_62":388,"_64":389,"_66":390,"_68":391,"_70":392,"_72":393,"_74":394,"_76":395,"_78":396,"_111":397,"_131":132,"_133":24,"_134":-5,"_135":400,"_137":401,"_159":152,"_153":403,"_155":404,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":405,"_170":406,"_176":407,"_178":408,"_190":410,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/277","https://api.github.com/repos/pro-collection/interview-question/issues/277/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/277/comments","https://api.github.com/repos/pro-collection/interview-question/issues/277/events","https://github.com/pro-collection/interview-question/issues/277",1662739503,"I_kwDOJGDC6c5jG2Qv",277,"[Vue] watch 和 computed 的区别和理解",{"_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},[398,399],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":402,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-11T15:23:05Z","2023-04-11T15:23:06Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**计算属性computed :**\n\n1. 支持缓存，只有依赖数据发生改变，才会重新进行计算，计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。computed是计算属性的; 它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。computed的值在getter执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用getter来计算最新的结果。\n\n2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化\n\n3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值\n\n4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed\n\n5. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。\n\n6. 适用于一些重复使用数据或复杂及费时的运算。我们可以把它放入computed中进行计算, 然后会在computed中缓存起来, 下次就可以直接获取了。\n\n7. 如果我们需要的数据依赖于其他的数据的话, 我们可以把该数据设计为computed中。\n\n8. computed 是基于响应性依赖来进行缓存的。只有在响应式依赖发生改变时它们才会重新求值, 也就是说, 当msg属性值没有发生改变时, 多次访问 reversedMsg 计算属性会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数。但是methods方法中是每次调用, 都会执行函数的, methods它不是响应式的。\n\n9. computed中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set变成可读写属性, 但是methods中的成员没有这样的。\n\n\n**侦听属性watch：**\n\n1.watch它是一个对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。在回调中会传入newVal和oldVal两个参数。Vue实列将会在实例化时调用$watch(), 他会遍历watch对象的每一个属性。watch的使用场景是：当在data中的某个数据发生变化时, 我们需要做一些操作, 或者当需要在数据变化时执行异步或开销较大的操作时. 我们就可以使用watch来进行监听。watch普通监听和深度监听不支持缓存，数据变，直接会触发相应的操作；\n\n2.watch里面有一个属性为deep，含义是：是否深度监听某个对象的值, 该值默认为false。watch支持异步；\n\n3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；\n\n4.当一个属性发生变化时，需要执行对应的操作；一对多；\n\n5.监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，\n\n**watch 和 computed的区别是：**\n\n相同点：他们两者都是观察页面数据变化的。\n\n不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。 watch每次都需要执行函数。watch更适用于数据变化时的异步操作。\n\n当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别，请勿滥用。\n",{"_58":409,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/277/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/277/timeline",{"_58":412,"_60":61,"_62":413,"_64":414,"_66":415,"_68":416,"_70":417,"_72":418,"_74":419,"_76":420,"_78":421,"_111":422,"_131":132,"_133":24,"_134":-5,"_135":431,"_137":432,"_159":152,"_153":434,"_155":435,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":436,"_170":437,"_176":438,"_178":439,"_190":441,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/276","https://api.github.com/repos/pro-collection/interview-question/issues/276/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/276/comments","https://api.github.com/repos/pro-collection/interview-question/issues/276/events","https://github.com/pro-collection/interview-question/issues/276",1662664081,"I_kwDOJGDC6c5jGj2R",276,"const 和 readonly 的区别",{"_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},[423,430],{"_70":424,"_72":425,"_58":426,"_117":427,"_119":428,"_121":24,"_122":429},5232527330,"LA_kwDOJGDC6c8AAAABN-IH4g","https://api.github.com/repos/pro-collection/interview-question/labels/TypeScript","TypeScript","258B51","TypeScript 语法部分",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":433,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-11T14:48:36Z","2023-04-11T14:48:37Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"TypeScript 中不可变量的实现方法有两种：\n\n使用 ES6 的 const 关键字声明的值类型\n被 readonly 修饰的属性\n2、TypeScript 中 readonly：\n\nTypeScript 中的只读修饰符，可以声明更加严谨的可读属性。通常在 interface 、 Class 、 type 以及 array 和 tuple 类型中使用它，也可以用来定义一个函数的参数。\n\n3、两者区别：\n\n（1）const 用于变量， readonly 用于属性\n\n（2）const 在运行时检查， readonly 在编译时检查\n\n（3）const 声明的变量不得改变值，这意味着，const 一旦声明变量，就必须立即初始化，不能留到以后赋值； \nreadonly 修饰的属性能确保自身不能修改属性，但是当你把这个属性交给其它并没有这种保证的使用者（允许出于类型兼容性的原因），他们能改变。\n```typescript\nconst foo: {\n readonly bar: number;\n} = {\n bar: 123\n};\nfunction iMutateFoo(foo: { bar: number }) {\n foo.bar = 456;\n}\niMutateFoo(foo);\nconsole.log(foo.bar); // 456\n```\n\n（4）const 保证的不是变量的值不得改动，而是变量指向的那个内存地址不得改动，例如使用 const 变量保存的数组，可以使用 push ， pop 等方法。\n但是如果使用 ReadonlyArray 声明的数组不能使用 push ， pop 等方法。\n\n\n",{"_58":440,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/276/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/276/timeline",{"_58":443,"_60":61,"_62":444,"_64":445,"_66":446,"_68":447,"_70":448,"_72":449,"_74":450,"_76":451,"_78":452,"_111":453,"_131":132,"_133":24,"_134":-5,"_135":456,"_137":457,"_159":152,"_153":459,"_155":460,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":461,"_170":462,"_176":463,"_178":464,"_190":466,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/275","https://api.github.com/repos/pro-collection/interview-question/issues/275/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/275/comments","https://api.github.com/repos/pro-collection/interview-question/issues/275/events","https://github.com/pro-collection/interview-question/issues/275",1662655424,"I_kwDOJGDC6c5jGhvA",275,"枚举和常量枚举的区别",{"_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,455],{"_70":424,"_72":425,"_58":426,"_117":427,"_119":428,"_121":24,"_122":429},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":458,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-11T14:44:32Z","2023-04-11T14:44:33Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"枚举和常量枚举（const枚举）：使用枚举可以清晰地表达意图或创建一组有区别的用例\n\n```typescript\n// 枚举\nenum Color { Red, Green, Blue }\n\n// 常量枚举\nconst enum Color { Red, Green, Blue }\n```\n\n区别：\n\n1. 枚举会被编译时会编译成一个对象，可以被当作对象使用\n\n```typescript\n// 枚举\nenum Color {\n Red,\n Green,\n Blue\n}\n\nvar sisterAn = Color.Red\n// 会被编译成 JavaScript 中的 var sisterAn = Color.Red\n// 即在运行执行时，它将会查找变量 Color 和 Color.Red\n```\n\n2. const 枚举会在 typescript 编译期间被删除，const 枚举成员在使用的地方会被内联进来，避免额外的性能开销\n\n```typescript\n// 常量枚举\nconst enum Color {\n Red,\n Green,\n Blue\n}\n\nvar sisterAn = Color.Red\n// 会被编译成 JavaScript 中的 var sisterAn = 0\n// 在运行时已经没有 Color 变量\n```\n\n由此可见，使用常量枚举会有更好的性能。\n\n定义的枚举，在经过编译器编译后是一个对象，这个对象我们可以在程序运行时使用，前面有说到。但有时定义枚举可能只是为了让程序可读性更好，而不需要编译后的代码，即不需要编译成对象。typescript中考虑到这种情况，所以加入了 const enum (完全嵌入的枚举)。\n\n\n",{"_58":465,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/275/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/275/timeline",{"_58":468,"_60":61,"_62":469,"_64":470,"_66":471,"_68":472,"_70":473,"_72":474,"_74":475,"_76":476,"_78":477,"_111":478,"_131":132,"_133":24,"_134":-5,"_135":486,"_137":487,"_159":152,"_153":489,"_155":490,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":491,"_170":492,"_176":493,"_178":494,"_190":496,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/274","https://api.github.com/repos/pro-collection/interview-question/issues/274/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/274/comments","https://api.github.com/repos/pro-collection/interview-question/issues/274/events","https://github.com/pro-collection/interview-question/issues/274",1662617618,"I_kwDOJGDC6c5jGYgS",274,"实现一个类似关键字new功能的函数",{"_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},[479],{"_70":480,"_72":481,"_58":482,"_117":483,"_119":484,"_121":24,"_122":485},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":488,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-11T14:27:45Z","2023-04-11T14:27:46Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"在js中new关键字主要做了：首先创建一个空对象，这个对象会作为执行new构造函数之后返回的对象实例，将创建的空对象原型`（__proto__）`指向构造函数的prototype属性，同时将这个空对象赋值给构造函数内部的this，并执行构造函数逻辑，根据构造函数的执行逻辑，返回初始创建的对象或构造函数的显式返回值。\n\n```js\nfunction newFn(...args) {\n const constructor = args.shift();\n const obj = Object.create(constructor.prototype);\n const result = constructor.apply(obj, args);\n return typeof result === \"object\" && result !== null ? result : obj;\n}\n\nfunction Person(name) {\n this.name = name;\n}\n\nconst p = newFn(Person, \"Jerome\");\n\nconsole.log(\"p.name :>> \", p.name); // p.name :>> Jerome\n```\n",{"_58":495,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/274/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/274/timeline",{"_58":498,"_60":61,"_62":499,"_64":500,"_66":501,"_68":502,"_70":503,"_72":504,"_74":505,"_76":506,"_78":507,"_111":508,"_131":132,"_133":24,"_134":-5,"_135":511,"_137":512,"_159":195,"_153":514,"_155":515,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":516,"_170":517,"_176":518,"_178":519,"_190":521,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/273","https://api.github.com/repos/pro-collection/interview-question/issues/273/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/273/comments","https://api.github.com/repos/pro-collection/interview-question/issues/273/events","https://github.com/pro-collection/interview-question/issues/273",1659781732,"I_kwDOJGDC6c5i7kJk",273,"ts 中 type 和 interface的区别",{"_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},[509,510],{"_70":424,"_72":425,"_58":426,"_117":427,"_119":428,"_121":24,"_122":429},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":513,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T07:29:21Z","2023-08-06T07:44:59Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 相同点\n\n1. 都可以描述一个对象或者函数\n\n- interface\n\n```typescript\ninterface User {\n name: string\n age: number\n}\n\ninterface SetUser {\n (name: string, age: number): void;\n}\n```\n\n- ts\n\n```typescript\ntype User = {\n name: string\n age: number\n};\n\ntype SetUser = (name: string, age: number) => void;\n```\n\n2. 都允许拓展（extends） interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。\n\n### 差异点\n\n- **type**\n - type 可以声明基本类型别名，联合类型，元组等类型\n - type 语句中还可以使用 typeof 获取实例的类型进行赋值\n - 其他骚操作\n\n```typescript\ntype StringOrNumber = string | number;\ntype Text = string | { text: string };\ntype NameLookup = Dictionary;\ntype Callback = (data: T) => void;\ntype Pair = [T, T];\ntype Coordinates = Pair;\ntype Tree = T | { left: Tree, right: Tree };\n```\n\n- **interface**\n - interface 能够声明合并\n```typescript\ninterface User {\n name: string\n age: number\n}\n\ninterface User {\n sex: string\n}\n\n/*\nUser 接口为 {\n name: string\n age: number\n sex: string \n}\n*/\n```\n\n一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type 。\n\n",{"_58":520,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/273/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/273/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,"_131":132,"_133":24,"_134":-5,"_135":536,"_137":537,"_159":152,"_153":539,"_155":540,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":541,"_170":542,"_176":543,"_178":544,"_190":546,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/272","https://api.github.com/repos/pro-collection/interview-question/issues/272/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/272/comments","https://api.github.com/repos/pro-collection/interview-question/issues/272/events","https://github.com/pro-collection/interview-question/issues/272",1659780547,"I_kwDOJGDC6c5i7j3D",272,"[Vue] vue3 的响应式库是独立出来的，它单独使用的时候是什么效果",{"_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":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":282,"_68":283,"_62":284,"_70":285,"_72":286,"_74":287,"_76":288,"_122":289,"_147":538,"_149":291,"_151":152,"_131":132,"_153":292,"_155":293,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T07:23:25Z","2023-04-09T07:23:26Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"vue3 的响应式库是独立出来的，它可以很方便的集成进 React，作为 React 的状态管理库使用！\n\n### 使用示范\n定义 store\n```typescript\n// store.ts\nimport { reactive, computed, effect } from '@vue/reactivity';\n\nexport const state = reactive({\n count: 0,\n});\n\nconst plusOne = computed(() => state.count + 1);\n\neffect(() => {\n console.log('plusOne changed: ', plusOne);\n});\n\nconst add = () => (state.count += 1);\n\nexport const mutations = {\n // mutation\n add,\n};\n\nexport const store = {\n state,\n computed: {\n plusOne,\n },\n};\n\nexport type Store = typeof store;\n```\n\n消费使用\n```js\n// Index.tsx\nimport { Provider, useStore } from 'rxv'\nimport { mutations, store, Store } from './store.ts'\nfunction Count() {\n const countState = useStore((store: Store) => {\n const { state, computed } = store;\n const { count } = state;\n const { plusOne } = computed;\n\n return {\n count,\n plusOne,\n };\n });\n\n return (\n \n

计数器

store中的count现在是 {countState.count}

computed值中的plusOne现在是 {countState.plusOne.value}

\n \n

\n \n );\n}\n\nexport default () => {\n return (\n \n \n \n );\n};\n```\n\n可以看出，store的定义只用到了@vue/reactivity，而rxv只是在组件中做了一层桥接，连通了Vue3和React，正如它名字的含义：React x Vue。\n\n### 如何实现\n只要effect能接入到React系统中，那么其他的api都没什么问题，因为它们只是去收集effect的依赖，去通知effect触发更新。\n\neffect接受的是一个函数，而且effect还支持通过传入schedule参数来自定义依赖更新的时候需要触发什么函数，\n\n而rxv的核心api: useStore接受的也是一个函数selector，它会让用户自己选择在组件中需要访问的数据。\n\n把selector包装在effect中执行，去收集依赖。\n\n指定依赖发生更新时，需要调用的函数是当前正在使用useStore的这个组件的forceUpdate强制渲染函数。\n\n简单的看一下核心实现\n\nshare.ts\n```typescript\nexport const useForceUpdate = () => {\n const [, forceUpdate] = useReducer(s => s + 1, 0);\n return forceUpdate;\n};\n\nexport const useEffection = (...effectArgs: Parameters) => {\n // 用一个ref存储effection\n // effect函数只需要初始化执行一遍\n const effectionRef = useRef();\n if (!effectionRef.current) {\n effectionRef.current = effect(...effectArgs);\n }\n\n // 卸载组件后取消effect\n const stopEffect = () => {\n stop(effectionRef.current!);\n };\n useEffect(() => stopEffect, []);\n\n return effectionRef.current\n};\n```\n\n核心逻辑在此\n```typescript\nimport React, { useContext } from 'react';\nimport { useForceUpdate, useEffection } from './share';\n\ntype Selector = (store: T) => S;\n\nconst StoreContext = React.createContext(null);\n\nconst useStoreContext = () => {\n const contextValue = useContext(StoreContext);\n if (!contextValue) {\n throw new Error(\n 'could not find store context value; please ensure the component is wrapped in a ',\n );\n }\n return contextValue;\n};\n\n/**\n * 在组件中读取全局状态\n * 需要通过传入的函数收集依赖\n */\nexport const useStore = (selector: Selector): S => {\n const forceUpdate = useForceUpdate();\n const store = useStoreContext();\n\n const effection = useEffection(() => selector(store), {\n scheduler: job => {\n if (job() === undefined) return;\n forceUpdate();\n },\n lazy: true,\n });\n\n const value = effection();\n return value;\n};\n\nexport const Provider = StoreContext.Provider;\n```\n\n参考文档：\n- https://github.com/sl1673495/react-composition-api\n- https://juejin.cn/post/6844904054192078855\n",{"_58":545,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/272/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/272/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,"_131":132,"_133":24,"_134":-5,"_135":561,"_137":562,"_159":152,"_153":564,"_155":565,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":566,"_170":567,"_176":568,"_178":569,"_190":571,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/271","https://api.github.com/repos/pro-collection/interview-question/issues/271/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/271/comments","https://api.github.com/repos/pro-collection/interview-question/issues/271/events","https://github.com/pro-collection/interview-question/issues/271",1659775681,"I_kwDOJGDC6c5i7irB",271,"[Vue] Vue3 的响应式原理?",{"_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":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":563,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T07:02:57Z","2023-04-09T07:02:58Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 该话题涉及的相关内容\n\n- 原理：Proxy、track、trigger\n- 新增属性\n- 遍历后新增\n- 遍历后删除或者清空\n- 获取 keys\n- 删除对象属性\n- 判断属性是否存在\n- 性能\n\n推荐阅读文档： https://juejin.cn/post/6844904122479542285\n\n### 响应式仓库\n\nVue3 不同于 Vue2 也体现在源码结构上，Vue3 把耦合性比较低的包分散在 `packages` 目录下单独发布成 `npm` 包。这也是目前很流行的一种大型项目管理方式 `Monorepo`。\n\n其中负责响应式部分的仓库就是 `@vue/reactivity`，它不涉及 Vue 的其他的任何部分，是非常非常「正交」的一种实现方式。\n\n甚至可以`轻松的集成进 React` https://juejin.cn/post/6844904095594381325\n\n### 区别\n\nProxy 和 Object.defineProperty 的使用方法看似很相似，其实 Proxy 是在「更高维度」上去拦截属性的修改的，怎么理解呢？\n\nVue2 中，对于给定的 data，如 `{ count: 1 }`，是需要根据具体的 key 也就是 `count`，去对「修改 data.count 」和「读取 data.count」进行拦截，也就是\n\n```javascript\nObject.defineProperty(data, 'count', {\n get() {},\n set() {},\n})\n```\n\n必须预先知道要拦截的 key 是什么，这也就是为什么 Vue2 里对于对象上的新增属性无能为力。\n\n而 Vue3 所使用的 Proxy，则是这样拦截的：\n\n```javascript\nnew Proxy(data, {\n get(key) { },\n set(key, value) { },\n})\n\n```\n\n可以看到，根本不需要关心具体的 key，它去拦截的是「修改 data 上的任意 key」和「读取 data 上的任意 key」。\n\n所以，不管是已有的 key 还是新增的 key，都逃不过它的魔爪。\n\n但是 Proxy 更加强大的地方还在于 Proxy 除了 get 和 set，还可以拦截更多的操作符。\n\n### 简单的例子🌰\n\n先写一个 Vue3 响应式的最小案例，本文的相关案例都只会用 `reactive` 和 `effect` 这两个 api。如果你了解过 React 中的 `useEffect`，相信你会对这个概念秒懂，Vue3 的 `effect` 不过就是去掉了手动声明依赖的「进化版」的 `useEffect`。\n\nReact 中手动声明 `[data.count]` 这个依赖的步骤被 Vue3 内部直接做掉了，在 `effect` 函数内部读取到 `data.count` 的时候，它就已经被收集作为依赖了。\n\nVue3：\n\n```kotlin\n// 响应式数据\nconst data = reactive({\n count: 1\n})\n\n// 观测变化\neffect(() => console.log('count changed', data.count))\n\n// 触发 console.log('count changed', data.count) 重新执行\ndata.count = 2\n\n```\n\nReact：\n\n```scss\n// 数据\nconst [data, setData] = useState({\n count: 1\n})\n\n// 观测变化需要手动声明依赖\nuseEffect(() => {\n console.log('count changed', data.count)\n}, [data.count])\n\n// 触发 console.log('count changed', data.count) 重新执行\nsetData({\n count: 2\n})\n\n```\n\n也可以把 `effect` 中的回调函数联想到视图的重新渲染、 watch 的回调函数等等…… 它们是同样基于这套响应式机制的。\n\n而本文的核心目的，就是探究这个基于 Proxy 的 reactive api，到底能强大到什么程度，能监听到用户对于什么程度的修改。\n\n### 讲讲原理\n\n先最小化的讲解一下响应式的原理，其实就是在 Proxy 第二个参数 `handler` 也就是陷阱操作符中，拦截各种取值、赋值操作，依托 `track` 和 `trigger` 两个函数进行依赖收集和派发更新。\n\n`track` 用来在读取时收集依赖。\n\n`trigger` 用来在更新时触发依赖。\n\n### track\n\n```vbnet\nfunction track(target: object, type: TrackOpTypes, key: unknown) {\n const depsMap = targetMap.get(target);\n // 收集依赖时通过 key 建立一个 set\n let dep = new Set()\n targetMap.set(ITERATE_KEY, dep)\n // 这个 effect 可以先理解为更新函数存放在 dep 里\n dep.add(effect)\n}\n\n```\n\n`target` 是原对象。\n\n`type` 是本次收集的类型，也就是收集依赖的时候用来标识是什么类型的操作，比如上文依赖中的类型就是 `get`，这个后续会详细讲解。\n\n`key` 是指本次访问的是数据中的哪个 key，比如上文例子中收集依赖的 key 就是 `count`\n\n首先全局会存在一个 `targetMap`，它用来建立 `数据 -> 依赖` 的映射，它是一个 WeakMap 数据结构。\n\n而 `targetMap` 通过数据 `target`，可以获取到 `depsMap`，它用来存放这个数据对应的所有响应式依赖。\n\n`depsMap` 的每一项则是一个 Set 数据结构，而这个 Set 就存放着对应 key 的更新函数。\n\n是不是有点绕？我们用一个具体的例子来举例吧。\n\n```ini\nconst target = { count: 1}\nconst data = reactive(target)\n\nconst effection = effect(() => {\n console.log(data.count)\n})\n\n```\n\n对于这个例子的依赖关系，\n\n1. 全局的 `targetMap` 是：\n\n```js\ntargetMap: {\n { count: 1 }: dep\n}\n\n```\n\n2. dep 则是\n\n```js\ndep: {\n count: Set { effection }\n}\n\n```\n\n这样一层层的下去，就可以通过 `target` 找到 `count` 对应的更新函数 `effection` 了。\n\n### trigger\n\n这里是最小化的实现，仅仅为了便于理解原理，实际上要复杂很多，\n\n其实 `type` 的作用很关键，先记住，后面会详细讲。\n\n```typescript\nexport function trigger(\n target: object,\n type: TriggerOpTypes,\n key?: unknown,\n) {\n // 简化来说就是通过 key 找到所有更新函数依次执行\n const dep = targetMap.get(target)\n dep.get(key).forEach(effect => effect())\n}\n```\n",{"_58":570,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/271/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/271/timeline",{"_58":573,"_60":61,"_62":574,"_64":575,"_66":576,"_68":577,"_70":578,"_72":579,"_74":580,"_76":581,"_78":582,"_111":583,"_131":132,"_133":24,"_134":-5,"_135":586,"_137":587,"_159":152,"_153":589,"_155":590,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":591,"_170":592,"_176":593,"_178":594,"_190":596,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/270","https://api.github.com/repos/pro-collection/interview-question/issues/270/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/270/comments","https://api.github.com/repos/pro-collection/interview-question/issues/270/events","https://github.com/pro-collection/interview-question/issues/270",1659768390,"I_kwDOJGDC6c5i7g5G",270,"小程序的大概原理?",{"_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},[584,585],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":282,"_68":283,"_62":284,"_70":285,"_72":286,"_74":287,"_76":288,"_122":289,"_147":588,"_149":291,"_151":152,"_131":132,"_153":292,"_155":293,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T06:30:09Z","2023-04-09T06:30:10Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"具体流程可以看下面这个图：\n![](https://foruda.gitee.com/images/1681021603016376642/cc6178f0_7819612.png)\n\n要了解小程序架构原理，要从以下几个方面入手探索\n- 宿主环境\n- 执行环境\n- 小程序整体架构\n- 运行机制\n- 更新机制\n- 数据通信机制\n- 登录机制\n- 性能方向问题\n- JSCore\n\n具体内容可以参考文档:\n- https://juejin.cn/post/6976805521407868958\n",{"_58":595,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/270/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/270/timeline",{"_58":598,"_60":61,"_62":599,"_64":600,"_66":601,"_68":602,"_70":603,"_72":604,"_74":605,"_76":606,"_78":607,"_111":608,"_131":132,"_133":24,"_134":-5,"_135":611,"_137":612,"_159":152,"_153":614,"_155":615,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":616,"_170":617,"_176":618,"_178":619,"_190":621,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/269","https://api.github.com/repos/pro-collection/interview-question/issues/269/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/269/comments","https://api.github.com/repos/pro-collection/interview-question/issues/269/events","https://github.com/pro-collection/interview-question/issues/269",1659765940,"I_kwDOJGDC6c5i7gS0",269,"前端路由的实现原理",{"_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},[609,610],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":613,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T06:18:33Z","2023-04-09T06:18:34Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"在使用Vue、React等前端框架时，我们都会发现项目中只有一个HTML文件，并且在该HTML中都存在一个根标签，起到了类似于容器的作用。容器内部的内容就由我们后续编写的每个视图决定，页面的切换就是容器中视图的切换。\n\n前端路由的实现原理简单来说，就是在不跳转或者刷新页面的前提下，为SPA应用中的每个视图匹配一个特殊的URL，之后的刷新、前进、后退等操作均通过这个特殊的URL实现。为实现上述要求，需要满足：\n\n改变URL且不会向服务器发起请求；\n\n可以监听到URL的变化，并渲染与之匹配的视图。\n\n主要有Hash路由和History路由两种实现方式。下文对两者的基本原理进行简单介绍，并分别实现了一个简易的路由Demo。\n\n### Hash路由\n原理就是通过键值对的形式保存路由及对应要执行的回调函数，当监听到页面hash发生改变时，根据最新的hash值调用注册好的回调函数，即改变页面。\n\n#### 创建路由\n```js\nclass Routers{\n constructor(){\n // 保存路由信息\n this.routes = {};\n this.currentUrl = '';\n window.addEventListener('load', this.refresh, false);\n window.addEventListener('hashchange', this.refresh, false);\n }\n\n // 用于注册路由的函数\n route = (path, callback) => {\n this.routes[path] = callback || function(){};\n }\n\n // 监听事件的回调，负责当页面hash改变时执行对应hash值的回调函数\n refresh = () => {\n this.currentUrl = location.hash.slice(1) || '/';\n this.routes[this.currentUrl]();\n }\n}\n\nwindow.Router = new Routers();\n```\n\n#### 注册路由\n使用route方法添加对应的路由及其回调函数即可。以下代码实现了一个根据不同hash改变页面颜色的路由，模拟了页面的切换，在实际的SPA应用中，对应的就是页面内容的变化了。\n\n```js\nvar content = document.querySelector('body');\n\nfunction changeBgColor(color){\n content.style.background = color;\n}\n\n// 添加路由\nRouter.route('/', () => {\n changeBgColor('yellow');\n});\nRouter.route('/red', () => {\n changeBgColor('red');\n});\nRouter.route('/green', () => {\n changeBgColor('green');\n});\nRouter.route('/blue', () => {\n changeBgColor('blue');\n});\n```\n\n\n### History路由\n在H5之前，浏览器的history仅支持页面之前的跳转，包括前进和后退等功能。\n\n在HTML5中，新增以下API：\n```js\nhistory.pushState();\t\t\t// 添加新状态到历史状态栈\nhistory.replaceState();\t\t// 用新状态代替当前状态\nhistory.state;\t\t\t\t\t\t// 获取当前状态对象\n```\n\nhistory.pushState()和history.replaceState()均接收三个参数：\n\n- state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。\n- title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。\n- url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址\n\n由于history.pushState()和 history.replaceState()都具有在改变页面URL的同时，不刷新页面的能力，因此也可以用来实现前端路由。\n\n#### 创建路由类\n```js\nclass Routers{\n constructor(){\n this.routes = {};\n window.addEventListener('popstate', e => {\n const path = e.state && e.state.path;\n this.routes[path] && this.routes[path]();\n })\n }\n\n init(path){\n history.replaceState({path: path}, null, path);\n this.routes[path] && this.routes[path]();\n }\n\n route(path, callback){\n this.routes[path] = callback || function(){};\n }\n\n go(path){\n history.pushState({path: path}, null, path);\n this.routes[path] && this.routes[path]();\n }\n}\n\nwindow.Router = new Routers();\n```\n\n\n#### 注册路由\n```js\nfunction changeBgColor(color){\n content.style.background = color;\n}\n\nRouter.route(location.pathname, () => {\n changeBgColor('yellow');\n});\nRouter.route('/red', () => {\n changeBgColor('red');\n});\nRouter.route('/green', () => {\n changeBgColor('green');\n});\nRouter.route('/blue', () => {\n changeBgColor('blue');\n});\n\nconst content = document.querySelector('body');\nRouter.init(location.pathname);\n```\n\n\n#### 触发事件\n在使用hash实现的路由中，我们通过hashchange事件来监听hash的变化，但是上述代码中history的改变本身不会触发任何事件，因此无法直接监听history的改变来改变页面。因此，对于不同的情况，我们选择不同的解决方案：\n\n- 点击浏览器的前进或者后退按钮：监听popstate事件，获取相应路径并执行回调函数\n- 点击a标签：阻止其默认行为，获取其href属性，手动调用history.pushState()，并执行相应回调。\n\n```js\nconst ul = document.querySelector('ul');\n\nul.addEventListener('click', e => {\n if(e.target.tagName === 'A'){\n e.preventDefault();\n Router.go(e.target.getAttribute('href'));\n }\n})\n```\n\n### 对比\n基于hash的路由：\n\n缺点：\n- 看起来比较丑\n- 会导致锚点功能失效\n\n优点： \n- 兼容性更好\n- 无需服务器配合\n",{"_58":620,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/269/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/269/timeline",{"_58":623,"_60":61,"_62":624,"_64":625,"_66":626,"_68":627,"_70":628,"_72":629,"_74":630,"_76":631,"_78":632,"_111":633,"_131":132,"_133":24,"_134":-5,"_135":635,"_137":636,"_159":152,"_153":638,"_155":639,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":640,"_170":641,"_176":642,"_178":643,"_190":645,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/268","https://api.github.com/repos/pro-collection/interview-question/issues/268/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/268/comments","https://api.github.com/repos/pro-collection/interview-question/issues/268/events","https://github.com/pro-collection/interview-question/issues/268",1659757296,"I_kwDOJGDC6c5i7eLw",268,"[Vue] 在 v-for 时给每项元素绑定事件需要用事件代理吗？为什么？",{"_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},[634],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":637,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T05:37:04Z","2023-04-09T05:42:21Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### Vue 并没有在源码中做代理\r\n\r\nvue 并没有在源码中做代理，至少是 2.x 是没有做事件代理的。但是理论上来说使用事件代理性能会更好一点。\r\n\r\n阅读 vue 源码的过程中，并没有发现 vue 会自动做事件代理，但是一般给 v-for 绑定事件时，都会让节点指向同一个事件处理程序（第二种情况可以运行，但是 eslint 会警告），一定程度上比每生成一个节点都绑定一个不同的事件处理程序性能好，但是监听器的数量仍不会变，所以使用事件代理会更好一点。\r\n\r\nreact 是委托到 document 上, 然后自己生成了合成事件, 冒泡到 document 的时候进入合成事件, 然后他通过 getParent() 获取该事件源的所有合成事件, 触发完毕之后继续冒泡。但是一些特殊的比如focus这种必须放在input这些dom上。\r\n\r\n### 为何事件代理会让性能好一些 \r\n\r\n说一下我个人理解，先说结论，可以使用\r\n\r\n事件代理作用主要是 2 个\r\n\r\n1. 将事件处理程序代理到父节点，减少内存占用率\r\n2. 动态生成子节点时能自动绑定事件处理程序到父节点\r\n\r\n这里我生成了十万个 span 节点，通过 performance monitor 来监控内存占用率和事件监听器的数量，对比以下 3 种情况\r\n\r\n1. 不使用事件代理，每个 span 节点绑定一个 click 事件，并指向同一个事件处理程序\r\n```html\r\n

\r\n \r\n {{item}}\r\n \r\n

\r\n```\r\n\r\n2. 不使用事件代理，每个 span 节点绑定一个 click 事件，并指向不同的事件处理程序\r\n```html\r\n

\r\n \r\n {{item}}\r\n \r\n

\r\n```\r\n\r\n3. 使用事件代理\r\n```html\r\n

\r\n \r\n {{item}}\r\n \r\n

\r\n```\r\n\r\n可以通过 chrome devtools performance monitor 查看内存使用情况 \r\n\r\n可以看到使用事件代理无论是监听器数量和内存占用率都比前两者要少 \r\n\r\n### 为什么 Vue 不适用事件委托\r\n\r\n首先我们需要知道事件代理主要有什么作用？\r\n\r\n1. 事件代理能够避免我们逐个的去给元素新增和删除事件\r\n2. 事件代理比每一个元素都绑定一个事件性能要更好\r\n\r\n从vue的角度上来看上面两点\r\n\r\n- 在v-for中，我们直接用一个for循环就能在模板中将每个元素都绑定上事件，并且当组件销毁时，vue也会自动给我们将所有的事件处理器都移除掉。所以事件代理能做到的第一点vue已经给我们做到了 \r\n- 在v-for中，给元素绑定的都是相同的事件，所以除非上千行的元素需要加上事件，其实和使用事件代理的性能差别不大，所以也没必要用事件代理 \r\n\r\n",{"_58":644,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/268/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/268/timeline",{"_58":647,"_60":61,"_62":648,"_64":649,"_66":650,"_68":651,"_70":652,"_72":653,"_74":654,"_76":655,"_78":656,"_111":657,"_131":132,"_133":24,"_134":-5,"_135":659,"_137":660,"_159":223,"_153":662,"_155":663,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":664,"_170":665,"_176":666,"_178":667,"_190":669,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/267","https://api.github.com/repos/pro-collection/interview-question/issues/267/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/267/comments","https://api.github.com/repos/pro-collection/interview-question/issues/267/events","https://github.com/pro-collection/interview-question/issues/267",1659746104,"I_kwDOJGDC6c5i7bc4",267,"[Webpack] webpack热更新原理是什么？",{"_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},[658],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":282,"_68":283,"_62":284,"_70":285,"_72":286,"_74":287,"_76":288,"_122":289,"_147":661,"_149":291,"_151":152,"_131":132,"_153":292,"_155":293,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T04:38:38Z","2024-05-26T06:11:01Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"> `Hot Module Replacement`，简称`HMR`，无需完全刷新整个页面的同时，更新模块。`HMR`的好处，在日常开发工作中体会颇深：**节省宝贵的开发时间、提升开发体验**。\r\n\r\n刷新我们一般分为两种：\r\n\r\n* 一种是页面刷新，不保留页面状态，就是简单粗暴，直接`window.location.reload()`。\r\n* 另一种是基于`WDS (Webpack-dev-server)`的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。\r\n\r\n`HMR`作为一个`Webpack`内置的功能，可以通过`HotModuleReplacementPlugin`或`--hot`开启。那么，`HMR`到底是怎么实现热更新的呢？下面让我们来了解一下吧！\r\n\r\n\r\n### 1. webpack-dev-server启动本地服务\r\n\r\n我们根据`webpack-dev-server`的`package.json`中的`bin`命令，可以找到命令的入口文件`bin/webpack-dev-server.js`。\r\n\r\n```pgsql\r\n// node_modules/webpack-dev-server/bin/webpack-dev-server.js\r\n\r\n// 生成webpack编译主引擎 compiler\r\nlet compiler = webpack(config);\r\n\r\n// 启动本地服务\r\nlet server = new Server(compiler, options, log);\r\nserver.listen(options.port, options.host, (err) => {\r\n if (err) {throw err};\r\n});\r\n```\r\n\r\n本地服务代码：\r\n\r\n```javascript\r\n// node_modules/webpack-dev-server/lib/Server.js\r\nclass Server {\r\n constructor() {\r\n this.setupApp();\r\n this.createServer();\r\n }\r\n\r\n setupApp() {\r\n // 依赖了express\r\n \tthis.app = new express();\r\n }\r\n\r\n createServer() {\r\n this.listeningApp = http.createServer(this.app);\r\n }\r\n listen(port, hostname, fn) {\r\n return this.listeningApp.listen(port, hostname, (err) => {\r\n // 启动express服务后，启动websocket服务\r\n this.createSocketServer();\r\n }\r\n }\r\n}\r\n```\r\n\r\n这一小节代码主要做了三件事：\r\n\r\n* 启动`webpack`，生成`compiler`实例。`compiler`上有很多方法，比如可以启动 `webpack` 所有**编译**工作，以及**监听**本地文件的变化。\r\n* 使用`express`框架启动本地`server`，让浏览器可以请求本地的**静态资源**。\r\n* 本地`server`启动之后，再去启动`websocket`服务，如果不了解`websocket`，建议简单了解一下[websocket速成](https://link.juejin.cn?target=https%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2017%2F05%2Fwebsocket.html \"https://www.ruanyifeng.com/blog/2017/05/websocket.html\")。通过`websocket`，可以建立本地服务和浏览器的双向通信。这样就可以实现当本地文件发生变化，立马告知浏览器可以热更新代码啦！\r\n\r\n上述代码主要干了三件事，但是源码在启动服务前又做了很多事，接下来便看看`webpack-dev-server/lib/Server.js`还做了哪些事？\r\n\r\n### 2. 修改webpack.config.js的entry配置\r\n\r\n启动本地服务前，调用了`updateCompiler(this.compiler)`方法。这个方法中有 2 段关键性代码。一个是获取`websocket`客户端代码路径，另一个是根据配置获取`webpack`热更新代码路径。\r\n\r\n```javascript\r\n// 获取websocket客户端代码\r\nconst clientEntry = `${require.resolve(\r\n '../../client/'\r\n)}?${domain}${sockHost}${sockPath}${sockPort}`;\r\n\r\n// 根据配置获取热更新代码\r\nlet hotEntry;\r\nif (options.hotOnly) {\r\n hotEntry = require.resolve('webpack/hot/only-dev-server');\r\n} else if (options.hot) {\r\n hotEntry = require.resolve('webpack/hot/dev-server');\r\n}\r\n```\r\n\r\n修改后的`webpack`入口配置如下：\r\n\r\n```awk\r\n// 修改后的entry入口\r\n{ entry:\r\n { index:\r\n [\r\n // 上面获取的clientEntry\r\n 'xxx/node_modules/webpack-dev-server/client/index.js?http://localhost:8080',\r\n // 上面获取的hotEntry\r\n 'xxx/node_modules/webpack/hot/dev-server.js',\r\n // 开发配置的入口\r\n './src/index.js'\r\n \t],\r\n },\r\n} \r\n```\r\n\r\n为什么要新增了 2 个文件？在入口默默增加了 2 个文件，那就意味会一同打包到`bundle`文件中去，也就是线上运行时。\r\n\r\n**（1）webpack-dev-server/client/index.js**\r\n\r\n首先这个文件用于`websocket`的，因为`websoket`是双向通信，如果不了解`websocket`，建议简单了解一下[websocket速成](https://link.juejin.cn?target=https%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2017%2F05%2Fwebsocket.html \"https://www.ruanyifeng.com/blog/2017/05/websocket.html\")。我们在第 1 步 `webpack-dev-server`初始化的过程中，启动的是本地服务端的`websocket`。那客户端也就是我们的浏览器，浏览器还没有和服务端通信的代码呢？总不能让开发者去写吧hhhhhh。因此我们需要把`websocket`客户端通信代码偷偷塞到我们的代码中。客户端具体的代码后面会在合适的时机细讲哦。\r\n\r\n**（2）webpack/hot/dev-server.js**\r\n\r\n这个文件主要是用于检查更新逻辑的，这里大家知道就好，代码后面会在合适的时机（**第5步**）细讲。\r\n\r\n### 3. 监听webpack编译结束\r\n\r\n修改好入口配置后，又调用了`setupHooks`方法。这个方法是用来注册监听事件的，监听每次`webpack`编译完成。\r\n\r\n```javascript\r\n// node_modules/webpack-dev-server/lib/Server.js\r\n// 绑定监听事件\r\nsetupHooks() {\r\n const {done} = compiler.hooks;\r\n // 监听webpack的done钩子，tapable提供的监听方法\r\n done.tap('webpack-dev-server', (stats) => {\r\n this._sendStats(this.sockets, this.getStats(stats));\r\n this._stats = stats;\r\n });\r\n};\r\n```\r\n\r\n当监听到一次`webpack`编译结束，就会调用`_sendStats`方法通过`websocket`给浏览器发送通知，`ok`和`hash`事件，这样浏览器就可以拿到最新的`hash`值了，做检查更新逻辑。\r\n\r\n```reasonml\r\n// 通过websoket给客户端发消息\r\n_sendStats() {\r\n this.sockWrite(sockets, 'hash', stats.hash);\r\n this.sockWrite(sockets, 'ok');\r\n}\r\n```\r\n\r\n### 4. webpack监听文件变化\r\n\r\n每次修改代码，就会触发编译。说明我们还需要监听本地代码的变化，主要是通过`setupDevMiddleware`方法实现的。\r\n\r\n这个方法主要执行了`webpack-dev-middleware`库。很多人分不清`webpack-dev-middleware`和`webpack-dev-server`的区别。其实就是因为`webpack-dev-server`只负责启动服务和前置准备工作，所有文件相关的操作都抽离到`webpack-dev-middleware`库了，主要是本地文件的**编译**和**输出**以及**监听**，无非就是职责的划分更清晰了。\r\n\r\n那我们来看下`webpack-dev-middleware`源码里做了什么事:\r\n\r\n```awk\r\n// node_modules/webpack-dev-middleware/index.js\r\ncompiler.watch(options.watchOptions, (err) => {\r\n if (err) { /*错误处理*/ }\r\n});\r\n\r\n// 通过“memory-fs”库将打包后的文件写入内存\r\nsetFs(context, compiler); \r\n```\r\n\r\n（1）调用了`compiler.watch`方法，在第 1 步中也提到过，`compiler`的强大。这个方法主要就做了 2 件事：\r\n\r\n* 首先对本地文件代码进行编译打包，也就是`webpack`的一系列编译流程。\r\n* 其次编译结束后，开启对本地文件的监听，当文件发生变化，重新编译，编译完成之后继续监听。\r\n\r\n为什么代码的改动保存会自动编译，重新打包？这一系列的重新检测编译就归功于`compiler.watch`这个方法了。监听本地文件的变化主要是通过**文件的生成时间**是否有变化，这里就不细讲了。\r\n\r\n（2）执行`setFs`方法，这个方法主要目的就是将编译后的文件打包到内存。这就是为什么在开发的过程中，你会发现`dist`目录没有打包后的代码，因为都在内存中。原因就在于访问内存中的代码比访问文件系统中的文件更快，而且也减少了代码写入文件的开销，这一切都归功于`memory-fs`。\r\n\r\n### 5. 浏览器接收到热更新的通知\r\n\r\n我们已经可以监听到文件的变化了，当文件发生变化，就触发重新编译。同时还监听了每次编译结束的事件。当监听到一次`webpack`编译结束，`_sendStats`方法就通过`websoket`给浏览器发送通知，检查下是否需要热更新。下面重点讲的就是`_sendStats`方法中的`ok`和`hash`事件都做了什么。\r\n\r\n那浏览器是如何接收到`websocket`的消息呢？回忆下第 2 步骤增加的入口文件，也就是`websocket`客户端代码。\r\n\r\n```\r\n'xxx/node_modules/webpack-dev-server/client/index.js?http://localhost:8080'\r\n```\r\n\r\n这个文件的代码会被打包到`bundle.js`中，运行在浏览器中。来看下这个文件的核心代码吧。\r\n\r\n```js\r\n// webpack-dev-server/client/index.js\r\nvar socket = require('./socket');\r\nvar onSocketMessage = {\r\n hash: function hash(_hash) {\r\n // 更新currentHash值\r\n status.currentHash = _hash;\r\n },\r\n ok: function ok() {\r\n sendMessage('Ok');\r\n // 进行更新检查等操作\r\n reloadApp(options, status);\r\n },\r\n};\r\n// 连接服务地址socketUrl，?http://localhost:8080，本地服务地址\r\nsocket(socketUrl, onSocketMessage);\r\n\r\nfunction reloadApp() {\r\n\tif (hot) {\r\n log.info('[WDS] App hot update...');\r\n\r\n // hotEmitter其实就是EventEmitter的实例\r\n var hotEmitter = require('webpack/hot/emitter');\r\n hotEmitter.emit('webpackHotUpdate', currentHash);\r\n }\r\n}\r\n```\r\n\r\n`socket`方法建立了`websocket`和服务端的连接，并注册了 2 个监听事件。\r\n\r\n* `hash`事件，更新最新一次打包后的`hash`值。\r\n* `ok`事件，进行热更新检查。\r\n\r\n热更新检查事件是调用`reloadApp`方法。比较奇怪的是，这个方法又利用`node.js`的`EventEmitter`，发出`webpackHotUpdate`消息。这是为什么？为什么不直接进行检查更新呢？\r\n\r\n个人理解就是为了更好的维护代码，以及职责划分的更明确。`websocket`仅仅用于客户端（浏览器）和服务端进行通信。而真正做事情的活还是交回给了`webpack`。\r\n\r\n那`webpack`怎么做的呢？再来回忆下第 2 步。入口文件还有一个文件没有讲到，就是：\r\n\r\n```\r\n'xxx/node_modules/webpack/hot/dev-server.js'\r\n```\r\n\r\n这个文件的代码同样会被打包到`bundle.js`中，运行在浏览器中。这个文件做了什么就显而易见了吧！先瞄一眼代码：\r\n\r\n```javascript\r\n// node_modules/webpack/hot/dev-server.js\r\nvar check = function check() {\r\n module.hot.check(true)\r\n .then(function(updatedModules) {\r\n // 容错，直接刷新页面\r\n if (!updatedModules) {\r\n window.location.reload();\r\n return;\r\n }\r\n\r\n // 热更新结束，打印信息\r\n if (upToDate()) {\r\n log(\"info\", \"[HMR] App is up to date.\");\r\n }\r\n })\r\n .catch(function(err) {\r\n window.location.reload();\r\n });\r\n};\r\n\r\nvar hotEmitter = require(\"./emitter\");\r\nhotEmitter.on(\"webpackHotUpdate\", function(currentHash) {\r\n lastHash = currentHash;\r\n check();\r\n});\r\n```\r\n\r\n这里`webpack`监听到了`webpackHotUpdate`事件，并获取最新了最新的`hash`值，然后终于进行检查更新了。检查更新呢调用的是`module.hot.check`方法。那么问题又来了，`module.hot.check`又是哪里冒出来了的！答案是`HotModuleReplacementPlugin`搞得鬼。这里留个疑问，继续往下看。\r\n\r\n### 6. HotModuleReplacementPlugin\r\n\r\n前面好像一直是`webpack-dev-server`做的事，那`HotModuleReplacementPlugin`在热更新过程中又做了什么伟大的事业呢？\r\n\r\n首先你可以对比下，配置热更新和不配置时`bundle.js`的区别。内存中看不到？直接执行`webpack`命令就可以看到生成的`bundle.js`文件啦。不要用`webpack-dev-server`启动就好了。\r\n\r\n（1）没有配置的。\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/1/16ec0c9e8fd12349~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n（2）配置了`HotModuleReplacementPlugin`或`--hot`的。\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/1/16ec0c90092fa0ac~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n哦~ 我们发现`moudle`新增了一个属性为`hot`，再看`hotCreateModule`方法。这不就找到`module.hot.check`是哪里冒出来的。\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/1/16ec0dc36018973f~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n\r\n经过对比打包后的文件，`__webpack_require__`中的`moudle`以及代码行数的不同。我们都可以发现`HotModuleReplacementPlugin`原来也是默默的塞了很多代码到`bundle.js`中呀。这和第 2 步骤很是相似哦！为什么，因为检查更新是在浏览器中操作呀。这些代码必须在运行时的环境。\r\n\r\n你也可以直接看浏览器`Sources`下的代码，会发现`webpack`和`plugin`偷偷加的代码都在哦。在这里调试也很方便。\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/1/16ec0d4634af2b3c~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n`HotModuleReplacementPlugin`如何做到的？这里我就不讲了，因为这需要你对`tapable`以及`plugin`机制有一定了解，可以看下我写的文章[Webpack插件机制之Tapable-源码解析](https://juejin.cn/post/6844904004435050503)。当然你也可以选择跳过，只关心热更新机制即可，毕竟信息量太大。\r\n\r\n### 7. moudle.hot.check 开始热更新\r\n\r\n通过第 6 步，我们就可以知道`moudle.hot.check`方法是如何来的啦。那都做了什么？之后的源码都是`HotModuleReplacementPlugin`塞入到`bundle.js`中的哦，我就不写文件路径了。\r\n\r\n* 利用上一次保存的`hash`值，调用`hotDownloadManifest`发送`xxx/hash.hot-update.json`的`ajax`请求；\r\n* 请求结果获取热更新模块，以及下次热更新的`Hash` 标识，并进入热更新准备阶段。\r\n\r\n```abnf\r\nhotAvailableFilesMap = update.c; // 需要更新的文件\r\nhotUpdateNewHash = update.h; // 更新下次热更新hash值\r\nhotSetStatus(\"prepare\"); // 进入热更新准备状态\r\n```\r\n\r\n* 调用`hotDownloadUpdateChunk`发送`xxx/hash.hot-update.js` 请求，通过`JSONP`方式。\r\n\r\n```javascript\r\nfunction hotDownloadUpdateChunk(chunkId) {\r\n var script = document.createElement(\"script\");\r\n script.charset = \"utf-8\";\r\n script.src = __webpack_require__.p + \"\" + chunkId + \".\" + hotCurrentHash + \".hot-update.js\";\r\n if (null) script.crossOrigin = null;\r\n document.head.appendChild(script);\r\n }\r\n```\r\n\r\n这个函数体为什么要单独拿出来，因为这里要解释下为什么使用`JSONP`获取最新代码？主要是因为`JSONP`获取的代码可以直接执行。为什么要直接执行？我们来回忆下`/hash.hot-update.js`的代码格式是怎么样的。\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/1/16ec04316d6ac5e3~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n\r\n可以发现，新编译后的代码是在一个`webpackHotUpdate`函数体内部的。也就是要立即执行`webpackHotUpdate`这个方法。\r\n\r\n再看下`webpackHotUpdate`这个方法。\r\n\r\n```ada\r\nwindow[\"webpackHotUpdate\"] = function (chunkId, moreModules) {\r\n hotAddUpdateChunk(chunkId, moreModules);\r\n} ;\r\n```\r\n\r\n* `hotAddUpdateChunk`方法会把更新的模块`moreModules`赋值给全局全量`hotUpdate`。\r\n* `hotUpdateDownloaded`方法会调用`hotApply`进行代码的替换。\r\n\r\n```reasonml\r\nfunction hotAddUpdateChunk(chunkId, moreModules) {\r\n // 更新的模块moreModules赋值给全局全量hotUpdate\r\n for (var moduleId in moreModules) {\r\n if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\r\n\t hotUpdate[moduleId] = moreModules[moduleId];\r\n }\r\n }\r\n // 调用hotApply进行模块的替换\r\n hotUpdateDownloaded();\r\n}\r\n```\r\n\r\n### 8. hotApply 热更新模块替换\r\n\r\n热更新的核心逻辑就在`hotApply`方法了。 `hotApply`代码有将近 400 行，还是挑重点讲了，看哭😭\r\n\r\n#### ①删除过期的模块，就是需要替换的模块\r\n\r\n通过`hotUpdate`可以找到旧模块\r\n\r\n```cpp\r\nvar queue = outdatedModules.slice();\r\nwhile (queue.length > 0) {\r\n moduleId = queue.pop();\r\n // 从缓存中删除过期的模块\r\n module = installedModules[moduleId];\r\n // 删除过期的依赖\r\n delete outdatedDependencies[moduleId];\r\n\r\n // 存储了被删掉的模块id，便于更新代码\r\n outdatedSelfAcceptedModules.push({\r\n module: moduleId\r\n });\r\n}\r\n```\r\n\r\n#### ②将新的模块添加到 modules 中\r\n\r\n```inform7\r\nappliedUpdate[moduleId] = hotUpdate[moduleId];\r\nfor (moduleId in appliedUpdate) {\r\n if (Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) {\r\n modules[moduleId] = appliedUpdate[moduleId];\r\n }\r\n}\r\n```\r\n\r\n#### ③通过\\_\\_webpack\\_require\\_\\_执行相关模块的代码\r\n\r\n```abnf\r\nfor (i = 0; i < outdatedSelfAcceptedModules.length; i++) {\r\n var item = outdatedSelfAcceptedModules[i];\r\n moduleId = item.module;\r\n try {\r\n // 执行最新的代码\r\n __webpack_require__(moduleId);\r\n } catch (err) {\r\n // ...容错处理\r\n }\r\n}\r\n\r\n```\r\n\r\n`hotApply`的确比较复杂，知道大概流程就好了，这一小节，要求你对webpack打包后的文件如何执行的有一些了解，大家可以自去看下。\r\n\r\n### 总结\r\n还是以阅读源码的形式画的图，①-④的小标记，是文件发生变化的一个流程。\r\n\r\n![](https://foruda.gitee.com/images/1681014860649655814/ea9d055f_7819612.png)\r\n\r\n### 参考文档\r\n- [轻松理解webpack热更新原理](https://juejin.cn/post/6844904008432222215)\r\n- [websocket基础知识了解](https://www.ruanyifeng.com/blog/2017/05/websocket.html)\r\n- [tapable: Webpack插件机制之Tapable-源码解析](https://juejin.cn/post/6844904004435050503)\r\n* [Webpack Hot Module Replacement 的原理解析](https://github.com/Jocs/jocs.github.io/issues/15)\r\n* [看完这篇，面试再也不怕被问 Webpack 热更新](https://juejin.cn/post/6844903953092591630)\r\n- [Webpack HMR 原理解析](https://zhuanlan.zhihu.com/p/30669007)\r\n\r\n",{"_58":668,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/267/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/267/timeline",{"_58":671,"_60":61,"_62":672,"_64":673,"_66":674,"_68":675,"_70":676,"_72":677,"_74":678,"_76":679,"_78":680,"_111":681,"_131":132,"_133":24,"_134":-5,"_135":683,"_137":684,"_159":152,"_153":686,"_155":687,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":688,"_170":689,"_176":690,"_178":691,"_190":693,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/266","https://api.github.com/repos/pro-collection/interview-question/issues/266/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/266/comments","https://api.github.com/repos/pro-collection/interview-question/issues/266/events","https://github.com/pro-collection/interview-question/issues/266",1659563600,"I_kwDOJGDC6c5i6u5Q",266,"实现 convert 方法，把原始 list 转换成树形结构，要求尽可能降低时间复杂度",{"_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},[682],{"_70":480,"_72":481,"_58":482,"_117":483,"_119":484,"_121":24,"_122":485},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":685,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-08T15:55:14Z","2023-04-08T15:55:15Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 题目如下\n\n以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性\nchildren 数组下，结构如下：\n\n```js\n// 原始 list 如下\nlet list = [\n { id: 1, name: '部门A', parentId: 0 },\n { id: 2, name: '部门B', parentId: 0 },\n { id: 3, name: '部门C', parentId: 1 },\n { id: 4, name: '部门D', parentId: 1 },\n { id: 5, name: '部门E', parentId: 2 },\n { id: 6, name: '部门F', parentId: 3 },\n { id: 7, name: '部门G', parentId: 2 },\n { id: 8, name: '部门H', parentId: 4 }\n];\nconst result = convert(list);\n\n// 转换后的结果如下\nlet result = [\n {\n id: 1,\n name: '部门A',\n parentId: 0,\n children: [\n {\n id: 3,\n name: '部门C',\n parentId: 1,\n children: [\n {\n id: 6,\n name: '部门F',\n parentId: 3\n }, {\n id: 16,\n name: '部门L',\n parentId: 3\n }\n ]\n },\n {\n id: 4,\n name: '部门D',\n parentId: 1,\n children: [\n {\n id: 8,\n name: '部门H',\n parentId: 4\n }\n ]\n }\n ]\n },\n ···\n]\n;\n```\n\n### 解法\n\n解法1： \n大型找爹现场 \n时间复杂度O(n^2)\n\n```js\nfunction convert(arr) {\n return arr.filter((child) => {\n child.children = arr.filter(item => item.parentId === child.id)\n return child.parentId === 0\n })\n}\n\nconsole.log(convert(list))\n```\n\n解法2： \n先遍历出hash表O(n) \n再遍历找爹O(n) \n时间复杂度：O(2n)=O(n) \n大型找爹现场，找到爹就把自己push到爹的房里，如果没有房间先造一个\n\n```js\nfunction convert(arr) {\n const res = []\n const map = arr.reduce((obj, item) => (obj[item.id] = item, obj), {})\n for (let item of arr) {\n if (item.parentId === 0) {\n res.push(item)\n continue\n }\n if (map.hasOwnProperty(item.parentId)) {\n const parent = map[item.parentId]\n parent.children = parent.children || []\n parent.children.push(item)\n }\n }\n return res\n}\n```\n",{"_58":692,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/266/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/266/timeline",{"_58":695,"_60":61,"_62":696,"_64":697,"_66":698,"_68":699,"_70":700,"_72":701,"_74":702,"_76":703,"_78":704,"_111":705,"_131":132,"_133":24,"_134":-5,"_135":707,"_137":708,"_159":152,"_153":710,"_155":711,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":712,"_170":713,"_176":714,"_178":715,"_190":717,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/265","https://api.github.com/repos/pro-collection/interview-question/issues/265/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/265/comments","https://api.github.com/repos/pro-collection/interview-question/issues/265/events","https://github.com/pro-collection/interview-question/issues/265",1659561483,"I_kwDOJGDC6c5i6uYL",265,"react-router 里的 `` 标签和 `` 标签有什么区别",{"_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},[706],{"_70":480,"_72":481,"_58":482,"_117":483,"_119":484,"_121":24,"_122":485},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":709,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-08T15:47:26Z","2023-04-08T15:47:27Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"从最终渲染的 DOM 来看，这两者都是链接，都是 `` 标签，区别是：\n\n`` 是 react-router 里实现路由跳转的链接，一般配合 `` 使用，react-router 接管了其默认的链接跳转行为，区别于传统的页面跳转，``\n的“跳转”行为只会触发相匹配的 `` 对应的页面内容更新，而不会刷新整个页面。\n\n而 `` 标签就是普通的超链接了，用于从当前页面跳转到 href 指向的另一个页面（非锚点情况）\n\n**源码层面**\n\n先看Link点击事件handleClick部分源码\n\n```js\nif (_this.props.onClick) _this.props.onClick(event);\n\nif (!event.defaultPrevented && // onClick prevented default\n event.button === 0 && // ignore everything but left clicks\n !_this.props.target && // let browser handle \"target=_blank\" etc.\n !isModifiedEvent(event) // ignore clicks with modifier keys\n) {\n event.preventDefault();\n\n var history = _this.context.router.history;\n var _this$props = _this.props,\n replace = _this$props.replace,\n to = _this$props.to;\n\n\n if (replace) {\n history.replace(to);\n } else {\n history.push(to);\n }\n}\n```\n\nLink做了3件事情：\n\n1. 有onclick那就执行onclick\n2. click的时候阻止a标签默认事件（这样子点击`123`就不会跳转和刷新页面）\n3. 再取得跳转href（即是to），用history（前端路由两种方式之一，history & hash）跳转，此时只是链接变了，并没有刷新页面\n",{"_58":716,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/265/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/265/timeline",{"_58":719,"_60":61,"_62":720,"_64":721,"_66":722,"_68":723,"_70":724,"_72":725,"_74":726,"_76":727,"_78":728,"_111":729,"_131":132,"_133":24,"_134":-5,"_135":732,"_137":733,"_159":287,"_153":735,"_155":736,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":737,"_170":738,"_176":739,"_178":740,"_190":742,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/264","https://api.github.com/repos/pro-collection/interview-question/issues/264/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/264/comments","https://api.github.com/repos/pro-collection/interview-question/issues/264/events","https://github.com/pro-collection/interview-question/issues/264",1659560115,"I_kwDOJGDC6c5i6uCz",264,"请实现一个 add 函数，满足以下功能",{"_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},[730,731],{"_70":480,"_72":481,"_58":482,"_117":483,"_119":484,"_121":24,"_122":485},{"_70":339,"_72":340,"_58":341,"_117":342,"_119":120,"_121":24,"_122":343},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":734,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-08T15:42:13Z","2023-10-13T04:25:20Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 题目如下\r\n\r\n```\r\nadd(1).getValue(); \t// 1\r\nadd(1)(2).getValue(); \t// 3\r\nadd(1)(2)(3).getValue()； // 6\r\nadd(1)(2, 3).getValue(); // 6\r\nadd(1, 2)(3).getValue(); // 6\r\nadd(1, 2, 3).getValue(); // 6\r\n```\r\n\r\n### 解法\r\n\r\n\r\n```js\r\nfunction add(...args) {\r\n function innerAdd(...innerArgs) {\r\n args.push(...innerArgs);\r\n return innerAdd;\r\n }\r\n\r\n innerAdd.getValue = function() {\r\n return args.reduce((acc, curr) => acc + curr, 0);\r\n };\r\n\r\n return innerAdd;\r\n}\r\n\r\n\r\n// console.log(add(1)(2).getValue()); // 输出: 3\r\n```\r\n\r\n",{"_58":741,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/264/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/264/timeline",{"_58":744,"_60":61,"_62":745,"_64":746,"_66":747,"_68":748,"_70":749,"_72":750,"_74":751,"_76":752,"_78":753,"_111":754,"_131":132,"_133":24,"_134":-5,"_135":756,"_137":757,"_159":152,"_153":759,"_155":760,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":761,"_170":762,"_176":763,"_178":764,"_190":766,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/263","https://api.github.com/repos/pro-collection/interview-question/issues/263/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/263/comments","https://api.github.com/repos/pro-collection/interview-question/issues/263/events","https://github.com/pro-collection/interview-question/issues/263",1659558752,"I_kwDOJGDC6c5i6ttg",263,"算法题之「移动零」",{"_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},[755],{"_70":480,"_72":481,"_58":482,"_117":483,"_119":484,"_121":24,"_122":485},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":758,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-08T15:37:15Z","2023-04-08T15:37:16Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 题目如下\n\n```\n给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。\n\n示例:\n输入: [0,1,0,3,12]\n输出: [1,3,12,0,0]\n\n说明:\n必须在原数组上操作，不能拷贝额外的数组。\n尽量减少操作次数。\n```\n\n### 解法\n\n解法1：\n\n```js\nfunction zeroMove(array) {\n let len = array.length;\n let j = 0;\n for (let i = 0; i < len - j; i++) {\n if (array[i] === 0) {\n array.push(0);\n array.splice(i, 1);\n i--;\n j++;\n }\n }\n return array;\n}\n```\n\n解法2：算法思路\n\n```js\nfunction moveZeroToLast(arr) {\n let index = 0;\n for (let i = 0, length = arr.length; i < length; i++) {\n if (arr[i] === 0) {\n index++;\n } else if (index !== 0) {\n arr[i - index] = arr[i];\n arr[i] = 0;\n }\n }\n return arr;\n}\n```\n",{"_58":765,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/263/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/263/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,"_131":132,"_133":24,"_134":-5,"_135":780,"_137":781,"_159":152,"_153":783,"_155":783,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":784,"_170":785,"_176":786,"_178":787,"_190":789,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/262","https://api.github.com/repos/pro-collection/interview-question/issues/262/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/262/comments","https://api.github.com/repos/pro-collection/interview-question/issues/262/events","https://github.com/pro-collection/interview-question/issues/262",1659557308,"I_kwDOJGDC6c5i6tW8",262,"数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少？",{"_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":480,"_72":481,"_58":482,"_117":483,"_119":484,"_121":24,"_122":485},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":782,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-08T15:31:48Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"数组可以直接根据索引取的对应的元素，所以不管取哪个位置的元素的时间复杂度都是 O(1)\n\n**得出结论：消耗时间几乎一致，差异可以忽略不计**\n\n**原因**:\n\nJavaScript 没有真正意义上的数组，所有的数组其实是对象，其“索引”看起来是数字，其实会被转换成字符串，作为属性名（对象的 key）来使用。所以无论是取第 1 个还是取第 10 万个元素，都是用 key 精确查找哈希表的过程，其消耗时间大致相同。\n\nChrome 浏览器JS引擎 V8中，数组有两种存储模式，一种是类似C语言中的线性结构存储（索引值连续，且都是正整数的情况下），一种是采用Hash结构存储（索引值为负数，数组稀疏，间隔比较大）\n",{"_58":788,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/262/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/262/timeline",{"_58":791,"_60":61,"_62":792,"_64":793,"_66":794,"_68":795,"_70":796,"_72":797,"_74":798,"_76":799,"_78":800,"_111":801,"_131":132,"_133":24,"_134":-5,"_135":804,"_137":805,"_159":152,"_153":807,"_155":808,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":809,"_170":810,"_176":811,"_178":812,"_190":814,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/261","https://api.github.com/repos/pro-collection/interview-question/issues/261/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/261/comments","https://api.github.com/repos/pro-collection/interview-question/issues/261/events","https://github.com/pro-collection/interview-question/issues/261",1659556289,"I_kwDOJGDC6c5i6tHB",261,"[Vue] 使用Proxy实现简易的vue双向数据绑定",{"_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},[802,803],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":806,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-08T15:28:09Z","2023-04-08T15:28:10Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### proxy 的基本使用\n可以直接看这个链接： https://github.com/pro-collection/interview-question/issues/8\n\n使用proxy实现数据劫持\n```js\nlet data = {\n name: YoLinDeng,\n height: '176cm'\n}\n\nconst p = new Proxy(data, {\n get(target, prop) {\n return Reflect.get(...arguments)\n },\n set(target, prop, newValue) {\n return Reflect.set(...arguments)\n }\n})\n```\n\n\n### 关于vue中数据响应式的原理\n\n#### 对数据进行侦测\n\n* 在vue2.X中，实现一个`observe`类，对于对象数据，通过`Object.defineProperty`来劫持对象的属性，实现`getter`和`setter`方法，这样就可以在getter的时候知道谁（订阅者）读取了数据，即谁依赖了当前的数据，将它通过`Dep类`（订阅器）收集统一管理，在setter的时候调用Dep类中的`notify`方法通知所以相关的订阅者进行更新视图。如果对象的属性也是一个对象的话，则需要递归调用`observe`进行处理。\n* 对于数组则需要另外处理，通过实现一个拦截器类，并将它挂载到数组数据的原型上，当调用`push/pop/shift/unshift/splice/sort/reverse`修改数组数据时候，相当于调用的是拦截器中重新定义的方法，这样在拦截器中就可以侦测到数据改变了，并通知订阅者更新视图。\n* vue3中使用Proxy替代了Object.defineProperty，优点在于可以直接监听对象而非属性、可以直接监听数组的变化、多达13种拦截方法。缺点是兼容性还不够好。Proxy作为新标准将受到浏览器厂商重点持续的性能优化。\n\n#### 对模板字符串进行编译\n\n* 实现Compile解析器类，将`template`中的模板字符串通过正则等方式进行处理生成对应的ast（抽象语法树），通过调用定义的不同钩子函数进行处理，包括开始标签（`start`）并判断是否自闭和以及解析属性、结束标签（`end`）、文本（`chars`）、注释（`comment`）\n* 将通过html解析与文本解析的ast进行优化处理，在静态节点上打标记，为后面`dom-diff`算法中性能优化使用，即在对比前后vnode的时候会跳过静态节点不作对比。\n* 最后根据处理好的ast生产`render`函数，在组件挂载的时候调用`render`函数就可以得到虚拟dom。\n\n#### 虚拟dom\n\n* vnode的类型包括注释节点、文本节点、元素节点、组件节点、函数式组件节点、克隆节点，`VNode`可以描述的多种节点类型，它们本质上都是`VNode`类的实例，只是在实例化的时候传入的属性参数不同而已。\n* 通过将模板字符串编译生成虚拟dom并缓存起来，当数据发生变化时，通过对比变化前后虚拟dom，以变化后的虚拟dom为基准，更新旧的虚拟dom，使它和新的一样。把dom-diff过程叫做`patch`的过程，其主要做了三件事，分别是创建/删除/更新节点。\n* 对于子节点的更新策略，vue中为了避免双重循环数据量大时候造成时间复杂度高带来的性能问题，而选择先从子节点数组中4个特殊位置进行对比，分别是：新前与旧前，新后与旧后，新后与旧前，新前与旧后。如果四种情况都没有找到相同的节点，则再通过循环方式查找。\n\n### 实现简易的vue双向数据绑定\nvue的双向数据绑定主要是指，数据变化更新视图变化，视图变化更新数据。 \n\n**实现代码如下**\n```handlebars\n\n\n\n \n \n Document\n \n\n\n

\n {{name}}\n

\n \n {{test}}\n

\n \n\n\n```\n\n```js\nclass vue extends EventTarget {\n constructor(option) {\n super()\n this.option = option\n this._data = this.option.data\n this.el = document.querySelector(this.option.el)\n this.compileNode(this.el)\n this.observe(this._data)\n }\n // 实现监听器方法\n observe(data) {\n const context = this\n // 使用proxy代理，劫持数据\n this._data = new Proxy(data, {\n set(target, prop, newValue) {\n // 自定义事件\n let event = new CustomEvent(prop, {\n detail: newValue\n })\n // 发布自定义事件\n context.dispatchEvent(event)\n return Reflect.set(...arguments)\n }\n })\n }\n // 实现解析器方法，解析模板\n compileNode(el) {\n let child = el.childNodes\n let childArr = [...child]\n childArr.forEach(node => {\n if (node.nodeType === 3) {\n let text = node.textContent\n let reg = /\\{\\{\\s*([^\\s\\{\\}]+)\\s*\\}\\}/g\n if (reg.test(text)) {\n let $1 = RegExp.$1\n this._data[$1] && (node.textContent = text.replace(reg, this._data[$1]))\n // 监听数据更改事件\n this.addEventListener($1, e => {\n node.textContent = text.replace(reg, e.detail)\n })\n }\n } else if (node.nodeType === 1) { // 如果是元素节点\n let attr = node.attributes\n // 判断属性中是否含有v-model\n if (attr.hasOwnProperty('v-model')) {\n let keyName = attr['v-model'].nodeValue\n node.value = this._data[keyName]\n node.addEventListener('input', e => {\n this._data[keyName] = node.value\n })\n }\n // 递归调用解析器方法\n this.compileNode(node)\n }\n })\n }\n}\n```\n\n",{"_58":813,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/261/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/261/timeline",{"_58":816,"_60":61,"_62":817,"_64":818,"_66":819,"_68":820,"_70":821,"_72":822,"_74":823,"_76":824,"_78":825,"_111":826,"_131":132,"_133":24,"_134":-5,"_135":835,"_137":836,"_159":152,"_153":838,"_155":839,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":840,"_170":841,"_176":842,"_178":843,"_190":845,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/260","https://api.github.com/repos/pro-collection/interview-question/issues/260/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/260/comments","https://api.github.com/repos/pro-collection/interview-question/issues/260/events","https://github.com/pro-collection/interview-question/issues/260",1659554529,"I_kwDOJGDC6c5i6srh",260,"介绍下 BFC、IFC、GFC 和 FFC？",{"_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},[827,834],{"_70":828,"_72":829,"_58":830,"_117":831,"_119":832,"_121":24,"_122":833},5232524505,"LA_kwDOJGDC6c8AAAABN-H82Q","https://api.github.com/repos/pro-collection/interview-question/labels/CSS","CSS","A46719","CSS 相关问题",{"_70":252,"_72":253,"_58":254,"_117":255,"_119":129,"_121":24,"_122":130},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":837,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-08T15:21:27Z","2023-04-08T15:21:28Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### BFC（Block Formatting Contexts）块级格式化上下文\n\n#### 什么是BFC？\n\n`BFC` 全称：`Block Formatting Context`，名为 **块级格式化上下文**。\n\n`W3C`官方解释为：`BFC`它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，`Block Formatting Context`提供了一个环境，`HTML`在这个环境中按照一定的规则进行布局。\n\n#### 如何触发BFC？\n\n* 根元素或其它包含它的元素\n\n* 浮动 `float: left/right/inherit`\n\n* 绝对定位元素 `position: absolute/fixed`\n\n* 行内块`display: inline-block`\n\n* 表格单元格 `display: table-cell`\n\n* 表格标题 `display: table-caption`\n\n* 溢出元素 `overflow: hidden/scroll/auto/inherit`\n\n* 弹性盒子 `display: flex/inline-flex`\n\n#### BFC布局规则\n\n* 内部的Box会在垂直方向，一个接一个地放置。\n\n* Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。\n\n* 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。\n\n* BFC的区域不会与float box重叠。\n\n* BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。\n\n* 计算BFC的高度时，浮动元素也参与计算\n\n#### BFC应用场景\n\n#### 解决块级元素垂直方向margin重叠\n\n我们来看下面这种情况：\n\n```html\n\n\n

box1

box2

\n\n\n```\n\n按我们习惯性思维，上面这个box的`margin-bottom`是`60px`，下面这个box的`margin-top`也是`60px`，那他们垂直的间距按道理来说应该是`120px`才对。（可事实并非如此，我们可以来具体看一下）\n\n这种情况下的margin边距为两者的最大值，而不是两者相加，那么我们可以使用BFC来解决这种margin塌陷的问题。\n```html\n\n\n

nanjiu

南玖

\n\n\n```\n\n#### 解决高度塌陷问题\n\n我们再来看这种情况，内部box使用`float`脱离了普通文档流，导致外层容器没办法撑起高度，使得背景颜色没有显示出来。\n\n```html\n\n\n

nanjiu

南玖

\n\n\n```\n\n我们可以看到此时的外层容器的高度为0，导致背景颜色没有渲染出来，这种情况我们同样可以使用BFC来解决，可以直接为外层容器触发BFC，我们来看看效果：\n\n```html\n\n\n

nanjiu

南玖

\n\n\n```\n\n#### 清除浮动\n\n在早期前端页面大多喜欢用浮动来布局，但浮动元素脱离普通文档流，会覆盖旁边内容：\n\n```html\n\n\n

nanjiu

南玖

\n\n\n```\n\n我们可以通过触发后面这个元素形成BFC，从而来清楚浮动元素对其布局造成的影响\n\n```html\n\n\n

nanjiu

南玖

\n\n```\n\n\n### 什么是IFC？\n\n`IFC`全称：`Inline Formatting Context`，名为**行级格式化上下文**\n\n#### 如何触发IFC？\n\n* 块级元素中仅包含内联级别元素\n\n形成条件非常简单，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。\n\n#### IFC布局规则\n\n* 在一个IFC内，子元素是水平方向横向排列的，并且垂直方向起点为元素顶部。\n* 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。\n* 在垂直方向上，子元素会以不同形式来对齐（vertical-align）\n* 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。\n* IFC中的`line box`一般左右边贴紧其包含块，但float元素会优先排列。\n* IFC中的`line box`高度由 CSS 行高计算规则来确定，同个`IFC`下的多个`line box`高度可能会不同。\n* 当 `inline boxes`的总宽度少于包含它们的`line box`时，其水平渲染规则由 `text-align` 属性值来决定。\n* 当一个`inline box`超过父元素的宽度时，它会被分割成多个`boxes`，这些`boxes`分布在多个`line box`中。如果子元素未设置强制换行的情况下，`inline box`将不可被分割，将会溢出父元素。\n\n#### IFC应用场景\n\n#### 元素水平居中\n\n当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。\n\n```html\n\n\n

\n string 1\n string 2\n

\n\n```\n\n#### 多行文本水平垂直居中\n\n创建一个IFC，然后设置其`vertical-align:middle`，其他行内元素则可以在此父元素下垂直居中。\n\n```html\n\n\n

\n string 1\n string 2\n

\n\n\n```\n\n### GFC（Grid Formatting Contexts）栅格格式化上下文\n\n#### 什么是GFC？\n\n`GFC`全称：`Grids Formatting Contexts`，名为**网格格式上下文**\n\n> 简介： CSS3引入的一种新的布局模型——Grids网格布局，目前暂未推广使用，使用频率较低，简单了解即可。 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定\"项目\"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成\"行\"和\"列\"，产生单元格，然后指定\"项目所在\"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。\n\n#### 如何触发GFC？\n\n当为一个元素设置`display`值为`grid`或者`inline-grid`的时候，此元素将会获得一个独立的渲染区域。\n\n#### GFC布局规则\n\n通过在`网格容器（grid container）`上定义`网格定义行（grid definition rows）`和`网格定义列（grid definition columns）`属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间（具体可以在MDN上查看）\n\n#### GFC应用场景\n\n#### 任意魔方布局\n\n这个布局使用用GFC可以轻松实现自由拼接效果，换成其他方法，一般会使用相对/绝对定位，或者flex来实现自由拼接效果，复杂程度将会提升好几个等级。\n\n```html\n\n\n

\n\n```\n\n### FFC（Flex Formatting Contexts）弹性格式化上下文\n\n#### 什么是FFC？\n\n`FFC`全称：`Flex Formatting Contexts`，名为**弹性格式上下文**\n\n> 简介： **CSS3引入了一种新的布局模型——flex布局。** flex是flexible box的缩写，一般称之为**弹性盒模型**。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕，使用Flex box布局实际上就是声明创建了FFC(自适应格式上下文)\n\n#### 如何触发FFC？\n\n当 `display` 的值为 `flex` 或 `inline-flex` 时，将生成弹性容器（Flex Containers）, 一个弹性容器为其内容建立了一个新的弹性格式化上下文环境（FFC）\n\n#### FFC布局规则\n\n* 设置为 `flex` 的容器被渲染为一个块级元素\n* 设置为 `inline-flex` 的容器被渲染为一个行内元素\n* 弹性容器中的每一个子元素都是一个弹性项目。弹性项目可以是任意数量的。弹性容器外和弹性项目内的一切元素都不受影响。简单地说，Flexbox 定义了弹性容器内弹性项目该如何布局\n\n\\*\\*⚠️注意：\\*\\*FFC布局中，float、clear、vertical-align属性不会生效。\n\n> Flex 布局是轴线布局，只能指定\"项目\"针对轴线的位置，可以看作是**一维布局**。Grid 布局则是将容器划分成\"行\"和\"列\"，产生单元格，然后指定\"项目所在\"的单元格，可以看作是**二维布局**。Grid 布局远比 Flex 布局强大。\n\n#### FFC应用场景\n\n这里只介绍它对于其它布局所相对来说更方便的特点，其实flex布局现在是非常普遍的，很多前端人员都喜欢用flex来写页面布局，操作方便且灵活，兼容性好。\n\n#### 自动撑开剩余高度/宽度\n\n看一个经典两栏布局：左边为侧边导航栏，右边为内容区域，用我们之前的常规布局，可能就需要使用到`css`的`calc`方法来动态计算剩余填充宽度了，但如果使用flex布局的话，只需要一个属性就能解决这个问题：\n\n**calc动态计算方法：**\n```html\n\n\n\t\t

box1

box2

\n\n\n```\n\n**使用FFC：**\n\n```html\n\n\n\t\t

box1

box2

\n\n```\n\n### 参考文档\n- https://juejin.cn/post/7072174649735381029\n",{"_58":844,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/260/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/260/timeline",{"_58":847,"_60":61,"_62":848,"_64":849,"_66":850,"_68":851,"_70":852,"_72":853,"_74":854,"_76":855,"_78":856,"_111":857,"_131":132,"_133":24,"_134":-5,"_135":859,"_137":860,"_159":152,"_153":862,"_155":863,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":864,"_170":865,"_176":866,"_178":867,"_190":869,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/259","https://api.github.com/repos/pro-collection/interview-question/issues/259/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/259/comments","https://api.github.com/repos/pro-collection/interview-question/issues/259/events","https://github.com/pro-collection/interview-question/issues/259",1659545475,"I_kwDOJGDC6c5i6qeD",259,"为什么普通 for 循环的性能远远高于 forEach 的性能？",{"_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},[858],{"_70":480,"_72":481,"_58":482,"_117":483,"_119":484,"_121":24,"_122":485},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":861,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-08T14:48:47Z","2023-04-08T14:48:48Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 首先问题说\"for循环优于forEach\"并不完全正确\n\n循环次数不够多的时候， forEach 性能优于 for\n```js\n// 循环十万次\nlet arrs = new Array(100000);\n\nconsole.time('for');\nfor (let i = 0; i < arrs.length; i++) {};\nconsole.timeEnd('for'); // for: 2.36474609375 ms\n\nconsole.time('forEach');\narrs.forEach((arr) => {});\nconsole.timeEnd('forEach'); // forEach: 0.825927734375 ms\n```\n\n循环次数越大， for 的性能优势越明显\n```js\n// 循环 1 亿次\nlet arrs = new Array(100000000);\n\nconsole.time('for');\nfor (let i = 0; i < arrs.length; i++) {};\nconsole.timeEnd('for'); // for: 72.7099609375 ms\n\nconsole.time('forEach');\narrs.forEach((arr) => {});\nconsole.timeEnd('forEach'); // forEach: 923.77392578125 ms\n```\n\n### 先做一下对比\n\n|对比类型|for|forEach|\n|:---|:---|:---|\n|遍历|for循环按顺序遍历|forEach 使用 iterator 迭代器遍历|\n|数据结构|for循环是随机访问元素|forEach 是顺序链表访问元素|\n|性能上|对于arraylist，是顺序表，使用for循环可以顺序访问，速度较快；使用foreach会比for循环稍慢一些|对于linkedlist，是单链表，使用for循环每次都要从第一个元素读取next域来读取，速度非常慢；使用foreach可以直接读取当前结点，数据较快|\n\n### 结论\nfor 性能优于 forEach ，主要原因如下：\n1. foreach相对于for循环，代码减少了，但是foreach依赖IEnumerable。在运行的时候效率低于for循环。\n2. for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。\n\n### 参考文档\n- https://zhuanlan.zhihu.com/p/461523927\n- [javascript 中 for 的性能比 forEach 的性能要好，为何还要使用 forEach？ - 李十三的回答 - 知乎](https://www.zhihu.com/question/556786869/answer/2706658837)\n- https://juejin.cn/post/6844904159938887687\n \n \n",{"_58":868,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/259/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/259/timeline",{"_58":871,"_60":61,"_62":872,"_64":873,"_66":874,"_68":875,"_70":876,"_72":877,"_74":878,"_76":879,"_78":880,"_111":881,"_131":132,"_133":24,"_134":-5,"_135":883,"_137":884,"_159":152,"_153":886,"_155":887,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":888,"_170":889,"_176":890,"_178":891,"_190":893,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/257","https://api.github.com/repos/pro-collection/interview-question/issues/257/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/257/comments","https://api.github.com/repos/pro-collection/interview-question/issues/257/events","https://github.com/pro-collection/interview-question/issues/257",1657684985,"I_kwDOJGDC6c5izkP5",257,"[React] 为什么不能在循环、条件或嵌套函数中调用 Hooks？",{"_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},[882],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":885,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-06T15:59:44Z","2023-04-06T15:59:45Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"如果在条件语句中使用hooks，React会抛出 error。\n\n这与React Hooks的底层设计的数据结构相关，先抛出结论：**react用链表来严格保证hooks的顺序**。\n\n一个典型的useState使用场景：\n\n```js\nconst [name,setName] = useState('leo');\n\n......\n\nsetName('Lily');\n```\n\n那么hooks在这两条语句分别作了什么？\n\n![](https://pic.rmb.bdstatic.com/bjh/89d2fa7124b06495bbbfd4b5758bd6e5.png)\n\n上图是 `useState` 首次渲染的路径，其中，跟我们问题相关的是 `mountState` 这个过程，简而言之，这个过程初始化了一个hooks，并且将其追加到链表结尾。\n\n```js\n// 进入 mounState 逻辑\n\nfunction mountState(initialState) {\n\n // 将新的 hook 对象追加进链表尾部\n var hook = mountWorkInProgressHook();\n\n // initialState 可以是一个回调，若是回调，则取回调执行后的值\n\n if (typeof initialState === 'function') {\n\n // $FlowFixMe: Flow doesn't like mixed types\n\n initialState = initialState();\n }\n\n // 创建当前 hook 对象的更新队列，这一步主要是为了能够依序保留 dispatch\n\n const queue = hook.queue = {\n\n last: null,\n\n dispatch: null,\n\n lastRenderedReducer: basicStateReducer,\n\n lastRenderedState: (initialState: any),\n\n };\n\n // 将 initialState 作为一个“记忆值”存下来\n\n hook.memoizedState = hook.baseState = initialState;\n\n // dispatch 是由上下文中一个叫 dispatchAction 的方法创建的，这里不必纠结这个方法具体做了什么\n\n var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);\n\n // 返回目标数组，dispatch 其实就是示例中常常见到的 setXXX 这个函数，想不到吧？哈哈\n\n return [hook.memoizedState, dispatch];\n}\n```\n\n从这段源码中我们可以看出，mounState 的主要工作是初始化 Hooks。在整段源码中，最需要关注的是 `mountWorkInProgressHook` 方法，它为我们道出了 Hooks 背后的数据结构组织形式。以下是 `mountWorkInProgressHook` 方法的源码：\n\n```js\nfunction mountWorkInProgressHook() {\n\n // 注意，单个 hook 是以对象的形式存在的\n var hook = {\n\n memoizedState: null,\n\n baseState: null,\n\n baseQueue: null,\n\n queue: null,\n\n next: null\n\n };\n\n if (workInProgressHook === null) {\n // 这行代码每个 React 版本不太一样，但做的都是同一件事：将 hook 作为链表的头节点处理\n firstWorkInProgressHook = workInProgressHook = hook;\n } else {\n // 若链表不为空，则将 hook 追加到链表尾部\n workInProgressHook = workInProgressHook.next = hook;\n }\n // 返回当前的 hook\n return workInProgressHook;\n}\n\n```\n\n到这里可以看出，hook 相关的所有信息收敛在一个 hook 对象里，而 hook 对象之间以单向链表的形式相互串联。\n\n接着，我们来看更新过程\n\n![](https://pic.rmb.bdstatic.com/bjh/1cc5bd4c72e4f22d1aa828df3c831f2d.png)\n\n上图中，需要注意的是updateState的过程：按顺序去遍历之前构建好的链表，取出对应的数据信息进行渲染。\n\n我们把 mountState 和 updateState 做的事情放在一起来看：mountState（首次渲染）构建链表并渲染；updateState 依次遍历链表并渲染。\n\nhooks 的渲染是通过“依次遍历”来定位每个 hooks 内容的。如果前后两次读到的链表在顺序上出现差异，那么渲染的结果自然是不可控的。\n\n这个现象有点像我们构建了一个长度确定的数组，数组中的每个坑位都对应着一块确切的信息，后续每次从数组里取值的时候，只能够通过索引（也就是位置）来定位数据。也正因为如此，在许多文章里，都会直截了当地下这样的定义：Hooks 的本质就是数组。但读完这一课时的内容你就会知道，Hooks 的本质其实是链表。\n\n我们举个例子：\n\n```js\n let mounted = false;\n\nif(!mounted){\n // eslint-disable-next-line\n const [name,setName] = useState('leo');\n const [age,setAge] = useState(18);\n mounted = true;\n}\nconst [career,setCareer] = useState('码农');\nconsole.log('career',career);\n\n......\n\n

setName('Lily')}>\n 点我点我点我\n

\n```\n\n点击div后，我们期望的输出是 \"码农\"，然而事实上(尽管会error，但是打印还是执行)打印的为 \"Lily\"\n\n原因是，三个useState在初始化的时候已经构建好了一个三个节点的链表结构，依次为： `name('leo') --> age(18) --> career('码农')`\n\n每个节点都已经派发了一个与之对应的update操作，因此执行setName时候，三个节点就修改为了 `name('Lily') --> age(18) --> career('码农')`\n\n然后执行update渲染操作，从链表依次取出值，此时，条件语句的不再执行，第一个取值操作会从链表的第一个，也就是name对应的hooks对象进行取值：此时取到的为 `name:Lily`\n\n必须按照顺序调用从根本上来说是因为 useState 这个钩子在设计层面并没有“状态命名”这个动作，也就是说你每生成一个新的状态，React 并不知道这个状态名字叫啥，所以需要通过顺序来索引到对应的状态值\n",{"_58":892,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/257/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/257/timeline",{"_58":895,"_60":61,"_62":896,"_64":897,"_66":898,"_68":899,"_70":900,"_72":901,"_74":902,"_76":903,"_78":904,"_111":905,"_131":132,"_133":24,"_134":-5,"_135":912,"_137":913,"_159":152,"_153":915,"_155":916,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":917,"_170":918,"_176":919,"_178":920,"_190":922,"_192":-5,"_193":-5,"_194":195},"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},[906,907],{"_70":368,"_72":369,"_58":370,"_117":371,"_119":372,"_121":24,"_122":373},{"_70":908,"_72":909,"_58":910,"_117":911,"_119":129,"_121":24,"_122":130},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":914,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-05T15:19:25Z","2023-10-11T03:02:24Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"一个网页获取新的数据通常需要发送一个请求到服务器，也就是向服务器请求的页面。使用 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":921,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/256/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/256/timeline",{"_58":924,"_60":61,"_62":925,"_64":926,"_66":927,"_68":928,"_70":929,"_72":930,"_74":931,"_76":932,"_78":933,"_111":934,"_131":132,"_133":24,"_134":-5,"_135":943,"_137":944,"_159":152,"_153":946,"_155":947,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":948,"_170":949,"_176":950,"_178":951,"_190":953,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/255","https://api.github.com/repos/pro-collection/interview-question/issues/255/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/255/comments","https://api.github.com/repos/pro-collection/interview-question/issues/255/events","https://github.com/pro-collection/interview-question/issues/255",1655783622,"I_kwDOJGDC6c5isUDG",255,"Long Tasks 了解多少？",{"_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},[935,942],{"_70":936,"_72":937,"_58":938,"_117":939,"_119":940,"_121":24,"_122":941},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","浏览器","f9d0c4","浏览器相关知识点",{"_70":908,"_72":909,"_58":910,"_117":911,"_119":129,"_121":24,"_122":130},[],{"_58":282,"_68":283,"_62":284,"_70":285,"_72":286,"_74":287,"_76":288,"_122":289,"_147":945,"_149":291,"_151":152,"_131":132,"_153":292,"_155":293,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-05T14:53:11Z","2023-04-05T14:53:12Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 什么是 Long Tasks\n主线程一次只能处理一个任务（任务按照队列执行）。**当任务超过某个确定的点时，准确的说是50毫秒，就会被称为长任务(Long Task)**。当长任务在执行时，如果用户想要尝试与页面交互或者一个重要的渲染更新需要重新发生，那么浏览器会等到Long Task执行完之后，才会处理它们。结果就会导致交互和渲染的延迟\n\n所以从以上信息可以得知，如果存在Long Task，那么对于我们Load（加载时）和Runtime（运行时）的性能都有影响\n\n阻塞主线程达 50 毫秒或以上的任务会导致以下问题： \n- 可交互时间延迟\n- 严重不稳定的交互行为 (轻击、单击、滚动、滚轮等) 延迟（High/variable input latency）\n- 严重不稳定的事件回调延迟（High/variable event handling latency）\n- 紊乱的动画和滚动（Janky animations and scrolling）\n\n\n任何连续不间断的且主 UI 线程繁忙 50 毫秒及以上的时间区间。比如以下常规场景：\n- 长耗时的事件回调（long running event handlers）\n- 代价高昂的回流和其他重绘（expensive reflows and other re-renders）\n- 浏览器在超过 50 毫秒的事件循环的相邻循环之间所做的工作（work the browser does between different turns of the event loop that exceeds 50 ms）\n\n\n### 任务管理策略\n软件架构中有时候会将一个任务拆分成多个函数，这不仅能增强代码可读性，也让项目更容易维护，当然这样也更容易写测试。\n```js\nfunction saveSettings () {\n validateForm();\n showSpinner();\n saveToDatabase();\n updateUI();\n sendAnalytics();\n}\n```\n\n在上面的例子中，该函数saveSettings调用了另外5个函数，包括验证表单、展示加载的动画、发送数据到后端等。理论上讲，这是很合理的架构。如果需调试这些功能，也只需要在项目中查找每个函数即可。\n然而，这样也有问题，就是js并不是为每个方法开辟一个单独的任务，因为这些方法都包含在saveSetting这个函数中，**也就是说这五个方法在一个任务中执行** \nsaveSetting这个函数调用5个函数，这个函数的执行看起来就像一个特别长的长的任务。\n\n### 如何解决 Long Tasks\n那解决Long Task的方式有如下几种：\n\n- 使用setTimeout分割任务\n- 使用async/await分割任务\n- isInputPending\n- 专门编排优先级的api: Scheduler.postTask()\n- 使用 web worker，处理逻辑复杂的计算\n\n\n#### SetTimeout\nsetTimeout本身就是个Task。假如我们给某个函数加上setTimeout，是不是就可以将某个任务分离出去，成为单独的Task了。\n延迟了回调的执行，而且使用该方法，即便是将delay时间设定成0，也是有效的。\n```js\nfunction saveSettings () {\n // Do critical work that is user-visible:\n validateForm();\n showSpinner();\n updateUI();\n\n // Defer work that isn't user-visible to a separate task:\n setTimeout(() => {\n saveToDatabase();\n sendAnalytics();\n }, 0);\n}\n```\n\n并不是所有场景都能使用这个方法。比如，如需要在循环中处理大数据量的数据，这个任务的耗时可能就会非常长（假设有数百万的数据量）\n\n\n#### 使用async、await来创造让步点\n分解任务后，按照浏览器内部的优先级别划分，其他的任务可能优先级别调整的会更高。一种让步于主线程的方式是配合用了setTimeout的promise。\n\n```js\nfunction yieldToMain () {\n return new Promise(resolve => {\n setTimeout(resolve, 0);\n });\n}\n```\n\n在saveSettings的函数中，可以在每次await函数yieldToMain后让步于主线程：\n\n```js\nasync function saveSettings () {\n // Create an array of functions to run:\n const tasks = [ validateForm, showSpinner, saveToDatabase, updateUI, sendAnalytics ]\n\n // Loop over the tasks:\n while (tasks.length > 0) {\n // Shift the first task off the tasks array:\n const task = tasks.shift();\n\n // Run the task:\n task();\n\n // Yield to the main thread:\n await yieldToMain();\n }\n}\n```\n\n#### isInputPending\n假如有一堆的任务，但是只想在用户交互的时候才让步，该怎么办？正好有这种api--`isInputPending`\n\nisInputPending这个函数可以在任何时候调用，它能判断用户是否要与页面元素进行交互。调用isInputPending会返回布尔值，true代表要与页面元素交互，false则不交互。\n\n比如说，任务队列中有很多任务，但是不想阻挡用户输入，使用isInputPending和自定义方法yieldToMain方法，就能够保证用户交互时的input不会延迟。\n\n```js\nasync function saveSettings () {\n // 函数队列\n const tasks = [ validateForm, showSpinner, saveToDatabase, updateUI, sendAnalytics ];\n \n while (tasks.length > 0) {\n // 让步于用户输入\n if (navigator.scheduling.isInputPending()) {\n // 如果有用户输入在等待，则让步\n await yieldToMain();\n } else {\n // Shift the the task out of the queue:\n const task = tasks.shift();\n\n // Run the task:\n task();\n }\n }\n}\n```\n使用isInputPending配合让步的策略，能让浏览器有机会响应用户的重要交互，这在很多情况下，尤其是很多执行很多任务时，能够提高页面对用户的响应能力。\n\n另一种使用isInputPending的方式，特别是担心浏览器不支持该策略，就可以使用另一种结合时间的方式。\n```js\nasync function saveSettings () {\n // A task queue of functions\n const tasks = [ validateForm, showSpinner, saveToDatabase, updateUI, sendAnalytics ];\n \n let deadline = performance.now() + 50;\n\n while (tasks.length > 0) {\n // Optional chaining operator used here helps to avoid\n // errors in browsers that don't support `isInputPending`:\n if (navigator.scheduling?.isInputPending() || performance.now() >= deadline) {\n // There's a pending user input, or the\n // deadline has been reached. Yield here:\n await yieldToMain();\n\n // Extend the deadline:\n deadline += 50;\n\n // Stop the execution of the current loop and\n // move onto the next iteration:\n continue;\n }\n\n // Shift the the task out of the queue:\n const task = tasks.shift();\n\n // Run the task:\n task();\n }\n}\n```\n\n#### 专门编排优先级的api: Scheduler.postTask()\n可以参考文档： https://developer.mozilla.org/en-US/docs/Web/API/Scheduler\n\npostTask允许更细粒度的编排任务，该方法能让浏览器编排任务的优先级，以便地优先级别的任务能够让步于主线程。目前postTask使用promise，接受优先级这个参数设定。\n\npostTask方法有三个优先级别：\n\n- `background级`，适用于优先级别最低的任务\n- `user-visible级`，适用于优先级别中等的任务，如果没有入参，也是该函数的默认参数。\n- `user-blocking级`，适用于优先级别最高的任务。\n\n拿下面的代码来举例，postTask在三处分别都是最高优先级别，其他的另外两个任务优先级别都是最低。\n\n```js\nfunction saveSettings () {\n // Validate the form at high priority\n scheduler.postTask(validateForm, {priority: 'user-blocking'});\n\n // Show the spinner at high priority:\n scheduler.postTask(showSpinner, {priority: 'user-blocking'});\n\n // Update the database in the background:\n scheduler.postTask(saveToDatabase, {priority: 'background'});\n\n // Update the user interface at high priority:\n scheduler.postTask(updateUI, {priority: 'user-blocking'});\n\n // Send analytics data in the background:\n scheduler.postTask(sendAnalytics, {priority: 'background'});\n};\n```\n在上面例子中，通过这些任务的优先级的编排方式，能让高浏览器级别的任务，比如用户交互等得以触发。\n\n提醒： \npostTask 并不是所有浏览器都支持。可以检测是否空，或者考虑使用polyfill。\n\n\n#### web worker\nweb worker是运行在Main线程之外的一个线程，叫做worker线程。我们可以把一些计算量大的任务放到worker中去处理\n\n主线程上的所有Long Task都消失了，复杂的计算都到单独的worker线程去处理了。但是workder线程仍然存在Long Task，不过没有关系，只要主线程没有Long Task，那就不影响构建、渲染了。\n\n\n\n### 参考文档\n- https://zhuanlan.zhihu.com/p/606276325\n- https://juejin.cn/post/7159807927908302884\n- https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceLongTaskTiming\n\n",{"_58":952,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/255/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/255/timeline",{"_58":955,"_60":61,"_62":956,"_64":957,"_66":958,"_68":959,"_70":960,"_72":961,"_74":962,"_76":963,"_78":964,"_111":965,"_131":132,"_133":24,"_134":-5,"_135":968,"_137":969,"_159":152,"_153":971,"_155":972,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":973,"_170":974,"_176":975,"_178":976,"_190":978,"_192":-5,"_193":-5,"_194":195},"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},[966,967],{"_70":368,"_72":369,"_58":370,"_117":371,"_119":372,"_121":24,"_122":373},{"_70":908,"_72":909,"_58":910,"_117":911,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":970,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-05T13:53:20Z","2023-04-05T13:53:21Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"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":977,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/254/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/254/timeline",{"_58":980,"_60":61,"_62":981,"_64":982,"_66":983,"_68":984,"_70":985,"_72":986,"_74":987,"_76":988,"_78":989,"_111":990,"_131":132,"_133":24,"_134":-5,"_135":992,"_137":993,"_159":152,"_153":995,"_155":996,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":997,"_170":998,"_176":999,"_178":1000,"_190":1002,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/253","https://api.github.com/repos/pro-collection/interview-question/issues/253/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/253/comments","https://api.github.com/repos/pro-collection/interview-question/issues/253/events","https://github.com/pro-collection/interview-question/issues/253",1655615141,"I_kwDOJGDC6c5irq6l",253,"如果用户说 web 应用感觉很反应慢或者卡顿，该如何排查？",{"_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},[991],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":994,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-05T13:23:29Z","2023-09-09T06:18:59Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 如果用户觉得 web 应用反应卡顿，主要从哪几个方面来排查？\r\n\r\n- 加载慢\r\n - 资源下载慢\r\n - 首屏并发请求资源过多\r\n - 首屏接口慢\r\n - 首屏对应的 JS 执行慢\r\n - 首屏渲染慢\r\n - 首屏加载静态资源过大\r\n - .......\r\n- 执行过程慢\r\n - 接口慢\r\n - long tasks 太多, 阻塞 JS 执行\r\n - 内存泄漏\r\n - 重绘重排过多\r\n - 关键节点没有加节流防抖\r\n - .......\r\n\r\n\r\n### 主要排查手段有哪些\r\n- **通过建立性能监控指标**: 通过真实用户数据反馈，来判断用户是否卡顿，包含网络监控、运行时性能监控\r\n\r\n- **Chrome devtools: NetWork** 主要排查网络问题\r\n $\"image\"$ \r\n\r\n- **Chrome devtools: Performance** 主要细查性能运行时性能，包含了 long tasks、render 次数、重排重绘、执行时间线、阻塞场景\r\n $\"image\"$ \r\n\r\n- **Chrome devtools: Performance monitor** 主要监控用户运行时性能，看看是否有内存泄露\r\n $\"image\"$ \r\n\r\n- **React Developer Tools**: 可以用于追踪 react 应用性能、渲染次数、重排重绘\r\n![image](https://user-images.githubusercontent.com/22188674/229801498-3cc4fc25-64a5-4b9e-ace8-5ed7b96e4ac2.png)\r\n \r\n- **Lighthouse**: 全面分析网页性能的一个工具、支持浏览器插件 \r\n![image](https://user-images.githubusercontent.com/22188674/229803209-505d01da-d780-4a3e-abe7-e56cd942a64b.png)\r\n\r\n- **webpack-bundle-analyzer**: 进行产物依赖分析、包大小分析\r\n\r\n- **抓包**: 通过抓包的方式，看看线上请求分析、请求模拟、网络劫持之后仅仅看 JS 执行时间\r\n\r\n- **E2E测试**: 通过 E2E 进行性能预检，每次上线前进行一系列系统操作，看看时间耗时和线上耗时波动\r\n\r\n\r\n### 主要解决办法和思路\r\n\r\n**首屏加载慢的方向** \r\n- 资源加载方向\r\n - 使用 `tree shaking` 减少包体积\r\n - 代码压缩和混淆\r\n - 对于高版本浏览器，直接使用 ES6 语法，低版本浏览器再使用 ES5（es6 语法代码量会比编译成 es5 代码量小很多，且执行速度也快）\r\n - 使用 `split chunks` 进行大包拆分、小包复用\r\n - 使用 `gzip` \r\n - 使用图片压缩\r\n - 使用雪碧图\r\n - 图标使用 `iconfont` 加载\r\n - 懒加载，仅加载首屏必要资源\r\n - 使用 `tailwindcss` 等技术，复用 css \r\n - 使用 `微前端` 技术，首屏仅加载当前子应用页面，可以做到只加载整站很少的一部分代码\r\n - 首屏非必要依赖尽量延后到 FMP 或者 TTI 之后再加载\r\n - 组件微前端化\r\n \r\n- 渲染方向\r\n - 尽量减少重排重绘\r\n - 减少重复渲染（useMemo、useCallback、memo 等）\r\n - 减少 setState 次数（多次 setState 可以合并为一次）\r\n - 尽量减少 dom 节点深度\r\n \r\n- 网络方向\r\n - 使用流式服务端渲染，可以查看文档：https://juejin.cn/post/6953819275941380109\r\n - 使用服务端渲染，减少首屏请求\r\n - 使用 SSG 静态站点生成\r\n - 首屏必要数据，不作客户端请求，用后端模板注入\r\n - 使用 BFF 进行请求聚合\r\n - 使用 CDN 进行网络请求分发\r\n - DNS Prefetch \r\n - 资源预加载（在闲暇时间加载后续页面所需要的资源和接口，例如：link rel preload）\r\n - 启用 HTTP2 多路复用\r\n - 在业务逻辑上，首屏必要接口提前（例如在 html 加载的那一瞬间，利用一个非常小的 js 文件将首屏需要的请求发送出去, 然后缓存下来，到业务使用的时候直接就使用即可）\r\n - 使用缓存技术缓存资源与请求：强缓存、协商缓存、离线缓存、Service Worker 缓存、后端业务缓存\r\n \r\n**运行时卡顿方向**\r\n- 查看是否存在有有 `long tasks`，有计划的拆解 `long tasks`\r\n- 解决项目中复杂度问题： https://www.jianshu.com/p/ffbb25380904\r\n- 排查项目是否有内存泄露\r\n- 排查特定业务流程是否有慢接口\r\n- 高复杂计算逻辑放在 service worker 处理\r\n\r\n\r\n\r\n### 参考文档\r\n- https://juejin.cn/post/7096144248713510943\r\n- https://juejin.cn/post/6882936217609732110\r\n- https://juejin.cn/post/7119074496610304031\r\n- https://juejin.cn/post/7159807927908302884\r\n",{"_58":1001,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/253/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/253/timeline",{"_58":1004,"_60":61,"_62":1005,"_64":1006,"_66":1007,"_68":1008,"_70":1009,"_72":1010,"_74":1011,"_76":1012,"_78":1013,"_111":1014,"_131":132,"_133":24,"_134":-5,"_135":1021,"_137":1022,"_159":195,"_153":1024,"_155":1025,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1026,"_170":1027,"_176":1028,"_178":1029,"_190":1031,"_192":-5,"_193":-5,"_194":195},"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},[1015,1016],{"_70":368,"_72":369,"_58":370,"_117":371,"_119":372,"_121":24,"_122":373},{"_70":1017,"_72":1018,"_58":1019,"_117":1020,"_119":129,"_121":24,"_122":130},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":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":1023,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-03T01:44:12Z","2023-04-03T15:32:35Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 首先我们要知道有哪些方式可以统计前端请求耗时\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":1030,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/252/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/252/timeline","pagination",{"_1034":1035,"_167":1036},"value",27,32,"actionData","errors"]