呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #WASM #JavaScript #DOM
When Is WebAssembly Going to Get DOM Support?

AI 摘要:本文深入分析了 WebAssembly(WASM)与 Web 平台集成特别是直接访问 DOM(文档对象模型)的现状和未来可能性。作者强调,Wasm 自身并没有也可能不会获得直接 DOM 支持,但它自诞生以来就通过需要适量 JavaScript glue code(粘合代码)间接地实现了对 DOM 及其他 Web API 的访问。通过工具链和标准的持续推进,Wasm 集成会更加高效,但对纯“Wasm 直接操作 DOM”并无迫切需求或业界共识。开发重点应聚焦于优化性能和开发体验,而不是消除一切 JavaScript,Wasm 与 JavaScript 的共存将长期持续。


author Daniel Ehrenberg
#优质博文 #前端 #DOM #javascript #新特性
Move elements around the DOM while preserving their state with moveBefore

AI 摘要:Chrome 133 中的新方法 Node.prototype.moveBefore (于 2 月 4 日稳定),用于在 DOM 中移动元素的同时保留其状态。传统的 DOM 操作(如 appendChild 或 insertBefore)可能会导致组件重新挂载,从而丢失其内部状态。而通过 moveBefore(child, referenceNode) ,元素可以高效地重新排序,适用于需要频繁更新 DOM 且需保留组件状态的场景,如 React 和 Vue 开发。这种方法提升了性能并优化了用户体验。

via Bram.us
#优质博文 #前端 #react #dom
A virtual DOM in 200 lines of JavaScript
【关于 Virtual DOM 的一篇挺不错的实现文章】

AI 摘要:这篇文章详细介绍了如何用约200行JavaScript代码实现一个虚拟DOM库。该库通过创建虚拟DOM节点、对比新旧虚拟DOM并生成差异(diff),然后将这些差异应用到真实DOM来管理UI。文章涵盖了DOM表示、diff算法的实现、事件处理及属性设置等内容,并提供了一个完整的状态管理API示例。最终,展示了使用该库实现的一个计数器应用和一个百万节点的虚拟化列表。完整代码和示例可在文中找到。


via Marcelo Lazaroni
 
 
Back to Top