PixiJS高性能渲染实战：小程序游戏开发三步走与性能优化指南

1. 项目概述

最近几年，小程序游戏的热度一直居高不下，从营销活动到轻量级休闲游戏，它几乎成了触达用户最直接的渠道之一。但很多开发者，尤其是从Web前端转过来的朋友，一上手就发现不对劲：在小程序里做游戏，怎么感觉处处受限，性能也总差那么一口气？Canvas 2D API用起来束手束脚，稍微复杂点的动画就卡顿，想上WebGL又发现小程序环境对DOM和BOM的支持几乎为零，很多成熟的Web游戏引擎根本跑不起来。

这正是“PixiJS高性能渲染实战指南”要解决的核心问题。PixiJS本身是一个久经考验的2D WebGL渲染引擎，在H5游戏和互动应用领域口碑极佳。但它的运行严重依赖浏览器环境。而“pixi-miniprogram”这个适配方案，通过一系列巧妙的“外科手术”，让PixiJS的核心渲染能力成功移植到了小程序平台。这不仅仅是简单的API封装，而是对渲染管线、资源加载、事件系统的一次深度重构。通过它，你可以用熟悉的PixiJS语法，在小程序里创建数百甚至上千个精灵（Sprite），实现流畅的粒子系统、骨骼动画和物理效果，性能相比原生Canvas 2D有数倍的提升。

这篇文章，我将以一个实际参与过的小程序游戏项目经验为基础，为你拆解如何用三步走通这条高性能开发路径。无论你是想为品牌活动打造一个炫酷的互动H5，还是开发一款轻量级的休闲小游戏，这套方案都能让你避开早期探索的坑，直接站在一个更高的起点上。我们会从环境搭建、核心场景构建，一直讲到性能调优和真机调试，所有步骤都配有可运行的代码示例和踩坑实录。

2. 核心思路与方案选型：为什么是PixiJS + 小程序适配？

在决定技术栈时，我们面临几个选择：继续用小程序原生的Canvas 2D、寻找其他专为小程序设计的轻量引擎，或者走这条“移植成熟引擎”的路。最终选择PixiJS适配方案，是基于以下几个核心考量。

2.1 性能需求的根本矛盾

小程序游戏，尤其是带有丰富视觉效果的互动应用，对渲染性能的要求非常高。原生Canvas 2D API进行大量绘制调用时，尤其是在低端安卓机上，帧率很难稳定在60fps。其绘制模式是“立即执行”，每帧都要重新绘制所有元素，CPU负担重。而WebGL（或OpenGL ES）的优势在于它是基于状态机和批处理的，可以将大量相似的绘制操作合并，提交给GPU执行，效率有质的飞跃。

PixiJS的核心价值就在于它高效地封装了WebGL的复杂性，提供了精灵、纹理、容器等高级抽象，让开发者无需直接操作晦涩的GL命令，就能享受到GPU加速的红利。pixi-miniprogram项目所做的，就是架起一座桥，让PixiJS这套优秀的渲染逻辑能在小程序的沙箱环境里跑起来。

2.2 开发效率与生态优势

从头打造一个高性能渲染引擎的代价是巨大的。PixiJS拥有超过7年的迭代历史，其稳定性、功能丰富度和社区生态是小团队或新引擎无法比拟的。它支持纹理图集、精灵表动画、滤镜、混合模式、遮罩等高级特性。这意味着我们不需要重复造轮子，可以直接利用这些现成的、经过优化的功能模块，快速实现产品需求。

选择适配方案，相当于我们站在了巨人的肩膀上。团队的学习成本也大大降低，熟悉PixiJS或Web前端图形开发的工程师可以快速上手，将更多精力投入到游戏玩法逻辑和美术资源制作上，而不是纠结于底层的渲染细节。

2.3 “适配层”而非“重写”的智慧

pixi-miniprogram的方案非常聪明，它不是用JavaScript重写了一个PixiJS，而是修改了原版PixiJS的源码。具体来说，它主要做了两件事：

1. 环境模拟：PixiJS内部会用到一些浏览器特有的对象，如window、document、navigator等。适配层创建了这些对象的模拟版本，提供一个PixiJS期望的运行环境。
2. 渲染器替换：将PixiJS中直接调用WebGL API的部分，替换为调用小程序提供的<canvas>组件的对应方法。小程序的Canvas组件本身也提供了WebGL上下文（通过wx.createCanvasContext或SelectorQuery获取），适配层的工作就是做好这个“翻译”。

这种做法的好处是，我们最大程度地保留了PixiJS的所有功能和性能特性，只是改变了它的“运行平台”。项目的example/目录提供了完整的示例，展示了从资源加载到交互的完整流程，极具参考价值。

注意：由于修改了源码，这个适配方案通常会锁定某个PixiJS版本（例如v5.x）。在引入项目时，需要确认该适配版本与你希望使用的PixiJS特性是否兼容。不过对于大多数2D游戏需求，v5版本的功能已经绰绰有余。

3. 三步实战：从零构建你的第一个PixiJS小程序游戏

理论讲完，我们进入最关键的实战环节。我将用一个简单的“点击消灭星星”游戏为例，带你走通完整的开发流程。这个例子包含了精灵创建、动画、交互和资源管理这些核心要素。

3.1 第一步：工程化环境搭建与配置

小程序开发有自己的工程结构，我们不能像在浏览器里一样直接引入一个<script>标签。第一步就是创建一个干净的小程序项目，并正确集成pixi-miniprogram。

3.1.1 创建小程序项目与引入适配库

首先，在微信开发者工具中创建一个新的小程序项目。然后，我们需要获取适配库。通常有两种方式：

1. 直接复制示例项目：从pixi-miniprogram的GitCode仓库克隆整个项目，将其中的example目录作为一个完整的小程序项目打开。这是最快的方式，里面配置和示例代码都是现成的。
2. 手动集成（推荐用于正式项目）：更清晰的做法是只将必要的文件拷贝到我们自己的项目中。
   • 在项目根目录下新建一个libs文件夹。
   • 从pixi-miniprogram仓库中，将src/目录下的适配源码（通常是pixi.js、pixi.min.js及其相关模块）以及示例中提供的pixi-miniprogram组件目录，一并拷贝到libs下。

我推荐第二种，因为它保持了项目结构的清晰。你的libs目录结构可能看起来像这样：

libs/ ├── pixi.miniprogram/ # 小程序自定义组件 │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── pixi.js # 适配后的PixiJS核心库

3.1.2 关键配置详解

接下来是几个容易出错的配置点：

• app.json中启用WebGL：必须在app.json的window配置项或具体页面的json文件中声明使用WebGL的Canvas。

  { "usingComponents": { "pixi-canvas": "/libs/pixi-miniprogram/index" } }

  同时，确保项目设置中“本地设置”选项卡下的“调试基础库”版本足够新，以支持完整的WebGL能力。

• 页面WXML模板：在游戏页面的WXML中，使用我们注册的自定义组件。这里有一个至关重要的细节：必须给<pixi-canvas>组件设置一个固定的、非零的宽高，或者在init回调中动态设置。WebGL上下文依赖于一个有效尺寸的Canvas。

  <!-- game.wxml --> <view class="game-container"> <pixi-canvas id="gameCanvas" width="750" height="1200" bind:init="onCanvasInit" > </pixi-canvas> </view>

  width和height我使用了rpx单位对应的逻辑像素值（假设设计稿是750rpx宽），这能更好地适配不同屏幕。bind:init是组件初始化完成后的回调事件，我们将在其中初始化PixiJS应用。

• game.wxss样式：确保Canvas容器样式正确，防止滚动或溢出。

  .game-container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000; }

3.2 第二步：PixiJS应用初始化与基础场景构建

当Canvas准备就绪后，我们就进入了熟悉的PixiJS世界。

3.2.1 初始化Pixi应用实例

在页面的JS文件（game.js）中，我们首先在onLoad或onReady生命周期中等待Canvas初始化。

// game.js Page({ data: {}, onReady() { // 组件已挂载，但Canvas可能还未就绪 }, // 这是<pixi-canvas>组件初始化完成后的回调 onCanvasInit(event) { const canvas = event.detail.canvas; // 获取小程序Canvas对象 this.initPixiApp(canvas); }, initPixiApp(canvas) { // 关键步骤：使用适配层提供的createPIXI方法，传入小程序Canvas const PIXI = createPIXI(canvas); // 创建PixiJS应用实例，关联到这个Canvas this.app = new PIXI.Application({ view: canvas, // 指定渲染视图 width: 750, // 与WXML中宽高一致 height: 1200, backgroundColor: 0x1099bb, // 经典的PixiJS蓝色背景 resolution: window.devicePixelRatio || 1, // 适配高清屏 autoStart: true, // 自动开始渲染循环 }); // 将PixiJS的舞台(stage)保存到页面实例，方便后续操作 this.stage = this.app.stage; this._setupGame(); // 开始构建游戏场景 }, })

这里的createPIXI函数是适配层的入口，它处理了环境模拟和渲染器绑定。this.app对象就是整个PixiJS世界的控制器，管理着渲染循环、舞台和插件。

3.2.2 创建游戏背景与静态元素

让我们先搭建一个简单的星空背景。

_setupGame() { // 1. 创建背景（这里用纯色，实际项目中会加载图片纹理） const bg = new PIXI.Graphics(); bg.beginFill(0x0a0a2a); // 深蓝色 bg.drawRect(0, 0, this.app.screen.width, this.app.screen.height); bg.endFill(); this.stage.addChild(bg); // 2. 创建标题文本 const titleStyle = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 48, fill: '#ffffff', stroke: '#4a1850', strokeThickness: 5, }); this.titleText = new PIXI.Text('点击消灭星星！', titleStyle); this.titleText.anchor.set(0.5); // 设置锚点为中点 this.titleText.x = this.app.screen.width / 2; this.titleText.y = 100; this.stage.addChild(this.titleText); // 3. 创建分数显示 this.score = 0; const scoreStyle = new PIXI.TextStyle({ fill: 0xffff00, fontSize: 36 }); this.scoreText = new PIXI.Text(`得分: ${this.score}`, scoreStyle); this.scoreText.x = 30; this.scoreText.y = 30; this.stage.addChild(this.scoreText); // 接下来，准备生成可交互的星星 this._createStars(); }

至此，一个静态的游戏界面就完成了。但我们的星星还没出现。

3.3 第三步：实现核心交互与动画

游戏的灵魂在于交互和动效。我们来创建会动的星星，并响应点击事件。

3.3.1 动态生成与动画精灵

首先，我们需要星星的纹理。在小程序里，加载网络图片资源需要注意域名配置。为了简化，我们可以使用PixiJS内置的图形（Graphics）来绘制，或者使用Base64格式的小图。这里我们用图形绘制。

_createStars() { this.stars = []; // 用于存储所有星星精灵的数组 const starCount = 20; // 星星数量 for (let i = 0; i < starCount; i++) { // 创建一个图形作为星星 const star = new PIXI.Graphics(); // 绘制一个五角星 star.beginFill(this._getRandomColor()); star.drawStar(0, 0, 5, 25, 10); // drawStar是PixiJS Graphics的扩展方法，适配层需支持 star.endFill(); // 设置随机位置 star.x = Math.random() * (this.app.screen.width - 100) + 50; star.y = Math.random() * (this.app.screen.height - 300) + 150; // 设置交互性 star.interactive = true; // 启用交互 star.buttonMode = true; // 鼠标（或触摸）悬停时显示手型光标 star.cursor = 'pointer'; // 添加点击事件监听器 star.on('pointerdown', this._onStarClicked.bind(this, star)); // 为星星添加一个简单的上下浮动动画 this._addFloatAnimation(star); // 添加到舞台和数组 this.stage.addChild(star); this.stars.push(star); } } // 生成随机颜色 _getRandomColor() { const colors = [0xFFD700, 0xFF6B6B, 0x4ECDC4, 0x95E1D3, 0xFF9A76]; return colors[Math.floor(Math.random() * colors.length)]; } // 添加浮动动画 _addFloatAnimation(sprite) { const startY = sprite.y; const amplitude = 20; // 浮动幅度 const speed = 0.05 + Math.random() * 0.03; // 随机速度 // 在PixiJS的渲染循环（ticker）中更新位置 this.app.ticker.add((delta) => { // delta是时间因子，使动画与帧率无关 sprite.y = startY + Math.sin(sprite.floatTime || 0) * amplitude; sprite.floatTime = (sprite.floatTime || 0) + speed * delta; }); }

这里有几个关键点：

1. interactive和buttonMode：必须设置为true，精灵才能响应触摸事件。
2. app.ticker：这是PixiJS的全局心跳计时器，每帧执行。将动画逻辑放在这里，可以保证动画流畅。使用delta参数能使动画速度在不同帧率下保持一致。
3. 性能注意：在ticker回调中避免创建新对象或进行复杂计算。我们这里只是修改已有的属性，效率很高。

3.3.2 处理用户交互

当星星被点击时，我们需要让它有一个“被消灭”的效果，然后更新分数。

_onStarClicked(star) { // 1. 播放一个缩小消失的动画 const shrinkTween = new PIXI.Tween.Tween(star.scale) .to({ x: 0, y: 0 }, 300) // 300毫秒内缩放到0 .easing(PIXI.Tween.Easing.Back.In) // 使用回弹缓动函数，效果更生动 .start(); // 2. 动画结束后，从舞台和数组中移除星星 shrinkTween.onComplete(() => { this.stage.removeChild(star); const index = this.stars.indexOf(star); if (index > -1) { this.stars.splice(index, 1); } // 3. 更新分数 this.score += 100; this.scoreText.text = `得分: ${this.score}`; // 4. 如果星星被消灭完，游戏结束 if (this.stars.length === 0) { this._showGameOver(); } }); } _showGameOver() { const style = new PIXI.TextStyle({ fill: 0x00ff00, fontSize: 64, fontWeight: 'bold' }); const gameOverText = new PIXI.Text('恭喜通关！', style); gameOverText.anchor.set(0.5); gameOverText.x = this.app.screen.width / 2; gameOverText.y = this.app.screen.height / 2; this.stage.addChild(gameOverText); }

这里使用了PIXI.Tween（需要单独引入tween.js库或使用其他动画库）来实现补间动画，让消失效果更平滑。你也可以用app.ticker手动实现动画，但使用动画库代码更简洁。

3.3.3 资源加载的注意事项

在实际项目中，你肯定会使用图片纹理。PixiJS的PIXI.Loader在小程序里同样可以使用，但加载路径需要注意。

// 假设图片放在项目根目录的images文件夹下 PIXI.Loader.shared .add('star', '/images/star.png') // 路径相对于小程序根目录 .add('bg', '/images/background.jpg') .load((loader, resources) => { // 资源加载完成 const starTexture = resources.star.texture; const starSprite = new PIXI.Sprite(starTexture); // ... 使用sprite });

重要提示：小程序对于网络图片有域名白名单限制。如果图片资源放在你自己的服务器上，务必在小程序管理后台的“开发设置”-“服务器域名”中配置downloadFile合法域名。对于大量图片，强烈建议使用纹理图集（Texture Atlas），它能将多张图片合并成一张大图，减少网络请求和GPU纹理切换，显著提升性能。可以使用TexturePacker等工具生成图集和对应的JSON数据文件，然后用PIXI.Loader加载。

4. 性能优化与深度调优实战

一个能跑起来的Demo和一款流畅的游戏之间，隔着性能优化这道鸿沟。在小程序环境下，内存和GPU资源比浏览器更加紧张，优化尤为重要。

4.1 渲染性能监控与分析

微信开发者工具是性能分析的第一站。打开“调试器”面板的“Performance”或“性能”标签页（不同版本名称可能不同），录制一段游戏操作。

• 关注FPS图表：理想情况是稳定的60fps（或屏幕刷新率）。如果出现频繁的掉帧（FPS骤降），说明存在性能瓶颈。
• 观察CPU和内存占用：长时间游戏后，内存是否持续增长？可能存在内存泄漏（如未正确移除事件监听器、纹理未销毁）。
• 分析调用树（Call Tree）：找到耗时最长的JavaScript函数，它们就是优化的重点。

在代码中，我们也可以埋点监控：

let frameCount = 0; let lastTime = Date.now(); this.app.ticker.add(() => { frameCount++; const now = Date.now(); if (now - lastTime >= 1000) { const fps = Math.round((frameCount * 1000) / (now - lastTime)); console.log(`当前FPS: ${fps}`); frameCount = 0; lastTime = now; } });

4.2 核心优化策略

4.2.1 对象池（Object Pooling）

在“消灭星星”游戏中，星星不断被销毁和创建（虽然我们例子中是游戏结束才创建）。频繁创建和销毁PIXI对象（Graphics,Sprite）会触发垃圾回收（GC），导致卡顿。对象池是解决这个问题的经典模式。

class StarPool { constructor(createFunc, initialSize = 20) { this.pool = []; this.createFunc = createFunc; for (let i = 0; i < initialSize; i++) { this.pool.push(this.createFunc()); } } acquire() { if (this.pool.length > 0) { return this.pool.pop(); } // 池子空了，新建一个 return this.createFunc(); } release(obj) { // 重置对象状态，例如位置、透明度、动画等 obj.alpha = 1; obj.scale.set(1); obj.x = 0; obj.y = 0; if (obj.children) { // 如果有子元素也需要重置 obj.children.forEach(child => this.release(child)); } this.pool.push(obj); } } // 使用对象池 this.starPool = new StarPool(() => { const star = new PIXI.Graphics(); star.beginFill(0xFFD700); star.drawStar(0, 0, 5, 25, 10); star.endFill(); star.visible = false; // 创建时先隐藏 this.stage.addChild(star); // 创建时就加入舞台，只是隐藏 return star; }); // 需要星星时 const star = this.starPool.acquire(); star.visible = true; star.x = 100; star.y = 100; // ... 设置其他属性 // 星星被消灭时 star.visible = false; this.starPool.release(star); // 回收到池子，而不是销毁

通过对象池，我们复用了图形对象，极大地减少了GC压力。

4.2.2 纹理与渲染批处理（Batch Rendering）

PixiJS内部会自动对使用相同纹理的精灵进行批处理，以减少WebGL绘制调用（draw calls）。为了最大化这个优势：

• 使用纹理图集：这是最重要的优化手段。将游戏中的所有小图合并到一张大图上，这样无论精灵如何变化，GPU都只需要绑定一次纹理，渲染效率极高。
• 避免频繁切换纹理：在代码层面，尽量将使用相同纹理的精灵连续地添加到舞台上，或者放在同一个容器（PIXI.Container）里。PixiJS的渲染顺序会影响批处理。
• 慎用滤镜和混合模式：滤镜（Filter）和特殊的混合模式通常会打断批处理，因为它们改变了渲染状态。如果可能，将需要滤镜的效果预渲染成纹理。

4.2.3 离屏渲染（Render Texture）

对于复杂的、静态的或变化不频繁的背景元素，可以考虑使用离屏渲染。将其渲染到一个PIXI.RenderTexture上，然后把这个纹理作为一个PIXI.Sprite显示在主舞台上。这样，无论背景多复杂，每帧都只需要绘制一次这个静态的精灵。

// 创建离屏渲染容器 const offScreenContainer = new PIXI.Container(); // ... 向其中添加复杂的背景元素 // 创建渲染纹理 const renderTexture = PIXI.RenderTexture.create({ width: 750, height: 1200 }); // 将容器渲染到纹理上 this.app.renderer.render(offScreenContainer, { renderTexture }); // 创建一个使用该纹理的精灵，并添加到主舞台 const backgroundSprite = new PIXI.Sprite(renderTexture); this.stage.addChildAt(backgroundSprite, 0); // 放在最底层

注意，离屏纹理会占用额外的GPU内存，且如果内容需要更新，需要重新渲染。

4.3 内存管理与泄漏防范

小程序有严格的内存限制，内存泄漏会导致页面卡顿甚至闪退。

1. 销毁纹理：当确定不再使用某个纹理时（如切换场景），调用texture.destroy(true)来销毁它并释放GPU内存。PIXI.utils.destroyTextureCache()可以清理整个纹理缓存，但要小心使用。
2. 移除事件监听器：在精灵被销毁或回收到对象池之前，务必移除其上的所有事件监听器（off或removeAllListeners），否则这些监听器会阻止对象被垃圾回收。
3. 清理Ticker回调：添加到app.ticker的动画函数，如果其引用了已被销毁的对象，也会造成泄漏。确保在对象销毁时，也从ticker中移除对应的回调。

   const tickerCallback = (delta) => { /* 引用了一些对象 */ }; this.app.ticker.add(tickerCallback); // 在需要清理的时候 this.app.ticker.remove(tickerCallback);

4. 使用开发者工具的内存快照（Memory Snapshot）：定期拍摄内存快照，对比不同时间点的对象实例数量，查找持续增长且不应增长的对象类型（如PIXI.Sprite,PIXI.Graphics），这是定位内存泄漏最有效的方法。

5. 真机调试、发布与进阶技巧

5.1 真机调试必查清单

在开发者工具里跑得流畅，不代表在真机上没问题。真机调试是上线前的必经之路。

• Canvas层级问题：小程序的<canvas>组件是原生组件，层级最高，会覆盖在普通的WebView组件之上。这意味着你不能用普通的view来覆盖Canvas实现UI（如弹出框）。解决方案是：所有游戏内UI（分数、按钮）都用PixiJS的PIXI.Text和PIXI.Graphics绘制在Canvas内部。对于不得不使用小程序原生组件的场景（如激励视频广告），需要动态隐藏Canvas。
• 触摸事件穿透：确保Canvas区域能正确接收触摸事件。检查WXML中Canvas组件是否被其他view覆盖，或者CSS样式导致其可点区域变小。
• iOS与安卓差异：
  • 性能：通常iOS的WebGL性能更稳定。低端安卓机是性能瓶颈的主要发生地，务必在这些设备上进行测试。
  • 内存：iOS对内存管理更严格，超出限制会直接闪退。安卓则可能表现为越来越卡。
  • 渲染精度：某些GPU驱动差异可能导致WebGL渲染细微差别，特别是透明度和颜色混合方面。需要在多款机型上测试视觉效果。
• 网络资源加载：真机环境下，图片等资源的加载速度可能较慢，甚至失败。要做好加载失败的处理（显示占位图）和加载中的等待动画（Loading界面）。

5.2 分包与体积优化

随着游戏资源（图片、音频、字体）增多，小程序的包体积很容易超过2MB的主包限制。必须使用小程序的分包加载功能。

1. 规划分包结构：将PixiJS适配库、游戏核心逻辑放在主包。将不同的游戏场景、关卡资源、大量的纹理图集放到独立的分包中。
2. 动态加载分包：在进入某个游戏场景前，使用wx.loadSubpackage预下载对应的分包。

   wx.loadSubpackage({ name: 'game-level1', // 分包名 success: (res) => { console.log('分包加载成功'); this.startLevel1(); }, fail: (err) => { console.error('分包加载失败', err); // 处理失败情况，如提示用户重试 } });

3. 纹理图集压缩：使用工具对纹理图集的PNG图片进行压缩（如TinyPNG），在不明显损失画质的前提下减小文件体积。音频文件同样需要压缩。

5.3 进阶技巧：状态管理与粒子系统

对于更复杂的游戏，良好的代码结构至关重要。

• 状态管理：即使是小游戏，也建议引入一个简单的状态管理机制。例如，使用一个全局的gameState对象来管理分数、玩家生命值、游戏阶段（菜单、游戏中、暂停、结束）等。这比把状态散落在各个页面和组件里要清晰得多。
• 粒子系统（Particle System）：PixiJS有强大的粒子系统库pixi-particles。用它来实现爆炸、火焰、魔法等特效非常简单且性能优异。需要注意的是，需要找到适用于小程序适配版本的pixi-particles，或者根据适配原理自己进行移植。粒子数量是性能杀手，务必在低端机上测试，并设置合理的粒子数量上限。

  // 伪代码，展示概念 const emitter = new PIXI.particles.Emitter( this.stage, // 容器 [texture], // 粒子纹理 emitterConfig // 粒子配置（速度、大小、生命周期等） ); emitter.emit = true; // 开始发射 this.app.ticker.add(() => { emitter.update(this.app.ticker.elapsedMS * 0.001); // 更新粒子 });

5.4 常见问题排查速查表

走到这里，你已经掌握了使用PixiJS在小程序中进行高性能游戏开发的核心流程、关键技术和避坑指南。从环境搭建到性能优化，每一步都结合了理论分析和实战代码。这套方案的优势在于，它让你能用一套成熟的、高性能的图形API，去挑战小程序这个充满潜力的平台。剩下的，就是发挥你的创意，去构建那些吸引用户的精彩互动体验了。记住，性能优化是一个持续的过程，在开发的每个阶段都要心中有“帧”，眼里有“内存”。