Why is my solution so slow and how can I improve performance of the query?(为什么我的解决方案这么慢,如何提高查询性能?)
问题描述
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.
这篇关于为什么我的解决方案这么慢,如何提高查询性能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:为什么我的解决方案这么慢,如何提高查询性能?
基础教程推荐
- 我什么时候应该在导入时使用方括号 2022-01-01
- 动态更新多个选择框 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 在for循环中使用setTimeout 2022-01-01