- 博客(121)
- 收藏
- 关注
原创 PIXI入门系列之终章
在之前的系列文章中,对PIXI的历史以及底层技术、基本API的使用做了基本的介绍,本文是入门系列文章的最后一篇,主要对PIXI的一些细节知识以及相关案例的介绍,更偏向于总结性质。PIXI版本v8.1.0。实际上对于PIXI的学习,不仅仅是对PIXI的学习,还是对WebGL/WebGPU 3D知识的学习,PIXI的上层API更多的是对PIXI自身的使用的学习,但是涉及到纹理Texture、渲染器、渲染目标等概念的时候就要求使用者具备3D前置知识。
2024-05-04 15:22:33
1120
1
原创 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
1113
原创 PIXI入门系列之基本使用(上篇)
在之前文章PIXI开篇中对于PIXI的定位以及历史进行了说明,相信对PIXI整体有了一定的认知,本篇是入门系列的第二篇,本篇文章主要介绍相关PIXI API的具体使用以及一些关键知识点,相关的细节性还是需要结合PIXI API文档来具体查看。本篇文章熟悉PIXI基本API的使用,主要介绍了如下Application、Container、Sprite、Graphics、Text、Ticker、Assets的基本使用以及一些关键点。
2024-04-27 18:02:41
2071
原创 PIXI入门系列之开篇
入门篇主要是熟悉PIXI的API使用源码篇顾名思义则是PIXI源代码的分析,主要学习其架构逻辑以及相关性能优化处理PIXI是什么以及应用场景PIXI的大体发展历史,从而对其有较为完整的认知本篇文章主要是去了解PIXI是什么、应用场景以及目前的底层技术发展,对于全局理解PIXI有着很好的帮助,一些具体的细节可以去PIXI官网去了解。目前主流的浏览器基本上都支持WebGL,通常情况下无需考虑PIXI底层使用什么技术来实现图像渲染,关注业务逻辑本身就行。PIXI的定位是渲染2D视觉内容。
2024-04-26 17:44:00
570
原创 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
335
原创 Konva事件机制
不同于HTML或SVG标签可以直接绑定事件,Canvas是使用JavaScript来绘制内容,这意味着其内容没有具体的DOM,所以Canvas渲染引擎都会自己实现一套事件机制。Konva的事件机制支持图形的选中、拖拽等交互处理,同时还支持单个图形对象绑定对应的事件。Konva版本是v9.2.1。Konva实现的事件机制可以实现图形对象绑定事件,实际上所有继承自Node基类的类,都可以使用on等实例方法来监听对应事件。
2023-09-28 20:23:47
722
原创 Konva批量渲染
Konva作为优秀的Canvas渲染引擎之一,其内部存在很多优化策略,这些优化策略就是构建其高效的基石,批量渲染机制就是其中之一。批量渲染就是将多次更新操作合并为一次,减少渲染的次数。批量渲染机制在前端领域的应用非常广泛,像Vue、React等框架中都存在,例如Vue异步队列渲染等。本篇文章探究Konva的渲染流程,Konva版本是v9.2.1。Konva对于图形的更新渲染逻辑与初始化时渲染逻辑是相同的,最后都会通过batchDraw来实现绘制逻辑,只是触发的来源不同而已。
2023-09-27 21:02:09
524
原创 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
1664
原创 SolidJS节点级响应性
随着组件化、响应式、虚拟DOM等技术思想引领着前端开发的潮流,相关的技术框架大行其道,就以目前主流的Vue、React框架来说,它们都基于组件化、响应式、虚拟DOM等技术思想的实现,但是具有不同开发使用方式以及实现原理,这里就不再赘述了相关内容,这里关注的焦点在于虚拟DOM。无论是Vue还是React都应用虚拟DOM,通过虚拟DOM从而来减少频繁的DOM操作,优化页面性能。
2023-09-22 14:02:50
306
原创 React Hooks的闭包陷阱
React有两种组件形式:class组件和函数组件,class组件代表面向对象的编程思想,函数组件代表着函数式编程的思想,React Hooks就是带有Hook的函数组件,Hook机制赋予函数组件具有状态变量以及生命周期的功能。使用React Hooks常见的问题就是闭包陷阱,从表现形式来看就是Hook内部使用的State数据不是最新状态而是旧的状态。本文旨在梳理清楚闭包陷阱产生的原因,React源码版本18.3.0.
2023-07-16 22:54:54
1062
原创 React18并发模式
React18版本的发布标志着并发模式的正式应用,实际上自React16引入Fiber架构后,之后的版本工作之一就是为了后续并发模式的引入做铺垫。串行:吃饭和看剧两件事存在先后顺序,即吃饭完后看剧并行:吃饭和看剧两件事同时执行,即吃饭的同时看剧并发:吃饭和看剧交替进行,即是一会吃饭一会看剧React并发模式实际上就是让渲染可以中断从而响应用户操作,之后再恢复执行之前的渲染逻辑,说起来简单但实际上很复杂需要考虑很多事情,例如任务拆分、执行时长把控、整体调度等等。
2023-06-04 21:08:56
1247
1
原创 Vite原理学习之HMR
前言Vite是基于ESM的构建工具,预编译和按需编译机制是其在项目启动以及快速更新的核心。除了这两个机制外,还存在一个主流构建工具都存在一个机制即HMR。HMR是Hot Module Replacement的简写,意思是模块热替换,即允许在运行时更新各种模块,而无需进行完全刷新。HMR大大提高了开发阶段的更新的响应速度,避免全量更新,在提高效率的同时大大提高了开发体验。
2022-01-09 17:46:04
3649
1
原创 Vite原理学习之按需编译
前言当Vite启动开发服务器之前会完成依赖预构建工作,这个工作整个流程简单来说是通过入口文件扫描所有源码分析相关import语句得到使用的第三方依赖包名,之后使用esbuild对依赖进行编译,至此完成整个预编译过程。之后会启动开发服务器并在相关端口进行监听,当启动开发服务器后,Vite会如何处理源码呢?整个过程的执行逻辑具体是什么样的?这篇文章就是来学习Vite开发服务器启动后整个的处理过程。
2022-01-02 14:40:27
4234
原创 Vite原理学习之预编译
前言Vite是下一代的前端开发与构建工具,为什么称为下一代?根本原因在于其基于原生ES Module。在目前的前端工程化生态中,webpack、rollup、esbuild等非常流行,而Vite真是构建在一些流行的技术上。Vite的出现实际上是前端模块规范发展到现在自然出现的产物,它并不是首个基于ES Module的构建工具,还有一些同类型的工具例如Snowpack、@web/dev-server等等。
2021-12-26 16:07:05
2755
原创 React v16源码之useMemo与useCallback
前言 将useMemo和useCallback放在一起来说,是因为这两个Hook都具有缓存效果,它们的返回值在依赖没有变化时总是返回旧值,通常作为优化手段来使用,特别是一些高性能的计算。useMemo类似于Vue中computed的作用,useEffect类似于Vue watch的作用,useMemo和useEffect的使用场景也可以类比。本文会梳理useMemo和useCallback的执行逻辑,加深对它们的认知和理解。
2021-09-10 09:29:32
622
原创 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
956
原创 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
1070
原创 React v16源码之setState触发的更新流程
前言实际上在之前React v15相关原理的文章中就setState的几个特点有了较为清晰的梳理,虽然在React v16中引入了Fiber架构,但是setState整体的处理逻辑以及使用并没有什么区别,只是底层处理不同而已,为什么还有梳理v16 setState相关的逻辑呢?侧重点不同,本文不会主要去看setState的一些特点的形成原因(在前面的文章中就已经说明了再说就没有意义),主要想通过setState去看视图更新机制。setState以简单的实例来梳理整个源码运行流程,实例如下: c
2021-09-05 17:59:54
1107
原创 React v16源码之ReactDOM.render
React提供render API来实现将组件构成的视图渲染挂载到指定的DOM节点上,本文旨在梳理ReactDOM.render函数的执行逻辑,从而进一步理解React 16版本之后的Fiber以及相关处理过程(React版本是16.14.0)。
2021-09-01 22:33:41
1102
原创 React v15版本相关原理学习
前言 React16之后引入了Fiber的架构,这个架构的处理过程是非常复杂的,在正式去学习了解Fiber的处理过程之前,打算去深入了解下v15版本时整个的处理过程,然后再结合Fiber要解决的问题从而更加深入的理解。本文要理解的相关原理有:
2021-07-28 21:45:04
582
原创 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
670
1
原创 Vue3源码之setup
前言组合式API是Vue3一个非常亮眼的功能,它的出现是为了解决复杂组件代码的可复用性、可阅读性和可理解性的问题。当说起组合式API,实际上最先想起的就是setup选项,组件中的setup选项就是组合式API的基础,它充当组合API的入口点。区别于Vue2中使用选项组织代码,组合式实际上是对在setup中使用API这种方式的一种描述,如果你愿意实际上你可以在setup选项中完成绝大多数的功能逻辑,例如注册生命周期、定义computed和watch等等。本文旨在梳理setup具体的执行逻辑、返回的结果存储
2021-07-19 13:56:11
767
原创 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
1015
1
原创 Vue3源码之响应系统
前言实际上在Vue3项目未发布之前,作者就说明了使用Proxy来替换Object.defineProperty来重构Vue的响应式原理,Proxy具有更高的控制粒度,可以解决Object.defineProperty存在的一些问题,例如动态属性添加、数组length设置等带来的响应式问题。Vue2中采用发布订阅模式(通过Dep对象与Watcher对象建立联系)构建整个响应式系统,而Vue3这个过程是如何建立的呢?本文就是通过理清这个过程,同时聊聊官方提供的不同的响应式API。data选项的响应式处理
2021-07-17 17:29:32
496
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
12886
原创 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
10575
1
原创 简单聊聊Vue3项目结构及其源码阅读方式
前言Vue3版本相对于Vue2版本底层做了许多的优化,相关的兼容性和不兼容性功能的改变在其官网有明确的说明,这里就不多说了。本文主要是对比Vue2聊聊下面两个方面:vue3项目结构相关vue3源码阅读方式项目结构对于Vue3项目本身的结构,个人觉得主要关注点有两点:使用TypeScriptMonorepo项目管理形式使用TypeScriptVue2项目使用Flow(Flow是JavaScript代码的静态类型检查工具),而Vue3中则使用TypeScript(JavaScript的
2021-07-12 20:01:49
760
原创 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
10567
原创 阅读React源码前的一些思考
前言从本篇开始,会正式开始React源码的阅读。为什么要阅读React源码?实际上就是2点:更加了解React框架的使用和思想与Vue框架思想对比加深相关思考关于源码阅读关于源码阅读,会有人赞同也会有人反对,个人觉得这两种观点都有道理。我个人是倾向于阅读源码的,从事IT行业这几年,我的技能和意识方面的成长一部分就是来源于源码阅读的方式。个体是存在差异的,性格、思想意识、眼界等等方面都会决定你在所从事行业的成长高度。如何成长?答案是:努力,这是一个笼统的方向。具体到实际行动,可能不会存在标准的
2021-04-03 15:31:49
185
原创 Vue之异步更新细节
前言 Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的
2021-02-01 15:55:01
929
原创 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
3683
原创 vue-cli@2.x源码阅读
前言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
629
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
535
原创 webpack源码之调试准备
前言webpack作为目前前端最热门的构建工具之一,webpack的源码逻辑是非常复杂的,实际上webpack系列的源码文章也是针对其流程尽可能去挖掘,旨在加深学习其思想以及相关概念。本系列文章的webpack版本是3.4.0。首先从调试准备开始,会通过一些简单实例来学习webpack打包流程。调试准备...
2021-01-05 11:54:35
466
原创 Vue之watch监听的原理
前言 vue选项中props、data、watch、methods、computed,其中props、data、computed都通过Object.defineProperty进行数据拦截从而实现响应式。对于选项watch,知道其作用是监听对应key做相关处理,之前一系列文章都没有关注watch背后的实现逻辑,这也是本文的目的。
2020-10-16 15:34:36
5769
原创 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
9897
原创 Vue源码之指令细节
前言 指令是Vue提供的复用手段之一,除了内置的v-if、v-show、v-text等还支持自定义指令。Vue中代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。本文是通过源码来梳理指令的执行流程,从而加深对指令的理解。
2020-08-02 13:53:51
339
原创 Vue源码之transition细节
前言 transition是Vue提供的内置组件,用于定义单个元素或组件的过渡效果。transition组件只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。
2020-07-31 14:10:28
1042
原创 Vue源码之生命周期细节
前言 Vue实例被创建过程中会经历一系列的初始化过程,同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。Vue官网的生命周期流程图有着非常重要的参考意义,基本上概括了整个vue实例创建过程中重要点。
2020-07-28 11:55:33
192
原创 Vue之keep-alive细节
前言 keep-alive组件是Vue的内部组件,Vue官方对于keep-alive的描述是:keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。当组件在keep-alive内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行
2020-07-23 19:40:06
969
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人