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

Question

我正在开发基于Google Maps API的应用程序：基本上，我具有所在国家的邮政编码，需要显示它们。

这是一个视频，显示了我当前的实现-> https://vid.me/S6PL

地图的邮政编码要归功于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从数据库中获取邮政编码（由于在我的数据库中本地使用了Google Geocoding API，因此可以对它们进行缓存）。 更改边界时获取它们的查询（ map.addListener('bounds_changed', function() {...})我使用map.addListener('bounds_changed', function() {...}) ）非常快，并在发出请求后立即返回。 返回的JSON包含在搜索的特定范围内的所有邮政编码，这些邮政编码是随着用户在地图内移动而计算得出的（如您从视频中看到的那样）。 然后，我遍历此JSON，并为每个条目（代表邮政编码）创建一个带有相关信息的new PostalCodeOverlay(...params...) 。

您已经了解的问题是渲染：当渲染成千上万的元素时，JavaScript引擎缺乏了一点，地图挂起了。

我可以发布代码，但我认为不需要在这里，我认为足以向您显示我使用的视频和叠加层（无论如何，如果不清楚，请告诉我，我会更新）。

解决这些问题的最佳方法是什么？ 当基础数据集更大时，是否有一种方法可以告诉JavaScript / jQuery更流畅地处理动画？ 或者，也许我不了解某些Google Maps功能，可以在创建的叠加层中利用它们吗？

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

感谢您的关注。

Answer 1

Google在太多标记上提供了此文档，以提供建议。 那里有很多可供考虑的选项。

如果在视图中绘制了数百个元素，您还希望摆脱jQuery动画。 jQuery动画涉及计时器上的数千个绘制周期。 将其乘以数百或数千个元素，就远远超过了CPU可以有效跟上的速度。 您还可以尝试使用CSS动画而不是jQuery动画，而jQuery动画可能会变得更有效率。

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

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

并且，对于放大很多的情况，您可能希望跳过重重叠的代码的渲染，因为它们是如此之小且如此紧密以至于它们始终无法提供很多价值。 这里的挑战是弄清楚如何做到这一点，同时仍要节省总体CPU。 当缩小超出某个阈值时，您只能在给定的屏幕片段中显示一个邮政编码，或者不显示邮政编码。