高效获取元素的可见区域坐标

当然，我可能很天真，为视口中的每个离散点调用elementFromPoint，但性能至关重要，因为我会遍历所有元素，并且会经常这样做。

请指导我如何实现这一目标。

免责声明：我对Web编程概念非常陌生，所以我可能使用了错误的技术术语。

进展：

我想出了一个实现。算法非常简单：

1. 遍历所有元素，并将其垂直/水平线添加到坐标图中（如果坐标在视口内）。
2. 为每个"矩形"中心位置调用"document.elementFromPoint"。矩形是步骤 1 中地图中两个连续垂直坐标和两个连续水平坐标之间的区域。

这将生成一组区域/矩形，每个区域/矩形指向单个元素。

我的实现问题是：

1. 对于复杂的页面来说，它效率低下（对于一个非常大的屏幕和 gmail 收件箱，最多可能需要 2-4 分钟）。
2. 它为每个元素生成大量矩形，这使得通过网络串化和发送效率低下，并且使用起来也不方便（我希望最终得到一个每个元素具有尽可能少的矩形的集合）。

据我所知，elementFromPoint调用是花费大量时间并导致我的算法相对无用的调用......

谁能提出更好的方法？

这是我的实现：

function AreaPortion(l, t, r, b, currentDoc) {
    if (!currentDoc) currentDoc = document;
    this._x = l;
    this._y = t;
    this._r = r;
    this._b = b;
    this._w = r - l;
    this._h = b - t;
    center = this.getCenter();
    this._elem = currentDoc.elementFromPoint(center[0], center[1]);
}
AreaPortion.prototype = {
    getName: function() {
        return "[x:" + this._x + ",y:" + this._y + ",w:" + this._w + ",h:" + this._h + "]";
    },
    getCenter: function() {
        return [this._x + (this._w / 2), this._y + (this._h / 2)];
    }
}
function getViewport() {
    var viewPortWidth;
    var viewPortHeight;
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    if (
            typeof document.documentElement != 'undefined' &&
            typeof document.documentElement.clientWidth != 'undefined' &&
            document.documentElement.clientWidth != 0) {
        viewPortWidth = document.documentElement.clientWidth,
        viewPortHeight = document.documentElement.clientHeight
    }
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    else if (typeof window.innerWidth != 'undefined') {
        viewPortWidth = window.innerWidth,
        viewPortHeight = window.innerHeight
    }
    // older versions of IE
    else {
        viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
        viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
    }
    return [viewPortWidth, viewPortHeight];
}
function getLines() {
    var onScreen = [];
    var viewPort = getViewport();
    // TODO: header & footer
    var all = document.getElementsByTagName("*");
    var vert = {};
    var horz = {};
    vert["0"] = 0;
    vert["" + viewPort[1]] = viewPort[1];
    horz["0"] = 0;
    horz["" + viewPort[0]] = viewPort[0];
    for (i = 0 ; i < all.length ; i++) {
        var e = all[i];
        // TODO: Get all client rectangles
        var rect = e.getBoundingClientRect();
        if (rect.width < 1 && rect.height < 1) continue;
        var left = Math.floor(rect.left);
        var top = Math.floor(rect.top);
        var right = Math.floor(rect.right);
        var bottom = Math.floor(rect.bottom);
        if (top > 0 && top < viewPort[1]) {
            vert["" + top] = top;
        }
        if (bottom > 0 && bottom < viewPort[1]) {
            vert["" + bottom] = bottom;
        }
        if (right > 0 && right < viewPort[0]) {
            horz["" + right] = right;
        }
        if (left > 0 && left < viewPort[0]) {
            horz["" + left] = left;
        }
    }
    hCoords = [];
    vCoords = [];
    //TODO: 
    for (var v in vert) {
        vCoords.push(vert[v]);
    }
    for (var h in horz) {
        hCoords.push(horz[h]);
    }
    return [hCoords, vCoords];
}
function getAreaPortions() {
    var portions = {}
    var lines = getLines();
    var hCoords = lines[0];
    var vCoords = lines[1];
    for (i = 1 ; i < hCoords.length ; i++) {
        for (j = 1 ; j < vCoords.length ; j++) {
            var portion = new AreaPortion(hCoords[i - 1], vCoords[j - 1], hCoords[i], vCoords[j]);
            portions[portion.getName()] = portion;
        }
    }
    return portions;
}