WebBuilder渲染引擎解密：从DSL到真实DOM的增量更新策略

// 传统VDOM的问题示意
// 原列表：[A, B, C] 
// 新列表：[A, D, B, C]
 
// 按索引对比：
// index0: A vs A ✅ 复用
// index1: B vs D ❌ 更新为D（误判）
// index2: C vs B ❌ 更新为B（误判）
// index3: (新增) C   新增
 
// 结果：本应只需插入D，实际执行了2次更新+1次插入

// WebBuilder 差分算法核心实现
class DiffEngine {
   /**
     *计算新旧控件树的差异
     * @param {Array} oldControls 旧控件树
     * @param {Array} newControls 新控件树
     * @returns {DiffResult} 差异结果
    */
   diff(oldControls, newControls) {
       const result = {
           updates: [ ],    // 属性更新
           inserts: [ ],    // 节点插入
           deletes: [ ],    // 节点删除
           moves: [ ]       // 节点移动
       };
       
       // 构建CID映射
       const oldMap = new Map(oldControls.map(c => [c.cid, c]));
       const newMap = new Map(newControls.map(c => [c.cid, c]));
       
       // 识别删除的节点
       for (const [cid, oldCtrl] of oldMap) {
           if (!newMap.has(cid)) {
                result.deletes.push({ cid, oldCtrl });
           }
       }
       
       // 识别新增和更新的节点
       for (const [cid, newCtrl] of newMap) {
           const oldCtrl = oldMap.get(cid);
           
           if (!oldCtrl) {
                // 新增节点
                result.inserts.push({ cid, newCtrl });
           } else if (oldCtrl.cname !== newCtrl.cname) {
                // 控件类型变化 → 整体替换
                result.deletes.push({ cid, oldCtrl });
                result.inserts.push({ cid, newCtrl });
           } else {
                // 相同类型 → 对比属性
                const propDiffs = this.diffProps(oldCtrl, newCtrl);
                if (propDiffs.length > 0) {
                    result.updates.push({ cid, propDiffs });
                }
                
                // 递归对比子控件
                const childrenDiff = this.diff(
                    oldCtrl.controls || [ ],
                    newCtrl.controls || [ ]
                );
                this.mergeResult(result, childrenDiff);
           }
       }
       
       return result;
    }
    
   /**
     *对比控件属性差异
    */
   diffProps(oldCtrl, newCtrl) {
       const diffs = [ ];
       const allProps = new Set([
           ...Object.keys(oldCtrl),
           ...Object.keys(newCtrl)
       ]);
       
       for (const prop of allProps) {
           const oldVal = oldCtrl[prop];
           const newVal = newCtrl[prop];
           
           // 跳过非显示属性
           if (prop === 'cid' || prop === 'cname' || prop === 'controls') {
                continue;
           }
           
           if (oldVal !== newVal) {
                diffs.push({ prop, oldVal, newVal });
           }
       }
       
       return diffs;
    }
    
   /**
     *应用差异结果到真实DOM
    */
   applyDiff(result, domTree) {
       // 批量删除
       for (const del of result.deletes) {
           this.removeNode(del.cid);
       }
       
       // 批量更新属性（不触发重绘）
       for (const update of result.updates) {
           this.updateProperties(update.cid, update.propDiffs);
       }
       
       // 批量插入
       for (const ins of result.inserts) {
           this.insertNode(ins.cid, ins.newCtrl);
       }
       
       // 最后统一触发一次重绘
       this.scheduleRepaint();
    }
}

class UpdateScheduler {
    constructor() {
        this.queue = new Map();      // 更新队列
        this.scheduled = false;      // 是否已调度
        this.batchDepth = 0;         // 批量更新深度
    }
    
    /**
     * 调度更新任务
     * @param {string} cid 控件ID
     * @param {Object} updates 更新内容
     * @param {number} priority 优先级（越高越先执行）
     */
    schedule(cid, updates, priority = 0) {
        const existing = this.queue.get(cid);
        
        if (existing) {
            // 合并同一控件的多次更新
           Object.assign(existing.updates, updates);
            existing.priority = Math.max(existing.priority, priority);
            existing.timestamp = Date.now();
        } else {
            this.queue.set(cid, {
                cid,
                updates,
                priority,
                timestamp: Date.now()
            });
        }
        
        this.requestFlush();
    }
    
    /**
     * 请求刷新（批量执行）
     */
    requestFlush() {
        if (this.scheduled) return;
        
        this.scheduled = true;
        
        // 使用微任务，确保同一事件循环内的更新合并
        Promise.resolve().then(() => this.flush());
    }
    
    /**
     * 执行批量更新
     */
    flush() {
        const tasks = Array.from(this.queue.values());
        this.queue.clear();
        this.scheduled = false;
        
        if (tasks.length === 0) return;
        
        // 按优先级排序
        tasks.sort((a, b) => b.priority - a.priority);
        
        // 开启批量渲染模式
        this.startBatch();
        
        try {
            for (const task of tasks) {
               this.applyUpdate(task);
            }
        } finally {
            // 结束批量渲染，统一触发一次重绘
            this.endBatch();
        }
    }
    
    /**
     * 开始批量更新
     */
    startBatch() {
        this.batchDepth++;
        if (this.batchDepth === 1) {
            // 暂停所有控件的自动重绘
            Wb.suspendLayout = true;
        }
    }
    
    /**
     * 结束批量更新
     */
    endBatch() {
        this.batchDepth--;
        if (this.batchDepth === 0) {
            // 恢复布局并统一重绘
            Wb.suspendLayout = false;
            Wb.updateLayout();
        }
    }
    
    /**
     * 应用单个更新任务
     */
    applyUpdate(task) {
        const control = Wb.getControl(task.cid);
        if (!control) return;
        
        for (const [prop, value] of Object.entries(task.updates)) {
            control.set(prop, value);
        }
    }
}