leafer-ui
leafer-ui copied to clipboard
1.9.5版本开始有掉帧情况
你好作者,最近发现新版本存在掉帧情况,昨晚测了一下大概是从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
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)
})
谢谢反馈,我优化一下~
已优化,等待新版本发布