javascript - 为什么我的解决方案这么慢，如何提高查询性能？

Question

目前我能够对性能进行相当多的优化，但还是有点慢:/

最新编辑:

我目前的解决方案(最快的atm(但仍然很慢)并保持秩序):

服务器

router.post('/images', function(req, res, next) {
    var image = bucket.file(req.body.image);
    image.download(function(err, contents) {
        if (err) {
            console.log(err);
        } else {
            var resultImage = base64_encode(contents);
            var index = req.body.index;
            var returnObject = {
                image: resultImage,
                index: index
            }
            res.send(returnObject);
        }
    });
});

客户端查询

$scope.getDataset = function() {

                fb.orderByChild('id').startAt(_start).limitToFirst(_n).once("value", function(dataSnapshot) {

                    dataSnapshot.forEach(function(childDataSnapshot) {
                        _start = childDataSnapshot.child("id").val() + 1;

                        var post = childDataSnapshot.val();
                        var image = post.image;

                        var imageObject = {
                            image: image,
                            index: position
                        };
                        position++;
                        $.ajax({
                            type: "POST",
                            url: "images",
                            data: imageObject,
                        }).done(function(result) {
                            post.image = result.image;
                            $scope.data[result.index] = post;
                            $scope.$apply();
                            firstElementsLoaded = true; 
                        });
                    })  
                });
            };

客户端 HTML

<div ng-controller="ctrl">
        <div class="allcontent">
            <div id="pageContent" ng-repeat="d in data track by $index"><a href="details/{{d.key}}" target="_blank"><h3 class="text-left">{{d.title}}<a href="../users/{{d.author}}"><span class="authorLegend"><i> by {{d.username}}</i></span></a></h3>
                </a>
                <div class="postImgIndex" ng-show="{{d.upvotes - d.downvotes > -50}}">
                    <a href="details/{{d.key}}" target="_blank"><img class="imgIndex" ng-src="data:image/png;base64,{{d.image}}"></a>
                </div>
                <div class="postScore">{{d.upvotes - d.downvotes}} HP</div>
            </div>
        </div>
    </div>

Answer 1

您的解决方案很慢，因为您从云存储下载图像并在自己的服务器上提供它们。您会在下载和上传时遇到延迟，使用 base64 编码的数据会产生约 33% 的开销，而且您的服务器在交付图像而不是专注于交付您的网站内容方面非常紧张。

正如许多人在评论中指出的那样，最佳实践解决方案是对图像使用公共(public) URL，如下所示:

function getPublicUrl (filename) {
  return "https://storage.googleapis.com/${CLOUD_BUCKET}/${filename}";
}

通过使用公共(public) URL，您可以直接从 Cloud Storage 提供服务利用 Google 的全局服务基础架构。并且应用程序不必响应图像请求，从而为其他请求释放 CPU 周期。

如果您不希望机器人使用上述方法抓取您的图片，Google 建议使用 robots.txt文件以阻止访问您的图像。