[{"_1":2,"_1048":-5,"_1049":-5},"loaderData",{"_3":4,"_53":54},"root",{"_5":6},"clerkState",{"_7":8},"__internal_clerk_state",{"_9":10,"_25":26,"_27":28,"_29":28,"_30":24,"_31":28,"_32":28,"_33":28,"_34":28,"_35":28,"_36":28,"_37":28,"_38":28,"_39":40,"_49":28,"_50":28,"_51":24,"_52":24},"__clerk_ssr_state",{"_11":12,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5,"_20":-5,"_21":-5,"_22":-5,"_23":24},"tokenType","session_token","sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"__publishableKey","pk_live_Y2xlcmsucXVlc3Rpb25zLnZpc3VhbGl6ZWl0LmFwcCQ","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_41":24,"_23":24,"_42":28,"_43":44,"_45":28,"_46":26,"_47":24,"_48":28},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__clerkJSUrl","__clerkJSVersion","__telemetryDisabled","__telemetryDebug","routes/_index",{"_55":56,"_1043":1044},"questions",[57,196,242,267,298,333,368,397,422,447,472,512,539,565,590,614,638,662,686,710,733,763,786,810,834,858,888,912,947,971,995,1019],{"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_111":112,"_131":132,"_133":24,"_134":-5,"_135":136,"_137":138,"_159":152,"_153":160,"_155":161,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":166,"_170":171,"_176":177,"_178":179,"_190":191,"_192":-5,"_193":-5,"_194":195},"url","https://api.github.com/repos/pro-collection/interview-question/issues/211","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/211/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/211/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/211/events","html_url","https://github.com/pro-collection/interview-question/issues/211","id",1642298815,"node_id","I_kwDOJGDC6c5h432_","number",211,"title","下面代码中 a 在什么情况下会打印 1 ?","user",{"_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},"login","yanlele",22188674,"MDQ6VXNlcjIyMTg4Njc0","avatar_url","https://avatars.githubusercontent.com/u/22188674?v=4","gravatar_id","https://api.github.com/users/yanlele","https://github.com/yanlele","followers_url","https://api.github.com/users/yanlele/followers","following_url","https://api.github.com/users/yanlele/following{/other_user}","gists_url","https://api.github.com/users/yanlele/gists{/gist_id}","starred_url","https://api.github.com/users/yanlele/starred{/owner}{/repo}","subscriptions_url","https://api.github.com/users/yanlele/subscriptions","organizations_url","https://api.github.com/users/yanlele/orgs","repos_url","https://api.github.com/users/yanlele/repos","https://api.github.com/users/yanlele/events{/privacy}","received_events_url","https://api.github.com/users/yanlele/received_events","type","User","user_view_type","public","site_admin","labels",[113,124],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","name","JavaScript","color","A4D8FB","default","description","JavaScript 语法部分",{"_70":125,"_72":126,"_58":127,"_117":128,"_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","京东","ededed","公司标签","state","open","locked","assignee","assignees",[],"milestone",{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":148,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题","creator",{"_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},"open_issues",510,"closed_issues",0,"created_at","2023-03-06T15:00:15Z","updated_at","2025-09-07T06:08:31Z","due_on","closed_at","comments","2023-03-27T15:13:43Z","2023-03-27T15:13:44Z","author_association","MEMBER","active_lock_reason","sub_issues_summary",{"_167":152,"_168":152,"_169":152},"total","completed","percent_completed","issue_dependencies_summary",{"_172":152,"_173":152,"_174":152,"_175":152},"blocked_by","total_blocked_by","blocking","total_blocking","body","### 问题\n```js\nvar a = ?;\nif(a == 1 && a == 2 && a == 3){\n \tconsole.log(1);\n}\n```\n\n### 回答\n\n这是一个经典的面试题，可以通过重写 `valueOf` 或者 `toString` 方法来实现，在这些方法中动态返回变量 a 的值，以满足条件。例如：\n\n```js\nvar a = {\n i: 1,\n toString: function() {\n return this.i++;\n }\n}\nif(a == 1 && a == 2 && a == 3){\n console.log(1);\n}\n```\n\n在这个例子中，`a` 被定义为一个对象，有一个属性 `i` 初始化为 1，同时重写了 `toString` 方法，在每次调用时返回 `i` 的值，并且每次返回后将 `i` 自增。这样在比较 `a` 是否等于 1、2、3 的时候，会依次调用 `a.toString()` 方法，得到的结果就是满足条件的 1，依次打印出来。\n","reactions",{"_58":180,"_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/211/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/211/timeline","performed_via_github_app","state_reason","score",1,{"_58":197,"_60":61,"_62":198,"_64":199,"_66":200,"_68":201,"_70":202,"_72":203,"_74":204,"_76":205,"_78":206,"_111":207,"_131":132,"_133":24,"_134":-5,"_135":220,"_137":221,"_159":152,"_153":234,"_155":235,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":236,"_170":237,"_176":238,"_178":239,"_190":241,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/209","https://api.github.com/repos/pro-collection/interview-question/issues/209/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/209/comments","https://api.github.com/repos/pro-collection/interview-question/issues/209/events","https://github.com/pro-collection/interview-question/issues/209",1642284080,"I_kwDOJGDC6c5h40Qw",209,"[Redux] 为什么 Redux 的 reducer 中不能做异步操作？",{"_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},[208,215],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},5252532904,"LA_kwDOJGDC6c8AAAABORNKqA","https://api.github.com/repos/pro-collection/interview-question/labels/web%E6%A1%86%E6%9E%B6","web框架","CB446E","web 框架相关知识",{"_70":216,"_72":217,"_58":218,"_117":219,"_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":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_147":230,"_149":231,"_151":152,"_131":132,"_153":232,"_155":233,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},454,"2023-03-06T15:00:27Z","2025-09-07T06:21:17Z","2023-03-27T15:06:54Z","2023-03-27T15:06:55Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"Redux 的 reducer 是纯函数，它的作用是接收一个旧的状态和一个操作，返回一个新的状态，是一个纯粹的状态转换函数，因此在 reducer 中不能执行异步操作，否则会破坏 reducer 的纯函数特性。如果在 reducer 中执行异步操作，会导致 reducer 不可预测和不可重现，因为异步操作的结果是不确定的，而 reducer 必须保证在相同的输入条件下，产生相同的输出结果。同时，在 reducer 中执行异步操作可能会导致应用的状态不一致或者有延迟的问题。\n\n为了解决这个问题，Redux 提供了中间件的机制，比如 `redux-thunk`、`redux-saga` 等，可以在中间件中进行异步操作，然后再将异步操作的结果传递给 reducer 进行状态更新。这样就可以避免在 reducer 中执行异步操作，保证 reducer 的纯函数特性，同时也可以完成异步操作的需求。",{"_58":240,"_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/209/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/209/timeline",{"_58":243,"_60":61,"_62":244,"_64":245,"_66":246,"_68":247,"_70":248,"_72":249,"_74":250,"_76":251,"_78":252,"_111":253,"_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/208","https://api.github.com/repos/pro-collection/interview-question/issues/208/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/208/comments","https://api.github.com/repos/pro-collection/interview-question/issues/208/events","https://github.com/pro-collection/interview-question/issues/208",1642277858,"I_kwDOJGDC6c5h4yvi",208,"使用迭代的方式实现 flatten 函数？",{"_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},[254,255],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":216,"_72":217,"_58":218,"_117":219,"_119":129,"_121":24,"_122":130},[],{"_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-03-27T15:03:15Z","2023-03-27T15:03:48Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"可以使用迭代的方式实现 `flatten` 函数，具体思路如下：\n\n1. 创建一个新数组 `result` 来存放结果。\n2. 创建一个栈 `stack`，将原数组作为第一个元素压入栈中。\n3. 当栈不为空时，取出栈顶元素，如果该元素是一个数组，则将其展开后的每个元素压入栈中。\n4. 如果该元素不是一个数组，则将其加入到 `result` 中。\n5. 重复步骤 3 和 4，直到栈为空。\n\n下面是代码实现：\n\n```javascript\nfunction flatten(array) {\n const result = [];\n const stack = [array];\n\n while (stack.length > 0) {\n const item = stack.pop();\n\n if (Array.isArray(item)) {\n for (let i = item.length - 1; i >= 0; i--) {\n stack.push(item[i]);\n }\n } else {\n result.push(item);\n }\n }\n\n return result.reverse();\n}\n```\n\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/208/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/208/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":287,"_137":288,"_159":152,"_153":290,"_155":291,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":292,"_170":293,"_176":294,"_178":295,"_190":297,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/207","https://api.github.com/repos/pro-collection/interview-question/issues/207/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/207/comments","https://api.github.com/repos/pro-collection/interview-question/issues/207/events","https://github.com/pro-collection/interview-question/issues/207",1642269410,"I_kwDOJGDC6c5h4wri",207,"使用虚拟DOM 一定会比直接操作真实 DOM 快吗？",{"_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,286],{"_70":280,"_72":281,"_58":282,"_117":283,"_119":284,"_121":24,"_122":285},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","工程化","1d76db","web 项目工程化",{"_70":216,"_72":217,"_58":218,"_117":219,"_119":129,"_121":24,"_122":130},[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_147":289,"_149":231,"_151":152,"_131":132,"_153":232,"_155":233,"_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-03-27T14:59:24Z","2023-03-27T14:59:28Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"大家惯有的思维模式下，我们普遍的认为，虚拟DOM一定会比原生DOM要快的多。\n\n但实际上并不是这样。\n\n**仅从React的角度来说 : React的官网可从来都没有说过虚拟DOM会比原生操作DOM更快。**\n\n虚拟DOM和原生操作DOM谁更快这个问题。如果要我来回答的话，**一定是原生DOM比虚拟DOM更快性能更好。**\n\n值得注意的是，**虚拟DOM并不是比原生DOM快，更确切的来说，虚拟DOM是比操作不当的原生DOM快**。实际上，如果对原生DOM的操作得当的话，原生DOM的性能一定优于虚拟DOM。\n\n我们来剖析一下。\n\n### 虚拟DOM为什么而存在\n\n**其最核心的思想是提升开发效率而非提升性能**\n\n使用 React/Vue 这些框架的时候，我们不需要去考虑对DOM的操作，只需要关心数据的改变。我们以前还在使用JQ的时候，数据改变之后我们需要调用`$(\"#id\").append(node)`等操作去手动追加DOM。而在使用React/Vue之后，我们只需要关心数据的改变。至于对DOM的一系列动作，在我们的数据改变之后，React/Vue会为我们代劳。这极大程度的提升了我们的开发效率。也是React/Vue的核心思想和初衷。\n\n至于很多人都说，虚拟DOM会比操作原生DOM更快，这个说法并不全面。比如，**首次渲染或者所有节点都需要进行更新的时候。这个时候采用虚拟DOM会比直接操作原生DOM多一重构建虚拟DOM树的操作。这会更大的占用内存和延长渲染时间。**\n\n#### 举个例子\n\n**首次渲染👇不采用虚拟DOM的步骤**\n\n1. 浏览器接受绘制指令\n2. 创建所有节点\n\n**首次渲染👇采用虚拟DOM的步骤**\n\n1. 浏览器接受绘制指令\n2. 创建虚拟DOM\n3. 创建所有节点\n\n不难发现，在首次渲染的时候，采用虚拟DOM会比不采用虚拟DOM要多一个**创建虚拟DOM**的步骤。\n\n> 注意:虚拟DOM的存在，并不是免费的，比对新旧虚拟DOM树的差异会带来一定的性能开销。\n\n**虚拟DOM的优势在于我们更新节点时候。它会检查哪些节点需要更新。尽量复用已有DOM，减少DOM的删除和重新创建。并且这些操作我们是可以通过自己手动操作javascript底层api实现的。只是我们手动操作会非常耗费我们的时间和精力。这个工作由虚拟DOM代劳，会让我们开发更快速便捷。**\n\n#### 举个例子👇\n\n在采用虚拟DOM的前提下\n\n假设我们有节点A，下辖两个子节点B/C.\n\n然后我们删除了节点C\n\n这个时候会有两棵虚拟DOM树，\n\n一颗是修改前的，A->B/C。\n\n另一颗是修改后的A->B。\n\n`diff算法会去比对两颗树的差异`，然后发现A->B没有更改，那么A->B节点保留，C节点执行删除动作。\n\n那么，A->B两个节点的删除和创建渲染操作就被省略了。\n\n如果不采用虚拟DOM的话。使用JQ那时候的模板.\n\n我们可能会把A->B/C三个节点全部删除.\n\n再全都重新创建。而A->B是完全没有改动的。\n\n他们的删除和创建则完全不必要。\n\n### 框架的意义\n\n我们需要知道:不论是React还是Vue或者是Angular。这些框架本身，都是基于原生的基础上创造的。它们，底层依赖的还是javascript，并不是一门新的语言。在他们的底层逻辑下。我们使用框架所做出的一切行为，都会被框架转化为对原生DOM的操作。**框架，只是一个转化语法的工具。**\n\n既然原生DOM可以创造出这些框架。当然我们使用原生DOM自然是可以写出比这些框架更好的性能。\n\n但是:为什么对原生DOM进行操作的性能明明可以比使用框架更好。为什么大家都在使用框架，而没有人去直接对原生DOM进行操作。\n\n这背后涉及`成本`和`普适性`。\n\n如果我们直接去操作真实DOM,当然，我们可以做到在性能上比虚拟DOM更快。但问题是，技术水准能做到这个地步的人，又有多少人呢。不说比虚拟DOM快。即使是做到和虚拟DOM不分上下的性能，拥有这种水平的前端玩家，也是寥寥无几。**基于这样的客观情况下，框架的出现解决了这个问题。**\n\n框架存在的意义 : 在为我们提供只需要关注数据的前提下。框架本身已经做好了底层原理上的性能优化（包括但不限于,对DOM的调用,算法上的优化）已经是高度封装。这样就可以让我们使用一些简单的较为容易理解的技术去做我们原本做不到的事情。这其实就像调用网上的第三方包，某一个功能，自己写是写不出来，写出来性能也不会很好。但是同样的功能，我们去网上引入其他大神已经封装完成的第三方包。我们就会用，功能就可以实现并且性能上也过得去。\n\n如果让大家直接对DOM进行操作完成比框架更优秀的性能。这绝不是大多数人可以做到的。让大多数可以接受，框架需要做的，就是让大多数人使用尽量使用简单的技术，完成相对困难的操作。这是`普适性`。\n\n并且，如果完成同一个性能效果，需要我们去*精通原生javascript*和*学习框架上的一些简单的API和结构*。明显后者的学习成本更低。如果说使用框架我们所能完成的某一阶段的性能所需要的学习成本是2个月的话。那么学习javascript完成同一阶段的性能可能需要一年。\n\n框架的初衷就是让用户使用尽量简单的技术，完成相对复杂的工作并提升一定的性能 *（这其中包括但不限于:可维护性，可复用性，渲染效率等）* 。这样，即使我们的水平不是很高，使用框架以后。项目在性能上也能过得去。\n\n# 总结\n\n1. 虚拟DOM不一定会比操作原生DOM更快。\n2. 虚拟DOM的优势在于节点进行改动的时候尽量减少开销\n3. React从来没说过虚拟DOM会比原生更快。\n4. 框架的本质是提升开发效率，让我们的注意力更集中于数据\n",{"_58":296,"_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/207/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/207/timeline",{"_58":299,"_60":61,"_62":300,"_64":301,"_66":302,"_68":303,"_70":304,"_72":305,"_74":306,"_76":307,"_78":308,"_111":309,"_131":132,"_133":24,"_134":-5,"_135":322,"_137":323,"_159":195,"_153":325,"_155":326,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":327,"_170":328,"_176":329,"_178":330,"_190":332,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/206","https://api.github.com/repos/pro-collection/interview-question/issues/206/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/206/comments","https://api.github.com/repos/pro-collection/interview-question/issues/206/events","https://github.com/pro-collection/interview-question/issues/206",1640932956,"I_kwDOJGDC6c5hzqZc",206,"浏览器缓存中 Memory Cache 和 Disk Cache，有啥区别？",{"_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},[310,317],{"_70":311,"_72":312,"_58":313,"_117":314,"_119":315,"_121":24,"_122":316},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":318,"_72":319,"_58":320,"_117":321,"_119":129,"_121":24,"_122":130},5312712328,"LA_kwDOJGDC6c8AAAABPKmOiA","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8","字节跳动",[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_147":324,"_149":231,"_151":152,"_131":132,"_153":232,"_155":233,"_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-03-26T14:24:33Z","2023-04-12T13:47:16Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### Memory Cache 和 Disk Cache 的区别\r\n\r\n在浏览器缓存中，Memory Cache 和 Disk Cache 是两种不同的缓存类型，它们有以下区别：\r\n\r\n1. 存储位置：Memory Cache 存储在内存中，而 Disk Cache 存储在硬盘中。\r\n2. 读取速度：Memory Cache 读取速度比 Disk Cache 快，因为内存访问速度比硬盘访问速度快。\r\n3. 存储容量：Memory Cache 存储容量比较小，一般只有几十兆，而 Disk Cache 存储容量比较大，可以有数百兆或者更多。\r\n4. 生命周期：Memory Cache 生命周期短暂，一般只在当前会话中有效，当会话结束或者浏览器关闭时，Memory Cache 就会被清空；而 Disk Cache 生命周期比较长，数据可以被保存很长时间，即使浏览器关闭了，下次打开还可以使用。\r\n\r\n一般来说，浏览器在请求资源时，会优先从 Memory Cache 中读取，如果没有找到再去 Disk Cache 中查找。如果两种缓存中都没有找到，则会向服务器发送请求。如果需要强制刷新缓存，可以通过清空浏览器缓存来实现。\r\n\r\n### 什么情况下资源会缓存在 Memory Cache，什么情况下会缓存在 Disk Cache ?\r\n\r\n浏览器中的缓存是为了提高网页访问速度和减少网络流量而存在的。缓存分为 Memory Cache 和 Disk Cache 两种。\r\n\r\nMemory Cache 是浏览器内存缓存，资源会被缓存在内存中，由于内存读取速度快，所以 Memory Cache 的读取速度也较快。资源被缓存在 Memory Cache 中的情况有：\r\n\r\n1. 当前页面中通过或者 \r\n \r\n\r\n```\r\n\r\n这个例子中，在页面中创建了一个 `canvas` 元素，并设置其宽高和样式，将其放在页面最上方。在点击“截图”按钮时，通过 `toDataURL()` 方法将整个页面的截图转换为 base64 编码的图片数据，并打印到控制台上。",{"_58":808,"_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/188/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/188/timeline",{"_58":811,"_60":61,"_62":812,"_64":813,"_66":814,"_68":815,"_70":816,"_72":817,"_74":818,"_76":819,"_78":820,"_111":821,"_131":132,"_133":24,"_134":-5,"_135":823,"_137":824,"_159":195,"_153":826,"_155":827,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":828,"_170":829,"_176":830,"_178":831,"_190":833,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/187","https://api.github.com/repos/pro-collection/interview-question/issues/187/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/187/comments","https://api.github.com/repos/pro-collection/interview-question/issues/187/events","https://github.com/pro-collection/interview-question/issues/187",1640837439,"I_kwDOJGDC6c5hzTE_",187,"前端单页应用 History 路由模式，需要如何配置 nginx？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[822],{"_70":280,"_72":281,"_58":282,"_117":283,"_119":284,"_121":24,"_122":285},[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_147":825,"_149":231,"_151":152,"_131":132,"_153":232,"_155":233,"_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-03-26T09:30:59Z","2023-04-03T01:27:28Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"前端单页应用使用 History 路由模式，需要将路由的控制交给前端，而不是后端处理，因此需要配置 nginx 让其将所有请求都指向 index.html 页面，让前端来处理路由。\n\n具体配置可以参考以下 nginx 配置：\n\n```bash\nbashCopy codeserver {\n listen 80;\n server_name example.com; # 域名或 IP 地址\n\n location / {\n root /path/to/your/app; # 项目根目录\n index index.html;\n try_files $uri $uri/ /index.html; # 将所有请求都指向 index.html 页面\n }\n}\n```\n\n以上配置中，`try_files` 指令会尝试将请求映射到对应的文件，如果找不到，则会将请求转发到 `/index.html` 页面，由前端来处理路由。同时，`root` 指令需要指向前端应用的根目录。",{"_58":832,"_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/187/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/187/timeline",{"_58":835,"_60":61,"_62":836,"_64":837,"_66":838,"_68":839,"_70":840,"_72":841,"_74":842,"_76":843,"_78":844,"_111":845,"_131":132,"_133":24,"_134":-5,"_135":847,"_137":848,"_159":152,"_153":850,"_155":851,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":852,"_170":853,"_176":854,"_178":855,"_190":857,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/186","https://api.github.com/repos/pro-collection/interview-question/issues/186/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/186/comments","https://api.github.com/repos/pro-collection/interview-question/issues/186/events","https://github.com/pro-collection/interview-question/issues/186",1640836952,"I_kwDOJGDC6c5hzS9Y",186,"中间人攻击是什么？",{"_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},[846],{"_70":311,"_72":312,"_58":313,"_117":314,"_119":315,"_121":24,"_122":316},[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_147":849,"_149":231,"_151":152,"_131":132,"_153":232,"_155":233,"_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-03-26T09:29:08Z","2025-02-09T15:08:50Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"中间人攻击（Man-in-the-Middle Attack，简称MITM）是一种常见的网络攻击手段，以下是关于它的详细介绍：\n\n### 定义\n中间人攻击是攻击者在通信双方不知情的情况下，插入到通信链路中间，拦截、窃听、篡改甚至伪造通信双方之间传输的数据，从而达到获取敏感信息、干扰通信或进行其他恶意操作的目的。攻击者就像处在通信双方中间的“中间人”，使得通信双方误以为是在直接与对方通信，而实际上他们之间的通信都经过了攻击者的处理。\n\n### 攻击方式\n- **嗅探与窃听**：攻击者通过将自己的设备接入目标网络，使用嗅探工具监听网络中传输的数据包。例如在未加密的公共Wi-Fi网络中，攻击者可以轻松获取用户发送和接收的信息，包括登录凭证、聊天记录、电子邮件内容等。\n- **会话劫持**：攻击者在用户与目标服务器建立会话的过程中，窃取用户的会话标识，如会话ID。一旦获取到有效的会话标识，攻击者就可以冒充用户与服务器进行交互，执行用户权限内的各种操作，如转账、修改密码等。\n- **DNS欺骗**：攻击者篡改域名系统（DNS）服务器的记录，将用户请求的域名解析到恶意服务器的IP地址。当用户访问该域名时，实际上会连接到攻击者控制的服务器，攻击者可以获取用户输入的信息，或者向用户提供伪造的内容。\n- **ARP欺骗**：在局域网中，攻击者通过发送虚假的地址解析协议（ARP）消息，将自己的MAC地址与目标设备的IP地址进行绑定，使得局域网内的其他设备将发送给目标设备的数据发送到攻击者的设备上，从而实现对数据的拦截和篡改。\n\n### 攻击场景\n- **公共网络环境**：在咖啡馆、机场等公共场所的免费Wi-Fi网络中，用户连接到网络后，攻击者可能会搭建一个与正常网络名称相似的恶意Wi-Fi热点，诱导用户连接。一旦用户连接到恶意热点，攻击者就可以实施中间人攻击，窃取用户的敏感信息。\n- **企业网络内部**：攻击者可能会利用企业网络中的漏洞或弱密码，入侵企业内部网络，然后在内部网络中实施中间人攻击，获取企业的商业机密、员工的个人信息等。\n- **移动设备通信**：攻击者可以通过伪造基站或利用移动网络中的漏洞，拦截移动设备与基站之间的通信，获取用户的通话内容、短信信息、上网数据等。\n\n### 防范措施\n- **使用加密通信**：在网络通信中，使用SSL/TLS等加密协议对数据进行加密传输，使攻击者即使拦截到数据也难以解密查看内容。\n- **验证身份**：在建立连接时，对通信双方的身份进行严格验证，确保与合法的服务器或用户进行通信。\n- **更新系统和软件**：及时更新操作系统、浏览器、应用程序等软件，修复可能存在的安全漏洞，降低被中间人攻击的风险。\n- **注意网络环境**：避免连接不明来源的Wi-Fi网络，尤其是那些没有密码或名称可疑的网络。在公共网络中，尽量使用VPN等安全连接方式。\n\n",{"_58":856,"_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/186/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/186/timeline",{"_58":859,"_60":61,"_62":860,"_64":861,"_66":862,"_68":863,"_70":864,"_72":865,"_74":866,"_76":867,"_78":868,"_111":869,"_131":132,"_133":24,"_134":-5,"_135":877,"_137":878,"_159":152,"_153":880,"_155":881,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":882,"_170":883,"_176":884,"_178":885,"_190":887,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/185","https://api.github.com/repos/pro-collection/interview-question/issues/185/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/185/comments","https://api.github.com/repos/pro-collection/interview-question/issues/185/events","https://github.com/pro-collection/interview-question/issues/185",1640836314,"I_kwDOJGDC6c5hzSza",185,"TypeScript is 这个关键字是做什么呢？",{"_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},[870],{"_70":871,"_72":872,"_58":873,"_117":874,"_119":875,"_121":24,"_122":876},5232527330,"LA_kwDOJGDC6c8AAAABN-IH4g","https://api.github.com/repos/pro-collection/interview-question/labels/TypeScript","TypeScript","258B51","TypeScript 语法部分",[],{"_58":349,"_68":350,"_62":351,"_70":352,"_72":353,"_74":195,"_76":354,"_122":355,"_147":879,"_149":357,"_151":152,"_131":132,"_153":358,"_155":359,"_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-03-26T09:26:44Z","2023-03-26T09:26:45Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"`is` 是 TypeScript 中的一个关键字，用于创建类型保护。在 TypeScript 中，类型保护是一种用于确定变量是否符合某种类型的方法。当我们使用 `is` 关键字创建一个类型保护时，它会在运行时对变量进行判断，然后返回一个布尔值。\n\n具体来说，我们可以通过定义一个返回值为布尔类型的函数，并在函数内部进行类型判断来创建类型保护。比如：\n\n```csharp\ncsharpCopy codefunction isString(value: any): value is string {\n return typeof value === 'string';\n}\n```\n\n在这个例子中，我们定义了一个名为 `isString` 的函数，它接收一个任意类型的参数 `value`，并通过 `typeof` 运算符判断 `value` 是否为字符串。如果是字符串，函数返回 `true`，否则返回 `false`。\n\n使用时，我们可以通过将变量传递给 `isString` 函数来判断变量是否为字符串类型：\n\n```rust\nrustCopy codeconst str = 'hello';\nif (isString(str)) {\n console.log(str.length);\n}\n```\n\n在这个例子中，由于 `str` 是字符串类型，所以 `isString(str)` 返回 `true`，`if` 语句内的代码会被执行，输出字符串的长度。如果 `str` 不是字符串类型，`isString(str)` 返回 `false`，`if` 语句内的代码不会被执行。\n\n这样，在使用变量之前进行类型保护，可以避免在运行时出现类型错误，提高代码的健壮性。",{"_58":886,"_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/185/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/185/timeline",{"_58":889,"_60":61,"_62":890,"_64":891,"_66":892,"_68":893,"_70":894,"_72":895,"_74":896,"_76":897,"_78":898,"_111":899,"_131":132,"_133":24,"_134":-5,"_135":901,"_137":902,"_159":152,"_153":904,"_155":905,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":906,"_170":907,"_176":908,"_178":909,"_190":911,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/184","https://api.github.com/repos/pro-collection/interview-question/issues/184/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/184/comments","https://api.github.com/repos/pro-collection/interview-question/issues/184/events","https://github.com/pro-collection/interview-question/issues/184",1640835602,"I_kwDOJGDC6c5hzSoS",184,"前端如何防止加载外域脚本？",{"_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},[900],{"_70":311,"_72":312,"_58":313,"_117":314,"_119":315,"_121":24,"_122":316},[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_147":903,"_149":231,"_151":152,"_131":132,"_153":232,"_155":233,"_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-03-26T09:24:28Z","2023-03-26T09:24:29Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"前端可以通过以下方式防止加载外域脚本：\n\n1. 使用 Content Security Policy (CSP)：CSP 是一个 HTTP 头，可以限制页面可以从哪些源加载资源。通过 CSP，可以禁止加载外域脚本，从而防止 XSS 攻击等安全问题。\n\n2. 使用 Subresource Integrity (SRI)：SRI 是一个浏览器功能，可以确保在加载外部资源时，它们的内容没有被篡改过。通过在 script 标签中添加 integrity 属性，可以指定资源的校验和，浏览器会校验资源是否与 integrity 值匹配，从而确保资源没有被篡改过。\n\n3. 避免使用动态脚本加载：使用 document.createElement('script') 创建 script 元素，并手动设置其 src 属性，可以避免使用 eval() 动态执行脚本。动态加载脚本的方式可能会受到中间人攻击，从而加载恶意脚本。\n\n4. 避免使用不安全的协议加载资源：使用 HTTPS 加载资源可以确保资源在传输过程中不会被篡改。避免使用 HTTP 或者 file 协议加载资源，这些协议容易受到中间人攻击。\n\n综上，前端可以通过以上方式防止加载外域脚本，提高应用程序的安全性。",{"_58":910,"_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/184/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/184/timeline",{"_58":913,"_60":61,"_62":914,"_64":915,"_66":916,"_68":917,"_70":918,"_72":919,"_74":920,"_76":921,"_78":922,"_111":923,"_131":132,"_133":24,"_134":-5,"_135":925,"_137":926,"_159":195,"_153":939,"_155":940,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":941,"_170":942,"_176":943,"_178":944,"_190":946,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/183","https://api.github.com/repos/pro-collection/interview-question/issues/183/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/183/comments","https://api.github.com/repos/pro-collection/interview-question/issues/183/events","https://github.com/pro-collection/interview-question/issues/183",1640833691,"I_kwDOJGDC6c5hzSKb",183,"HTTP/3 是基于 UDP 的协议，那么他是如何保障安全性的？",{"_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},[924],{"_70":311,"_72":312,"_58":313,"_117":314,"_119":315,"_121":24,"_122":316},[],{"_58":927,"_68":928,"_62":929,"_70":930,"_72":931,"_74":932,"_76":933,"_122":934,"_147":935,"_149":936,"_151":152,"_131":132,"_153":937,"_155":938,"_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-03-26T09:18:32Z","2024-07-05T09:52:10Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"HTTP/3是基于UDP的协议，因此在设计时需要考虑安全性问题。为了保障安全性，HTTP/3使用了一个新的加密协议——QUIC Crypto。\n\nQUIC Crypto使用了一种名为\"0-RTT安全连接\"的机制，允许客户端在第一次请求时就可以建立安全连接，从而减少连接建立的延迟。此外，HTTP/3还使用了数字证书来验证服务器身份，以确保通信的安全性。\n\n在HTTP/3中，每个数据包都使用一个独特的标识符（Connection ID）来标识。这个标识符会在每个数据包中包含，以便服务器能够识别它们。这种方式可以防止攻击者进行连接欺骗，从而提高了安全性。\n\n另外，HTTP/3还使用了一些其他的技术来提高安全性，如0-RTT加密、零轮延迟、源地址验证、密钥派生和更新等。\n\n综上所述，HTTP/3采用了一系列安全机制来保护通信安全，使其能够在基于UDP的网络环境下运行，并提供更好的性能和安全性。",{"_58":945,"_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/183/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/183/timeline",{"_58":948,"_60":61,"_62":949,"_64":950,"_66":951,"_68":952,"_70":953,"_72":954,"_74":955,"_76":956,"_78":957,"_111":958,"_131":132,"_133":24,"_134":-5,"_135":960,"_137":961,"_159":152,"_153":963,"_155":964,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":965,"_170":966,"_176":967,"_178":968,"_190":970,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/182","https://api.github.com/repos/pro-collection/interview-question/issues/182/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/182/comments","https://api.github.com/repos/pro-collection/interview-question/issues/182/events","https://github.com/pro-collection/interview-question/issues/182",1640832289,"I_kwDOJGDC6c5hzR0h",182,"http3 QUIC 是什么协议？",{"_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},[959],{"_70":311,"_72":312,"_58":313,"_117":314,"_119":315,"_121":24,"_122":316},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":962,"_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-03-26T09:13:35Z","2023-03-26T09:13:40Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"HTTP/3（或称为HTTP-over-QUIC）是一个基于QUIC协议的新版本的HTTP协议。QUIC（Quick UDP Internet Connections）是由Google设计的一个基于UDP协议的传输层协议，旨在解决HTTP/2协议存在的一些问题。\n\nHTTP/3中引入了QUIC的一些特性，如0-RTT连接建立、基于UDP的传输、数据流多路复用和快速恢复等，这些特性有助于提高性能和安全性。与HTTP/2相比，HTTP/3采用了新的二进制编码协议（QUIC Crypto）来加密和验证数据，以提供更好的安全性。\n\n此外，HTTP/3还可以更好地适应现代网络环境下的多元化应用需求。由于QUIC协议基于UDP协议，因此可以更好地适应移动网络和高丢包率网络等不稳定的网络环境。同时，HTTP/3可以更好地支持多媒体内容和实时通信等应用场景。",{"_58":969,"_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/182/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/182/timeline",{"_58":972,"_60":61,"_62":973,"_64":974,"_66":975,"_68":976,"_70":977,"_72":978,"_74":979,"_76":980,"_78":981,"_111":982,"_131":132,"_133":24,"_134":-5,"_135":984,"_137":985,"_159":152,"_153":987,"_155":988,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":989,"_170":990,"_176":991,"_178":992,"_190":994,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/181","https://api.github.com/repos/pro-collection/interview-question/issues/181/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/181/comments","https://api.github.com/repos/pro-collection/interview-question/issues/181/events","https://github.com/pro-collection/interview-question/issues/181",1640831977,"I_kwDOJGDC6c5hzRvp",181,"http1.1 持久连接和 http2 的多路复用有什么区别？",{"_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},[983],{"_70":311,"_72":312,"_58":313,"_117":314,"_119":315,"_121":24,"_122":316},[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_147":986,"_149":231,"_151":152,"_131":132,"_153":232,"_155":233,"_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-03-26T09:12:29Z","2023-03-26T09:12:30Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"HTTP/1.1和HTTP/2都是HTTP协议的不同版本，在网络传输和性能方面有很大的差别。\n\nHTTP/1.1使用的是“管线化请求”和“持久连接”来提高性能，而HTTP/2则引入了更多的特性，其中最重要的特性是“多路复用”。\n\n“管线化请求”是HTTP/1.1提出的一种优化方法，它可以让浏览器同时发出多个请求，从而避免了HTTP/1.1中因为请求阻塞导致的性能问题。但是，由于HTTP/1.1的“管线化请求”存在“队头阻塞”（head-of-line blocking）问题，即前面一个请求没有得到响应时，后面的请求必须等待，导致性能并没有得到很大提升。\n\n“持久连接”是HTTP/1.1中另一种提高性能的方法，它可以在一个TCP连接中传输多个HTTP请求和响应，避免了每个请求都需要建立和关闭连接的开销。但是，由于HTTP/1.1中的“持久连接”是按顺序发送请求和响应的，所以依然存在“队头阻塞”的问题。\n\nHTTP/2则引入了“多路复用”（multiplexing）这一特性，可以在一个TCP连接上同时传输多个HTTP请求和响应，避免了“队头阻塞”问题。它使用二进制分帧（binary framing）技术将HTTP请求和响应分成多个帧（frame），并使用流（stream）来标识不同的请求和响应，从而实现了更高效的网络传输和更低的延迟。此外，HTTP/2还引入了头部压缩（header compression）和服务器推送（server push）等特性。\n\n因此，HTTP/2的多路复用比HTTP/1.1的管线化请求和持久连接更为高效、灵活，能够更好地支持现代Web应用的性能要求。",{"_58":993,"_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/181/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/181/timeline",{"_58":996,"_60":61,"_62":997,"_64":998,"_66":999,"_68":1000,"_70":1001,"_72":1002,"_74":1003,"_76":1004,"_78":1005,"_111":1006,"_131":132,"_133":24,"_134":-5,"_135":1008,"_137":1009,"_159":195,"_153":1011,"_155":1012,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1013,"_170":1014,"_176":1015,"_178":1016,"_190":1018,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/180","https://api.github.com/repos/pro-collection/interview-question/issues/180/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/180/comments","https://api.github.com/repos/pro-collection/interview-question/issues/180/events","https://github.com/pro-collection/interview-question/issues/180",1640831366,"I_kwDOJGDC6c5hzRmG",180,"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},[1007],{"_70":311,"_72":312,"_58":313,"_117":314,"_119":315,"_121":24,"_122":316},[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_147":1010,"_149":231,"_151":152,"_131":132,"_153":232,"_155":233,"_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-03-26T09:10:32Z","2023-03-26T09:16:48Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"HTTP协议的不同版本的主要特点如下表所示：\n\n|版本|发布时间|主要特点|\n|---|---|---|\n|HTTP/0.9|1991年|只支持GET方法，没有Header和Body|\n|HTTP/1.0|1996年|引入Header、POST方法、响应码、缓存等特性|\n|HTTP/1.1|1999年|引入持久连接、管道化请求、分块传输编码、Host头、缓存控制等特性|\n|HTTP/2|2015年|引入二进制分帧、头部压缩、流量控制、多路复用等特性|\n|HTTP/3|2021年|引入QUIC协议，改进网络传输性能|\n\n\n需要注意的是，HTTP/1.x和HTTP/2都支持TLS加密传输，即HTTPS协议。HTTP/3则是基于QUIC协议的，使用TLS 1.3进行加密传输。",{"_58":1017,"_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/180/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/180/timeline",{"_58":1020,"_60":61,"_62":1021,"_64":1022,"_66":1023,"_68":1024,"_70":1025,"_72":1026,"_74":1027,"_76":1028,"_78":1029,"_111":1030,"_131":132,"_133":24,"_134":-5,"_135":1032,"_137":1033,"_159":152,"_153":1035,"_155":1036,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1037,"_170":1038,"_176":1039,"_178":1040,"_190":1042,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/179","https://api.github.com/repos/pro-collection/interview-question/issues/179/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/179/comments","https://api.github.com/repos/pro-collection/interview-question/issues/179/events","https://github.com/pro-collection/interview-question/issues/179",1640821953,"I_kwDOJGDC6c5hzPTB",179,"[React] useEffect的第二个参数，如何判断依赖是否发生变化？",{"_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},[1031],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_147":1034,"_149":231,"_151":152,"_131":132,"_153":232,"_155":233,"_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-03-26T08:36:21Z","2023-03-26T08:37:57Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"`useEffect`的第二个参数是一个依赖数组，用于判断副作用函数的依赖是否发生变化。React使用JavaScript的`Object.is`方法来判断依赖项是否发生变化。在比较依赖项时，React首先检查依赖项的值是否相等。如果依赖项的值是引用类型，React会比较它们的引用地址，而不是比较它们的属性值。因此，在比较引用类型时，即使对象具有相同的属性值，但它们的引用地址不同，React仍然认为它们是不同的。\n\n需要注意的是，如果依赖项是一个数组或对象，由于它们是引用类型，因此即使数组或对象中的元素或属性没有发生变化，但数组或对象本身的引用地址发生变化，也会导致React重新执行副作用函数。在这种情况下，我们可以使用`useCallback`和`useMemo`来缓存回调函数和计算结果，以便避免在依赖数组发生变化时重新计算和创建。",{"_58":1041,"_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/179/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/179/timeline","pagination",{"_1045":1046,"_167":1047},"value",29,32,"actionData","errors"]