Skip to content

Latest commit

 

History

History
53 lines (27 loc) · 4.03 KB

17.md

File metadata and controls

53 lines (27 loc) · 4.03 KB

HEADER

蒲公英 · JELLY技术周刊 Vol.17

登高远眺

天高地迥,觉宇宙之无穷

基础技术

作为前端开发,与 Chrome 打交道是家常便饭,我们有必要了解 Chrome 调试工具的更新迭代,对日常开发和调试带来哪些帮助和改善。新 Chrome DevTools 集成了 lighthouse,并且在元素审查面板和性能面板都有一定程度的优化,本文还提供了相关特性的视频演示,非常易于理解学习。

浏览器里的事件循环(Event Loop)一直都是一个老生常谈的话题,社区里各种文章和资料也不少,但是你真的清楚事件循环里面的 tasks、microtasks、queues 这些概念以及他们的调度关系吗?本文是 Google Chrome 的开发人员 Jake Archibald 撰写的一篇博客,内容深入浅出,在任务调度及 JS 栈的部分还细心的绘制了 CSS 交互动画,最后还探讨了不同浏览器的差异以及相关规范的定义,非常值得一读。

由于 Javascript 采取了基于垃圾回收机制的内存管理方式,所以开发人员一般不会关注内存的分配和释放,但在开发过程中稍不注意就可能造成严重的内存泄漏。本文解释了 Javascript 的垃圾回收机制,列举实际例子介绍 Node 服务中的内存泄漏场景,并且重点讲述了如何利用 heapdump 和 chrome devtools 来精准定位线上服务的内存泄漏位置,对于 Node 服务的性能优化有参考意义。

前端框架

作者通过模拟 React 的数据结构与工作流程,来使用精简的代码实现出 useState Hook。学懂本文的剖析和对应的源码后再去看 React Hooks 的源码部分,能更加容易的理解。如果你只是简单使用过 Hooks 或还没了解过 Hooks,阅读本文是一个很好的学习机会。

图形编程

介绍透过 OffscreenCanvas API,实现 web worker 驱动 webGL 渲染。把更新渲染的逻辑分到主线程之外能有效减少 js 执行导致的页面响应阻塞。文中提供了一个 demo 的对比数据。

工具推介

PloyK.js 提供了多个函数来帮助你更轻松的处理多边形,搭配一些物理引擎也可以做出一些有趣的效果,例如下面这个使用 phaser+matter.js 的 demo,基于 ployk.js 库可以用很少的代码实现物体的切片,这可能可以给你开发 H5 游戏带来一些新的想法。

沧海拾遗

沧海拾遗,积跬步以至千里

当我们在前端领域不断向上攀爬的过程中,随着对 React 这一类框架的不断深入理解,大脑中总是会冒出一个这样的想法:“我也能实现一个像是 React 这样的框架”,Nerv 就是在京东这样想法就的落地实现,相信通过 Nerv,你会对 React 有不一样的了解。

如果选择 React 来开发小程序,相信你对于 Taro 多少有一定的了解,或许你现在正在通过 Taro 3.x 在小程序平台中按自己的意愿构建想要的小程序。但是回顾 Taro 发展的过程中,支持 Hooks 也曾是需要针对性优化的特性之一,通过这些特性实现的思考,对自身技术的提升大有裨益。

FOOTER