学习笔记
文章平均质量分 68
jexxx
前端工程师,擅长图形编辑器开发
展开
-
文字转图片性能优化
通过以上步骤,可以在worker中使用OffscreenCanvas进行图像处理,并将处理结果返回给主线程,从而提高性能并减少内存消耗。使用webworker 和 offscreenCanvas 在worker 中进行图片的处理,并将处理结果返回给js 主线程序。原创 2023-02-17 13:40:50 · 263 阅读 · 0 评论 -
源码解读之zrender-ZRender 类(3)
这几个函数中被使用了,这几个方法主要是控制画布是否更新,根据函数名可以猜测这个属性的功能是"脏矩形渲染",也就是局部渲染,找到图形会变化的区域(脏矩形)做去更新。在实例化过程中,还遇到了几个文档描述比较模糊但很有用的参数:useDirtyRect,useCoarsePointer,usePointerSize。,咋一看也没看到它在哪里赋初值,然后在网页打断点调试,发现在初始化的时候会调用。,在后面的分析中会写到这个 useDirtyRect 的工作流程。未开启前,当更新的图形不在区域但还是会更新。原创 2023-02-07 00:00:44 · 487 阅读 · 0 评论 -
源码解读之zrender-入口(2)
根据以上分析找到 all.ts 文件,这里做了一些初始化的事情:registerPainter,注册绘图工具,默认注册了 canvas 和 svg。从使用方式来看,zrender 导出了一个对象,这个对象上面有一个init的方法,接收一个DOM对象,所以让我们看看 init 方法做了什么吧。该如何找一个工程的入口文件呢,参考[[🧺 package.json 正确配置入口文件]]文章可知,这里的入口是工程中的。方法会 return 一个实例化对象,内部将实例保存到全局变量。入口先分析到这里,还是挺简单的。原创 2023-02-02 16:31:02 · 362 阅读 · 0 评论 -
package.json 正确配置入口文件
node 中可以通过 main 和 type: module | commonjs 来指定入口文件及其模块类型, exports 则是更强大的替代品,拥有更灵活的配置方式。主流打包工具如 webpack rollup esbuild 则在此基础上增加了对 top-level module 的支持。TypeScript 则会先查看 package.json 中有没有 types 字段,否则查看 main 字段指定的文件有没有对应的类型声明文件。当这些字段同时存在时原创 2023-02-02 16:06:21 · 2138 阅读 · 0 评论 -
️ package.json 中的 sideEffects
在一个库的 package.json 看到了 sideEffects 这个字段,好奇它的作用,查资料可得:webpack v4 开始新增了一个特性,通过给加入声明该 包/模块 是否包含 sideEffects(副作用),从而可以为 tree-shaking 提供更大的优化空间。主要意思就是,加了这个字段,打包工具可以更好地为 tree-shaking 工作。让我们来看看它是如何工作的。原创 2023-02-02 14:56:01 · 2031 阅读 · 0 评论 -
源码解读之zrender(1)
zrender(官方文档)是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式, 也是 echarts 的渲染器。原创 2023-02-02 01:07:53 · 369 阅读 · 0 评论 -
TS小册学习之结构化类型系统
这是因为,TypeScript 比较两个类型并非通过类型的名称,而是比较这两个类型上实际拥有的属性与方法。也就是说,这里实际上是比较 Cat 类型上的属性是否都存在于 Dog 类型上,在比较对象类型的属性时,同样会采用结构化类型系统进行判断。TypeScript 的结构化类型系统是的,而标称类型系统是的。在 TypeScript 中,通过的方式,从或者出发去模拟标称类型系统。原创 2023-02-01 23:41:50 · 110 阅读 · 0 评论 -
TS小册学习之类型层级
这两者的情况就要特殊一些,它们是因为“系统设定”的问题,Object 包含了所有除 Top Type 以外的类型(基础类型、函数类型等),object 包含了所有非原始类型的类型,即数组、对象与函数类型,这就导致了你中有我、我中有你的神奇现象。作为一个一无所有的空对象,几乎可以被视作是所有类型的基类,万物的起源。是 object 和 Object 的字面量类型,是从。通过赋值来进行兼容性检查(比较少用)实际上是两种完全不同的比较方式。原创 2023-02-01 23:40:00 · 157 阅读 · 0 评论 -
TS小册学习之 类型
JS 内置的原始类型在 TypeScript 中它们都有对应的类型注解。其中,除了 null 与 undefined 以外,余下的类型对应 JavaScript 中的数据类型概念。原创 2023-01-31 14:26:57 · 230 阅读 · 0 评论