leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

1.9.5版本开始有掉帧情况

Open dawumusic opened this issue 3 months ago • 2 comments

你好作者,最近发现新版本存在掉帧情况,昨晚测了一下大概是从1.9.5开始的,1.9.4以及之前的没问题很丝滑。 看了一下代码可能是__requestRender这里改动引起的,尤其在chrome内核下掉帧体感很明显(FPS有波动但不如体感的差异大),我录了两个视频可以看一下,附上小示例的代码可以供排查。

https://github.com/user-attachments/assets/9e026bda-e341-4179-a3fb-b41d7761af0c

https://github.com/user-attachments/assets/be00230c-7076-411b-a765-1cb9176424f3

Image
import { App, Rect, Text } from 'leafer-ui'
import '@leafer-in/viewport' // 导入视口插件 (可选)

document.addEventListener('DOMContentLoaded', () => {
  const app = new App({
    view: window,
    tree: { type: 'viewport' }, // 给 tree 层添加视口 
    sky: {}, 
  })
  // 创建一个矩形
  const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 100,
    fill: '#32cd32',
    cornerRadius: 10,
    draggable:true
  })

  // 创建文本
  const text = new Text({
    text: 'Hello LeaferJS! (ver: ^1.9.5)',
    x: 150,
    y: 130,
    fontSize: 18,
    fill: '#ffffff',
    textAlign: 'center'
  })

  // 创建 DOM 元素显示 FPS
  const fpsElement = document.createElement('div')
  fpsElement.id = 'fps-display'
  fpsElement.textContent = 'FPS: 0'
  fpsElement.style.cssText = `
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
    z-index: 9999;
    pointer-events: none;
  `
  document.body.appendChild(fpsElement)

  // 添加到画布
  app.tree.add(rect)
  app.tree.add(text)

  // 帧率更新循环
  const updateFPS = ()=> {
    const currentFPS = app.FPS
    fpsElement.textContent = `FPS: ${currentFPS}`
  }

  // 开始 FPS 更新
  setInterval(updateFPS,200)

})

dawumusic avatar Sep 15 '25 06:09 dawumusic

谢谢反馈,我优化一下~

leaferjs avatar Sep 15 '25 07:09 leaferjs

已优化,等待新版本发布

leaferjs avatar Sep 22 '25 08:09 leaferjs