具有相同性能的AWS EC2微型和中型实例？

Question

开发AngularJS（前端）和Rails API（后端）项目。我的开发环境一直在AWS EC2微实例上运行。现在，它的上线时间，所以我选择了一个中型实例。我认为性能提升会很棒，但不是那样，我觉得它们或多或少都是一样的。

您可以自己检查。

开发环境：http://ec2-54-76-16-85.eu-west-1.compute.amazonaws.com/ 预生产环境：http://ec2-54-76-117-208.eu-west-1.compute.amazonaws.com/

我错过了什么？加载主页面需要很长时间。但我不知道bottelneck在哪里或者我怎样才能提高性能。我应该使用cloudfront作为静态图像。

无论如何，你可以看到加载文本翻译需要时间。

有任何建议如何改进吗？

Answer 1

检查cloudwatch以查看两个实例的实例监控，您可能有共享瓶颈。可能是他们使用相同的数据库吗？

Answer 2

Julio所说的共享资源必须首先检查。继续关注非常重要的CloudWatch。

关于性能改进。将CloudFront或S3用于图像，CSS，js等，这是减轻实例负担的第一步。

Micro实例是一种特殊的实例类型。实际上讲微观大致可以超过小型实例的性能和基础设施。它属于计算能力的中小型实例之间的地方。

这里有关于微实例行为方式的一点要点。它旨在处理偶尔的突发计算密集型任务。偶尔的最大阈值实际上大于小实例的范围。您达到最大阈值的次数，很多次您因达到最大值而受到惩罚。在达到计算能力上限的事件中，您的微型计算能力会大幅度降低。一段时间后，删除了减少阈值，您的实例恢复正常。如果再次达到最大阈值时，您将再次受到惩罚，但这次是持续很长时间。这样，如果趋势继续，您的应用程序将在一段时间内表现得非常糟糕。随着微小的偶尔尖峰是好的，但不是频繁爆裂。微观背后的想法是突发计算和共享计算（过程能力）。小实例是为了保证内存和计算能力（实际上除了micro之外的所有实例）

现在谈谈微观和媒介的比较。您观察到的效果是正确的，它实际上是预期的行为。与媒介和微观不同的是记忆。机会是您的应用程序是计算密集型的，因此行为并不像您预期​​的那样压倒性。

我建议您使用大型实例检查您的应用程序几个小时，只需几个CloudWatch metics并查看性能。微观和媒介之间的比较，并不像你想象的那样3倍的性能提升（我猜想是排名为微，小，然后是中等3倍）

Answer 3

第一个建议是为您的资产使用管道。目前，您可以单独调用各个CSS和JS文件。

CSS：

<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">           
<link rel="stylesheet" href="css/contacts.css">
<link rel="stylesheet" href="css/options.css">
<link rel="stylesheet" href="css/welcome.css">  
<link rel="stylesheet" href="css/new-business.css">
<link rel="stylesheet" href="css/boat-booking.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/menus.css">    
<link rel="stylesheet" href="css/booking.css">
<link rel="stylesheet" href="css/join-us.css">
<link rel="stylesheet" href="css/user.css">
<link rel="stylesheet" href="css/social-buttons.css"> 
<link rel="stylesheet" href="css/font-awesome.min.css" />   
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />       
<!-- SELECT -->
<link rel="stylesheet" href="css/prettify.css">
<link rel="stylesheet" href="css/bootstrap-select.css">  
<!-- SWITCH -->
<link rel="stylesheet" href="css/angular-toggle-switch-bootstrap.css"/>
<link rel="stylesheet" href="css/angular-toggle-switch.css"/>  
<!-- SLIDER -->
<link rel="stylesheet" href="css/slider.css"/>
<link rel="stylesheet" href="css/lightbox.css" />
<link rel="stylesheet" href="css/angular-growl.min.css" />  <!-- Notifications -->
<!-- Progress bar -->
<link rel="stylesheet" href="css/ngProgress.css" />

JS：

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
<script src="lib/plugins/file-upload/angular-file-upload-shim.min.js"></script> 
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-cookies.min.js"></script>
<!--<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/messageformat.js"></script>-->
<script src="lib/plugins/angular-translate.min.js"></script>
<script src="lib/plugins/angular-translate-loader-static-files.min.js"></script>
<!--<script src="http://rawgithub.com/angular-translate/bower-angular-translate-interpolation-messageformat/master/angular-translate-interpolation-messageformat.min.js"></script>-->
<script src="js/ui-bootstrap-tpls-0.6.0.min.js"></script>       
<script src="lib/bootstrap/bootstrap.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/home.js"></script>
<script src="js/controllers/boat-list.js"></script>
<script src="js/controllers/boat.js"></script>      
<script src="js/controllers/boat-booking-payment.js"></script>
<script src="js/controllers/boat-services-payment.js"></script>
<script src="js/controllers/login.js"></script>
<script src="js/controllers/location.js"></script>
<script src="js/controllers/user-dashboard.js"></script>
<script src="js/controllers/business.js"></script>
<script src="js/controllers/file-upload.js"></script>
<script src="js/controllers/searcher.js"></script>
<script src="js/controllers/reset-password.js"></script>
<script src="js/controllers/about.js"></script>
<script src="js/controllers/shopping-cart.js"></script>
<script src="js/controllers/user-plans.js"></script>
<script src="js/controllers/user-plan-payment.js"></script>
<script src="js/controllers/demo.js"></script>
<script src="js/controllers/account.js"></script>
<script src="js/controllers/help.js"></script>
<script src="js/controllers/join-us.js"></script>
<script src="js/controllers/account.js"></script>
<script src="js/controllers/accordion.js"></script>
<script src="js/controllers/boat-model.js"></script>
<script src="js/controllers/new-boat-payment.js"></script>
<script src="js/controllers/what-to-do.js"></script>
<script src="js/controllers/privacy.js"></script>
<script src="js/controllers/terms.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>    
<script src="js/i18n.js"></script>  
<script src="js/properties/properties.js"></script>     
<script src="lib/plugins/file-upload/angular-file-upload.min.js"></script>
<!-- SELECT -->
<script src="lib/plugins/angular-strap.js"></script>
<script src="lib/bootstrap/bootstrap-select.js"></script>
<!-- SWITCH -->
<script src="lib/plugins/angular-toggle-switch.min.js"></script>
<!-- SLIDER -->
<script src="lib/bootstrap/bootstrap-slider.js"></script>
<!-- SPINNER -->
<script src="js/spin.min.js"></script>
<script src="lib/plugins/angular-spinner.min.js"></script>
<!-- LIGHTBOX -->
<script src="lib/bootstrap/lightbox-2.6.min.js"></script>
<!-- OAUTH -->
<script src="js/oauth.min.js"></script>
<!-- Growl notifications -->
<script src="lib/plugins/angular-growl.js"></script>
<!-- Custom HTML popover
<script src="lib/plugins/custom-popover.js"></script>-->
<!-- Countdown Timer -->
<script src="lib/plugins/angular-timer.min.js"></script>
<!-- CART -->
<script src="js/shopping-cart.js" type="text/javascript"></script>
<!-- Chart -->
<!--<script src="lib/plugins/d3.min.js" type="text/javascript"></script>-->
<script src="lib/plugins/angular-charts.min.js" type="text/javascript"></script>
<!-- Progress bar -->
<script src="lib/plugins/ngProgress.min.js" type="text/javascript"></script>
<!-- Angular moment -->
<script src="lib/plugins/moment-with-langs.min.js"></script>
<script src="lib/plugins/angular-moment.min.js"></script>
<!-- Stripe -->
<script src="https://checkout.stripe.com/checkout.js"></script>
<!--  Angular-dynamic-locale -->
<script src="lib/plugins/tmhDynamicLocale.js"></script>

将这些减少到两个查询以及外部资源将使您的加载时间大大改善。实际上，查看无缓存刷新表明，您正在加载单个文件，这是一个很大的限制。

确实，这是Google Chrome审核工具建议的前两条建议（以及浏览器缓存，代理缓存