为什么我的解决方案这么慢，我该如何提高查询的性能? [英] Why is my solution so slow and how can I improve performance of the query?

问题描述

目前我能够优化性能，但仍然有点慢:/

最新

我目前的解决方案(最快的自动取款机(但仍然很慢)并保持秩序):

服务器

router.post('/images', function(req, res, next) {var image = bucket.file(req.body.image);image.download(功能(错误，内容){如果(错误){控制台日志(错误)；} 别的 {var resultImage = base64_encode(contents);var index = req.body.index;var returnObject = {图像:结果图像，指数:指数}res.send(returnObject);}});});

客户查询

$scope.getDataset = function() {fb.orderByChild('id').startAt(_start).limitToFirst(_n).once("value", function(dataSnapshot) {dataSnapshot.forEach(函数(childDataSnapshot){_start = childDataSnapshot.child("id").val() + 1;var post = childDataSnapshot.val();var image = post.image;var imageObject = {图像:图像，索引:位置};位置++；$.ajax({类型:POST"，网址:图片"，数据:图像对象，}).完成(功能(结果){post.image = 结果.image;$scope.data[result.index] = post;$scope.$apply();firstElementsLoaded = true;});})});};

客户端 HTML

<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>来自{{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 class="postScore">{{d.upvotes - d.downvotes}} HP</div>

解决方案

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

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

function getPublicUrl(文件名){返回https://storage.googleapis.com/${CLOUD_BUCKET}/${filename}"；}

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

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

Currently I was able to optimise performance quite a bit, but it is still somewhat slow :/

LATEST EDIT:

My current solution (the fastest atm (but still slow) and keeps order):

server

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);
        }
    });
});

client query

$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; 
                        });
                    })  
                });
            };

client 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>

解决方案

Your solution is slow because you are downloading the images from your Cloud Storage and serving them on your own server. You get a delay on the download and upload, a ~33% overhead using base64-encoded data, plus your server is strained in delivering images instead of focusing on delivering your website content.

As pointed by many on the comments, the best-practice solution is to use the public URL for the images like so:

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

By using the public URL, you are directly serving from Cloud Storage leveraging Google’s global serving infrastructure. And the application does not have to respond to requests for images, freeing up CPU cycles for other requests.

If you do not want bots to crawl your images using the above method, Google recommends using a robots.txt file to block access to your images.

这篇关于为什么我的解决方案这么慢，我该如何提高查询的性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！