- 博客(121)
- 收藏
- 关注
RSS订阅原创 PIXI入门系列之终章
在之前的系列文章中，对PIXI的历史以及底层技术、基本API的使用做了基本的介绍，本文是入门系列文章的最后一篇，主要对PIXI的一些细节知识以及相关案例的介绍，更偏向于总结性质。PIXI版本v8.1.0。实际上对于PIXI的学习，不仅仅是对PIXI的学习，还是对WebGL/WebGPU 3D知识的学习，PIXI的上层API更多的是对PIXI自身的使用的学习，但是涉及到纹理Texture、渲染器、渲染目标等概念的时候就要求使用者具备3D前置知识。
2024-05-04 15:22:33
992
原创 PIXI入门系列之基本使用(下篇)
本篇文章主要介绍纹理Texture、滤镜Filter、Mesh和Shader、渲染器相关的知识，这其中会涉及到的一些3D概念。PIXI底层使用WebGL/WebGPU来实现绘制，想要深入的理解PIXI必然要去学习3D知识，这是绕不开的，本文会尽可能的说明相关的3D概念从而加深对PIXI的理解。本文对应的PIXI版本是v8.1.0。本文介绍了纹理Texture、Mesh和Shader、滤镜Filter、WebGL渲染器以及涉及到的相关3D知识，可以结合官网相关细节从而加深对PIXI的理解和使用。
2024-04-28 22:09:15
654
原创 PIXI入门系列之基本使用(上篇)
在之前文章PIXI开篇中对于PIXI的定位以及历史进行了说明，相信对PIXI整体有了一定的认知，本篇是入门系列的第二篇，本篇文章主要介绍相关PIXI API的具体使用以及一些关键知识点，相关的细节性还是需要结合PIXI API文档来具体查看。本篇文章熟悉PIXI基本API的使用，主要介绍了如下Application、Container、Sprite、Graphics、Text、Ticker、Assets的基本使用以及一些关键点。
2024-04-27 18:02:41
870
原创 PIXI入门系列之开篇
入门篇主要是熟悉PIXI的API使用源码篇顾名思义则是PIXI源代码的分析，主要学习其架构逻辑以及相关性能优化处理PIXI是什么以及应用场景PIXI的大体发展历史，从而对其有较为完整的认知本篇文章主要是去了解PIXI是什么、应用场景以及目前的底层技术发展，对于全局理解PIXI有着很好的帮助，一些具体的细节可以去PIXI官网去了解。目前主流的浏览器基本上都支持WebGL，通常情况下无需考虑PIXI底层使用什么技术来实现图像渲染，关注业务逻辑本身就行。PIXI的定位是渲染2D视觉内容。
2024-04-26 17:44:00
386
原创 Konva离屏缓存
cache实例方法定义在Node基类上，通过该方法可以实现图形缓存，在Konva中Stage、Layer、Group、Shape等所有容器类和图形类都直接或间接继承了Node基类，故而都可以使用缓存方法。本篇文章就是探讨Konva背后的缓存机制，版本是v9.2.1。Konva缓存本质上就是创建位于内存中的Canvas图层，将当前图形绘制到CachedCanvas中，之后渲染时使用drawImage将整个CachedCanvas绘制到场景中，从而减少向CPU发送操作指令进而实现性能的提升。
2023-09-29 19:11:22
250
原创 Konva事件机制
不同于HTML或SVG标签可以直接绑定事件，Canvas是使用JavaScript来绘制内容，这意味着其内容没有具体的DOM，所以Canvas渲染引擎都会自己实现一套事件机制。Konva的事件机制支持图形的选中、拖拽等交互处理，同时还支持单个图形对象绑定对应的事件。Konva版本是v9.2.1。Konva实现的事件机制可以实现图形对象绑定事件，实际上所有继承自Node基类的类，都可以使用on等实例方法来监听对应事件。
2023-09-28 20:23:47
471
原创 Konva批量渲染
Konva作为优秀的Canvas渲染引擎之一，其内部存在很多优化策略，这些优化策略就是构建其高效的基石，批量渲染机制就是其中之一。批量渲染就是将多次更新操作合并为一次，减少渲染的次数。批量渲染机制在前端领域的应用非常广泛，像Vue、React等框架中都存在，例如Vue异步队列渲染等。本篇文章探究Konva的渲染流程，Konva版本是v9.2.1。Konva对于图形的更新渲染逻辑与初始化时渲染逻辑是相同的，最后都会通过batchDraw来实现绘制逻辑，只是触发的来源不同而已。
2023-09-27 21:02:09
376
原创 Konva基本处理流程和相关架构设计
canvas是使用JavaScript基于上下文对象进行2D图形的绘制的HTML元素，通常用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。基于Canvas之上，诞生了例如 PIXI、ZRender、Fabric、Konva等 Canvas渲染引擎，兼顾易用的同时保证了优秀可靠的渲染性能。虽然对PIXI、Fabric也有所了解，但个人最早接触的是Konva，之后的系列文章都是基于Konva进行学习总结，涉及到其相关架构设计、优化策略等方面，Konva版本是v9.2.1。
2023-09-26 20:41:50
1572
原创 SolidJS节点级响应性
随着组件化、响应式、虚拟DOM等技术思想引领着前端开发的潮流，相关的技术框架大行其道，就以目前主流的Vue、React框架来说，它们都基于组件化、响应式、虚拟DOM等技术思想的实现，但是具有不同开发使用方式以及实现原理，这里就不再赘述了相关内容，这里关注的焦点在于虚拟DOM。无论是Vue还是React都应用虚拟DOM，通过虚拟DOM从而来减少频繁的DOM操作，优化页面性能。
2023-09-22 14:02:50
234
原创 React Hooks的闭包陷阱
React有两种组件形式：class组件和函数组件，class组件代表面向对象的编程思想，函数组件代表着函数式编程的思想，React Hooks就是带有Hook的函数组件，Hook机制赋予函数组件具有状态变量以及生命周期的功能。使用React Hooks常见的问题就是闭包陷阱，从表现形式来看就是Hook内部使用的State数据不是最新状态而是旧的状态。本文旨在梳理清楚闭包陷阱产生的原因，React源码版本18.3.0.
2023-07-16 22:54:54
904
原创 React18并发模式
React18版本的发布标志着并发模式的正式应用，实际上自React16引入Fiber架构后，之后的版本工作之一就是为了后续并发模式的引入做铺垫。串行：吃饭和看剧两件事存在先后顺序，即吃饭完后看剧并行：吃饭和看剧两件事同时执行，即吃饭的同时看剧并发：吃饭和看剧交替进行，即是一会吃饭一会看剧React并发模式实际上就是让渲染可以中断从而响应用户操作，之后再恢复执行之前的渲染逻辑，说起来简单但实际上很复杂需要考虑很多事情，例如任务拆分、执行时长把控、整体调度等等。
2023-06-04 21:08:56
1034
1
原创 Vite原理学习之HMR
前言Vite是基于ESM的构建工具，预编译和按需编译机制是其在项目启动以及快速更新的核心。除了这两个机制外，还存在一个主流构建工具都存在一个机制即HMR。HMR是Hot Module Replacement的简写，意思是模块热替换，即允许在运行时更新各种模块，而无需进行完全刷新。HMR大大提高了开发阶段的更新的响应速度，避免全量更新，在提高效率的同时大大提高了开发体验。
2022-01-09 17:46:04
3466
1
原创 Vite原理学习之按需编译
前言当Vite启动开发服务器之前会完成依赖预构建工作，这个工作整个流程简单来说是通过入口文件扫描所有源码分析相关import语句得到使用的第三方依赖包名，之后使用esbuild对依赖进行编译，至此完成整个预编译过程。之后会启动开发服务器并在相关端口进行监听，当启动开发服务器后，Vite会如何处理源码呢？整个过程的执行逻辑具体是什么样的？这篇文章就是来学习Vite开发服务器启动后整个的处理过程。
2022-01-02 14:40:27
3921
原创 Vite原理学习之预编译
前言Vite是下一代的前端开发与构建工具，为什么称为下一代？根本原因在于其基于原生ES Module。在目前的前端工程化生态中，webpack、rollup、esbuild等非常流行，而Vite真是构建在一些流行的技术上。Vite的出现实际上是前端模块规范发展到现在自然出现的产物，它并不是首个基于ES Module的构建工具，还有一些同类型的工具例如Snowpack、@web/dev-server等等。
2021-12-26 16:07:05
2512
原创 React v16源码之useMemo与useCallback
前言 将useMemo和useCallback放在一起来说，是因为这两个Hook都具有缓存效果，它们的返回值在依赖没有变化时总是返回旧值，通常作为优化手段来使用，特别是一些高性能的计算。useMemo类似于Vue中computed的作用，useEffect类似于Vue watch的作用，useMemo和useEffect的使用场景也可以类比。本文会梳理useMemo和useCallback的执行逻辑，加深对它们的认知和理解。
2021-09-10 09:29:32
542
原创 React v16源码之useEffect与useLayoutEffect
前言如果说useState可以类比class组件中的setState，那么useEffect就显得非常特殊。在class组件中存在这各种生命周期，例如render、componentDidMount（组件挂载后）、componentDidUpdate（更新后）、componentWillUnmount（卸载销毁前）等，使用React Hook就要忘掉这些生命周期，对于习惯了Vue/React等生命周期机制来说，React Hook无疑是颠覆性的方式，在实际使用React Hook的函数组件中，经常使用us
2021-09-09 08:26:06
900
原创 React v16源码之useState（Hook开篇）
前言React Hook是16.8之后新增的新特性，在允许你在不编写class组件的情况下使用state和其他React特性，在16.8之前的版本中组件按照其定义方式可以分成class组件和函数组件，class组件可以使用内部状态state以及相关生命周期，函数组件数据来源只是外部prop。简单来说React Hook = 函数组件 + state/其他特性。关于为什么提供React Hook的相关介绍可以通过官网相关文章（Hook官网介绍）来了解，这里就不再赘述了。本文旨在了解React Hook相关
2021-09-07 21:32:02
981
原创 React v16源码之setState触发的更新流程
前言实际上在之前React v15相关原理的文章中就setState的几个特点有了较为清晰的梳理，虽然在React v16中引入了Fiber架构，但是setState整体的处理逻辑以及使用并没有什么区别，只是底层处理不同而已，为什么还有梳理v16 setState相关的逻辑呢？侧重点不同，本文不会主要去看setState的一些特点的形成原因（在前面的文章中就已经说明了再说就没有意义），主要想通过setState去看视图更新机制。setState以简单的实例来梳理整个源码运行流程，实例如下： c
2021-09-05 17:59:54
1033
原创 React v16源码之ReactDOM.render
React提供render API来实现将组件构成的视图渲染挂载到指定的DOM节点上，本文旨在梳理ReactDOM.render函数的执行逻辑，从而进一步理解React 16版本之后的Fiber以及相关处理过程（React版本是16.14.0）。
2021-09-01 22:33:41
861
原创 React v15版本相关原理学习
前言 React16之后引入了Fiber的架构，这个架构的处理过程是非常复杂的，在正式去学习了解Fiber的处理过程之前，打算去深入了解下v15版本时整个的处理过程，然后再结合Fiber要解决的问题从而更加深入的理解。本文要理解的相关原理有：
2021-07-28 21:45:04
510
原创 Vue3源码之watch相关
前言Vue3版本中关于定义watch相关的有4处，具体有watch、watchEffect、$watch、watch选项。实际上$watch和watch选项这两种方式与Vue2中并没有什么不同，实际上也是为了兼容Vue2.x版本的处理。本文主要关注于watch和watchEffect这两个函数式API，旨在了解相关处理逻辑以及加深对Vue3中副作用effect的细节理解。watchwatch API本身是一个函数，实现对指定数据源的侦听，其源码如下：function watch(source, cb
2021-07-20 22:35:04
585
1
原创 Vue3源码之setup
前言组合式API是Vue3一个非常亮眼的功能，它的出现是为了解决复杂组件代码的可复用性、可阅读性和可理解性的问题。当说起组合式API，实际上最先想起的就是setup选项，组件中的setup选项就是组合式API的基础，它充当组合API的入口点。区别于Vue2中使用选项组织代码，组合式实际上是对在setup中使用API这种方式的一种描述，如果你愿意实际上你可以在setup选项中完成绝大多数的功能逻辑，例如注册生命周期、定义computed和watch等等。本文旨在梳理setup具体的执行逻辑、返回的结果存储
2021-07-19 13:56:11
681
原创 Vue3源码之Refs
前言Vue3的响应性API除了reactive、readonly等基础的，还提供了相关Refs API其中包括ref、customRef等。在之前的[响应系统](https://blog.csdn.net/s1879046/article/details/118757873)的文章中，对reactive的逻辑有较为详细的分析，本文会对梳理相关API的逻辑，对比reactive API看看二者的不同，加强对Refs API使用的理解。
2021-07-18 14:49:06
922
1
原创 Vue3源码之响应系统
前言实际上在Vue3项目未发布之前，作者就说明了使用Proxy来替换Object.defineProperty来重构Vue的响应式原理，Proxy具有更高的控制粒度，可以解决Object.defineProperty存在的一些问题，例如动态属性添加、数组length设置等带来的响应式问题。Vue2中采用发布订阅模式（通过Dep对象与Watcher对象建立联系）构建整个响应式系统，而Vue3这个过程是如何建立的呢？本文就是通过理清这个过程，同时聊聊官方提供的不同的响应式API。data选项的响应式处理
2021-07-17 17:29:32
460
1
原创 Vue3源码之mount挂载
前言当调用Vue.createApp后就会生成一个应用上下文实例，该实例暴露了相关功能API，其中就包含mount函数，该函数实现组件挂载。简易实例如下：const Counter = { data() { return { counter: 0 } }}Vue.createApp(Counter).mount('#counter')本文就是梳理mount函数的逻辑，对比Vue2来聊聊二者的不同处理。mount处理逻辑在之前的文章Vue3源码之creat
2021-07-14 11:55:16
12046
原创 Vue3源码之createApp
前言Vue3版本源码架构与Vue2版本存在非常大的不同，从使用方式的角度来讲，对它们可以简单概括为：Vue2版本是命令方式使用，通过new Vue去创建Vue实例，组件中使用选项组合代码逻辑Vue3版本将命令和功能API函数化，通过createApp去创建应用实例，组件中通过组合式API和选项组合代码这里需要区分与Vue2中的一些概念，Vue2中Vue实例实际上就是组件实例，而Vue3中createApp则是创建一个上下文，称之为应用实例。组件实例是通过其他方式来获得的，例如Vue3中mount
2021-07-13 16:22:14
10334
1
原创 简单聊聊Vue3项目结构及其源码阅读方式
前言Vue3版本相对于Vue2版本底层做了许多的优化，相关的兼容性和不兼容性功能的改变在其官网有明确的说明，这里就不多说了。本文主要是对比Vue2聊聊下面两个方面：vue3项目结构相关vue3源码阅读方式项目结构对于Vue3项目本身的结构，个人觉得主要关注点有两点：使用TypeScriptMonorepo项目管理形式使用TypeScriptVue2项目使用Flow（Flow是JavaScript代码的静态类型检查工具），而Vue3中则使用TypeScript（JavaScript的
2021-07-12 20:01:49
711
原创 React源码之React.createElement
前言React特点的之一就是JSX，JSX是JavaScript的语法的扩展，使用JSX来开发UI内容。React开发不一定需要使用JSX，但是使用JSX会非常便捷。实际上JSX是React.createElement函数的语法糖，使用JSX需要使用Babel来将JSX转移成createElement函数调用。createElement具体执行逻辑JSX的具体使用可以查看React中文官网文档对其的介绍，这里就不赘述了。使用React JSX方式来创建的简单的实例如下：ReactDOM.rende
2021-04-04 16:32:12
10036
原创 阅读React源码前的一些思考
前言从本篇开始，会正式开始React源码的阅读。为什么要阅读React源码？实际上就是2点：更加了解React框架的使用和思想与Vue框架思想对比加深相关思考关于源码阅读关于源码阅读，会有人赞同也会有人反对，个人觉得这两种观点都有道理。我个人是倾向于阅读源码的，从事IT行业这几年，我的技能和意识方面的成长一部分就是来源于源码阅读的方式。个体是存在差异的，性格、思想意识、眼界等等方面都会决定你在所从事行业的成长高度。如何成长？答案是：努力，这是一个笼统的方向。具体到实际行动，可能不会存在标准的
2021-04-03 15:31:49
169
原创 Vue之异步更新细节
前言 Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的
2021-02-01 15:55:01
866
原创 Vue之data选项
前言本篇是分析new Vue()过程中对于data的处理细节以及响应式原理，主要了解如下两点：Vue实例的data选项具体的逻辑Vue响应式原理学习data处理逻辑下面是Vue实例创建中initState的处理逻辑：initState的处理逻辑是处理组件中选项即props、data、computed、watch、methods，而关于data部分的处理逻辑，具体如下：opts.data ? initData(vm) : observe(vm._data = {}, true);首先看
2021-01-30 05:32:27
3090
原创 [email protected]源码阅读
前言vue-cli是vue项目的脚手架工具，使用vue-cli可以快速创建项目。vue-cli的2.x版本和3.x版本在使用上有很大的不同，本篇文章旨在通过vue-cli源码学习了解脚手架的构成实现，所以选择相对简单的vue-cli的2.x版本（具体版本是2.9.6）。在2.x版本最常用的命令是vue和vue init，下面的流程梳理主要就是针对这两个命令来梳理的。vue命令的逻辑在vue-cli项目的package.json文件中定义了命令对应的文件位置，具体如下："bin": { "vue"
2021-01-19 14:39:56
556
1
原创 webpack源码之loader
前言loader是webpack核心概念之一，webpack官网对其详细的描述。首先先简单了解下loader的概念：loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。loader 描述了 webpack 如何处理非JavaScript模块，并且在 bundle 中引入这些依赖。在webpack中构建打包除了js文件和json文件，其他任何文件格式的文件使用import或者require加载都需要对应的loader来处理。这是我非常感兴趣
2021-01-05 19:40:19
492
原创 webpack源码之调试准备
前言webpack作为目前前端最热门的构建工具之一，webpack的源码逻辑是非常复杂的，实际上webpack系列的源码文章也是针对其流程尽可能去挖掘，旨在加深学习其思想以及相关概念。本系列文章的webpack版本是3.4.0。首先从调试准备开始，会通过一些简单实例来学习webpack打包流程。调试准备...
2021-01-05 11:54:35
445
原创 Vue之watch监听的原理
前言 vue选项中props、data、watch、methods、computed，其中props、data、computed都通过Object.defineProperty进行数据拦截从而实现响应式。对于选项watch，知道其作用是监听对应key做相关处理，之前一系列文章都没有关注watch背后的实现逻辑，这也是本文的目的。
2020-10-16 15:34:36
5475
原创 Vue细节之$data的细节
前言$data是Vue实例中的实例属性，表示Vue实例观察的数据对象。实际上在Vue官网对这部分有较为详细的描述，这里就不再赘述了（具体可看官网的描述Vue选项/数据）。本篇文章从源码层次来梳理$data背后的逻辑，实际上就是一个问题：假设存在属性name，为什么修改vm.$data.name与vm.name可以达到相同效果？实例属性$data假设存在属性name，为什么修改vm.$data.name与vm.name可以达到相同效果？以此问题为出发点，假设data中存在name，实际上就是
2020-09-16 12:52:16
9241
原创 Vue源码之指令细节
前言 指令是Vue提供的复用手段之一，除了内置的v-if、v-show、v-text等还支持自定义指令。Vue中代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。本文是通过源码来梳理指令的执行流程，从而加深对指令的理解。
2020-08-02 13:53:51
323
原创 Vue源码之transition细节
前言 transition是Vue提供的内置组件，用于定义单个元素或组件的过渡效果。transition组件只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。
2020-07-31 14:10:28
927
原创 Vue源码之生命周期细节
前言 Vue实例被创建过程中会经历一系列的初始化过程，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。Vue官网的生命周期流程图有着非常重要的参考意义，基本上概括了整个vue实例创建过程中重要点。
2020-07-28 11:55:33
179
原创 Vue之keep-alive细节
前言 keep-alive组件是Vue的内部组件，Vue官方对于keep-alive的描述是：keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在keep-alive内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行
2020-07-23 19:40:06
785
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人