一、创建一个基础的ThreeJS场景
第一幕：创建你的第一个 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以及什么是Three\BabylonJS
什么是 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规范中的应用
前端在 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 性能优化实战（二）：渲染机制与优化原理
文章简介深入解析 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 性能优化实战（一）：性能瓶颈分析方法
文章简介介绍在 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主题配置
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搭建
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 ...
二、建站过程——Rspress尝试
Rspress 尝试过程Rspress 是一个基于 Rspack 的静态站点生成器，特别适合用于构建文档网站。在框架选型阶段，我也尝试了 Rspress，以下是尝试过程及一些心得。 Rspress 搭建过程搭建 Rspress 的过程相对直接，主要参考了其官方文档 步骤大致如下： 初始化项目: 可以通过脚手架 npm create rspress@latest 或手动创建目录并初始化 npm 项目。我选择了手动方式，创建了项目目录并运行 npm init -y。 安装 Rspress: 使用 npm、pnpm、yarn 或 bun 安装 Rspress 作为开发依赖。我使用了 npm：npm install rspress -D 创建文档目录和首页: 按照约定，创建 docs 目录并在其中创建 index.md 作为首页：mkdir docs && echo '# Hello world' > docs/index.md 配置 package.json 脚本: 在 package.json 中添加用于开发、构建和预览的脚本： 123...
一、建站过程——框架选型
建站框架选型过程在搭建个人博客的初期，我调研了几种流行的静态站点生成器，旨在找到一个既能满足我的技术偏好，又能提供良好写作和维护体验的框架。以下是我当时考虑的几个主要选项： 1. NextraNextra 是基于 Next.js 的静态站点生成器，特别适合构建文档网站。它利用了 Next.js 的强大功能，如文件系统路由、API 路由等，并且支持 MDX，可以直接在 Markdown 中使用 React 组件。Nextra 的优势在于其灵活性和与 React 生态的紧密结合，对于熟悉 Next.js 的开发者来说非常友好。然而，对于一个以博客为主的站点，Nextra 可能显得有些“重”，且其主要设计目标是文档，而非传统意义上的博客。 2. DumiDumi 是基于 UmiJS 的组件级文档和静态站点工具，主要面向组件开发者。它提供了丰富的组件演示和调试能力，内置全文搜索，并且编译性能优秀。Dumi 在展示组件和构建组件库文档方面表现出色，但与 Nextra 类似，它更侧重于技术文档和组件展示，用于个人博客可能不是最直接的选择。 3. RspressRspress 是基于 Rspa...