知鸦日报2026-03-06

Rolldown是Vite未来的高性能JavaScript打包器，其核心流程分为模块扫描、符号链接和代码生成三阶段。代码生成采用"保留模式"和"普通模式"两种策略，重点在于智能分块算法：通过位掩码标记模块可达性，先处理用户定义的手动分块，再自动优化剩余模块，最后合并冗余代码。整个过程兼顾开发者控制权与打包性能，能显著减少代码体积并提升加载速度。

CSS的attr()函数结合巧妙技巧，使数字能自动填入HTML元素，实现“里程表”般的滚动效果。通过mod()和sibling-index()提取并定位数字，动态显示数值变化，如在线用户数或价格追踪。动画效果模仿数字上下滚动，调整时间延迟可控制速度。无需JavaScript，CSS即可完成数字的自动填充与动态展示，简化数值变化的视觉设计。

本文介绍了React组件《HighTable》在处理数十亿行数据时的五项关键技术。通过懒加载、表格切片、无限像素、双滚动模式和两步随机访问，实现了高性能和良好可访问性。这些技术充分利用原生HTML元素，确保用户在浏览器中无缝浏览大规模数据。

开发者常通过抽象化代码提升复用性，React中自定义钩子是常见手段。然而，过度抽象可能带来类型推断和维护难题。TanStack Query的queryOptionsAPI为此提供了更简洁的解决方案，不仅能跨组件共享查询配置，还能保持类型推断的完整性，简化了复杂场景下的代码管理。建议优先使用queryOptions作为抽象基石，而非直接依赖自定义钩子。

border-shape 是一项全新的 CSS 属性，允许开发者自定义元素的边框形状，突破了传统矩形边框的限制。它不仅支持基本形状如圆形和多边形，还能通过 shape() 函数绘制复杂路径，甚至支持 SVG 路径数据。与 corner-shape 不同，border-shape 能够实现更复杂的非标准形状，如工具提示和波浪边框。目前已在 Chrome Canary 146+ 中开启实验性功能进行测试，为网页设计带来了更多可能性。

原来CSS里不只有scale能缩放元素，还有个冷门属性zoom更硬核！scale只是视觉放大，元素实际占位不变；而zoom会连布局尺寸一起缩放。兼容性居然还不错呢~不过要注意别随便动画化它，毕竟触发重排可不是闹着玩的。某些特殊场景下这小属性或许能救命！

列表样式设计应注重与文本的协调性。无序列表可使用padding对齐项目符号，有序列表需预留更多空间。通过list-style-type和list-style-image可自定义符号或图片作为项目符号。::marker伪元素允许直接修改符号颜色和字体。@counter-style规则支持定义自定义编号序列，跨浏览器兼容性良好。自定义标记框可通过::before伪元素实现，完全控制标记位置和样式。