- 博客(22)
- 收藏
- 关注
RSS订阅原创 从 Cloudflare 的一次性能危机公关，我们能学到什么？
Cloudflare Workers 性能危机及其解决过程：一篇独立基准测试报告显示，Cloudflare Workers 在 CPU 密集型任务上比 AWS Lambda 慢 3.5 倍。Cloudflare 迅速响应，一周内定位并修复了三个核心问题：1）优化调度算法解决请求排队问题；2）调整 V8 引擎的垃圾回收配置，提升 25%性能；3）改进 OpenNext 框架的内存处理和 JSON 解析效率。此外，Cloudflare 还向 V8 开源项目贡献了优化补丁，并解释了与 Node.js 的三角函数性
2025-10-17 09:08:02
2362
原创 第 8 篇：更广阔的世界 - 加载 3D 模型
本文介绍了如何在WebGL中加载和渲染OBJ格式的3D模型。OBJ格式以其简单文本结构、广泛支持和易解析性成为学习3D模型加载的理想选择。文章详细解析了OBJ文件的基本结构，包括顶点坐标(v)、纹理坐标(vt)、法向量(vn)和面定义(f)等元素。重点讲解了如何实现一个OBJ解析器，包括顶点去重、索引转换、三角化和数据展开等关键处理步骤。最后提供了一个从URL异步加载OBJ文件的函数示例，帮助开发者将专业3D建模软件创建的复杂模型整合到WebGL应用中。
2025-10-14 10:15:07
554
原创 第 7 篇：交互的乐趣 - 响应用户输入
本文介绍了如何通过JavaScript事件监听器实现3D立方体的鼠标交互控制。关键步骤包括：1) 使用mousedown/mouseup/mousemove事件监听用户操作；2) 通过状态变量记录拖动状态和鼠标位置；3) 将2D鼠标移动映射为3D旋转（水平移动控制Y轴旋转，垂直移动控制X轴旋转）。文章强调着色器无需修改，所有交互逻辑都在JavaScript中实现，包括移除自动旋转、添加事件监听器以及修改矩阵计算来响应用户输入。最终结果是用户可以通过点击拖动自由旋转3D立方体。
2025-10-13 17:22:02
1302
原创 第 6 篇：照亮你的世界 - WebGL 基础光照
本文介绍了如何在WebGL中实现基础光照效果，使3D物体呈现立体感。通过法向量计算每个面的朝向，结合点积运算模拟光线照射效果。文章详细讲解了环境光和漫反射两种基础光照模型，并提供了着色器代码升级方案：顶点着色器处理法向量变换，片元着色器执行光照计算。最后指出需要准备包含法向量的顶点数据，设置光照相关uniform参数，并实时计算法线矩阵。这些技术能让3D物体摆脱"纸片感"，呈现更真实的立体效果。
2025-09-28 08:56:19
1150
原创 第 5 篇：WebGL 从 2D 到 3D - 坐标系、透视与相机
本文介绍了从2D平面到3D空间的转换，重点讲解了WebGL中实现3D效果的核心技术。主要内容包括：1）引入Z轴构建三维坐标系；2）通过透视投影解决2D屏幕显示3D世界的问题；3）详解MVP矩阵（模型矩阵、视图矩阵、投影矩阵）的作用及其组合运算；4）处理深度遮挡问题的深度测试技术；5）实际演示如何创建一个旋转的3D立方体场景。文章通过理论结合实践的方式，系统阐述了3D渲染的基本原理和实现方法。
2025-09-27 14:11:42
1016
原创 第 4 篇：赋予表面生命 - WebGL 纹理贴图
WebGL 纹理贴图简介 本文介绍了WebGL中的纹理贴图技术，通过给3D模型包裹2D图片来增加表面细节。核心概念是UV坐标系统，它使用百分比定位纹理位置（0-1范围）。实现步骤包括：升级着色器处理纹理坐标，加载图片资源，创建WebGL纹理对象并配置取样方式。最终演示了如何给正方形模型贴图，通过两个三角形拼接并映射纹理图片。关键点在于顶点着色器传递UV坐标，片元着色器使用texture2D函数取样颜色，以及JavaScript中正确的纹理加载和配置流程。
2025-09-26 09:06:36
1889
原创 第 3 篇：让图形动起来 - WebGL 2D 变换
本文介绍了如何通过矩阵变换实现WebGL图形的动态效果。核心思路是使用3x3变换矩阵（平移、旋转、缩放）来控制图形位置，而非直接修改顶点坐标。主要技术点包括： 在顶点着色器中添加mat3类型的uniform变量接收变换矩阵 将原始顶点坐标与变换矩阵相乘得到新坐标 在JavaScript中实现基本矩阵运算函数 通过requestAnimationFrame创建动画循环，持续更新旋转角度并重绘 这种方法充分利用GPU的矩阵运算优势，相比直接修改顶点坐标更高效，是图形编程的标准做法。最终实现了一个在画布中心持续旋
2025-09-25 09:25:20
1175
原创 为世界添彩 - WebGL 中的颜色与着色器变量
本文摘要： WebGL教程第二部分聚焦于如何为图形添加颜色渐变效果。通过引入varying变量建立顶点着色器与片元着色器的桥梁，实现颜色插值计算。关键知识点包括： attribute传递顶点数据，varying实现颜色插值，uniform用于全局数据（后续介绍） 采用数据交错(Interleaving)优化性能，将位置和颜色数据合并存储 通过gl.vertexAttribPointer的stride和offset参数精确解析混合数据 最终实现三色渐变三角形：顶点分别为红、绿、蓝，中间像素由GPU自动计算渐变
2025-09-23 17:13:21
1260
原创 开启 3D 之旅 - 你的第一个 WebGL 三角形
这篇教程介绍了如何在WebGL中绘制一个彩色三角形。文章首先解释了WebGL的基本概念，将其与Canvas、Three.js进行对比，强调学习底层WebGL的重要性。核心部分讲解了WebGL的渲染管线原理，重点介绍了顶点着色器和片元着色器的作用。教程提供了完整的HTML代码示例，包括创建canvas元素、编写GLSL着色器代码以及JavaScript胶水代码，实现了一个简单的三角形绘制。通过这个基础示例，读者可以理解WebGL的基本工作原理，为后续3D图形开发打下基础。
2025-09-22 09:18:15
1174
原创 当信任崩塌：从 Fluke 到 Shai‑Hulud，npm 生态的七年安全裂变
025 年，一次复杂的 npm 供应链攻击入侵了超过 187 个包，影响了 JavaScript 生态系统。这些包每周总共有超过 25 亿次下载，使其成为 JavaScript 历史上传播最广泛的供应链攻击之一。更令人震惊的是，作为 npm 生态系统中第一次成功的自我传播攻击，这似乎是迄今为止观察到的最严重的 JavaScript 供应链攻击之一。
2025-09-18 10:50:12
1304
原创 JavaScript Set 和 Map：现代 JavaScript 的数据结构双雄
ES6 引入的 Set 和 Map 为 JavaScript 带来了更强大的数据结构。Set 是一个不重复值的集合，能高效实现去重、集合运算和快速查找。Map 则突破了传统对象的键类型限制，支持任意类型作为键值，提供了更灵活的键值对存储方案。本文通过代码示例展示了 Set 在数组去重、集合运算和性能优化中的应用，以及 Map 相比传统对象的优势，帮助开发者掌握这两种现代数据结构的核心特性和实用场景。
2025-09-01 15:29:25
661
原创 JavaScript Symbol：那个被忽视的“隐形“数据类型
Symbol是ES6引入的独特原始数据类型，具有唯一性和不可枚举性。它能有效解决属性名冲突问题，如避免第三方库对象扩展时的命名覆盖。Symbol每次创建都会生成独一无二的值，即使描述相同也不相等。关键特性包括：绝对唯一性、不可枚举性（不会出现在常规遍历中）和类型安全性。实际应用中，Symbol可用于创建真正的私有属性、安全扩展第三方对象以及定义唯一常量，为JavaScript提供了更强大的元编程能力。
2025-09-01 14:17:09
954
原创 Serverless数据库：云原生时代的数据存储革命
Serverless数据库技术指南 Serverless数据库正引领云原生架构变革，通过弹性扩展、按需付费和运维简化等优势重塑数据处理方式。本文分析了主流产品：Neon凭借PostgreSQL兼容性、分支功能和成本效益成为首选；Supabase作为Firebase开源替代方案提供全栈支持；PlanetScale则优化了MySQL的分布式能力。其他如AWS Aurora、Cosmos DB等各具特色，满足不同场景需求。技术对比显示，PostgreSQL平台间迁移最简单，性能上PlanetScale和Neon表
2025-08-27 23:12:00
1803
原创 深入剖析：Flutter 应用从启动到渲染的完整旅程
本文详细解析了Flutter应用的运行机制，主要分为六个核心步骤：启动原生应用、初始化Flutter引擎、编译加载Dart代码、执行Dart构建Widget树、生成渲染指令并传递、引擎执行渲染。重点介绍了iOS端如何通过JavaScript脚本拉起Xcode运行原生应用，以及Flutter引擎的初始化过程，包括创建Shell对象管理四个关键线程。文章还解释了Dart代码如何被编译为dill文件后由虚拟机执行的流程，帮助开发者深入理解Flutter框架的底层工作原理。
2025-08-20 10:45:34
1135
原创 从源码到可执行文件：揭秘程序编译与执行的底层魔法
摘要：从C代码到机器执行的完整旅程涉及四个关键阶段：预处理展开头文件、编译生成汇编代码、汇编转换为机器码、链接合并目标文件。这一过程将高级语言逐步转化为CPU可执行的二进制指令。程序运行时，CPU通过取指-译码-执行循环处理机器码，操作系统管理内存布局（代码段、数据段、堆栈）。现代编译器还会进行多种优化，不同CPU架构（如x86/ARM）会生成不同的机器码。开发者可使用objdump、gdb等工具分析底层执行过程，而JIT编译等技术进一步模糊了编译与运行的界限。（148字）
2025-08-17 18:01:19
1129
原创 从硅到速度：一文看懂计算机硬件的组成与协作
本文系统介绍了计算机硬件的组成与协作机制。硬件主要由CPU、存储系统、外部设备和芯片组四大类组件构成，通过各类总线与互连通道协同工作。CPU作为执行核心，负责指令处理与系统协调；存储系统包含主存、高速缓存和持久化存储；外部设备通过专用控制器与系统交互。文章详细解析了各部件功能，并提供了两个典型工作流程示例（文件处理与网页渲染），展示硬件如何配合完成实际任务。最后提出了优化程序性能的建议，强调理解硬件协作对系统性能优化的重要性。
2025-08-17 17:05:52
1303
原创 从“存储程序”到现代芯片：一文读懂冯·诺依曼结构为何统治世界
摘要： 冯·诺依曼结构凭借“存储程序”设计（指令与数据统一存储）成为通用计算的主流架构，其核心为CPU循环执行“取指—译码—执行”流程。该结构的优势在于编程模型统一、硬件通用性强、生态成熟（编译器/OS/工具链完备），并通过缓存、流水线、乱序执行等优化持续突破性能瓶颈。尽管存在内存带宽与延迟的“冯·诺依曼瓶颈”，现代工程手段（分层存储、SIMD、预取等）已大幅缓解。其他架构（如哈佛、数据流、GPU等）在特定场景更高效，但冯·诺依曼因其平衡性、兼容性与生态壁垒，仍是通用计算不可替代的基石。未来，专用加速器可能
2025-08-17 16:33:29
1472
原创 Flutter 插件工作原理深度解析：从 Dart 到 Native 的完整调用链路
本文深入解析Flutter插件工作机制，从Dart层到Native层的完整调用链路。Flutter采用基于Platform Channel的消息传递架构，包含自动注册、方法调用委托绑定和底层消息处理器注册等核心流程。文章详细剖析了方法调用的执行链路、消息序列化机制、线程安全和内存管理等技术细节，并给出性能优化建议。Flutter插件的分层架构设计、高效消息传递和完善生命周期管理等特点，为开发者构建高质量跨平台应用提供了理论基础。
2025-08-15 22:50:07
1197
原创 Flutter Provider 完全指南：从入门到精通
Flutter状态管理利器Provider指南 摘要：Provider是Flutter官方推荐的状态管理解决方案，基于InheritedWidget构建，提供简洁高效的状态管理和依赖注入能力。本文介绍了Provider的核心概念、基础用法和优势特点。主要内容包括：1) 通过ChangeNotifierProvider创建数据模型；2) 使用Consumer/Provider.of/context.read三种方式消费数据；3) 对比传统方式和Provider方式的差异，突出Provider在避免prop d
2025-08-14 08:56:02
1089
原创 Flutter 迎来重大变革：Material 设计系统拆分，迈向更开放的 UI 框架
Flutter正进行架构重构，将核心框架与Material设计系统解耦。这一变革解决历史遗留问题：消除隐式依赖、减少应用体积、提升跨平台适配性。新架构采用分层设计，基础组件与设计系统分离，导航系统重构为平台相关实现。开发者将获得更轻量级的基础框架、真正的多平台风格支持，以及定制设计系统的便利，但需面临代码迁移和依赖管理的新挑战。这一变革标志着Flutter进入成熟期，为生态多样性开辟新可能，使其成为更通用的UI开发工具包。
2025-08-13 08:50:37
1202
原创 Flutter SizeTransition：让你的UI动画更加丝滑
Flutter中的SizeTransition组件能实现流畅的尺寸变化动画效果。它通过控制子组件宽高变化，实现展开/收缩过渡，比传统AnimatedContainer方案性能更优，能避免溢出错误和不必要的布局计算。SizeTransition支持自定义动画方向、曲线，并能与其他动画组件组合创建复杂效果，是提升UI交互体验的高效工具。
2025-08-12 14:18:39
834
原创 Flutter AnimatedList 完全指南：打造流畅的动态列表体验
Flutter的AnimatedList为动态列表操作提供了流畅的动画效果，显著提升用户体验。相比普通ListView，它能在添加、删除列表项时自动播放动画，无需手动编写复杂代码。核心特性包括自动动画、高性能渲染（仅处理变化项）、动画自定义和内置状态管理。通过GlobalKey控制动画状态，itemBuilder构建动画项，insertItem/removeItem触发具体操作。示例展示了任务列表的实现：添加任务时数据更新后触发插入动画，删除时先移除数据再播放渐隐动画。对比演示证明AnimatedList能
2025-08-12 09:49:27
1314
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人