70场面试，复盘我遇到的有趣问题（一）
今天回顾一下我遇到的一些有价值的问题，结合我自己的一些理解对这些问题尝试解答一下，相信对大家一些知识的理解也会有些帮助（有问题的话欢迎指出）。
有用的话感谢大家点赞收藏送花~
1.（滴滴提前批二面）Vue开启了keep alive之后会经历哪些生命周期？缓存了什么东西？
这个点我自己是没有仔细思考过的，当时面试官提问vue的生命周期，我提到了Vue开启keep alive前后生命周期的不同，面试官拓展的问了这个问题。
背八股的时候都背过，使用<keep-alive></keep-alive>组件包裹后可以在切换路由的时候不必销毁组件。并且会多出两个生命周期：activated和deactivated。其中activated在组件渲染的时候执行，deactivated在组件隐藏时执行，因此将这两个生命周期对比mounted和beforeDestory来学习。组件在初次渲染的时候会经历从beforeCreate到mounted这整个阶段，在后续切换的过程中则只会经历activated，随后的beforeUpdate和updated都会经历，隐藏时经历deactivated，最后销毁的时候才会经历beforeDestory和destoryed。
那么缓存了什么？我们知道在mounted阶段，虚拟DOM转为真实DOM，此时data，method，虚拟DOM都有了；而activated阶段可以不经历前面的钩子，直接挂载DOM，说明keep-alive缓存了虚拟DOM，并且还有所有的数据/方法，也就是缓存了组件实例。
如果面试阶段没有见过这个题，可以从每个生命周期干了什么开始联想，其中走到mounted阶段拥有了什么，那么actived阶段就也会有这些。
2.（4399一面）http1.1的情况下，一个网页的图片是一张一张加载还是一批一批加载的？
首先回顾一下http1.1的特性：
● 默认长连接，新增响应头Connection：keep-alive字段，保持TCP连接不断开
● 管道化：基于上面长连接的基础，管道化可以不等第一个请求响应继续发送后面的请求，但响应的顺序还是按照请求的顺序返回
● 缓存处理：新增catch-control字段
● 断点传输机制。文件传输时如果遇到网络故障，可以从已经上传/下载好的地方继续请求，不用从头开始
其中第二点提到的管道化基本可以解答整个问题，虽然可以发送多个请求，但是返回的顺序还是有序的。因此虽然TCP最大连接数有6~8个，但是返回时还是顺序返回的。
但是需要注意，如果严谨一点的话还是要考虑一下预加载的情况。例如，当浏览器解析到 HTML 中的<link rel="prefetch">标签时，它可能会提前发起对指定资源（包括图片）的请求，这样在真正需要显示该图片时，可能已经加载完成或者部分加载，从而在一定程度上出现看似一批加载的情况。
3.（Minimax一面）eval和new Function的this指向问题：
eval的this指向可以看这篇，很详细：https://ayk.moe/articles/javascript-change-this-in-eval-function/index.html
简单的说：eval函数只要是在全局直接运行或者是通过一个函数调用执行、作为对象属性被调用执行这种间接的执行方式，他的指向都是全局作用域。他不能直接被call/bind/apply改变this指向，改变的思路是在eval外面包一层函数，改变外面这个函数的this指向。
new Function：使用 new Function 创建的函数，它的 [[Environment]] 指向全局词法环境，而不是函数所在的外部词法环境。因此，我们不能在 new Function 中直接使用外部变量。
如果你对这块不熟悉，来看看这个：https://zh.javascript.info/new-function
4.（Minimax二面）React：在if else里书写hooks，为什么不可以？
我用我自己比较容易理解的话术来简述一下关键原因，这里面的具体细节还是比较复杂的，有兴趣的牛u可以找找资料了解一下。
react的fiber树有两颗：
current fiber树: 当完成一次渲染之后，会产生一个current树,current会在commit阶段替换成真实的Dom树（可以看成虚拟dom转真实dom）。
workInProgress fiber树: 即将调和渲染的 fiber 树。再一次新的组件更新过程中，会从current复制一份作为workInProgress,更新完毕后，将当前的workInProgress树赋值给current树。
workInProgress tree上有一个memoizedState属性，在函数组件中，memoizedState在一次调和渲染过程中，以链表的形式存放hooks信息。
每一个hook函数执行，都会产生一个hook对象，里面存放了hook的当前信息，然后会以链表的形式串联每个hook对象，并赋值给workInProgress的memoizedState。
每次组件更新的时候，会先复制一份current tree到workInProgress tree，此时在workInProgress上进行更新。一旦在条件语句中声明hooks，在下一次函数组件更新，hooks链表结构，将会被破坏（某个节点可能被跳过），current树的memoizedState缓存hooks信息，和当前workInProgress不一致，如果涉及到读取state等操作，就会发生异常。
以上很多是自己的理解，可能讲述不准确但有助于自己理解，欢迎评论区留言指出错误~
#面经##前端##滴滴##4399##minimax##24届软开秋招面试经验大赏#
类似资料：