性能相同的 AWS EC2 微型和中型实例？答案

【问题标题】：AWS EC2 micro and medium instances with same performance?性能相同的 AWS EC2 微型和中型实例？
【发布时间】：2014-06-06 17:34:08
【问题描述】：

我正在开发一个 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/

我错过了什么？加载主页需要很长时间。但我不知道瓶颈在哪里，也不知道如何提高性能。我应该为静态图像使用云端。

无论如何，您可以看到即使是文本翻译也需要时间加载。

有什么建议可以改进吗？

【问题讨论】：

标签： ruby-on-rails angularjs amazon-web-services amazon-ec2

【解决方案1】：

检查 cloudwatch 以了解两个实例的实例监控，您可能存在共享瓶颈。例如，他们会不会使用相同的数据库？

【讨论】：

数据库不同。

【解决方案2】：

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

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

微实例是一种特殊的实例类型。实际上讲micro是比小实例大致可以超过性能和infra power。算力上属于中小型实例之间的一个地方。

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

现在说到微观和媒介的比较。您观察到的效果是正确的，它实际上是预期的行为。与中微不同的是内存。您的应用很可能是计算密集型的，因此行为并不像您预期的那样不堪重负。

我建议您使用大型实例检查您的应用程序几个小时，并使用少量 CloudWatch 指标来查看性能。微型和中型之间的比较，不会像您想象的那样提高 3 倍的性能（我猜想排名是微型、小型和中型，所以是 3 倍）

【讨论】：

感谢您的详细回复。我有一些不清楚的地方。我主要关心的是 index.html 页面。这是最重的页面，因为，这里是我加载所有 js、css 的地方。我已经分析了网络行为（使用 Chrome 调试工具），我可以看到每次都有很多请求，延迟时间更长（如果你能帮我分析一下就好了）。也许使用 CloudFront 或 S3 来改进。我应该使用什么，cloudFront？还是 S3？
这些 css、js、文件的物理位置在哪里？如果它是您的服务器，我建议您将其推送到 S3 并获取这些 URL，重新引用您的 index.html 页面并查看性能。这是您绩效改进之旅的零步。这样做...

【解决方案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 的审核工具推荐的前两项建议（以及浏览器缓存、代理缓存

【讨论】：

这真的很有趣。但是我怎样才能结合 css 或 javascripts 呢？什么是“资产管道”？你能提供更多细节吗？谢谢！！
嗨@Rober 至少对于生产，您需要在部署方法的某处添加一个钩子（需要了解更多信息）以确保asset compilation 阶段发生。我在AmberBit 找到了您感兴趣的领域的一个很好的概述
可能我忘了说一个细节。我的 AngularJS 和 Rails 应用程序没有集成在一个应用程序中。我的意思是，尽管它们相互通信，但它们被分开在两个应用程序中，并且可以部署在不同的服务器中。但是根据你所说的和你提供的博客，我理解你假设这两个应用程序是集成的。到目前为止，我的控制器和 css 不在 Rails 资产文件夹中，而是在 AngularJS 的 app 文件夹中。我应该改变我的方法并集成这两个应用程序吗？这是更好的方法吗？还是有其他建议？谢谢！