9 篇博文 含有标签「源码解析」

最后更新于 2024-06-16 19:11:00

由于比较好奇 Rough.js 的手绘风格是如何实现的，遂准备看看其源码实现，在这个过程中发现了一个依赖项包 hachure-fill，类似铅笔线的图形填充依赖此包实现，其源码比较简洁，从其实现中了解到一个计算机图形学领域的概念-“扫描线算法（Scanline Algorithm）”。

最后更新于 2023-11-11 21:56:00

ECharts 的 UniversalTransition 动画提供了一些复杂场景下过渡动画的解决方案，这类场景的难点在于让不规则图形或者不同形状的图形之间如何完成一个比较流畅的过渡动画，在业内比较熟知的类似技术则是 SVG Morph 动画。

查看以下 ECharts 官方示例：

• https://echarts.apache.org/examples/zh/editor.html?c=scatter-aggregate-bar
• https://echarts.apache.org/examples/zh/editor.html?c=scatter-symbol-morph
• https://echarts.apache.org/examples/zh/editor.html?c=map-bar-morph
• https://echarts.apache.org/examples/zh/editor.html?c=treemap-sunburst-transition

最后更新于 2024-06-02 19:47:00

绘图引擎支持丰富交互的前提是拥有一套事件系统，而在画布中如何拾取元素是实现的关键，从 Konva.js 的源码来看看其事件系统是如何设计的。

（之前分析过 ZRender 的源码实现，其采用了几何判断的方式来实现元素拾取，而 Konva.js 采用了不同的方案。）

最后更新于 2023-01-09 23:37:00

通常，对于 Web 页面的交互处理中，尤其是 DOM 元素样式的变化用 CSS 处理是非常简单的，但如果是普通对象呢？问题似乎变得复杂起来了，这篇文章通过探索 ECharts 与 ZRender 在交互状态设计相关方面的源码实现，讨论一下在复杂场景中处理交互状态的设计方案，如何将命令式编码的复杂性通过声明式编码来降低，该怎样应对复杂场景下的状态叠加问题。

最后更新于 2024-06-16 16:09:00

绘图引擎支持丰富交互的前提是拥有一套事件系统，而在画布中如何拾取元素是实现的关键，从 ZRender 的源码来看看其事件系统是如何设计的。

最后更新于 2021-11-18 00:14:00

基于 React.js 的 Web 应用如何完成状态管理？社区主流方案是 react-redux，其本质上基于 React 的 Context 特性实现，如果应用足够简单，实际上用 Context 手写一个简单的状态管理工具倒也并不难。不过，考虑到工具的完善性、项目的健壮性，通常采用较好的、成熟的社区方案。在移动端场景下，react-redux 略显臃肿，轻量级状态管理工具 zustand 倒是一个不错的替代方案。

最后更新于 2022-03-10 00:28:00

利用 JS 开发的原生应用与依赖于 React.js/Vue 开发的框架/库应用，性能孰高孰低？这两者最显著的区别在于原生应用需要手动操作 DOM 完成业务，而框架/库应用是基于数据变化响应式的应用，后者只需要关注数据如何变化，至于体现在 DOM 上的变化皆由框架/库内部自动完成。所以，要搞清楚两者的性能优劣，可能批量的 DOM 操作是一个不可忽略的核心因素。从代码执行的角度分析，框架/库也是基于原生 API 进行的封装抽象，因此代码执行时的路径更长、堆栈更深，由此可见原生 API 的操作性能应该是最高的。但是，现实情况是业务通常来说是复杂的，代码实现中 DOM 操作的逻辑分散在各处，那么多个 DOM 操作之间是否会产生影响从而不利于性能？这个时候就要关注宿主浏览器的渲染机制是如何理解批量的 DOM 操作的，这里引入的概念就是关键渲染路径（Critical rendering path）。

https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path > https://developers.google.com/web/fundamentals/performance/rendering

最后更新于 2022-07-09 15:38:00

利用 Node.js 编写一些命令行工具、一次性脚本是很方便的，而在这类场景下 child_process API 的 spawn 和 exec 方法的应用则非常常见。在我使用它们时，却不知道该如何进行选择，遂对此进行了探究。

最后更新于 2021-04-26 22:48:00

前端开发中，有一个使用较为普遍的性能优化技巧，即函数节流（Throttle）和防抖（Debounce），其主要作用是根据时间对函数调用做以限制。最常见的业务场景是监听页面的 scroll 事件，浏览器可以在 1s 内触发该事件数次（甚至达数十次），如果事件处理程序在这 1s 内多次执行，必然会造成一定的性能问题，影响用户体验。