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

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% 的开销，而且您的服务器在交付图像而不是专注于交付您的网站内容方面非常紧张。

正如许多 cmets 所指出的，最佳实践解决方案是使用公共 URL 来获取图像，如下所示：

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

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

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

Answer 2

1. 在优化之前，你最好收集一些数据，我会在下面的sn-p中展示一些
2. 看起来base64_encode(contents) 可能会消耗大量CPU，您的逻辑似乎反复执行此操作。这是猜测，真正的瓶颈，你必须自己找到它
3. 其他建议可能改进较少，但总体效果会很大（gzip\CDN\http2\loadbalance...）

优化数据收集 - 服务器端，哪个操作花费了太多时间

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

优化数据收集 - 客户端 ()

备用使用base64_encode(contents)

$scope.getDataset = function() {

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

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

      var post = childDataSnapshot.val();
      getImageBase64(post.image)
        .then((image) => {
          post.image = image;
          $scope.data[index] = post;
          $scope.$apply();
          firstElementsLoaded = true;
        })
    })
  });

  function getImageBase64(image1) {
    //without help of server, this will make your app faster
    //network reduced
    //server calculation reduced
    if (CanIUseBucktAndBase64Here) {
      return new Promise((reslove, reject) {
        var image = bucket.file(image1);
        image.download(function(err, contents) {
          if (err) {
            reject(err);
          } else {
            //use worker thread might gain better performance
            var resultImage = base64_encode(contents);
            resolve(resultImage)
          }
        });
      })
    }
    //with help of server
    return $.ajax({
        type: "POST",
        url: "images",
        data: image1,
      })
      .then(result => result.image)
  }
};

避免每次都下载

//------------load all to local suit for less images----------
// if you have many images and you can use cheaper cache like file cache

//--init.js download all images, run only once
downloadAll()

//--server.js
//when image updated, let server know and flush cache
server.get('/imageupdated', (req, res) => {
  downfile(req.params.imgid)
  res.send('got it')
})

//form cache first
server.post('/image', (req, res) => {
  memcache.get(req.body.imgid)
    .then((content) => {
      if (!content) return downfile(req.body.imgid)
      res.send({
        content
      })
      return true
    })
    .then((content) => {
      if (content === true) return
      res.send({
        content
      })
    })
})

server.listen()


//--common.js download file and cache to memcache
function downfile(imgid) {
  var base64 = ''
  return bucket.download(imgid)
    .then((file) => {
      base64 = base64(file)
      return memcache.set(imgid, base64)
    })
    .then(() => {
      return base64
    })
}
//downfileBatch
async function downfileBatch(skip, limit) {
  return cloudDrive.getImages(skip, limit)
    .then((list) => {
      return Promise.all(list.map())
    })
}
//down load all images
async function downloadAll() {
  var i = 0,
    limit = 5
  while (true) {
    var list = await downfileBatch(i, limit)
    if (list.length < limit) {} else {
      i += limit
    }
  }
  return true
}

Answer 3

优化代码的最简单方法是向服务器端发送一个 ajax 请求，而不是对每个图像执行一个 ajax 请求。

从循环中删除 ajax 调用。遍历集合，收集需要发送到数组中的服务器的数据，然后通过单个 ajax 请求发送。这将加快速度。

此外，请确保修改您的服务器端 POST 处理程序，以便它可以处理数组，您将从客户端传递。

Answer 4

我不确定如何提高传递文件的速度，但它们乱序的问题是因为它们是异步的。基本上发生的事情是你告诉服务器给你一堆文件然后你等待。一旦服务器将它们发送给您，您就可以处理它们。但你不知道他们进来的顺序。您需要做的是跟踪他们到达的顺序。做到这一点的方法是通过某种方式跟踪每个帖子的信息。 例如，假设您有

var arr = new Array(10);
for (var i = 0 ; i < arr.length; i++){
  $.ajax({
    url:____,
    type:"GET" (or whatever type you want),
    data: _____,
    context: {index: i}
    success : function(data){
                 arr[this.index] = data
              }
  })
}

这应该正确设置值。语法可能有点偏离，但我相信这是按正确顺序设置它们的正确想法。重要的部分是设置上下文，它将在成功处理程序中设置“this”等于什么