Resource Timing 缓冲区管理 - 处理大量资源计时
设置资源计时缓冲区大小,监听 resourcetimingbufferfull 事件并处理。
UD5工具箱
直观对比有缓存与无缓存的执行效率差异,深入理解记忆化如何通过空间换时间优化递归计算
记忆化是一种优化技术,通过缓存函数调用结果来加速后续相同输入的计算。当函数被重复调用时,直接从缓存返回结果而非重新计算,以空间换时间。与广义缓存不同,记忆化通常指函数级别的结果缓存,且缓存键由函数参数自动生成。
记忆化本质上是自顶向下的动态规划实现方式。动态规划通常用自底向上的迭代填表法,而记忆化用递归+缓存实现相同效果。两者都能将斐波那契计算从O(2ⁿ)优化到O(n)。记忆化更直观,动态规划迭代版本更节省栈空间。
适合纯函数(相同输入始终产生相同输出)、计算昂贵的函数、重复调用频率高的场景。典型应用:递归算法优化、API响应缓存(短时内)、复杂数学计算、数据格式转换、React的useMemo/useCallback、Vue的计算属性等。
①内存消耗:缓存会占用内存,需设置缓存上限或过期策略(如LRU淘汰);②不适用非纯函数:有副作用或依赖外部状态的函数不能记忆化;③缓存失效:当底层数据变化时需手动清除;④过度优化:对简单快速函数使用记忆化可能反而增加开销。
通用模式:创建高阶函数,内部使用Map或普通对象存储缓存。键通常由JSON.stringify(args)生成。也可使用闭包保存缓存。对于递归函数,需确保递归调用的是记忆化版本自身。现代框架如React提供useMemo、memo等内置记忆化API。
记忆化是缓存的一种特殊形式。广义缓存可存储任意数据、有过期时间、可跨请求共享。记忆化特指函数返回值的缓存,缓存键自动由参数生成,通常存在于函数作用域内。记忆化更细粒度,对开发者更透明,而缓存更通用、更灵活。
// 通用记忆化高阶函数
function memoize(fn) {
const cache = new Map();
const memoized = function(...args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key); // 缓存命中 🎯
}
const result = fn.apply(this, args);
cache.set(key, result); // 存入缓存
return result;
};
memoized.cache = cache;
return memoized;
}
设置资源计时缓冲区大小,监听 resourcetimingbufferfull 事件并处理。
对localStorage和IndexedDB的读写操作进行计时,比较两者性能差异。
输入第三方域名,生成<link rel='preconnect'>或dns-prefetch等资源提示标签。
根据资源类型和加载场景,推荐使用preload、prefetch还是preconnect标签。
通过PerformanceObserver获取首次绘制(FP)和首次内容绘制(FCP)时间。
计算Whirlpool算法哈希值,输出512位高强度摘要,用于数据完整性校验和密码学实践。
添加多个周期任务和一次性延迟任务,在时间轴上观察其调用过程,学习JS定时器。
模拟 prefers-contrast: more/less 媒体特性,预览页面在高对比度模式下的视觉效果。
拖放小图片或文本文件,转换为可嵌入HTML/CSS的Data URI,设置MIME类型。
进行比特、字节、千字节、兆字节、吉字节等数字存储单位的快速换算,支持十进制和二进制前缀。
使用Argon2id算法生成密码哈希,配置内存/迭代/并行度,提升暴力破解难度,前沿安全实践。
输入同一数据源的两种 API 响应,并排展示结构差异,理解两种风格的数据组织。
使用现代浏览器文件系统访问API打开、编辑并保存本地文件,演示权限流程。
通过滑块调节LCP、FID、CLS等指标值,实时显示对应的谷歌核心网页指标评分与颜色。
实时查看当前域名下所有localStorage键值对,支持编辑、删除和导出,前端调试利器。
提取当前页面Performance API的navigation、resource与paint数据,可视化展示加载各阶段时长。
上传或粘贴 source map 文件,展示原始代码与编译后代码的对应关系,辅助调试。
将上传的小文件或文本转换为可直接嵌入HTML/CSS的data: URI格式。
输入密码和盐值,展示如何通过SHA-256等生成存储的哈希摘要,教育用途。
为外部 JavaScript/CSS 文件计算 SHA-256/384/512 哈希并生成完整的 integrity 属性代码。
展示 navigator.connection 提供的有效连接类型(4g/3g/2g)、下行速度和往返时间。
检查比特币地址(Base58/bech32)的格式是否正确,以及校验和是否匹配。
粘贴 Prometheus 指标文本,解析为结构化表格,并支持基本过滤和排序。
添加进程(到达时间、运行时间),并行动画演示先来先服务、短作业优先、轮转等调度算法的执行。
输入IP地址和子网掩码或CIDR前缀,计算网络地址、广播地址、可用IP范围及主机数量。
拖拽改变容器宽度,观察使用container-type和@container规则的元素如何自适应样式。
设定根元素字号(默认16px),快速将rem值转换为px或反向,精准控制布局尺寸。
上传疑似隐写图片,提取每个像素的最低位,尝试恢复隐藏的文本或数据。
添加楼层请求,观察电梯在不同调度算法下的移动轨迹和等待时间。
输入标题与描述,模拟Google搜索结果片段,检查截断与关键词效果。