ASP.NET MVC局部视图首次加载缓慢问题排查与优化咨询

我正在开发基于.NET 4.7.2的ASP.NET MVC Web项目。点击_Layout.cshtml中动态生成的菜单时，会导航至对应页面，但每个groupPath（按分组）的首次请求会导致页面加载缓慢。同一分组内的后续请求（不同href）加载速度很快。请问该现象的原因是什么？如何缩短首次渲染时间？

测试情况：为测试我创建了内容极简的页面，但首次渲染仍耗时4-5秒。我也尝试了发布时启用PreCompile，但效果未改观。

前端代码 #

newTab.find('a').one('shown.bs.tab', function (e) {
    var groupPath = group + "/"+ href;
    newTabContent.html('<p>Loading...</p>');

    fetch(groupPath, {
        method: 'GET'
    })
        .then(response => response.text())
        .then(text => {
            try {
                newTabContent.html(text);
            } catch (error) {

            }
        })
        .catch(error => console.error('Fetch error: ', error));
});

后端代码 #

public ActionResult A01() { return PartialView(); }
public ActionResult A02() { return PartialView(); }
public ActionResult A03() { return PartialView(); }
public ActionResult A04() { return PartialView(); }
public ActionResult A05() { return PartialView(); }

1. 视图编译延迟：即使启用了发布预编译，ASP.NET MVC仍可能在分组视图首次请求时触发实时编译——比如预编译未覆盖部分视图，或者分组路由对应的视图未被提前处理。首次请求时服务器要完成视图编译、加载入内存的流程，耗时较长。
2. 程序集加载延迟：分组对应的控制器或依赖程序集，首次请求时才会被CLR加载到AppDomain，这个过程包含程序集读取、验证、JIT编译，也会拖慢首次请求速度。
3. 缓存未命中：首次请求时，服务器端的视图缓存、路由缓存都未建立，后续请求可直接复用缓存内容，因此速度更快。

1. 强制预编译所有视图 #

修改项目文件（.csproj）的配置，确保所有视图（含部分视图）都被预编译：

<PropertyGroup>
  <MvcBuildViews>true</MvcBuildViews>
  <PrecompileBeforePublish>true</PrecompileBeforePublish>
  <PrecompileViewsDuringPublish>true</PrecompileViewsDuringPublish>
</PropertyGroup>

同时安装Microsoft.AspNet.Mvc.Precompilation NuGet包，确保预编译覆盖所有视图文件。

2. 预热分组相关资源 #

在应用启动时（Global.asax.cs的Application_Start方法），提前触发分组视图的编译和程序集加载：

protected void Application_Start()
{
    // 其他初始化代码...
    WarmUpGroupViews("GroupA"); // 替换为你的分组名
}

private void WarmUpGroupViews(string groupName)
{
    var actionNames = new List<string> { "A01", "A02", "A03", "A04", "A05" };
    foreach (var action in actionNames)
    {
        try
        {
            var routeData = new RouteData();
            routeData.Values.Add("controller", groupName);
            routeData.Values.Add("action", action);
            var controllerContext = new ControllerContext(new HttpContextWrapper(HttpContext.Current), routeData, new EmptyController());
            var viewResult = new ViewResult { ViewName = action };
            viewResult.ExecuteResult(controllerContext);
        }
        catch { }
    }
}

// 用于预热的空控制器
public class EmptyController : Controller { }

注意：IIS部署时需将应用池启动模式设为AlwaysRunning，避免应用池回收后重新预热。

3. 启用服务器端缓存 #

对部分视图输出做缓存，首次请求后直接复用缓存内容：

[OutputCache(Duration = 3600, VaryByParam = "none")]
public ActionResult A01() { return PartialView(); }

可根据实际需求调整缓存时长和策略。

4. 优化前端请求时机 #

不要等到shown.bs.tab事件触发才请求，而是在菜单点击时提前预加载分组视图，或页面初始化时预加载常用分组资源：

// 初始化缓存容器
window.preloadedViews = {};

// 菜单点击时预加载视图
$('.menu-item').on('click', function() {
    var group = $(this).data('group');
    var href = $(this).data('href');
    var groupPath = group + "/" + href;
    if (!window.preloadedViews[groupPath]) {
        fetch(groupPath)
            .then(response => response.text())
            .then(text => {
                window.preloadedViews[groupPath] = text;
            });
    }
});

// 标签页显示时优先使用缓存
newTab.find('a').one('shown.bs.tab', function (e) {
    var groupPath = group + "/"+ href;
    newTabContent.html('<p>Loading...</p>');

    if (window.preloadedViews[groupPath]) {
        newTabContent.html(window.preloadedViews[groupPath]);
    } else {
        fetch(groupPath, { method: 'GET' })
            .then(response => response.text())
            .then(text => {
                window.preloadedViews[groupPath] = text;
                newTabContent.html(text);
            })
            .catch(error => console.error('Fetch error: ', error));
    }
});

内容的提问来源于stack exchange，提问作者김태군