体验性能

LeaferJS 可以让你拥有瞬间创建 100 万个图形的能力。经过更细颗粒的代码模块划分，在拥有高性能的同时，我们并没有牺牲掉代码的可维护性，预计将来还会有很大的性能提升空间。

创建速度

创建 100 万个可交互的矩形，最快仅需 1.2 秒。

比同类引擎快 10 倍左右。

内存占用

创建 100 万个可交互的矩形，仅占用 350M 内存。

比同类引擎节省 10 倍以上内存。

代码体积

目前代码体积 98KB, Gzip 后仅 28KB 大小。

如何能流畅操作 100 万个图形？

目前已经有针对在线设计、白板行业的解决方案正在开发中。

体验代码

下面是可以创建 100 万个矩形的示例代码，可以直接复制使用。建议使用 Chrome 浏览器， 通过控制台查看打印信息。

import { Leafer, Group, Rect, Debug, Run } from 'leafer-ui'

class RectsCase {
  public view: Group

  constructor(view: Group, num: number) {
    const runId = Run.start(`create ${num}万`)

    let group: Group
    const groupSize = 10 * 100 * 1.5
    const column = num > 25 ? 10 : 5
    this.view = view

    for (let i = 0; i < num; i++) {
      group = new Group()
      group.x = groupSize * (i % column)
      group.y = groupSize * Math.floor(i / column)
      view.add(group)
      this.createRects(group, 0, 0, `hsl(${i * 3},50%, 50%)`)
    }

    Run.end(runId)
  }

  createRects(
    group: Group,
    startX: number,
    startY: number,
    color: string
  ): void {
    let y: number, rect: Rect
    for (let i = 0; i < 100; i++) {
      if (i % 10 === 0) startX += 10
      y = startY
      for (let j = 0; j < 100; j++) {
        if (j % 10 === 0) y += 10
        rect = new Rect()
        rect.x = startX
        rect.y = y
        rect.height = 10
        rect.width = 10
        rect.fill = color
        rect.draggable = true
        group.add(rect)
        y += 12
      }
      startX += 12
    }
  }
}

Debug.enable = true

const app = new Leafer({ view: window })
new RectsCase(app, 100) // 100万个