《HarmonyOS技术精讲-ArkGraphics 2D方舟2D图形服务》第六篇渲染核心——RenderNode与离屏渲染优化一个被频繁忽略的性能瓶颈HarmonyOS NEXT 开发中Canvas 绘制复杂图形时很多人会遇到一个问题页面明明不复杂但帧率就是上不去滑动动画明显掉帧。这个问题的根源往往不是绘制指令本身有多复杂而是每一帧都在重复执行相同的绘制操作。如果把每一帧都要画的背景、网格、静态图形每一帧都重新执行一遍 draw 指令性能必然出问题。Canvas 的常规用法是直接在 onDraw 里写各种 draw 方法。这种方式简单直观但有一个隐形的性能成本每一帧都会从头到尾执行所有绘制指令即使绘制内容完全没变化。RenderNode 就是用来解决这个问题的。它能预编译绘制指令生成一个可复用的渲染缓存节点后续帧只需要直接复用这个节点不需要重新执行绘制过程。RenderNode 的核心能力RenderNode 本质是一个预渲染的图形缓存。它通过recordingCanvas记录绘制指令然后把这些指令保存在内存中后续可以通过renderNode对象直接绘制到目标 Canvas 上而不需要重新执行录制过程。适用场景静态背景、网格、标尺等不变化的部分需要频繁复用的复杂图形动画场景中保持稳定的底层渲染不适合场景每帧绘制内容差异极大的动态图形绘制指令简单、次数少的场景方案渲染次数内存占用适用场景直接 Canvas 绘制每帧全量绘制低简单图形、变化频繁RenderNode 缓存录一次复用 N 次中等静态复杂图形、半动态页面离屏 Canvas每次手动同步较高需要独立渲染目标的场景环境说明DevEco Studio 版本DevEco Studio 6.1.0 HarmonyOS SDK 版本HarmonyOS 6.1.0(23) 目标设备手机核心实现用 RenderNode 优化动画场景第一步构造一个复杂背景的动画先来看一个未优化的实现。假设页面上有一个复杂网格背景加上一个小球在做圆周运动。未优化时每一帧都会重新绘制网格背景。EntryComponentstruct UnoptimizedCanvasExample{privatesettings:RenderingContextSettingsnewRenderingContextSettings(true)privatecontext:CanvasRenderingContext2DnewCanvasRenderingContext2D(this.settings)Stateprivateangle:number0build(){Column(){Canvas(this.context).width(100%).height(90%).onReady((){this.drawFrame()})}.width(100%).height(100%)}// 每一帧都会重新绘制包含背景和球drawFrame(){constcanvasthis.contextconstwidth1080constheight1920// 每一帧都会重复绘制的背景canvas.clearRect(0,0,width,height)this.drawBackground(canvas,width,height)// 绘制运动的球constcenterXwidth/2constcenterYheight/2constradius200constxcenterXradius*Math.cos(this.angle)constycenterYradius*Math.sin(this.angle)canvas.beginPath()canvas.arc(x,y,30,0,Math.PI*2)canvas.fillStyle#ff6600canvas.fill()// 更新角度this.angle0.02if(this.angleMath.PI*2){this.angle0}// 使用 requestAnimationFrame 驱动动画requestAnimationFrame((){this.drawFrame()})}// 绘制复杂背景网格线drawBackground(canvas:CanvasRenderingContext2D,width:number,height:number){canvas.strokeStyle#cccccccanvas.lineWidth1// 绘制竖线for(letx0;xwidth;x50){canvas.beginPath()canvas.moveTo(x,0)canvas.lineTo(x,height)canvas.stroke()}// 绘制横线for(lety0;yheight;y50){canvas.beginPath()canvas.moveTo(0,y)canvas.lineTo(width,y)canvas.stroke()}// 绘制中心十字标记canvas.strokeStyle#ff0000canvas.lineWidth3canvas.beginPath()canvas.moveTo(width/2-100,height/2)canvas.lineTo(width/2100,height/2)canvas.stroke()canvas.beginPath()canvas.moveTo(width/2,height/2-100)canvas.lineTo(width/2,height/2100)canvas.stroke()}}这段代码的问题很明显每一次drawFrame都会完整执行drawBackground绘制数百条网格线。如果网格线更多或者背景图形更复杂帧率会急剧下降。第二步使用 RenderNode 缓存静态背景优化方案是把静态背景录制到 RenderNode 里然后每一帧只需要绘制 RenderNode 和运动的小球。EntryComponentstruct OptimizedCanvasExample{privatesettings:RenderingContextSettingsnewRenderingContextSettings(true)privatecontext:CanvasRenderingContext2DnewCanvasRenderingContext2D(this.settings)Stateprivateangle:number0// 声明 RenderNodeprivatebackgroundNode:RenderNodenewRenderNode()privateisBackgroundRecorded:booleanfalseaboutToAppear(){// 在组件创建时录制一次背景this.recordBackground()}// 使用 recordingCanvas 录制背景recordBackground(){constrecordingCanvasnewrecordingCanvas(this.backgroundNode)constwidth1080constheight1920// 绘制网格背景recordingCanvas.strokeStyle#ccccccrecordingCanvas.lineWidth1for(letx0;xwidth;x50){recordingCanvas.beginPath()recordingCanvas.moveTo(x,0)recordingCanvas.lineTo(x,height)recordingCanvas.stroke()}for(lety0;yheight;y50){recordingCanvas.beginPath()recordingCanvas.moveTo(0,y)recordingCanvas.lineTo(width,y)recordingCanvas.stroke()}// 绘制中心十字recordingCanvas.strokeStyle#ff0000recordingCanvas.lineWidth3recordingCanvas.beginPath()recordingCanvas.moveTo(width/2-100,height/2)recordingCanvas.lineTo(width/2100,height/2)recordingCanvas.stroke()recordingCanvas.beginPath()recordingCanvas.moveTo(width/2,height/2-100)recordingCanvas.lineTo(width/2,height/2100)recordingCanvas.stroke()// 结束录制recordingCanvas.endRecording()this.isBackgroundRecordedtrue}build(){Column(){Canvas(this.context).width(100%).height(90%).onReady((){this.drawFrameWithRenderNode()})}.width(100%).height(100%)}// 使用 RenderNode 的优化版本drawFrameWithRenderNode(){constcanvasthis.contextconstwidth1080constheight1920canvas.clearRect(0,0,width,height)// 直接复用缓存的 RenderNodeif(this.isBackgroundRecorded){canvas.drawRenderNode(this.backgroundNode)}else{// 降级方案如果没有录制完成直接绘制this.drawBackgroundFallback(canvas,width,height)}// 绘制运动的球constcenterXwidth/2constcenterYheight/2constradius200constxcenterXradius*Math.cos(this.angle)constycenterYradius*Math.sin(this.angle)canvas.beginPath()canvas.arc(x,y,30,0,Math.PI*2)canvas.fillStyle#ff6600canvas.fill()this.angle0.02if(this.angleMath.PI*2){this.angle0}requestAnimationFrame((){this.drawFrameWithRenderNode()})}drawBackgroundFallback(canvas:CanvasRenderingContext2D,width:number,height:number){// 这里只作为降级实现实际使用时可以简化canvas.strokeStyle#cccccccanvas.lineWidth1for(letx0;xwidth;x50){canvas.beginPath()canvas.moveTo(x,0)canvas.lineTo(x,height)canvas.stroke()}}}关键点说明recordingCanvas负责录制endRecording()结束录制canvas.drawRenderNode(this.backgroundNode)直接复用缓存的绘制指令不会重新执行网格绘制aboutToAppear中录制一次后续动画帧只绘制运动部分和简单背景输出性能提升很明显背景网格的绘制成本从每帧执行一次降低到只有组件创建时执行一次。第三步动态更新 RenderNode 的场景有些场景下背景需要偶尔更新比如用户切换主题但大部分时间稳定。这时候可以按需重新录制 RenderNode。// 按需更新背景updateBackground(){// 先清除旧的录制内容this.backgroundNode.reset()// 重新录制this.recordBackground()}reset()会清空 RenderNode 内部的绘制指令缓存然后可以重新录制。这种模式适合“低频更新、高频复用”的场景。常见问题与踩坑记录坑 1RenderNode 不能无限制重用现象在动画循环中如果每一帧都创建一个新的 RenderNode 并绘制性能反而更差。原因RenderNode 的创建和录制本身有开销。每次创建新的 RenderNode都需要分配内存、执行录制、注册到渲染管线。如果这个操作频率太高会抵消缓存带来的收益。解法只在组件创建或背景内容变化时重建 RenderNode不要在动画循环内部创建。动画帧里只调用drawRenderNode。坑 2录制期间不能切换线程现象在异步回调中录制 RenderNode有时会出现绘制结果异常或者崩溃。原因recordingCanvas的录制过程必须在主线程完成。它内部操作的是图形渲染管线的资源这些资源不是线程安全的。如果在子线程中录制会导致数据竞争。解法所有录制操作都放在主线程中执行并且确保在aboutToAppear或onPageShow这类生命周期方法中完成。坑 3屏幕旋转或窗口变化后背景失真现象设备横竖屏切换后背景网格位置不正确或大小没变。原因RenderNode 录制时绑定的是固定尺寸。如果屏幕尺寸变化缓存的内容不会自动更新。解法在onWindowSizeChange回调中调用this.backgroundNode.reset()并重新录制。.onWindowSizeChange((newSize){// 重新录制背景适配新尺寸this.backgroundNode.reset()this.recordBackgroundWithNewSize(newSize.width,newSize.height)})最佳实践1. 把不变的内容和变化的内容分离一个典型的优化策略是用 RenderNode 缓存所有静态部分背景、网格、水印、标尺然后把动态部分交互响应、动画物体独立绘制。不要混合在一个录制中。2. 尽量让“录制”和“显示”分离录制操作不一定非要在aboutToAppear中完成。如果背景需要异步加载比如从网络获取配置可以在加载完成后调用updateBackground。但注意更新 RenderNode 时不要阻塞 UI 线程太久。3. 利用容器组件的属性变化来减少 RenderNode 的重录频次如果只是改变透明度、旋转、缩放这类变换属性不需要重新录制 RenderNode。直接通过修改 Canvas 的 transform 属性配合canvas.drawRenderNode即可实现动画效果真正做到“一次录制无限复用”。4. 性能是测出来的不是猜出来的不要一上来就全用 RenderNode。先用performance.now()或 DevEco Studio 的性能分析工具测量 Canvas 绘制耗时。只有在确认绘制是性能瓶颈且绘制内容符合“大部分静态”条件时才引入 RenderNode。Demo 入口以下是一个完整的入口文件可以直接运行对比优化前后的帧率差异。EntryComponentstruct Index{build(){Column(){Text(未优化版本 - 请查看帧率).fontSize(20).margin({top:10})UnoptimizedCanvasExample().height(45%)Text(使用 RenderNode 优化版本).fontSize(20).margin({top:10})OptimizedCanvasExample().height(45%)}.width(100%).height(100%)}}示例代码地址项目地址FAQQRenderNode 录制的内容屏幕适配时怎么处理A录制时指定固定尺寸。如果设备屏幕尺寸变化需要调用backgroundNode.reset()并重新录制。也可以考虑录制一个超大面积的内容然后用 Canvas 的 clip 裁剪到实际显示区域但这样会浪费内存。Q离屏渲染和 RenderNode 有什么区别A离屏渲染通常意味着创建一个离屏 Canvas然后手动控制同步时机。RenderNode 是更轻量级的方案它不创建独立的渲染目标只是缓存绘制指令。因此不占用额外的像素内存但在复杂图形下性能依然优于每次全量绘制。Q为什么我录制完成后endRecording()之后再调用drawRenderNode没效果A检查recordingCanvas是否还在同一个 RenderNode 上操作。录制过程中不允许混合使用多个 RenderNode也不允许在录制结束后再次对同一个 RenderNode 调用录制方法。如果需要更新先reset()再重新录制。