FineUI-100-Questions/questions/12.如何灵活应用布局组件,尽可能的减少DOM数量.md

# 如何灵活应用布局组件,尽可能的减少DOM数量

众所周知,DOM数量越多,前端越卡.很多前端者开发者绞尽脑汁,使出浑身解数,就是为了减少dom数量,提升页面性能

列举一些常见的增加DOM数量的写法以及优化方案

## 列表节点的层级偏移

![示例1](../images/51.png)

```javascript
const render = () => {
    const layer = this.options.layer; // 表示节点层级

    const items = [];

    for (let i = 0; i <= layer; i++) {
        items.push({
            type: "bi.layout",
            width: 12
        });
    }

    items.push({
        type: "bi.label",
        text: "节点"
    });

    items.push({
        type: "bi.icon_button",
        title: "按钮"
    });

    return {
        type: "bi.horizontal_adapt",
        items,
    };
};
```

这种场景,如果每个层级都需要用一个空的div占据空间,随着树的层级加深,dom数大大增加

常用解决方案,通过布局`lgap`实现,注意利用el的隔离特性,不要让`lgap`影响到item

有兴趣的可以参考一下FineUI树控件的迭代过程,如何减少DOM

```javascript
const render = () => {
    const layer = this.options.layer; // 表示节点层级

    const items = [];

    for (let i = 0; i <= layer; i++) {
        items.push({
            type: "bi.layout",
            width: 12
        });
    }

    return {
        type: "bi.horizontal_adapt",
        items: [
            {
                el: {
                    type: "bi.label",
                    text: "节点"
                },
                lgap: layer * 12,
            }, {
                type: "bi.icon_button",
                title: "按钮"
            }
        ]
    };
};
```

## 垂直流布局的卡片间隔

![示例2](../images/52.png)

数值排列的卡片,灰色的间隔,常见的错误是通过DOM来实现分割条

```javascript
const render = () => {

    return {
        type: "bi.vertical",
        items: [
            {
                el: {
                    type: "bi.label",
                    cls: "bi-card",
                    text: "card1"
                },
            }, {
                type: "bi.layout",
                cls: "bi-background",
                height: 10,
            }, {
                el: {
                    type: "bi.label",
                    cls: "bi-card",
                    text: "card2"
                },
            },
        ]
    };
};
```

如上写法每多一个卡片,都需要一个额外的空DOM

应对这种场景,我们可以给容器统一设置`bi-background`灰色背景,然后对每一个卡片添加`bi-card`样式, 间隔用`bgap`实现.

```javascript
const render = () => {

    return {
        type: "bi.vertical",
        cls: "bi-background",
        items: [
            {
                el: {
                    type: "bi.label",
                    cls: "bi-card",
                    text: "card1"
                },
                bgap: 10,
            }, {
                el: {
                    type: "bi.label",
                    cls: "bi-card",
                    text: "card2"
                },
            },
        ]
    };
};
```