查找子元素总占用物理空间最少的父容器的实现逻辑咨询

• 第一步：获取所有类名为container的公告板容器节点集合
• 第二步：遍历每一个容器，计算其内部子元素的总占用面积：
  • 初始化当前容器的总占用面积为0
  • 遍历容器下的所有子消息节点
  • 单元素面积计算：如果子元素尺寸完全由固定class控制且无动态修改，可提前构建class与面积的映射表（如{small: 5000, medium: 20000, large: 80000}）直接查表取值；如果存在动态样式修改、边距影响等情况，调用getBoundingClientRect()获取元素实际宽高后计算面积=宽*高
  • 将所有子元素的面积累加得到当前容器的总占用面积
    如果业务场景中存在子元素互相重叠的情况，需要额外做重叠区域碰撞检测，去重后再计算实际覆盖面积，无重叠场景直接累加即可
• 第三步：比对所有容器的总占用面积，找到数值最小的容器
• 第四步：为该最小面积容器添加自定义高亮样式，完成“最空闲公告板”的标记

示例计算验证：
示例中第一个容器总占用面积 = 10050 + 200100 + 400200 = 105000 px²
示例中第二个容器总占用面积 = 3 * (400200) = 240000 px²
因此第一个id为first的容器为最空闲公告板

内容的提问来源于stack exchange，提问作者Jon