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

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

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

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

列表节点的层级偏移

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

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: "按钮"
            }
        ]
    };
};

垂直流布局的卡片间隔

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

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实现.

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"
                },
            },
        ]
    };
};