myVue

\n \n

\n\n```\n\n包含：\n\n```css\n1. 一个input，使用v-model指令\n2. 一个button，使用v-click指令\n3. 一个h3，使用v-bind指令。\n\n```\n\n我们最后会通过类似于vue的方式来使用我们的双向数据绑定，结合我们的数据结构添加注释\n\n```php\nvar app = new myVue({\n el:'#app',\n data: {\n number: 0\n },\n methods: {\n increment: function() {\n this.number ++;\n },\n }\n })\n\n```\n\n首先我们需要定义一个myVue构造函数：\n\n```javascript\nfunction myVue(options) {\n\n}\n\n```\n\n为了初始化这个构造函数，给它添加一个\\_init属性\n\n```kotlin\nfunction myVue(options) {\n this._init(options);\n}\nmyVue.prototype._init = function (options) {\n this.$options = options; // options 为上面使用时传入的结构体，包括el,data,methods\n this.$el = document.querySelector(options.el); // el是 #app, this.$el是id为app的Element元素\n this.$data = options.data; // this.$data = {number: 0}\n this.$methods = options.methods; // this.$methods = {increment: function(){}}\n }\n\n```\n\n接下来实现\\_obverse函数，对data进行处理，重写data的set和get函数\n\n并改造\\_init函数\n\n```javascript\n myVue.prototype._obverse = function (obj) { // obj = {number: 0}\n var value;\n for (key in obj) { //遍历obj对象\n if (obj.hasOwnProperty(key)) {\n value = obj[key];\n if (typeof value === 'object') { //如果值还是对象，则遍历处理\n this._obverse(value);\n }\n Object.defineProperty(this.$data, key, { //关键\n enumerable: true,\n configurable: true,\n get: function () {\n console.log(`获取${value}`);\n return value;\n },\n set: function (newVal) {\n console.log(`更新${newVal}`);\n if (value !== newVal) {\n value = newVal;\n }\n }\n })\n }\n }\n }\n\n myVue.prototype._init = function (options) {\n this.$options = options;\n this.$el = document.querySelector(options.el);\n this.$data = options.data;\n this.$methods = options.methods;\n\n this._obverse(this.$data);\n }\n\n```\n\n接下来我们写一个指令类Watcher，用来绑定更新函数，实现对DOM元素的更新\n\n```kotlin\nfunction Watcher(name, el, vm, exp, attr) {\n this.name = name; //指令名称，例如文本节点，该值设为\"text\"\n this.el = el; //指令对应的DOM元素\n this.vm = vm; //指令所属myVue实例\n this.exp = exp; //指令对应的值，本例如\"number\"\n this.attr = attr; //绑定的属性值，本例为\"innerHTML\"\n\n this.update();\n }\n\n Watcher.prototype.update = function () {\n this.el[this.attr] = this.vm.$data[this.exp]; //比如 H3.innerHTML = this.data.number; 当number改变时，会触发这个update函数，保证对应的DOM内容进行了更新。\n }\n\n```\n\n更新\\_init函数以及\\_obverse函数\n\n```javascript\nmyVue.prototype._init = function (options) {\n //...\n this._binding = {}; //_binding保存着model与view的映射关系，也就是我们前面定义的Watcher的实例。当model改变时，我们会触发其中的指令类更新，保证view也能实时更新\n //...\n }\n\n myVue.prototype._obverse = function (obj) {\n //...\n if (obj.hasOwnProperty(key)) {\n this._binding[key] = { // 按照前面的数据，_binding = {number: _directives: []} \n _directives: []\n };\n //...\n var binding = this._binding[key];\n Object.defineProperty(this.$data, key, {\n //...\n set: function (newVal) {\n console.log(`更新${newVal}`);\n if (value !== newVal) {\n value = newVal;\n binding._directives.forEach(function (item) { // 当number改变时，触发_binding[number]._directives 中的绑定的Watcher类的更新\n item.update();\n })\n }\n }\n })\n }\n }\n }\n\n```\n\n那么如何将view与model进行绑定呢？接下来我们定义一个\\_compile函数，用来解析我们的指令（v-bind,v-model,v-clickde）等，并在这个过程中对view与model进行绑定。\n\n```ini\n myVue.prototype._init = function (options) {\n //...\n this._complie(this.$el);\n }\n\nmyVue.prototype._complie = function (root) { root 为 id为app的Element元素，也就是我们的根元素\n var _this = this;\n var nodes = root.children;\n for (var i = 0; i < nodes.length; i++) {\n var node = nodes[i];\n if (node.children.length) { // 对所有元素进行遍历，并进行处理\n this._complie(node);\n }\n\n if (node.hasAttribute('v-click')) { // 如果有v-click属性，我们监听它的onclick事件，触发increment事件，即number++\n node.onclick = (function () {\n var attrVal = nodes[i].getAttribute('v-click');\n return _this.$methods[attrVal].bind(_this.$data); //bind是使data的作用域与method函数的作用域保持一致\n })();\n }\n\n if (node.hasAttribute('v-model') && (node.tagName == 'INPUT' || node.tagName == 'TEXTAREA')) { // 如果有v-model属性，并且元素是INPUT或者TEXTAREA，我们监听它的input事件\n node.addEventListener('input', (function(key) {\n var attrVal = node.getAttribute('v-model');\n //_this._binding['number']._directives = [一个Watcher实例]\n // 其中Watcher.prototype.update = function () {\n //\tnode['vaule'] = _this.$data['number']; 这就将node的值保持与number一致\n // }\n _this._binding[attrVal]._directives.push(new Watcher(\n 'input',\n node,\n _this,\n attrVal,\n 'value'\n ))\n\n return function() {\n _this.$data[attrVal] = nodes[key].value; // 使number 的值与 node的value保持一致，已经实现了双向绑定\n }\n })(i));\n }\n\n if (node.hasAttribute('v-bind')) { // 如果有v-bind属性，我们只要使node的值及时更新为data中number的值即可\n var attrVal = node.getAttribute('v-bind');\n _this._binding[attrVal]._directives.push(new Watcher(\n 'text',\n node,\n _this,\n attrVal,\n 'innerHTML'\n ))\n }\n }\n }\n\n```\n\n至此，我们已经实现了一个简单vue的双向绑定功能，包括v-bind, v-model, v-click三个指令。效果如下图\n\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/4/10/162ad3d5beb544b6~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image)\n\n附上全部代码，不到150行\n\n```xml\n\n\n myVue\n\n\n\n

\n \n

\n\n\n\n\n```\n\n如果喜欢请关注我的[Github](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Flouzhedong%2Fblog \"https://github.com/louzhedong/blog\")，给个[Star](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Flouzhedong%2Fblog \"https://github.com/louzhedong/blog\")吧，我会定期分享一些JS中的知识，^\\_^\n",{"_54":460,"_171":185,"_172":185,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/143/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/143/timeline",{"_54":463,"_56":57,"_58":464,"_60":465,"_62":466,"_64":467,"_66":468,"_68":469,"_70":470,"_72":471,"_74":472,"_107":473,"_127":128,"_129":26,"_130":-5,"_131":475,"_133":476,"_155":185,"_149":478,"_151":479,"_154":-5,"_158":159,"_160":480,"_165":-5,"_166":481,"_168":482,"_180":484,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/142","https://api.github.com/repos/pro-collection/interview-question/issues/142/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/142/comments","https://api.github.com/repos/pro-collection/interview-question/issues/142/events","https://github.com/pro-collection/interview-question/issues/142",1637802180,"I_kwDOJGDC6c5hnuDE",142,"事件循环原理?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[474],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":477,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-23T15:48:30Z","2023-03-23T15:50:30Z",{"_162":148,"_163":148,"_164":148},"通过一道题进入浏览器事件循环原理：\r\n\r\n```arcade\r\nconsole.log('script start')\r\nsetTimeout(function () {\r\n console.log('setTimeout')\r\n}, 0);\r\nPromise.resolve().then(function () {\r\n console.log('promise1')\r\n}).then(function () {\r\n console.log('promise2')\r\n})\r\nconsole.log('script end')\r\n```\r\n\r\n可以先试一下，手写出执行结果，然后看完这篇文章以后，在运行一下这段代码，看结果和预期是否一样\r\n\r\n### 单线程\r\n\r\n#### 定义\r\n\r\n单线程意味着所有的任务需要排队，前一个任务结束，才能够执行后一个任务。如果前一个任务耗时很长，后面一个任务不得不一直等着。\r\n\r\n#### 原因\r\n\r\n`javascript`的单线程，与它的用途有关。作为浏览器脚本语言，`javascript`的主要用途是与用户互动，以及操作`DOM`。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定`javascript`同时有两个线程，一个在添加`DOM`节点，另外一个是删除`DOM`节点，那浏览器应该应该以哪个为准，如果在增加一个线程进行管理多个线程，虽然解决了问题，但是增加了复杂度，为什么不使用单线程呢，执行有个先后顺序，某个时间只执行单个事件。 \r\n为了利用多核`CPU`的计算能力，`HTML5`提出`Web Worker`标准，运行`javascript`创建多个线程，但是子线程完全受主线程控制，且不得操作`DOM`。所以，这个标准并没有改变`javascript`单线程的本质\r\n\r\n### 浏览器中的`Event Loop`\r\n\r\n事件循环这个名字来源于它往往这么实现:\r\n\r\n```cpp\r\nwhile(queue.waitForMessage()) {\r\n queue.processNextMessage();\r\n}\r\n```\r\n\r\n这个模型的优势在于它必须处理完一个消息(run to completion),才会处理下一个消息,使程序可追溯性更强。不像C语言可能随时从一个线程切换到另一个线程。但是缺点也在于此,若同步代码阻塞则会影响用户交互\r\n\r\n#### `macroTask`和`microTask`\r\n\r\n宏队列，`macroTask`也叫`tasks`。包含同步任务，和一些异步任务的回调会依次进入`macro task queue`中，`macroTask`包含:\r\n\r\n* script代码块\r\n* setTimeout\r\n* requestAnimationFrame\r\n* I/O\r\n* UI rendering\r\n\r\n微队列, `microtask`，也叫`jobs`。另外一些异步任务的回调会依次进入`micro task queue`，等待后续被调用，这些异步任务包含:\r\n\r\n* Promise.then\r\n* MutationObserver\r\n\r\n下面是`Event Loop`的示意图\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/10/24/16dfca86d30dc6d0~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n一段`javascript`执行的具体流程就是如下：\r\n1. 首先执行宏队列中取出第一个，一段`script`就是相当于一个`macrotask`,所以他先会执行同步代码，当遇到例如`setTimeout`的时候，就会把这个异步任务推送到宏队列队尾中。\r\n2. 当前`macrotask`执行完成以后，就会从微队列中取出位于头部的异步任务进行执行，然后微队列中任务的长度减一。\r\n3. 然后继续从微队列中取出任务，直到整个队列中没有任务。如果在执行微队列任务的过程中，又产生了`microtask`，那么会加入整个队列的队尾，也会在当前的周期中执行\r\n4. 当微队列的任务为空了，那么就需要执行下一个`macrotask`，执行完成以后再执行微队列，以此反复。 \r\n 总结下来就是不断从`task`队列中按顺序取`task`执行，每执行完一个`task`都会检查`microtask`是否为空，不让过不为空就执行队列中的所有`microtask`。然后在取下一个`task`以此循环\r\n\r\n#### 调用栈和任务队列\r\n\r\n调用栈是一个栈结构，函数调用会形成一个栈帧。栈帧：调用栈中每个实体被称为栈帧，帧中包含了当前执行函数的参数和局部变量等上下文信息，函数执行完成后，它的执行上下文会从栈中弹出。下面是调用栈和任务队列的关系:\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/10/25/16e01c44735fee30~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n分析文章开头的题目，可以通过在题目前面添加`debugger`，结合`chrome`的`call stack`进行分析:\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/10/25/16e01cbeaa6b1c05~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n(这里不知道怎么画动图，在晚上找的一张图，小伙伴们有好的工具，求分享); 下面借助三个数组来分析一下这段代码的执行流程，`call stack`表示调用栈，`macroTasks`表示宏队列，`microTasks`表示微队列：\r\n1. 首先代码执行之前都是三个队列都是空的:\r\n\r\n```apache\r\ncallStack: []\r\nmacroTasks: [main]\r\nmicroTasks: []\r\n```\r\n\r\n在前面提到，整个代码块就相当于一个`macroTask`，所以首先向`callStack`中压入`main()`，`main`相当于整个代码块 \r\n2. 执行`main`，输出同步代码结果:\r\n\r\n```apache\r\ncallStack: [main]\r\nmacroTasks: []\r\nmicroTasks: []\r\n```\r\n\r\n在遇到`setTimeout`和`promise`的时候会向`macroTasks`与`microTasks`中分别推入 \r\n3. 此时的三个队列分别是:\r\n\r\n```apache\r\ncallStack: [main]\r\nmacroTasks: [setTimeout]\r\nmicroTasks: [promise]\r\n```\r\n\r\n当这段代码执行完成以后，会输出:\r\n\r\n```applescript\r\nscript start\r\nscript end\r\n```\r\n\r\n4. 当`main`执行完成以后，会取`microTasks`中的任务，放入`callStack`中，此时的三个队列为:\r\n\r\n```apache\r\ncallStack: [promise]\r\nmacroTasks: [setTimeout]\r\nmicroTask: []\r\n```\r\n\r\n当这个`promise`执行完成后会输出\r\n\r\n```\r\npromise1\r\n```\r\n\r\n后面又有一个`then`，在前面提到如果还有`microtask`就在微队列队尾中加入这个任务，并且在当前`tick`执行。所以紧接着输出`promise2` \r\n5. 当前的`tick`也就完成了，最后在从`macroTasks`取出`task`，此时三个队列的状态如下：\r\n\r\n```apache\r\ncallStack: [setTimeout]\r\nmacroTasks: []\r\nmicroTask: []\r\n```\r\n\r\n最后输出的结果就是`setTimeout`。 \r\n所谓的事件循环就是从两个队列中不断取出事件，然后执行，反复循环就是事件循环。经过上面的示例，理解起来是不是比较简单\r\n\r\n",{"_54":483,"_171":185,"_172":185,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/142/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/142/timeline",{"_54":486,"_56":57,"_58":487,"_60":488,"_62":489,"_64":490,"_66":491,"_68":492,"_70":493,"_72":494,"_74":495,"_107":496,"_127":128,"_129":26,"_130":-5,"_131":498,"_133":499,"_155":185,"_149":501,"_151":502,"_154":-5,"_158":159,"_160":503,"_165":-5,"_166":504,"_168":505,"_180":507,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/141","https://api.github.com/repos/pro-collection/interview-question/issues/141/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/141/comments","https://api.github.com/repos/pro-collection/interview-question/issues/141/events","https://github.com/pro-collection/interview-question/issues/141",1634270758,"I_kwDOJGDC6c5haP4m",141,"如何组织 monorepo 工程？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[497],{"_66":394,"_68":395,"_54":396,"_113":397,"_115":398,"_117":26,"_118":399},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":500,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-21T16:16:01Z","2023-03-29T08:24:59Z",{"_162":148,"_163":148,"_164":148},"参考文档： \n- [pnpm + workspace + changesets 构建你的 monorepo 工程](https://juejin.cn/post/7098609682519949325)\n- [现代 Monorepo 工程技术选型，聊聊我的思考](https://juejin.cn/post/7102452341210611720)\n- [前端工程化之多个项目如何同时高效管理 — monorepo](https://juejin.cn/post/6985336835459252260)\n",{"_54":506,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/141/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/141/timeline",{"_54":509,"_56":57,"_58":510,"_60":511,"_62":512,"_64":513,"_66":514,"_68":515,"_70":516,"_72":517,"_74":518,"_107":519,"_127":128,"_129":26,"_130":-5,"_131":521,"_133":522,"_155":185,"_149":524,"_151":525,"_154":-5,"_158":159,"_160":526,"_165":-5,"_166":527,"_168":528,"_180":530,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/140","https://api.github.com/repos/pro-collection/interview-question/issues/140/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/140/comments","https://api.github.com/repos/pro-collection/interview-question/issues/140/events","https://github.com/pro-collection/interview-question/issues/140",1634236600,"I_kwDOJGDC6c5haHi4",140,"pnpm 了解多少？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[520],{"_66":394,"_68":395,"_54":396,"_113":397,"_115":398,"_117":26,"_118":399},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":523,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-21T16:03:46Z","2023-03-21T16:07:02Z",{"_162":148,"_163":148,"_164":148},"pnpm，英文里面的意思叫做 `performant npm` ，意味“高性能的 npm”，官网地址可以参考 [pnpm.io/。](https://link.juejin.cn?target=https%3A%2F%2Fpnpm.io%2F%25E3%2580%2582 \"https://pnpm.io/%E3%80%82\")\r\n\r\npnpm 相比较于 yarn/npm 这两个常用的包管理工具在性能上也有了极大的提升，根据目前官方提供的 [benchmark](https://link.juejin.cn?target=https%3A%2F%2Fpnpm.io%2Fbenchmarks \"https://pnpm.io/benchmarks\") 数据可以看出在一些综合场景下比 npm/yarn 快了大概两倍：\r\n\r\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa38fc979f4f4ed6a5ec4af64a73c34e~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp)\r\n\r\n在这篇文章中，将会介绍一些关于 pnpm 在依赖管理方面的优化，在 monorepo 中相比较于 yarn workspace 的应用，以及也会介绍一些 pnpm 目前存在的一些缺陷，包括讨论一下未来 pnpm 会做的一些事情。\r\n\r\n### 依赖管理\r\n\r\n这节会通过 pnpm 在依赖管理这一块的一些不同于正常包管理工具的一些优化技巧。\r\n\r\n#### hard link 机制\r\n\r\n介绍 pnpm 一定离不开的就是关于 pnpm 在安装依赖方面做的一些优化，根据前面的 benchmark 图可以看到其明显的性能提升。\r\n\r\n那么 pnpm 是怎么做到如此大的提升的呢？是因为计算机里面一个叫做 **[Hard link](https://link.juejin.cn?target=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHard_link \"https://en.wikipedia.org/wiki/Hard_link\")** 的机制，`hard link` 使得用户可以通过不同的路径引用方式去找到某个文件。pnpm 会在全局的 store 目录里存储项目 `node_modules` 文件的 `hard links` 。\r\n\r\n举个例子，例如项目里面有个 1MB 的依赖 a，在 pnpm 中，看上去这个 a 依赖同时占用了 1MB 的 node\\_modules 目录以及全局 store 目录 1MB 的空间(加起来是 2MB)，但因为 `hard link` 的机制使得两个目录下相同的 1MB 空间能从两个不同位置进行寻址，因此实际上这个 a 依赖只用占用 1MB 的空间，而不是 2MB。\r\n\r\n#### Store 目录\r\n\r\n上一节提到 store 目录用于存储依赖的 hard links，这一节简单介绍一下这个 store 目录。\r\n\r\n一般 store 目录默认是设置在 `${os.homedir}/.pnpm-store` 这个目录下，具体可以参考 `@pnpm/store-path` 这个 pnpm 子包中的代码:\r\n\r\n```js\r\nconst homedir = os.homedir()\r\nif (await canLinkToSubdir(tempFile, homedir)) {\r\n await fs.unlink(tempFile)\r\n // If the project is on the drive on which the OS home directory\r\n // then the store is placed in the home directory\r\n return path.join(homedir, relStore, STORE_VERSION)\r\n}\r\n\r\n```\r\n\r\n当然用户也可以在 `.npmrc` 设置这个 store 目录位置，不过一般而言 store 目录对于用户来说感知程度是比较小的。\r\n\r\n因为这样一个机制，导致每次安装依赖的时候，如果是个相同的依赖，有好多项目都用到这个依赖，那么这个依赖实际上最优情况(即版本相同)只用安装一次。\r\n\r\n如果是 npm 或 yarn，那么这个依赖在多个项目中使用，在每次安装的时候都会被重新下载一次。\r\n\r\n![03](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ba60f4713bc46318ee139d3b8a9bc82~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp)\r\n\r\n如图可以看到在使用 pnpm 对项目安装依赖的时候，如果某个依赖在 sotre 目录中存在了话，那么就会直接从 store 目录里面去 hard-link，避免了二次安装带来的时间消耗，如果依赖在 store 目录里面不存在的话，就会去下载一次。\r\n\r\n当然这里你可能也会有问题：如果安装了很多很多不同的依赖，那么 store 目录会不会越来越大？\r\n\r\n答案是当然会存在，针对这个问题，pnpm 提供了一个命令来解决这个问题: [pnpm store | pnpm](https://link.juejin.cn?target=https%3A%2F%2Fpnpm.io%2Fcli%2Fstore \"https://pnpm.io/cli/store\")。\r\n\r\n同时该命令提供了一个选项，使用方法为 `pnpm store prune` ，它提供了一种用于删除一些不被全局项目所引用到的 packages 的功能，例如有个包 `axios@1.0.0` 被一个项目所引用了，但是某次修改使得项目里这个包被更新到了 `1.0.1` ，那么 store 里面的 1.0.0 的 axios 就就成了个不被引用的包，执行 `pnpm store prune` 就可以在 store 里面删掉它了。\r\n\r\n该命令推荐偶尔进行使用，但不要频繁使用，因为可能某天这个不被引用的包又突然被哪个项目引用了，这样就可以不用再去重新下载这个包了。\r\n\r\n#### node\\_modules 结构\r\n\r\n在 pnpm 官网有一篇很经典的文章，关于介绍 pnpm 项目的 node\\_modules 结构: [Flat node\\_modules is not the only way | pnpm](https://link.juejin.cn?target=https%3A%2F%2Fpnpm.io%2Fblog%2F2020%2F05%2F27%2Fflat-node-modules-is-not-the-only-way \"https://pnpm.io/blog/2020/05/27/flat-node-modules-is-not-the-only-way\")。\r\n\r\n在这篇文章中介绍了 pnpm 目前的 node\\_modules 的一些文件结构，例如在项目中使用 pnpm 安装了一个叫做 `express` 的依赖，那么最后会在 node\\_modules 中形成这样两个目录结构:\r\n\r\n```bash\r\nnode_modules/express/...\r\nnode_modules/.pnpm/express@4.17.1/node_modules/xxx\r\n\r\n```\r\n\r\n其中第一个路径是 nodejs 正常寻找路径会去找的一个目录，如果去查看这个目录下的内容，会发现里面连个 `node_modules` 文件都没有：\r\n\r\n```bash\r\n▾ express\r\n ▸ lib\r\n History.md\r\n index.js\r\n LICENSE\r\n package.json\r\n Readme.md\r\n\r\n```\r\n\r\n实际上这个文件只是个软连接，它会形成一个到第二个目录的一个软连接(类似于软件的快捷方式)，这样 node 在找路径的时候，最终会找到 .pnpm 这个目录下的内容。\r\n\r\n其中这个 `.pnpm` 是个虚拟磁盘目录，然后 express 这个依赖的一些依赖会被平铺到 `.pnpm/express@4.17.1/node_modules/` 这个目录下面，这样保证了依赖能够 require 到，同时也不会形成很深的依赖层级。\r\n\r\n在保证了 nodejs 能找到依赖路径的基础上，同时也很大程度上保证了依赖能很好的被放在一起。\r\n\r\n`pnpm` 对于不同版本的依赖有着极其严格的区分要求，如果项目中某个依赖实际上依赖的 `peerDeps` 出现了具体版本上的不同，对于这样的依赖会在虚拟磁盘目录 `.pnpm` 有一个比较严格的区分，具体可以参考: [pnpm.io/how-peers-a…](https://link.juejin.cn?target=https%3A%2F%2Fpnpm.io%2Fhow-peers-are-resolved \"https://pnpm.io/how-peers-are-resolved\") 这篇文章。\r\n\r\n综合而言，本质上 pnpm 的 `node_modules` 结构是个网状 + 平铺的目录结构。这种依赖结构主要基于软连接(即 symlink)的方式来完成。\r\n\r\n#### symlink 和 hard link 机制\r\n\r\n在前面知道了 pnpm 是通过 hardlink 在全局里面搞个 store 目录来存储 node\\_modules 依赖里面的 hard link 地址，然后在引用依赖的时候则是通过 symlink 去找到对应虚拟磁盘目录下(.pnpm 目录)的依赖地址。\r\n\r\n这两者结合在一起工作之后，假如有一个项目依赖了 `bar@1.0.0` 和 `foo@1.0.0` ，那么最后的 node\\_modules 结构呈现出来的依赖结构可能会是这样的:\r\n\r\n```bash\r\nnode_modules\r\n└── bar // symlink to .pnpm/bar@1.0.0/node_modules/bar\r\n└── foo // symlink to .pnpm/foo@1.0.0/node_modules/foo\r\n└── .pnpm\r\n ├── bar@1.0.0\r\n │ └── node_modules\r\n │ └── bar -> /bar\r\n │ ├── index.js\r\n │ └── package.json\r\n └── foo@1.0.0\r\n └── node_modules\r\n └── foo -> /foo\r\n ├── index.js\r\n └── package.json\r\n\r\n```\r\n\r\n`node_modules` 中的 bar 和 foo 两个目录会软连接到 .pnpm 这个目录下的真实依赖中，而这些真实依赖则是通过 hard link 存储到全局的 store 目录中。\r\n\r\n#### 兼容问题\r\n\r\n读到这里，可能有用户会好奇: 像 hard link 和 symlink 这种方式在所有的系统上都是兼容的吗？\r\n\r\n实际上 hard link 在主流系统上(`Unix/Win`)使用都是没有问题的，但是 symlink 即软连接的方式可能会在 windows 存在一些兼容的问题，但是针对这个问题，pnpm 也提供了对应的解决方案：\r\n\r\n在 win 系统上使用一个叫做 [junctions](https://link.juejin.cn?target=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fwin32%2Ffileio%2Fhard-links-and-junctions \"https://docs.microsoft.com/en-us/windows/win32/fileio/hard-links-and-junctions\") 的特性来替代软连接，这个方案在 win 上的兼容性要好于 symlink。\r\n\r\n或许你也会好奇为啥 pnpm 要使用 hard links 而不是全都用 symlink 来去实现。\r\n\r\n实际上存在 store 目录里面的依赖也是可以通过软连接去找到的，nodejs 本身有提供一个叫做 `--preserve-symlinks` 的参数来支持 symlink，但实际上这个参数实际上对于 symlink 的支持并不好导致作者放弃了该方案从而采用 hard links 的方式:\r\n\r\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90ad9850716547d08bfbfea212d6d653~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp)\r\n\r\n具体可以参考 [github.com/nodejs/node…](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fnodejs%2Fnode-eps%2Fissues%2F46 \"https://github.com/nodejs/node-eps/issues/46\") 该issue 讨论。\r\n\r\n### Monorepo 支持\r\n\r\n`pnpm` 在 monorepo 场景可以说算得上是个完美的解决方案了，因为其本身的设计机制，导致很多关键或者说致命的问题都得到了相当有效的解决。\r\n\r\n#### workspace 支持\r\n\r\n对于 monorepo 类型的项目，pnpm 提供了 workspace 来支持，具体可以参考官网文档: [pnpm.io/workspaces/…](https://link.juejin.cn?target=https%3A%2F%2Fpnpm.io%2Fworkspaces%2F%25E3%2580%2582 \"https://pnpm.io/workspaces/%E3%80%82\")\r\n\r\n### 痛点解决\r\n\r\nMonorepo 下被人诟病较多的问题，一般是依赖结构问题。常见的两个问题就是 `Phantom dependencies` 和 `NPM doppelgangers`，用 [rush 官网](https://link.juejin.cn?target=https%3A%2F%2Frushjs.io%2F \"https://rushjs.io/\") 的图片可以很贴切的展示着两个问题:\r\n\r\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/977bd60346d04cc8a4565e3e398bd962~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp)\r\n\r\n下面会针对两个问题一一介绍。\r\n\r\n#### Phantom dependencies\r\n\r\nPhantom dependencies 被称之为幽灵依赖，解释起来很简单，即某个包没有被安装(`package.json` 中并没有，但是用户却能够引用到这个包)。\r\n\r\n引发这个现象的原因一般是因为 node\\_modules 结构所导致的，例如使用 yarn 对项目安装依赖，依赖里面有个依赖叫做 foo，foo 这个依赖同时依赖了 bar，yarn 会对安装的 node\\_modules 做一个扁平化结构的处理(npm v3 之后也是这么做的)，会把依赖在 node\\_modules 下打平，这样相当于 foo 和 bar 出现在同一层级下面。那么根据 nodejs 的寻径原理，用户能 require 到 foo，同样也能 require 到 bar。\r\n\r\n```bash\r\npackage.json -> foo(bar 为 foo 依赖)\r\n\r\nnode_modules\r\n\r\n /foo\r\n\r\n /bar -> 👻依赖\r\n\r\n```\r\n\r\n那么这里这个 bar 就成了一个幽灵依赖，如果某天某个版本的 foo 依赖不再依赖 bar 或者 foo 的版本发生了变化，那么 require bar 的模块部分就会抛错。\r\n\r\n以上其实只是一个简单的例子，但是根据笔者在字节内部见到的一些 monorepo(主要为 `lerna + yarn` )项目中，这其实是个比较常见的现象，甚至有些包会直接去利用这种残缺的引入方式去减轻包体积。\r\n\r\n还有一种场景就是在 lerna + yarn workspace 的项目里面，因为 yarn 中提供了 hoist 机制(即一些底层子项目的依赖会被提升到顶层的 `node_modules` 中)，这种 phantom dependencies 会更多，一些底层的子项目经常会去 require 一些在自己里面没有引入的依赖，而直接去找顶层 node\\_modules 的依赖(nodejs 这里的寻径是个递归上下的过程)并使用。\r\n\r\n而根据前面提到的 pnpm 的 `node_modules` 依赖结构，这种现象是显然不会发生的，因为被打平的依赖会被放到 `.pnpm` 这个虚拟磁盘目录下面去，用户通过 require 是根本找不到的。\r\n\r\n> 值得一提的是，pnpm 本身其实也提供了将依赖提升并且按照 yarn 那种形式组织的 node\\_modules 结构的 Option，作者将其命名为 `--shamefully-hoist` ，即 \"羞耻的 hoist\".....\r\n\r\n#### NPM doppelgangers\r\n\r\n这个问题其实也可以说是 hoist 导致的，这个问题可能会导致有大量的依赖的被重复安装，举个例子:\r\n\r\n例如有个 package，下面依赖有 lib\\_a、lib\\_b、lib\\_c、lib\\_d，其中 a 和 b 依赖 [util\\_e@1.0.0](https://link.juejin.cn?target=mailto%3Autil_e%401.0.0 \"mailto:util_e@1.0.0\")，而 c 和 d 依赖 [util\\_e@2.0.0](https://link.juejin.cn?target=mailto%3Autil_e%402.0.0 \"mailto:util_e@2.0.0\")。\r\n\r\n那么早期 npm 的依赖结构应该是这样的:\r\n\r\n```bash\r\n- package\r\n- package.json\r\n- node_modules\r\n- lib_a\r\n - node_modules <- util_e@1.0.0\r\n- lib_b\r\n - node_modules <- util_e@1.0.0\r\n_ lib_c\r\n - node_modules <- util_e@2.0.0\r\n- lib_d\r\n - node_modules <- util_e@2.0.0\r\n\r\n```\r\n\r\n这样必然会导致很多依赖被重复安装，于是就有了 hoist 和打平依赖的操作:\r\n\r\n```bash\r\n- package\r\n- package.json\r\n- node_modules\r\n- util_e@1.0.0\r\n- lib_a\r\n- lib_b\r\n_ lib_c\r\n - node_modules <- util_e@2.0.0\r\n- lib_d\r\n - node_modules <- util_e@2.0.0\r\n\r\n```\r\n\r\n但是这样也只能提升一个依赖，如果两个依赖都提升了会导致冲突，这样同样会导致一些不同版本的依赖被重复安装多次，这里就会导致使用 npm 和 yarn 的性能损失。\r\n\r\n如果是 pnpm 的话，这里因为依赖始终都是存在 store 目录下的 hard links ，一份不同的依赖始终都只会被安装一次，因此这个是能够被彻彻底底的消除的。\r\n\r\n### 目前不适用的场景\r\n\r\n前面有提到关于 pnpm 的主要问题在于 symlink(软链接)在一些场景下会存在兼容的问题，可以参考作者在 nodejs 那边开的一个 discussion：[github.com/nodejs/node…](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fnodejs%2Fnode%2Fdiscussions%2F37509 \"https://github.com/nodejs/node/discussions/37509\")\r\n\r\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fb3e4b6b5ef43dc9e8437389d2cb46e~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp)\r\n\r\n在里面作者提到了目前 nodejs 软连接不能适用的一些场景，希望 nodejs 能提供一种 link 方式而不是使用软连接，同时也提到了 pnpm 目前因为软连接而不能使用的场景:\r\n\r\n* Electron 应用无法使用 pnpm\r\n* 部署在 [lambda](https://link.juejin.cn?target=https%3A%2F%2Fdocs.aws.amazon.com%2Flambda%2Flatest%2Fdg%2Fgettingstarted-package.html \"https://docs.aws.amazon.com/lambda/latest/dg/gettingstarted-package.html\") 上的应用无法使用 pnpm\r\n\r\n笔者在字节内部使用 pnpm 时也遇到过一些 nodejs 基础库不支持 symlink 的情况导致使用 pnpm 无法正常工作，不过这些库在迭代更新之后也会支持这一特性。\r\n\r\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b702b38ff6704651976c4c3eab540566~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp)\r\n",{"_54":529,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/140/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/140/timeline",{"_54":532,"_56":57,"_58":533,"_60":534,"_62":535,"_64":536,"_66":537,"_68":538,"_70":539,"_72":540,"_74":541,"_107":542,"_127":128,"_129":26,"_130":-5,"_131":544,"_133":545,"_155":148,"_149":547,"_151":548,"_154":-5,"_158":159,"_160":549,"_165":-5,"_166":550,"_168":551,"_180":553,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/139","https://api.github.com/repos/pro-collection/interview-question/issues/139/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/139/comments","https://api.github.com/repos/pro-collection/interview-question/issues/139/events","https://github.com/pro-collection/interview-question/issues/139",1634219700,"I_kwDOJGDC6c5haDa0",139,"pnpm 和 npm 的区别？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[543],{"_66":394,"_68":395,"_54":396,"_113":397,"_115":398,"_117":26,"_118":399},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":546,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-21T15:56:45Z","2023-03-21T15:57:18Z",{"_162":148,"_163":148,"_164":148},"`pnpm` 和 `npm` 是两个不同的 JavaScript 包管理工具，它们有以下区别：\n\n1. **包的存储方式：**`npm` 将每个包都下载到项目的 `node_modules` 目录中，而 `pnpm` 会在全局安装一个存储库，并在项目中创建一个符号链接到该存储库中的每个包。\n\n2. **空间占用：** 由于 `pnpm` 使用符号链接，它的空间占用通常比 `npm` 小，因为它避免了在多个项目中重复存储相同的依赖项。\n\n3. **安装速度：** 由于 `pnpm` 在全局安装中共享依赖项，因此安装速度通常比 `npm` 更快。\n\n4. **命令行接口：**`pnpm` 的命令行接口与 `npm` 不同，但它们都提供了一组相似的命令来管理包。\n\n5. **兼容性：** 由于 `pnpm` 的存储方式不同于 `npm`，因此某些与 `npm` 兼容的工具可能无法与 `pnpm` 一起使用。\n\n总的来说，`pnpm` 与 `npm` 相比具有更小的空间占用和更快的安装速度，但由于其不同的存储方式可能会导致与某些工具的不兼容。",{"_54":552,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/139/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/139/timeline",{"_54":555,"_56":57,"_58":556,"_60":557,"_62":558,"_64":559,"_66":560,"_68":561,"_70":562,"_72":563,"_74":564,"_107":565,"_127":128,"_129":26,"_130":-5,"_131":567,"_133":568,"_155":148,"_149":570,"_151":571,"_154":-5,"_158":159,"_160":572,"_165":-5,"_166":573,"_168":574,"_180":576,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/138","https://api.github.com/repos/pro-collection/interview-question/issues/138/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/138/comments","https://api.github.com/repos/pro-collection/interview-question/issues/138/events","https://github.com/pro-collection/interview-question/issues/138",1632459757,"I_kwDOJGDC6c5hTVvt",138,"浏览器渲染进程了解多少？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[566],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":569,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-20T16:23:57Z","2023-03-20T16:23:58Z",{"_162":148,"_163":148,"_164":148},"### 浏览器进程：\n\n浏览器是一个多进程的架构，当我们每开一个tab页面，就会开一个新的进程，所以如果一个页面崩溃也不会影响到别的页面。面试的时候经常会问从输入url到页面显示都发生了什么，这次主要说说针对渲染这块而浏览器具体都做了些什么，都有哪些进程？\n\n首先浏览器进程有如下几部分：**主进程**，**第三方插件进程，GPU进程，渲染进程**。\n\n而渲染进程又包含了很多线程：**js引擎线程，事件触发线程，定时器触发线程，异步http请求线程，GUI渲染线程。**\n\n![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e40c867849c4911a6c16491a9bcf739~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)\n\n主进程：负责页面的显示与交互，各个页面的管理，创建和销毁其他进程。网络的资源管理和下载。\n\nGPU进程：最多有一个，3d绘制等。\n\n插件进程：每种类型的插件对应一个进程。\n\n渲染进程：称为浏览器渲染或浏览器内核，内部是多线程的；主要负责页面渲染，脚本执行，事件处理等。\n\nGUI渲染线程：\n\n```markdown\n1. 负责渲染浏览器界面，解析html，css，构建dom树和render树，布局和绘制。\n2. 当重绘和回流的时候就会执行这个线程\n3. GUI渲染线程和js引擎线程互斥，当js引擎执行时，GUI线程就会被挂起（相当于冻结了），GUI更新会被保存在一个队列中等到js引擎空闲时立即执行。\n\n\n```\n\njs引擎线程：\n\n```markdown\n1. 也称js内核，负责处理js脚本程序，例如v8引擎\n2. 负责解析js脚本，运行代码\n3. 等待任务队列中的任务，一个tab页只有一个js进程\n4. 因为与GUI渲染线程互斥，所以js执行过长时间，就会造成页面渲染不连贯，导致页面渲染阻塞\n\n```\n\n事件触发线程：\n\n```markdown\n1. 归属于浏览器而不是js引擎，用了控制事件循环\n2. 当js引擎执行settimeout类似的代码块时，会将对应任务添加到事件线程\n3. 当对应的事件符合触发条件时，会被放到任务队列的队尾，等待js引擎线程处理\n4. 由于js单线程的关系，这些等待处理的事件都需要排队等待js引擎处理\n\n```\n\n定时器触发线程：\n\n```markdown\n1. settimeout和setinterval所在的线程\n2. 浏览器定时计数器不是由js引擎线程计数的，因此通过单独线程来计时触发定时，计时完毕后，添加到事件队列，等待js引擎执行。\n\n```\n\n异步http请求进程：\n\n```markdown\n1. 在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求。\n2. 将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。再由 JavaScript 引擎执行\n\n```\n\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e0e27b8d2954ab18ddf0ba13bdf70ee~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)\n\n![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c0bb32540e484bff8c162417e8112154~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)\n\n看图能大致了解渲染流程的七七八八，我按照我的理解重新梳理一下：\n\n```css\n1. 构建DOM树。因为浏览器无法理解和直接使用html所以需要转换成dom树的形式，对html进行解析。\n2. 样式计算，对css进行解析。首先把css文本转化成浏览器可以理解的结构--stylesheets，然后对stylesheets进行标准化处理，就是将一些属性值转化为渲染引擎更容易理解，标准化的计算值（例如，color单词形式转化为rgb，em单位转化为px），其次计算dom节点的样式属性。\n3. 布局阶段。\n\ta. 首先创建布局：遍历dom中所有节点，并添加到布局树中。\n\tb. 布局计算：通过js和css，计算dom在页面上的位置。\n\tc. 最后创建布局树。\n4. 分层。根据复杂的3d转换，页面滚动，还有z-index属性都会形成单独图层，把图层按照正确顺序排列。生成分层树。\n5. 图层绘制，栅格化以及图层显示。对每个图层进行单独的绘制，并提交到合成器线程。\n6. 合成线程将图层分为图块，并在栅格化线程池中将图块转化为位图。\n7. 合成线程发送绘制图块命令drawquads给浏览器进程。\n8. 浏览器根据drawquads消息生成页面展示出来\n\n```\n\n### css阻塞，js阻塞：\n\n关于提高页面性能经常听到建议说：把css代码放头部，js代码放底部。还有如果script和link都在头部，应该把script放上面。\n\ncss不会阻塞DOM解析，css阻塞DOM渲染：\n\n![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cbba082d94a4241b2c2ab9e1e73c2c5~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)\n\n从这个渲染流程图可以看出，dom解析的时候，也可以进行css的解析\n\njs阻塞DOM解析：\n\n如果“script”和link都在头部，把link放在头部。就会发生阻塞，浏览器会先去下载css样式，再执行js，再执行dom。因为浏览器不知道js脚本会写些什么，如果有删除dom操作，那提前解析dom就是无用功。不过浏览器也会先“偷看”下html中是否有碰到如link、script和img等标签时，它会帮助我们先行下载里面的资源，不会傻等到解析到那里时才下载。\n\n我们在优化js阻塞的时候经常会用**defer和async异步进行js的解析，那这两个有什么区别呢？**\n\n### async：\n\n![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d5baa0a68b84c65b8b9059edf12be5c~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)\n\n![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bde046b1318a4cc2849607734cd6653c~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)\n\n在html解析的时候，async异步的解析js，如果js解析完毕，html还没解析完，就会停止html解析，立即执行js；如果html解析完了就正好，直接执行js。所以还是有可能阻塞html。\n\n### defer：\n\n![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df533c40559640b78c0806288e60dc48~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)\n\n在html解析的时候，defer可以异步的支持解析js，等到html解析完成后，才会执行js。必然不会阻塞html。\n",{"_54":575,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/138/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/138/timeline",{"_54":578,"_56":57,"_58":579,"_60":580,"_62":581,"_64":582,"_66":583,"_68":584,"_70":585,"_72":586,"_74":587,"_107":588,"_127":128,"_129":26,"_130":-5,"_131":590,"_133":591,"_155":148,"_149":593,"_151":594,"_154":-5,"_158":159,"_160":595,"_165":-5,"_166":596,"_168":597,"_180":599,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/137","https://api.github.com/repos/pro-collection/interview-question/issues/137/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/137/comments","https://api.github.com/repos/pro-collection/interview-question/issues/137/events","https://github.com/pro-collection/interview-question/issues/137",1632412157,"I_kwDOJGDC6c5hTKH9",137,"【性能】以用户为中心的前端性能指标有哪些？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[589],{"_66":394,"_68":395,"_54":396,"_113":397,"_115":398,"_117":26,"_118":399},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":592,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-20T15:59:33Z","2023-03-23T16:26:43Z",{"_162":148,"_163":148,"_164":148},"- [以用户为中心的前端性能指标「译」](https://www.jianshu.com/p/456e6eff59c8)\n",{"_54":598,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/137/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/137/timeline",{"_54":601,"_56":57,"_58":602,"_60":603,"_62":604,"_64":605,"_66":606,"_68":607,"_70":608,"_72":609,"_74":610,"_107":611,"_127":128,"_129":26,"_130":-5,"_131":613,"_133":614,"_155":148,"_149":616,"_151":617,"_154":-5,"_158":159,"_160":618,"_165":-5,"_166":619,"_168":620,"_180":622,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/136","https://api.github.com/repos/pro-collection/interview-question/issues/136/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/136/comments","https://api.github.com/repos/pro-collection/interview-question/issues/136/events","https://github.com/pro-collection/interview-question/issues/136",1630982494,"I_kwDOJGDC6c5hNtFe",136,"如何分析页面加载慢？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[612],{"_66":394,"_68":395,"_54":396,"_113":397,"_115":398,"_117":26,"_118":399},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":615,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T15:11:12Z","2023-03-19T15:11:13Z",{"_162":148,"_163":148,"_164":148},"- [如何分析页面加载慢](https://www.jianshu.com/p/24b93b13e5a9)\n",{"_54":621,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/136/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/136/timeline",{"_54":624,"_56":57,"_58":625,"_60":626,"_62":627,"_64":628,"_66":629,"_68":630,"_70":631,"_72":632,"_74":633,"_107":634,"_127":128,"_129":26,"_130":-5,"_131":636,"_133":637,"_155":185,"_149":639,"_151":640,"_154":-5,"_158":159,"_160":641,"_165":-5,"_166":642,"_168":643,"_180":645,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/135","https://api.github.com/repos/pro-collection/interview-question/issues/135/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/135/comments","https://api.github.com/repos/pro-collection/interview-question/issues/135/events","https://github.com/pro-collection/interview-question/issues/135",1630975948,"I_kwDOJGDC6c5hNrfM",135,"【React】绑定事件的原理是什么？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[635],{"_66":423,"_68":424,"_54":425,"_113":426,"_115":427,"_117":26,"_118":428},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":638,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T15:00:05Z","2025-03-09T11:33:11Z",{"_162":148,"_163":148,"_164":148},"在 React 中，绑定事件的原理是基于合成事件（SyntheticEvent）的机制。合成事件是一种由 React 自己实现的事件系统，它是对原生 DOM 事件的封装和优化，提供了一种统一的事件处理机制，可以跨浏览器保持一致的行为。\n\n当我们在 React 组件中使用 `onClick` 等事件处理函数时，实际上是在使用合成事件。React 使用一种称为“事件委托”的技术，在组件的最外层容器上注册事件监听器，然后根据事件的目标元素和事件类型来触发合适的事件处理函数。这种机制可以大大减少事件监听器的数量，提高事件处理的性能和效率。\n\n在使用合成事件时，React 会将事件处理函数包装成一个合成事件对象（SyntheticEvent），并将其传递给事件处理函数。合成事件对象包含了与原生 DOM 事件相同的属性和方法，例如 `target`、`currentTarget`、`preventDefault()` 等，但是它是由 React 实现的，并不是原生的 DOM 事件对象。因此，我们不能在合成事件对象上调用 `stopPropagation()` 或 `stopImmediatePropagation()` 等方法，而应该使用 `nativeEvent` 属性来访问原生 DOM 事件对象。\n\n绑定事件的实现原理也涉及到 React 的更新机制。当组件的状态或属性发生变化时，React 会对组件进行重新渲染，同时重新注册事件监听器。为了避免不必要的事件处理函数的创建和注册，React 会对事件处理函数进行缓存和复用，只有在事件处理函数发生变化时才会重新创建和注册新的事件处理函数。这种机制可以大大提高组件的性能和效率，尤其是在处理大量事件和频繁更新状态的情况下。",{"_54":644,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/135/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/135/timeline",{"_54":647,"_56":57,"_58":648,"_60":649,"_62":650,"_64":651,"_66":652,"_68":653,"_70":654,"_72":655,"_74":656,"_107":657,"_127":128,"_129":26,"_130":-5,"_131":659,"_133":660,"_155":148,"_149":662,"_151":663,"_154":-5,"_158":159,"_160":664,"_165":-5,"_166":665,"_168":666,"_180":668,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/134","https://api.github.com/repos/pro-collection/interview-question/issues/134/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/134/comments","https://api.github.com/repos/pro-collection/interview-question/issues/134/events","https://github.com/pro-collection/interview-question/issues/134",1630975170,"I_kwDOJGDC6c5hNrTC",134,"【React】合成事件了解多少",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[658],{"_66":423,"_68":424,"_54":425,"_113":426,"_115":427,"_117":26,"_118":428},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":661,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:57:58Z","2023-03-19T14:57:59Z",{"_162":148,"_163":148,"_164":148},"在 React 中，合成事件是一种封装了浏览器原生事件对象的高级事件机制。它是由 React 提供的一种用于处理事件的抽象层，可以让开发者更方便地处理和管理事件。\n\nReact 的合成事件机制提供了一些优秀的特性：\n\n1. 跨浏览器兼容性：React 的合成事件可以屏蔽浏览器的差异，保证在各种浏览器上运行一致。\n\n2. 性能优化：React 的合成事件可以对事件进行池化处理，重用事件对象，避免创建大量的事件对象，从而提高性能。\n\n3. 事件委托：React 的合成事件可以实现事件委托机制，将事件处理程序绑定在组件树的根节点上，统一管理和处理组件内部和外部的事件，从而避免多次绑定事件处理程序的问题。\n\n4. 支持自定义事件：React 的合成事件可以支持自定义事件，开发者可以自定义组件事件，提供更多的自定义能力。\n\nReact 的合成事件机制通过事件冒泡和事件委托来实现。当在组件中触发事件时，React 会将该事件包装成一个合成事件对象，并在组件树中冒泡传递，直到根节点处。在组件树中，React 使用事件委托机制将事件处理程序绑定到根节点上，统一处理所有组件的事件。\n\n在处理合成事件时，React 提供了一些常用的事件处理函数，例如 `onClick`、`onMouseOver`、`onSubmit` 等，可以在组件中直接使用。此外，开发者还可以自定义事件处理函数，通过 `on` 前缀加上事件名称的方式来绑定自定义事件。例如，我们可以定义一个 `onCustomEvent` 方法来处理自定义事件：\n\n```jsx\njsxCopy codeclass MyComponent extends React.Component {\n handleCustomEvent() {\n // 处理自定义事件\n }\n\n render() {\n return (\n

\n \n

\n );\n }\n}\n```\n\n在这个例子中，我们定义了一个名为 `handleCustomEvent` 的方法来处理自定义事件，然后在组件中通过 `onClick` 属性来绑定该方法。当用户点击按钮时，React 会将该事件包装成一个合成事件对象，并调用 `handleCustomEvent` 方法来处理事件。",{"_54":667,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/134/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/134/timeline",{"_54":670,"_56":57,"_58":671,"_60":672,"_62":673,"_64":674,"_66":675,"_68":676,"_70":677,"_72":678,"_74":679,"_107":680,"_127":128,"_129":26,"_130":-5,"_131":682,"_133":683,"_155":185,"_149":685,"_151":686,"_154":-5,"_158":159,"_160":687,"_165":-5,"_166":688,"_168":689,"_180":691,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/133","https://api.github.com/repos/pro-collection/interview-question/issues/133/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/133/comments","https://api.github.com/repos/pro-collection/interview-question/issues/133/events","https://github.com/pro-collection/interview-question/issues/133",1630974166,"I_kwDOJGDC6c5hNrDW",133,"react 18 版本中 setState 是同步还是异步的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[681],{"_66":423,"_68":424,"_54":425,"_113":426,"_115":427,"_117":26,"_118":428},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":684,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:55:03Z","2023-10-04T10:21:06Z",{"_162":148,"_163":148,"_164":148},"在 React 18 中，`setState` 的行为仍然是异步的。React 团队并没有改变 `setState` 的默认行为，因为这会带来一些潜在的性能问题和不确定性。异步更新状态可以让 React 在适当的时候批量更新组件状态，从而避免过多的渲染和浏览器的性能问题。\n\n但是，React 18 引入了一个新的特性：批量更新（Batching）。当我们在事件处理函数、异步代码或生命周期函数中调用 `setState` 时，React 会将多个状态更新合并到同一个批次中，从而减少渲染的次数，提高应用的性能。这意味着，即使我们在多个地方调用 `setState` 方法，React 也会将这些调用合并到同一个更新队列中，并在下一个渲染周期中一次性更新所有状态。\n\n在 React 18 中，我们可以使用新的 `startTransition` API 来告诉 React，我们正在进行一次可中断的异步操作，并且希望在操作完成后批量更新组件状态。这个 API 的用法如下：\n\n```js\njsCopy codeimport { startTransition } from 'react';\n\nfunction handleClick() {\n startTransition(() => {\n setState({ count: count + 1 });\n // 执行其他异步操作\n });\n}\n```\n\n在这个例子中，我们通过 `startTransition` API 包装 `setState` 和其他异步操作，告诉 React 我们正在进行一次可中断的异步操作，并且希望在操作完成后批量更新组件状态。这样做可以让我们的应用更加流畅和响应，并且可以提高用户体验。\n\n需要注意的是，`startTransition` API 并不是必须的，如果我们不使用这个 API，React 仍然会在适当的时候批量更新组件状态。这个 API 只是为了让我们更加精确地控制更新的时机，并在必要时进行优化。",{"_54":690,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/133/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/133/timeline",{"_54":693,"_56":57,"_58":694,"_60":695,"_62":696,"_64":697,"_66":698,"_68":699,"_70":700,"_72":701,"_74":702,"_107":703,"_127":128,"_129":26,"_130":-5,"_131":705,"_133":706,"_155":212,"_149":708,"_151":709,"_154":-5,"_158":159,"_160":710,"_165":-5,"_166":711,"_168":712,"_180":714,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/132","https://api.github.com/repos/pro-collection/interview-question/issues/132/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/132/comments","https://api.github.com/repos/pro-collection/interview-question/issues/132/events","https://github.com/pro-collection/interview-question/issues/132",1630973229,"I_kwDOJGDC6c5hNq0t",132,"React setState 是同步还是异步的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[704],{"_66":423,"_68":424,"_54":425,"_113":426,"_115":427,"_117":26,"_118":428},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":707,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:52:06Z","2023-10-04T10:21:43Z",{"_162":148,"_163":148,"_164":148},"在 React 中，`setState` 方法有时是异步的，有时是同步的，具体取决于使用方式和环境。\r\n\r\n当我们在 React 中调用 `setState` 方法时，React 会将新状态合并到组件的状态队列中，并在未来的某个时间更新组件的状态。这个更新过程是异步的，即不能保证在 `setState` 调用后立即更新状态，而是会将状态更新推迟到下一个渲染周期中。这种情况下，`setState` 方法会返回一个 `Promise` 对象，但该对象不包含任何有用的信息。\r\n\r\n然而，当 `setState` 方法被直接调用，而不是在事件处理函数、异步代码或生命周期函数中被调用时，更新过程是同步的。在这种情况下，React 会立即更新组件的状态，并在更新后立即执行一次重新渲染。这种情况下，`setState` 方法不会返回任何信息。\r\n\r\n需要注意的是，在 React 中异步更新状态的机制可以提高性能和优化页面渲染速度，因为它可以让 React 在适当的时候批量更新组件状态，从而避免过多的渲染和浏览器的性能问题。如果我们需要在更新状态后立即执行某些操作，可以使用 `setState` 方法的回调函数或生命周期函数 `componentDidUpdate` 来实现。例如：\r\n\r\n```js\r\njsCopy codeclass MyComponent extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { count: 0 };\r\n }\r\n\r\n handleClick() {\r\n this.setState({ count: this.state.count + 1 }, () => {\r\n console.log('New count:', this.state.count);\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n

\r\n

Count: {this.state.count}

\r\n \r\n

\r\n );\r\n }\r\n}\r\n```\r\n\r\n这里的 `setState` 方法接受一个回调函数作为第二个参数，在状态更新完成后调用该函数并传递更新后的状态作为参数。在这个回调函数中可以执行任何需要在状态更新后立即执行的操作，例如输出调试信息、发送网络请求等。\r\n\r\n---------------------\r\n> 2023.04.19 更新\r\n\r\n如果**直接在setState后面获取state的值是获取不到的。**\r\n\r\n- 在React内部机制能检测到的地方， setState就是异步的；\r\n- 在React检测不到的地方，例如原生事件`addEventListener`,`setInterval`,`setTimeout`，setState就是同步更新的\r\n\r\n\r\nsetState并不是单纯的异步或同步，这其实与调用时的环境相关\r\n\r\n\r\n- 在合成事件和生命周期钩子(除componentDidUpdate) 中，setState是\"异步\"的；\r\n- 在原生事件和setTimeout 中，setState是同步的，可以马上获取更新后的值；\r\n\r\n**批量更新**\r\n多个顺序的setState不是同步地一个一个执行滴，会一个一个加入队列，然后最后一起执行。在合成事件和生命周期钩子中，setState更新队列时，存储的是合并状态(Object.assign)。因此前面设置的 key 值会被后面所覆盖，最终只会执行一次更新。\r\n\r\n\r\n**异步现象原因**\r\n\r\n`setState 的“异步”并不是说内部由异步代码实现`，其实本身执行的过程和代码都是同步的，只是合成事件和生命钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”，`当然可以通过第二个参数setState(partialState, callback)中的callback拿到更新后的结果。`\r\n\r\n`setState 并非真异步，只是看上去像异步。在源码中，通过 isBatchingUpdates 来判断`\r\n\r\nsetState调用流程：\r\n\r\n1. 调用this.setState(newState)\r\n2. 将新状态newState存入pending队列\r\n3. 判断是否处于batch Update（isBatchingUpdates是否为true）\r\n - isBatchingUpdates=true，保存组件于dirtyComponents中，走异步更新流程，合并操作，延迟更新；\r\n - isBatchingUpdates=false，走同步过程。遍历所有的dirtyComponents，调用updateComponent，更新pending state or props\r\n \r\n![流程](https://foruda.gitee.com/images/1681866680280312338/0308d34b_7819612.png)\r\n\r\n**为什么直接修改this.state无效**\r\n\r\nsetState本质是通过一个队列机制实现state更新的。执行setState时，会将需要更新的state合并后放入状态队列，而不会立刻更新state，队列机制可以批量更新state。\r\n\r\n如果不通过setState而直接修改this.state，那么这个state不会放入状态队列中，下次调用setState时对状态队列进行合并时，会忽略之前直接被修改的state，这样我们就无法合并了，而且实际也没有把你想要的state更新上去\r\n\r\n\r\n参考文档：\r\n- https://juejin.cn/post/7204307381689532474#heading-5",{"_54":713,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/132/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/132/timeline",{"_54":716,"_56":57,"_58":717,"_60":718,"_62":719,"_64":720,"_66":721,"_68":722,"_70":723,"_72":724,"_74":725,"_107":726,"_127":128,"_129":26,"_130":-5,"_131":728,"_133":729,"_155":148,"_149":731,"_151":731,"_154":-5,"_158":159,"_160":732,"_165":-5,"_166":733,"_168":734,"_180":736,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/131","https://api.github.com/repos/pro-collection/interview-question/issues/131/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/131/comments","https://api.github.com/repos/pro-collection/interview-question/issues/131/events","https://github.com/pro-collection/interview-question/issues/131",1630971714,"I_kwDOJGDC6c5hNqdC",131,"react lazy import 实现懒加载的原理是什么？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[727],{"_66":423,"_68":424,"_54":425,"_113":426,"_115":427,"_117":26,"_118":428},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":730,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:47:35Z",{"_162":148,"_163":148,"_164":148},"React 的 `lazy` 函数可以实现代码分割，即将代码按需加载，以达到优化页面加载速度的目的。它的原理是基于 JavaScript 的动态 `import()` 方法实现的。\n\n当我们使用 `lazy` 函数加载一个组件时，React 会自动将该组件的代码单独打包成一个单独的 JavaScript 文件，并在需要时通过网络请求加载该文件。具体来说，`lazy` 函数返回的是一个特殊的组件，该组件在加载时会调用传入的函数并异步加载组件代码。一般来说，我们会将异步加载的组件通过 `import()` 方法引入，例如：\n\n```js\njsCopy codeconst MyComponent = React.lazy(() => import('./MyComponent'));\n```\n\n这里的 `import()` 方法会返回一个 Promise，该 Promise 在组件代码加载完成后会 resolve，然后通过 React 渲染该组件。\n\n需要注意的是，由于异步加载组件的代码是在运行时执行的，而不是在构建时，因此需要使用符合 ECMAScript 标准的动态 `import()` 方法。此外，在使用 `lazy` 函数时还需要将组件包裹在 `Suspense` 组件中，以处理组件加载时的占位符或错误状态。例如：\n\n```js\njsCopy codeimport React, { lazy, Suspense } from 'react';\n\nconst MyComponent = lazy(() => import('./MyComponent'));\n\nfunction App() {\n return (\n

\n Loading...

}>\n \n \n \n );\n}\n```\n\n这里的 `fallback` 属性指定了组件加载时的占位符，当组件加载完成后会自动替换成真正的组件。\n\n综上所述，React 的 `lazy` 函数通过使用动态 `import()` 方法实现了组件代码的按需加载，以达到优化页面加载速度的目的。",{"_54":735,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/131/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/131/timeline",{"_54":738,"_56":57,"_58":739,"_60":740,"_62":741,"_64":742,"_66":743,"_68":744,"_70":745,"_72":746,"_74":747,"_107":748,"_127":128,"_129":26,"_130":-5,"_131":750,"_133":751,"_155":148,"_149":753,"_151":754,"_154":-5,"_158":159,"_160":755,"_165":-5,"_166":756,"_168":757,"_180":759,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/130","https://api.github.com/repos/pro-collection/interview-question/issues/130/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/130/comments","https://api.github.com/repos/pro-collection/interview-question/issues/130/events","https://github.com/pro-collection/interview-question/issues/130",1630970505,"I_kwDOJGDC6c5hNqKJ",130,"react 遍历渲染节点列表，为什么要加 key ?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[749],{"_66":423,"_68":424,"_54":425,"_113":426,"_115":427,"_117":26,"_118":428},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":752,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:43:47Z","2023-03-19T14:47:57Z",{"_162":148,"_163":148,"_164":148},"在 React 中，当我们使用数组渲染节点列表时，通常需要给每个节点添加一个 `key` 属性，这是因为 React 需要通过 `key` 属性来判断是否需要更新某个节点，从而提高渲染性能。\n\n具体来说，React 在进行更新时，会根据 `key` 属性来判断哪些节点需要更新，哪些节点需要删除，哪些节点需要新增。如果两个节点的 `key` 值相同，则 React 认为它们是同一个节点，会尝试进行复用，否则会销毁旧节点并创建新节点。如果没有 `key` 属性，React 无法判断哪些节点是同一个节点，就需要进行全量更新，这会导致性能下降。\n\n另外，添加 `key` 属性还可以解决一些潜在的问题。例如，当我们通过 `map` 函数生成节点列表时，如果没有给节点添加 `key` 属性，当列表中的某个节点发生变化时，可能会导致其他节点的 `props` 或状态也被重置。如果给每个节点添加了唯一的 `key` 属性，就可以避免这种问题。\n\n因此，总的来说，为节点列表添加 `key` 属性可以提高渲染性能，并避免潜在的问题。",{"_54":758,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/130/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/130/timeline",{"_54":761,"_56":57,"_58":762,"_60":763,"_62":764,"_64":765,"_66":766,"_68":767,"_70":768,"_72":769,"_74":770,"_107":771,"_127":128,"_129":26,"_130":-5,"_131":773,"_133":774,"_155":148,"_149":776,"_151":776,"_154":-5,"_158":159,"_160":777,"_165":-5,"_166":778,"_168":779,"_180":781,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/129","https://api.github.com/repos/pro-collection/interview-question/issues/129/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/129/comments","https://api.github.com/repos/pro-collection/interview-question/issues/129/events","https://github.com/pro-collection/interview-question/issues/129",1630958477,"I_kwDOJGDC6c5hNnON",129,"有什么方法可以保持前后端实时通信？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[772],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":775,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:08:54Z",{"_162":148,"_163":148,"_164":148},"实时通信是一种双向的通信方式，前后端都能实时地获取对方的数据和状态变化，目前主要有以下几种方法可以实现：\n\n1. WebSocket：WebSocket 是一种基于 TCP 协议的双向通信协议，它可以在客户端和服务器之间建立持久性的连接，并且支持服务器主动向客户端推送数据。WebSocket 协议通过 HTTP 协议的 101 状态码进行握手，握手成功后，客户端和服务器之间的通信就不再使用 HTTP 协议，而是使用 WebSocket 协议。WebSocket 协议具有低延迟、高效、实时等优点，适用于实时通信、在线游戏、股票行情等场景。\n\n2. Server-Sent Events（SSE）：SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端推送文本数据或事件数据，而无需客户端发起请求。SSE 协议通过 HTTP 的长连接机制实现服务器向客户端的推送，客户端通过 EventSource API 接口接收服务器推送的数据。SSE 协议比较简单，实现也比较容易，适用于需要推送数据而不需要客户端与服务器进行双向通信的场景。\n\n3. 长轮询（Long Polling）：长轮询是一种基于 HTTP 协议的服务器推送技术，它通过客户端向服务器发送一个长时间的请求，服务器在有数据更新时返回响应，否则将一直等待一段时间后才返回响应。客户端收到响应后立即发起下一次请求。长轮询比较容易实现，适用于需要实时通知客户端数据变化但不需要高实时性的场景。\n\n4. WebRTC：WebRTC 是一种实时通信协议，它基于 P2P 技术，可以在浏览器之间直接建立通信，并实现视频、音频、数据等多媒体的实时传输。WebRTC 协议支持点对点通信，不需要经过服务器转发，因此具有低延迟、高效、实时等优点，适用于实时视频、音频等场景。\n\n总的来说，WebSocket 和 SSE 协议适用于需要服务器主动向客户端推送数据的场景，长轮询适用于需要实时通知客户端数据变化但不需要高实时性的场景，WebRTC 协议适用于实时视频、音频等场景。选择哪种方法要根据具体的业务场景和需求来决定。",{"_54":780,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/129/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/129/timeline",{"_54":783,"_56":57,"_58":784,"_60":785,"_62":786,"_64":787,"_66":788,"_68":789,"_70":790,"_72":791,"_74":792,"_107":793,"_127":128,"_129":26,"_130":-5,"_131":795,"_133":796,"_155":148,"_149":798,"_151":799,"_154":-5,"_158":159,"_160":800,"_165":-5,"_166":801,"_168":802,"_180":804,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/128","https://api.github.com/repos/pro-collection/interview-question/issues/128/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/128/comments","https://api.github.com/repos/pro-collection/interview-question/issues/128/events","https://github.com/pro-collection/interview-question/issues/128",1630957428,"I_kwDOJGDC6c5hNm90",128,"axios的拦截器原理及应用、简单手写核心逻辑？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[794],{"_66":423,"_68":424,"_54":425,"_113":426,"_115":427,"_117":26,"_118":428},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":797,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:05:59Z","2023-03-19T14:06:00Z",{"_162":148,"_163":148,"_164":148},"### axios 拦截器的使用\n\nAxios 是一个基于 Promise 的 HTTP 客户端库，可以用于浏览器和 Node.js 环境中发送 HTTP 请求。Axios 提供了拦截器机制，可以在请求发送前和响应返回后对请求和响应进行拦截和处理，从而实现一些通用的功能，例如：添加请求头、添加认证信息、显示 loading 状态、错误处理等。\n\nAxios 的拦截器机制主要是通过 `interceptors` 属性来实现的，该属性包含了 `request` 和 `response` 两个对象，分别代表请求拦截器和响应拦截器。每个对象都包含 `use` 方法，该方法用于注册拦截器回调函数，拦截器回调函数会在请求发送前或响应返回后被调用。\n\n下面是一个示例代码，展示了如何使用 Axios 的拦截器：\n\n```javascript\nimport axios from 'axios'\n\n// 添加请求拦截器\naxios.interceptors.request.use(function (config) {\n // 在发送请求之前做些什么\n console.log('请求拦截器')\n return config\n}, function (error) {\n // 对请求错误做些什么\n return Promise.reject(error)\n})\n\n// 添加响应拦截器\naxios.interceptors.response.use(function (response) {\n // 对响应数据做点什么\n console.log('响应拦截器')\n return response\n}, function (error) {\n // 对响应错误做点什么\n return Promise.reject(error)\n})\n\n// 发送请求\naxios.get('/api/user')\n .then(function (response) {\n // 处理响应数据\n })\n .catch(function (error) {\n // 处理请求错误\n })\n```\n\n在上面的代码中，我们首先通过 `import` 语句引入了 Axios 库。然后，我们调用 `axios.interceptors.request.use` 方法注册了一个请求拦截器回调函数，该函数会在发送请求前被调用，可以在该函数中进行一些通用的操作，例如添加请求头、添加认证信息等。接着，我们调用 `axios.interceptors.response.use` 方法注册了一个响应拦截器回调函数，该函数会在响应返回后被调用，可以在该函数中进行一些通用的操作，例如显示 loading 状态、错误处理等。\n\n最后，我们使用 `axios.get` 方法发送请求，并通过 `then` 和 `catch` 方法处理响应数据和请求错误。在请求发送前和响应返回后，我们注册的拦截器回调函数会被自动调用，可以对请求和响应进行拦截和处理。\n\nAxios 的拦截器机制非常强大，可以用于实现一些通用的功能，例如添加请求头、添加认证信息、显示 loading 状态、错误处理等。在实际开发中，我们经常会使用 Axios 的拦截器来提高代码的复用性和可维护性。\n\n### axios 拦截器原理\n\nAxios 的拦截器机制是通过 `interceptors` 属性来实现的，该属性包含了 `request` 和 `response` 两个对象，分别代表请求拦截器和响应拦截器。每个对象都包含 `use` 方法，该方法用于注册拦截器回调函数，拦截器回调函数会在请求发送前或响应返回后被调用。\n\n具体来说，当我们使用 `axios` 发送请求时，会先调用请求拦截器的回调函数，该函数会在请求发送前被调用，可以在该函数中进行一些通用的操作，例如添加请求头、添加认证信息等。如果请求拦截器返回的不是一个 Promise 对象，则会自动将其封装为一个 Promise 对象。\n\n接着，Axios 会使用 XMLHTTPRequest 对象发送请求，并监听其状态变化事件。当响应返回后，Axios 会调用响应拦截器的回调函数，该函数会在响应返回后被调用，可以在该函数中进行一些通用的操作，例如显示 loading 状态、错误处理等。如果响应拦截器返回的不是一个 Promise 对象，则会自动将其封装为一个 Promise 对象。\n\n需要注意的是，Axios 的拦截器是按照添加顺序依次执行的，也就是说，先添加的拦截器回调函数先执行，后添加的拦截器回调函数后执行。如果一个拦截器回调函数中没有调用 `next` 方法，则后面的拦截器回调函数将不会被执行。\n\n下面是一个示例代码，展示了如何使用 Axios 的拦截器：\n\n```javascript\nimport axios from 'axios'\n\n// 添加请求拦截器\naxios.interceptors.request.use(function (config) {\n // 在发送请求之前做些什么\n console.log('请求拦截器')\n return config\n}, function (error) {\n // 对请求错误做些什么\n return Promise.reject(error)\n})\n\n// 添加响应拦截器\naxios.interceptors.response.use(function (response) {\n // 对响应数据做点什么\n console.log('响应拦截器')\n return response\n}, function (error) {\n // 对响应错误做点什么\n return Promise.reject(error)\n})\n\n// 发送请求\naxios.get('/api/user')\n .then(function (response) {\n // 处理响应数据\n })\n .catch(function (error) {\n // 处理请求错误\n })\n```\n\n在上面的代码中，我们首先通过 `import` 语句引入了 Axios 库。然后，我们调用 `axios.interceptors.request.use` 方法注册了一个请求拦截器回调函数，该函数会在发送请求前被调用，可以在该函数中进行一些通用的操作，例如添加请求头、添加认证信息等。接着，我们调用 `axios.interceptors.response.use` 方法注册了一个响应拦\n\n### axios 拦截器核心逻辑代码实现\n\n下面是一个简单实现 Axios 拦截器核心逻辑的示例代码：\n\n```javascript\nclass Axios {\n constructor() {\n // 请求拦截器\n this.requestInterceptors = []\n // 响应拦截器\n this.responseInterceptors = []\n }\n\n // 注册请求拦截器\n useRequestInterceptor(callback) {\n this.requestInterceptors.push(callback)\n }\n\n // 注册响应拦截器\n useResponseInterceptor(callback) {\n this.responseInterceptors.push(callback)\n }\n\n // 发送请求\n async request(config) {\n // 执行请求拦截器\n for (const interceptor of this.requestInterceptors) {\n config = await interceptor(config)\n }\n\n // 发送请求\n const response = await fetch(config.url, {\n method: config.method,\n headers: config.headers,\n body: config.data\n })\n\n // 执行响应拦截器\n for (const interceptor of this.responseInterceptors) {\n response = await interceptor(response)\n }\n\n return response\n }\n}\n\n// 创建 Axios 实例\nconst axios = new Axios()\n\n// 注册请求拦截器\naxios.useRequestInterceptor(config => {\n // 在请求头中添加认证信息\n config.headers['Authorization'] = 'Bearer xxx'\n return config\n})\n\n// 注册响应拦截器\naxios.useResponseInterceptor(response => {\n // 处理响应数据\n return response.json()\n})\n\n// 发送请求\naxios.request({\n url: '/api/user',\n method: 'GET'\n}).then(data => {\n // 处理响应数据\n console.log(data)\n}).catch(error => {\n // 处理请求错误\n console.error(error)\n})\n```\n\n在上面的代码中，我们首先定义了一个 `Axios` 类，该类包含了请求拦截器和响应拦截器两个属性，分别用于保存注册的拦截器回调函数。然后，我们定义了 `useRequestInterceptor` 和 `useResponseInterceptor` 两个方法，用于注册请求拦截器和响应拦截器回调函数。在这两个方法中，我们将回调函数保存到对应的属性中。\n\n接着，我们定义了 `request` 方法，该方法用于发送请求。在 `request` 方法中，我们首先执行请求拦截器回调函数，将请求配置传递给回调函数，并将回调函数返回的结果赋值给请求配置。接着，我们使用 `fetch` 函数发送请求，并将响应保存到 `response` 变量中。然后，我们执行响应拦截器回调函数，将响应对象传递给回调函数，并将回调函数返回的结果赋值给响应对象。最后，我们返回响应对象。\n\n在最后几行代码中，我们创建了一个 `axios` 实例，并使用 `useRequestInterceptor` 方法和 `useResponseInterceptor` 方法注册了请求拦截器和响应拦截器回调函数。然后，我们调用 `request` 方法发送请求，并使用 `then` 方法处理响应数据，使用 `catch` 方法处理请求错误。",{"_54":803,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/128/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/128/timeline",{"_54":806,"_56":57,"_58":807,"_60":808,"_62":809,"_64":810,"_66":811,"_68":812,"_70":813,"_72":814,"_74":815,"_107":816,"_127":128,"_129":26,"_130":-5,"_131":818,"_133":819,"_155":148,"_149":821,"_151":822,"_154":-5,"_158":159,"_160":823,"_165":-5,"_166":824,"_168":825,"_180":827,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/127","https://api.github.com/repos/pro-collection/interview-question/issues/127/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/127/comments","https://api.github.com/repos/pro-collection/interview-question/issues/127/events","https://github.com/pro-collection/interview-question/issues/127",1630945649,"I_kwDOJGDC6c5hNkFx",127,"如何实现可过期的 localstorage 数据?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[817],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":820,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T13:36:22Z","2024-10-26T08:28:47Z",{"_162":148,"_163":148,"_164":148},"以下是一个封装了支持过期时间的`localStorage`的示例代码：\r\n\r\n```javascript\r\nclass EnhancedLocalStorage {\r\n constructor() {\r\n this.prefix = 'enhanced_storage_';\r\n }\r\n\r\n setItem(key, value, expirationInSeconds) {\r\n const item = {\r\n value,\r\n expirationTime: expirationInSeconds? Date.now() + expirationInSeconds * 1000 : null\r\n };\r\n localStorage.setItem(this.prefix + key, JSON.stringify(item));\r\n }\r\n\r\n getItem(key) {\r\n const itemStr = localStorage.getItem(this.prefix + key);\r\n if (!itemStr) return null;\r\n const item = JSON.parse(itemStr);\r\n if (item.expirationTime && item.expirationTime < Date.now()) {\r\n localStorage.removeItem(this.prefix + key);\r\n return null;\r\n }\r\n return item.value;\r\n }\r\n\r\n removeItem(key) {\r\n localStorage.removeItem(this.prefix + key);\r\n }\r\n}\r\n\r\nconst enhancedStorage = new EnhancedLocalStorage();\r\nexport default enhancedStorage;\r\n```\r\n\r\n使用方法如下：\r\n\r\n```javascript\r\n// 设置带有过期时间的存储项\r\nenhancedStorage.setItem('myKey', 'myValue', 60); // 60 秒后过期\r\n\r\n// 获取存储项\r\nconst value = enhancedStorage.getItem('myKey');\r\nconsole.log(value);\r\n\r\n// 一段时间后，存储项过期\r\nsetTimeout(() => {\r\n const expiredValue = enhancedStorage.getItem('myKey');\r\n console.log(expiredValue); // null\r\n}, 65000);\r\n```\r\n\r\n在这个封装中，使用了一个自定义的前缀来避免与普通的`localStorage`键冲突。设置项时，会记录一个过期时间，如果有过期时间且当前时间超过了过期时间，在获取项时会返回`null`并自动删除该项。",{"_54":826,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/127/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/127/timeline",{"_54":829,"_56":57,"_58":830,"_60":831,"_62":832,"_64":833,"_66":834,"_68":835,"_70":836,"_72":837,"_74":838,"_107":839,"_127":128,"_129":26,"_130":-5,"_131":841,"_133":842,"_155":148,"_149":844,"_151":845,"_154":-5,"_158":159,"_160":846,"_165":-5,"_166":847,"_168":848,"_180":850,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/126","https://api.github.com/repos/pro-collection/interview-question/issues/126/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/126/comments","https://api.github.com/repos/pro-collection/interview-question/issues/126/events","https://github.com/pro-collection/interview-question/issues/126",1630945151,"I_kwDOJGDC6c5hNj9_",126,"es5 和 es6 使用 new 关键字实例化对象的流程是一样的吗？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[840],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":843,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T13:34:48Z","2023-03-19T13:34:49Z",{"_162":148,"_163":148,"_164":148},"ES5 和 ES6 使用 `new` 关键字实例化对象的流程基本上是一样的，只是在细节上存在一些差异。\n\n在 ES5 中，当使用 `new` 关键字调用一个函数时，会创建一个新的对象，并将这个新对象的 `[[Prototype]]` 属性指向构造函数的 `prototype` 属性。此外，`new` 关键字还会将构造函数内部的 `this` 关键字绑定到新创建的对象上，从而允许我们在构造函数内部添加属性和方法。\n\n在 ES6 中，这些基本的流程也是相同的。但是，ES6 引入了类（class）的概念，从而为面向对象编程提供了更加便利的语法。使用类定义一个对象时，需要使用 `constructor` 方法作为构造函数，而不是普通的函数。类定义的语法糖实际上是对函数的封装，使用 `new` 关键字创建类的实例时，实际上也是在调用类的 `constructor` 方法。\n\n在 ES6 中，可以使用类的继承来创建更复杂的对象。当使用 `new` 关键字创建一个继承自另一个类的类的实例时，会先调用父类的 `constructor` 方法，再调用子类的 `constructor` 方法，从而完成对象实例的创建过程。\n\n需要注意的是，虽然 ES6 的类看起来像是其他面向对象语言中的类，但在 JavaScript 中，类仍然是基于原型继承的。在创建一个类的实例时，实际上是在创建一个新对象，并将这个新对象的原型指向类的原型。因此，实例化对象的流程与使用普通函数或类定义的对象的流程基本上是相同的。",{"_54":849,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/126/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/126/timeline",{"_54":852,"_56":57,"_58":853,"_60":854,"_62":855,"_64":856,"_66":857,"_68":858,"_70":859,"_72":860,"_74":861,"_107":862,"_127":128,"_129":26,"_130":-5,"_131":864,"_133":865,"_155":148,"_149":867,"_151":867,"_154":-5,"_158":159,"_160":868,"_165":-5,"_166":869,"_168":870,"_180":872,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/125","https://api.github.com/repos/pro-collection/interview-question/issues/125/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/125/comments","https://api.github.com/repos/pro-collection/interview-question/issues/125/events","https://github.com/pro-collection/interview-question/issues/125",1630942806,"I_kwDOJGDC6c5hNjZW",125,"当使用 new 关键字创建对象时, 会经历哪些步骤？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[863],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":866,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T13:30:24Z",{"_162":148,"_163":148,"_164":148},"在 JavaScript 中，`new` 关键字用于创建一个对象实例。当使用 `new` 关键字创建对象时，会发生以下几个步骤：\n\n1. 创建一个空的对象。\n2. 将这个空对象的 `[[Prototype]]` 属性设置为构造函数的 `prototype` 属性。\n3. 将这个空对象赋值给构造函数内部的 `this` 关键字，用于初始化属性和方法。\n4. 如果构造函数返回一个对象，那么返回这个对象；否则，返回第一步创建的对象实例。\n\n以下是一个示例，演示如何使用 `new` 关键字创建一个对象实例：\n\n```javascript\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\n\nconst person = new Person(\"John\", 30);\nconsole.log(person.name); // \"John\"\nconsole.log(person.age); // 30\n```\n\n在上面的示例中，`new Person(\"John\", 30)` 会创建一个新的对象实例。在构造函数 `Person` 中，`this.name` 和 `this.age` 会被赋值为 `\"John\"` 和 `30`。最终，`new` 关键字会返回这个新的对象实例。\n\n需要注意的是，在 JavaScript 中，函数也是对象。因此，我们可以向对象一样定义属性和方法。当我们使用 `new` 关键字调用一个函数时，这个函数会被视为构造函数，从而创建一个新的对象实例。",{"_54":871,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/125/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/125/timeline",{"_54":874,"_56":57,"_58":875,"_60":876,"_62":877,"_64":878,"_66":879,"_68":880,"_70":881,"_72":882,"_74":883,"_107":884,"_127":128,"_129":26,"_130":-5,"_131":886,"_133":887,"_155":148,"_149":889,"_151":890,"_154":-5,"_158":159,"_160":891,"_165":-5,"_166":892,"_168":893,"_180":895,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/124","https://api.github.com/repos/pro-collection/interview-question/issues/124/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/124/comments","https://api.github.com/repos/pro-collection/interview-question/issues/124/events","https://github.com/pro-collection/interview-question/issues/124",1630940863,"I_kwDOJGDC6c5hNi6_",124,"Vue 中 $nextTick 作用与原理是啥？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[885],{"_66":423,"_68":424,"_54":425,"_113":426,"_115":427,"_117":26,"_118":428},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":888,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T13:24:06Z","2023-03-19T13:24:07Z",{"_162":148,"_163":148,"_164":148},"`$nextTick` 是 Vue.js 提供的一个实例方法，用于在 DOM 更新之后执行一些操作。具体来说，它会将回调函数推迟到下次 DOM 更新循环之后执行。\n\n在 Vue 中，数据变化时，Vue 会异步执行视图更新。例如，当一个数据变化时，Vue 会将这个变化包装成一个更新任务，并将其推入更新队列。Vue 会在下一个事件循环周期中遍历这个队列，并依次执行更新任务，最终将视图更新为最新状态。\n\n在某些情况下，我们需要在 DOM 更新之后执行一些操作，例如在 Vue 中更新 DOM 后获取更新后的元素尺寸、在 Vue 组件中调用子组件的方法等等。如果直接在数据变化后立即执行这些操作，可能会遇到一些问题，例如元素尺寸并未更新，子组件尚未完全挂载等等。这时候，就需要使用 `$nextTick` 方法。\n\n`$nextTick` 的实现原理是利用了 JavaScript 的事件循环机制。具体来说，当调用 `$nextTick` 方法时，Vue 会将回调函数推入一个回调队列中。在下一个事件循环周期中，Vue 会遍历这个回调队列，并依次执行其中的回调函数。由于在这个时候 DOM 已经完成了更新，因此可以安全地执行需要在 DOM 更新之后进行的操作。\n\n需要注意的是，`$nextTick` 是异步执行的，因此不能保证回调函数会立即执行。如果需要等待 `$nextTick` 的回调函数执行完毕后再继续执行某些操作，可以使用 Promise 或 async/await 来等待异步操作的完成。",{"_54":894,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/124/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/124/timeline",{"_54":897,"_56":57,"_58":898,"_60":899,"_62":900,"_64":901,"_66":902,"_68":903,"_70":904,"_72":905,"_74":906,"_107":907,"_127":128,"_129":26,"_130":-5,"_131":909,"_133":910,"_155":148,"_149":912,"_151":913,"_154":-5,"_158":159,"_160":914,"_165":-5,"_166":915,"_168":916,"_180":918,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/123","https://api.github.com/repos/pro-collection/interview-question/issues/123/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/123/comments","https://api.github.com/repos/pro-collection/interview-question/issues/123/events","https://github.com/pro-collection/interview-question/issues/123",1630940136,"I_kwDOJGDC6c5hNivo",123,"script 标签 defer 和 async 区别？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[908],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":911,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T13:22:06Z","2023-03-19T13:26:23Z",{"_162":148,"_163":148,"_164":148},"`defer` 和 `async` 是用于控制脚本加载和执行的 HTML `