奇舞周刊第 426 期：LRU 缓存 keep-alive 实现原理

记得点击文章末尾的“ 阅读原文 ”查看哟~

下面先一起看下本期周刊 摘要 吧~

奇舞推荐

■ ■ ■

 LRU 缓存 keep-alive 实现原理

keep-alive 是 Vue.js 的一个内置组件。它能够将不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实 DOM 中，也不会出现在父组件链中。简单的说，keep-alive 用于保存组件的渲染状态，避免组件反复创建和渲染，有效提升系统性能。keep-alive 的 max 属性，用于限制可以缓存多少组件实例，一旦这个数字达到了上限，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉，而这里所运用到的缓存机制就是 LRU 算法。

 通过 Performance 证明，网页的渲染是一个宏任务

本文以论证渲染是否为宏任务作为切入点，讲解了 Chrome Devtools 里的 Performance 工具的使用。

你真的了解什么是随机吗？

首先我们要了解一个事实，现在的所有计算机架构，是无法产生真随机数的。未来基于量子原理的量子计算机可以产生符合量子物理定义的“真随机”，但目前离实用还非常遥远。

技术实践

■ ■ ■

 如何做前端单元测试

对于现在的前端工程，一个标准完整的项目，通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够，因此我写了这边文章，一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例，让你掌握写单元测试实践能力。

 Node.js 进程、线程调试和诊断的设计和实现

进程和线程的方案类似，但是也有一些不一样的地方，本文将会分开介绍，另外本文介绍的是对业务代码无侵入的方案，通过命令行开启 Inspector 端口或者在代码里通过 Inspector 模块打开端口在很多场景下并不适用，我们需要的是一种动态控制的能力。

听说你还不会虚拟列表？原谅我来晚了

有时我们会遇到一些业务场景，要展示的列表很长，且不能使用分页的方式，如果一次性把数据全部渲染到页面，浏览器将变得非常卡顿，因为渲染 dom 需要耗费大量时间。虚拟列表就是对长列表的一种优化方式，通过只渲染可视区域数据，大大提高渲染性能。

拓展边界

■ ■ ■

 我想给元宇宙泼点冷水

硅谷 30 多年来一直在期待着虚拟现实，并不断遇到同样的问题：人们大多喜欢现实。

The Gap—开发和设计之间的鸿沟

创造那些超棒的网站或应用程序真的会令人身心愉悦。产品的各个部分整合在一起的时候，那真的太令人震撼了。特别是当你清楚，参与工程的并非只有你一人，那你会更加振奋。顶级的团队协作，可以让团队成员们朝着一个共同的目标携手前进。但是，我想大家应该都知道，Web 设计师和 Web 开发者常常出现看法不一致的情况，他们往往有不一致的目标，从而对产品产生不同的影响。一些设计工程师 (Design Engineer) 称之为鸿沟 (gap)。

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。