Edon Wang's Blog

文章简介聚焦 React 组件的重渲染机制与状态管理，梳理常见的性能陷阱与优化技巧，提升应用响应速度。 主要内容组件重渲染的触发机制 父组件重新渲染会导致所有子组件默认也重新渲染（除非被 React.memo 包裹） props 变化、state 变化、context 变化都会触发组件重渲染 forceUpdate、key 变化等也会导致组件重新挂载 代码示例：父组件更新导致子组件重渲染1234567891011121314151617181920import React, { useState, memo } from "react";type ChildProps = { value: number };const Child = memo(function Child({ value }: ChildProps) { console.log("Child render"); return <div>{value}</div...

微信小程序 3D：原生框架与 H5 套壳的深度解析在微信小程序生态中，开发者面临着两种主流的 3D 实现路径：基于原生框架的 XR-Frame 与基于 H5 技术栈的套壳方案。理解两者的核心差异，对于选择最适合项目需求的技术方案至关重要。 原生 XR-Frame：性能与深度的融合微信小程序官方推出的 XR-Frame，是专为小程序环境量身打造的 XR/3D 应用解决方案。它并非简单的 H5 封装，而是基于混合方案实现，旨在提供接近原生应用的性能体验。XR-Frame 的优势在于： 性能逼近原生：通过底层优化，XR-Frame 能够更高效地利用设备硬件资源，减少渲染延迟，提供流畅的 3D 交互体验。这对于对性能要求较高的复杂 3D 场景尤为关键。 深度集成：XR-Frame 与微信小程序生态系统深度融合，能够无缝调用小程序 API，实现更丰富的功能，例如与微信支付、用户数据、设备传感器等进行高效互动。 易用性与扩展性：XR-Frame 遵循小程序开发标准，降低了开发者的学习门槛。同时，其模块化的设计也提供了良好的扩展性，方便开发者根据需求定制功能。 官方支持与维护：作为...

第一幕：创建你的第一个 Babylon.js 场景现在是时候创建我们的场景并在屏幕上生成一些东西了。我们将以 Vite 项目为例，从零开始搭建一个基础的 Babylon.js 场景。 1. 创建 Vite 项目并安装 Babylon.js首先，我们需要创建一个 Vite 项目。打开你的终端，执行以下命令： 123npm create vite@latest my-babylonjs-app -- --template vanillacd my-babylonjs-appnpm install 接下来，安装 Babylon.js 库： 1npm install @babylonjs/core @babylonjs/loaders 2. 初始化场景要素在main.js（或你选择的入口文件）中，我们需要引入 Babylon.js 并设置场景的核心要素：引擎、场景、相机和灯光。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565...

第一幕：创建你的第一个 Three.js 场景现在是时候创建我们的场景并在屏幕上生成一些东西了。我们将以 Vite 项目为例，从零开始搭建一个基础的 Three.js 场景。 1. 创建 Vite 项目并安装 Three.js首先，我们需要创建一个 Vite 项目。打开你的终端，执行以下命令： 123npm create vite@latest my-threejs-app -- --template vanillacd my-threejs-appnpm install 接下来，安装 Three.js 库： 1npm install three 2. 初始化场景要素在main.js（或你选择的入口文件）中，我们需要引入 Three.js 并设置场景的四个核心要素：场景、对象、相机和渲染器。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767...

什么是 WebGL？WebGL（Web Graphics Library）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中渲染交互式 2D 和 3D 图形，而无需使用插件。它通过引入一个与 OpenGL ES 2.0 兼容的 API，将 GPU 的强大功能带到 Web 上。这意味着开发者可以直接利用用户的显卡进行高性能的图形渲染，从而在浏览器中实现复杂的游戏、数据可视化、虚拟现实（VR）和增强现实（AR）应用。 WebGL 的核心是基于 OpenGL ES 2.0，它是一个低级的图形 API，直接操作 GPU。因此，使用 WebGL 进行开发需要对图形学概念有深入的理解，例如顶点、着色器（Shader）、纹理、矩阵变换等。直接使用 WebGL 编写代码通常会非常复杂和冗长。 什么是 Canvas？HTML <canvas> 元素用于在网页上绘制图形。它本身是一个空白的矩形区域，开发者可以使用 JavaScript 在其上绘制各种图形，包括 2D 图形和 3D 图形。当与 WebGL 结合使用时，<canvas> 元素就成为了 Web...

前端在 RESTful 规范中的应用1. RESTful 概述REST（Representational State Transfer，表述性状态转移）是一种软件架构风格，它定义了一组用于创建 Web 服务的约束。RESTful API 的核心思想是将网络上的所有事物都视为资源，并通过统一的接口进行操作。它基于 HTTP 协议，利用 HTTP 方法（GET、POST、PUT、DELETE 等）来表示对资源的操作，并通过 URL 来定位资源。RESTful API 的设计目标是实现高性能、可伸缩性、简单性和可维护性。 核心原则： 资源（Resource）：网络上的所有事物都被抽象为资源，每个资源都有唯一的标识符（URI）。 统一接口（Uniform Interface）：客户端通过统一的 HTTP 方法对资源进行操作。 无状态（Stateless）：服务器不保存客户端的任何会话信息，每次请求都包含所有必要的信息。 可缓存（Cacheable）：客户端可以缓存服务器的响应，提高性能。 分层系统（Layered System）：客户端无法直接连接到最终服务器，而是通过中间服务器进行通...

文章简介深入解析 React 的渲染机制，包括虚拟 DOM、Diff 算法、Fiber 架构等，帮助开发者理解性能优化的底层原理。 主要内容虚拟 DOM 与真实 DOM 的关系React 通过虚拟 DOM（VDOM）实现高效的 UI 更新。每次状态变更时，React 会生成新的虚拟 DOM 树，与上一次的虚拟 DOM 进行对比（Diff），最终只将差异部分同步到真实 DOM，减少了直接操作 DOM 的性能开销。 示例：虚拟 DOM 更新流程1234567891011import React, { useState } from "react";export default function Counter() { const [count, setCount] = useState(0); return ( <div> <span>{count}</span> <button onClick={() => setCount(...

文章简介介绍在 React 项目中常见的性能瓶颈类型，梳理定位和分析性能问题的常用方法与工具，为后续优化打下基础。 主要内容性能瓶颈的常见表现 首屏加载慢，白屏时间长 页面滚动、动画卡顿，FPS 低 交互响应迟钝，点击、输入延迟 组件频繁重渲染，CPU 占用高 内存泄漏，页面长时间运行后变慢甚至崩溃 性能分析的基本思路 明确性能目标与关键指标（如 FCP、TTI、LCP、FPS 等） 复现性能问题，收集相关数据 利用工具定位瓶颈（网络、渲染、JS 执行、内存等） 结合代码结构分析，找出根因 制定并验证优化方案 浏览器性能分析工具1. Chrome DevTools Performance 面板：录制页面性能快照，分析 JS 执行、渲染、重排重绘等耗时 Memory 面板：检测内存泄漏、对象分配 Network 面板：分析资源加载瓶颈 常用操作 录制性能快照，查找长任务（Long Task） 查看 Main 线程耗时分布 分析 Timeline，定位卡顿点 2. React Profiler用于分析组件渲染耗时、识别不必要的重渲染。 使用方法（React 18 + Type...

Butterfly 主题配置过程1. 安装 Butterfly 主题首先，确保你的 Hexo 博客已经搭建完成。然后，在你的 Hexo 博客根目录下打开终端，运行以下命令安装 Butterfly 主题： 1npm install hexo-theme-butterfly 安装完成后，修改 Hexo 根目录下的 _config.yml 文件，将 theme 的值更改为 butterfly。 1theme: butterfly 2. 创建主题配置文件为了方便管理和升级主题，建议不要直接修改主题文件夹下的配置文件。可以将 node_modules 文件夹下 hexo-theme-butterfly 中的 _config.yml 文件复制到 Hexo 项目根目录下，并重命名为 _config.butterfly.yml。 1cp -i node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml Hexo 会优先读取根目录下的 _config.butterfly.yml 文件作为主题配置文件。 3. 基础配置...

Hexo 搭建过程1. 安装 Node.js 和 Gitnode 使用 nvm 管理、git 使用 homebrew 安装即可（windows 使用安装包即可 2. 安装 Hexo打开终端，运行以下命令全局安装 Hexo CLI： 1npm install -g hexo-cli 安装完成后，验证 Hexo 是否安装成功： 1hexo version 3. 初始化博客选择一个合适的目录，运行以下命令初始化一个新的 Hexo 博客： 123hexo init <folder>cd <folder>npm install <folder> 是你想要创建博客的文件夹名称。npm install 命令会安装博客所需的依赖。 4. 生成和预览博客初始化完成后，可以生成静态文件并在本地预览博客： 12hexo generatehexo server 运行 hexo server 后，通常可以在浏览器中访问 http://localhost:4000 查看你的博客。 部署到 GitHub Pages将 Hexo 博客部署到 GitHub Pages ...