如何减少MVC应用程序的等待时间(TTFB)

时间:2016-03-31 07:33:37

标签: ajax html5 performance asynchronous

我有一个带有7个div的html页面,我使用ajax调用加载每个div,以便并行加载这些卡片。当我从控制器端检查时,每个div StoredProcedure只需要100-200毫秒,其中渲染每个div接近2秒。当我从Chrome开发工具查看时,每个请求都花费了大量的等待时间(TTFB),看起来每个div都在同步加载,即使我使用下面的代码:



$.when($.ajax({
    url: div1Url,
    success: function (data) {
        $("#div1").html(data);
    }
}),
       $.ajax({
    url: div2Url,
    success: function (data) {
        $("#div2").html(data);
    }
})
       //Like this I am loading all divs...
       
).then(function () {
console.log('loaded');
});

<div id="div1"> Div1</div>
<div id="div2"> Div2</div>
<div id="div3"> Div3</div>
<div id="div4"> Div4</div>
<div id="div5"> Div5</div>
<div id="div6"> Div6</div>
<div id="div7"> Div7</div>
&#13;
&#13;
&#13;

请在下面找到我的HTML呈现页面和每个组件的时间表。有人可以建议我如何减少等待时间以达到性能。

Html Page

enter image description here

PS:我已经实施了gzip,动态压缩,过期标题等,而我的网站等级是&#34; A&#34;当我用YSlow工具测试时

2 个答案:

答案 0 :(得分:2)

它们是导致Ajax请求变慢的原因之一。

我会尽力让你走上正轨。

  • 首先,您应该指定您的请求是GET类型,GET请求要快得多!

  • 您还应指定您尝试重新接收的数据类型,这样可以提高速度。

  • 很明显,你应该在完成时调用你的功能而不是成功

鉴于前三点:

 $.ajax({
      url : div2Url,
      type : 'GET', 
      dataType : 'html',
      success : function(code_html, statut){

      },
      error : function(resultat, statut, erreur){

      },
      complete : function(resultat, statut){
          //Here you can treat your data
      }
 })
  • 还要考虑只在一个请求中为同一页面执行Ajax调用。仅在一个请求中收集您所需的每个数据页面将大大提高您的服务器性能。然后在页面中,您可以分割每个div的结果。

如果这不能加快您的要求,请考虑以下其他要点:

  • 你的ajax请求真的很慢吗? 或服务器端的请求? (例如,对数据库的请求)

  • 您想要接收哪种类型的数据?是HTML吗?是XML吗? JSON? (在大多数情况下,尝试发送尽可能少的数据,例如,如果要发送HTML,请尝试将HTML放在要显示信息的页面上,并仅发送要显示的数据)

  • 检查触发Ajax调用的时刻。也许你在一个糟糕的时刻做了请求。

答案 1 :(得分:2)

即使您同时发送AJAX请求,如果您使用会话数据,ASP.NET MVC也会将它们作为队列处理。

尝试将[SessionState(SessionStateBehavior.Disabled)]属性添加到控制器中。

请参阅此处:ASP.NET MVC 5 concurrent requests are queued even with disabled Session