javascript - 找到面积最大的元素(主要内容区域)？

Question

给定一个网页，你如何找到网页上最大的矩形作为主要内容区域？

例如，比较侧边栏、页眉、页脚和主要内容区域的大小。是否可以通过简单地在页面上发现的所有矩形中搜索最大的矩形来找到主要内容区域？

通常最高和最宽的矩形被怀疑是主要内容区域，想知道是否有某种 Javascript 或 Python 中的算法来检验这个假设。

Answer 1

因此，虽然这个问题对我来说没有多大意义，但我还是忍不住想玩弄递归扫描 DOM 树以根据元素的大小检索和排序元素的概念:)

这是一个用于执行此操作的愚蠢函数(您可以将其粘贴到浏览器控制台中):

function scanSizes(root) {
  return [].reduce.call(root, function(sizes, node) {
    var bounds = node.getBoundingClientRect();
    sizes.push({tag: node.outerHTML, area: bounds.width * bounds.height});
    var children = node.querySelectorAll("*");
    if (children.length > 0)
      sizes.push.apply(sizes, scanSizes(children));
    return sizes;
  }, []).sort(function(x, y) {
    var a = x.area, b= y.area;
    return a > b ? -1 : a < b ? 1 : 0;
  });
}

var sizes = scanSizes(document.querySelectorAll("body > *"));

// sizes[0].tag contains the largest html tag (as a string)
// sizes[0].area its area size in pixels (width * height)

编辑:更严重的是，您可能对 this topic 感兴趣及相关答案。

编辑:当然，性能明智的递归并不是一个好主意。您可以使用类似这样的方法来获得更有效的解决方案:

function scanSizes(root) {
  return [].map.call(root, function(node) {
    var bounds = node.getBoundingClientRect();
    return {tag: node.outerHTML, area: bounds.width * bounds.height};
  }).sort(function(x, y) {
    var a = x.area, b= y.area;
    return a > b ? -1 : a < b ? 1 : 0;
  });
}

var sizes = scanSizes(document.querySelectorAll("*"));