我可以使用JavaScript jQuery改进数千个元素的呈现吗？

我正在开发一个基于谷歌地图API的应用程序：基本上我有我国家的邮政编码，我需要显示它们

下面是一个视频，显示了我当前的实现->

地图上的邮政编码是通过

google.maps.OverlayView

类创建的，我扩展了该类并创建了一个自定义

PostalCodeOverlay

（由圆圈表示）。其

draw

方法如下：

PostalCodeOverlay.prototype.draw = function() {

        var overlayProjection = this.getProjection();
        // Handle some positioning stuff here with some properties created before during construction
        var center = overlayProjection.fromLatLngToDivPixel(new google.maps.LatLng(this.centerLat, this.centerLng));
        var div = this.postalCodeOverlayDiv;
        div.style.position = 'absolute';
        div.style.left = (center.x - (width/2)) + 'px';
        div.style.top = (center.y - (height/2)) + 'px';
        div.style["-moz-border-radius"] = "50%";
        div.style["-webkit-border-radius"] = "50%";
        div.style["border-radius"] = "50%";
        // As I show it the first time with an animation and
        // the APIs call this method several times (e.g. when
        // the zoom level of the map changes), I have a custom
        // boolean property that tells me whether it's the first
        // time or not
        if (!this.justCreated) {        
            div.style.width = width + "px";
            div.style.height = height + "px";
        }
        else {
            this.justCreated = false;
            var $postalCodeOverlayDiv = $(div); // here I get a jQuery reference to the div which represents the overlay (the circle).
            $postalCodeOverlayDiv.css({
                "width": "0",
                "height": "0",
                "opacity": "0"
            });
            // Animate it a bit so that it looks nicer when it
            // is drawn the first time.
            $postalCodeOverlayDiv.animate({
                "opacity": "1",
                "width": width + "px",
                "height": height + "px"
            }, 500);

        }
};

现在，正如您从视频中看到的，当缩放级别较高时，圆会平滑创建，因为每个视口边界的邮政编码密度较低

但是，当我开始缩小时，您可以看到这些漂亮的效果消失了，因为现在每个视口的边界都有更多的邮政编码（该区域变得更宽）

我通过AJAX从数据库中获取邮政编码（由于数据库中本地的

googlegeocoding

API，我将它们缓存起来）。当边界更改时（我使用

map.addListener（'bounds\u changed'，function（）{…}）

）获取它们的查询速度很快，并在发出请求时立即返回。返回的JSON包含搜索到的特定范围内的所有邮政编码，在用户在地图内移动时计算（如视频所示）。然后我迭代这个JSON，并为每个条目（代表邮政编码）创建一个带有相关信息的

新PostalCodeOverlay（…params…

）

您已经了解的问题是渲染：当要渲染数千个元素时，JavaScript引擎会缺少一些元素，并且映射会挂起

我可以发布代码，但我不认为这里需要它，我认为它足以向您展示我使用的视频和覆盖图（无论如何，如果有不清楚的地方，请告诉我，我会更新）

解决这些问题的最佳方法是什么？当底层数据集更大时，有没有办法告诉JavaScript/jQuery更平滑地处理动画？或者可能有一些我不知道的谷歌地图功能，我可以在我创建的覆盖中利用它们

无论如何，一些建议将不胜感激

---

感谢您的关注。

谷歌在上提供此文档，以提供建议。有很多选择可以考虑。

如果视图中绘制了数百个元素，则还需要删除jQuery动画。jQuery动画涉及定时器上的数千个绘图周期。将它乘以成百上千个元素，CPU就无法有效地跟上它。您还可以尝试使用CSS动画而不是jQuery动画，这可能会更有效

因此，如果缩放级别超过某个阈值（因此可能会导致视图中出现丢失的邮政编码），则跳过动画，直接设置CSS属性

除此之外，您还可以通过删除边框半径或简化其他CSS样式（您没有显示显示该div所涉及的所有内容，因此我们无法提出更具体的建议），来寻找一种更有效的方式来绘制邮政编码。同样，只有当缩小到某个阈值之外时，才能执行此操作

---

而且，对于放大了很多的情况，您可能希望跳过严重重叠代码的渲染，因为它们都很小，而且距离很近，因此无论如何都不会提供太多的价值。这里的挑战是找出如何做到这一点，同时仍然节省总体CPU。在给定的屏幕段中，您只能显示一个邮政编码，或者当缩小超过某个阈值时，您不能显示邮政编码。

为什么标记为

太宽

？请参阅文档中的这篇文章：