.NET Core能否无需JS实现JS/CSS异步加载？含Google Font场景

其实严格来说，异步加载资源是浏览器端的行为，.NET Core作为后端框架，主要负责生成并输出正确的HTML标记来触发浏览器的异步加载逻辑，完全不需要依赖RequireJS这类JS加载器。下面是几种无需额外JS库、仅通过输出特定HTML（结合.NET Core视图语法）实现的方案：

方案1：利用media属性切换实现异步加载 #

这是一种经典的无额外JS文件的异步加载技巧，仅依赖内联的onload事件（如果完全排斥任何JS，后面会提供降级方案）：

在你的.NET Core视图（比如布局页_Layout.cshtml，或者你用PartialAsync加载的局部视图）中添加：

<link href='https://fonts.googleapis.com/css?family=Changa|Julius+Sans+One|Raleway' 
      rel='stylesheet' 
      media="print" 
      onload="this.media='all'">

原理： #

• 浏览器会优先加载media匹配当前设备的样式表，print仅在打印场景生效，所以浏览器会异步加载这个样式表（不会阻塞页面渲染）。
• 加载完成后，onload事件触发，把media改为all，样式就会正常应用到页面上。

如果完全不想用任何JS，可以添加noscript标签作为降级：

<link href='https://fonts.googleapis.com/css?family=Changa|Julius+Sans+One|Raleway' 
      rel='stylesheet' 
      media="print">
<noscript>
  <link href='https://fonts.googleapis.com/css?family=Changa|Julius+Sans+One|Raleway' rel='stylesheet'>
</noscript>

这种写法在JS启用时是异步加载，JS禁用时会同步加载样式表，兼顾了两种场景。

方案2：使用HTML5 preload预加载并转为样式表 #

preload是HTML5专门用于预加载资源的属性，可以指定资源类型，浏览器会异步加载它，再通过onload转为样式表：

在视图中输出：

<link rel="preload" 
      href='https://fonts.googleapis.com/css?family=Changa|Julius+Sans+One|Raleway' 
      as="style" 
      onload="this.rel='stylesheet'">
<noscript>
  <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Changa|Julius+Sans+One|Raleway'>
</noscript>

原理： #

• rel="preload"告诉浏览器这是需要预加载的资源，as="style"指定它是样式表，浏览器会异步加载且不阻塞页面渲染。
• 加载完成后，onload把rel改为stylesheet，样式就会生效。
• noscript标签用于JS禁用的场景，保证样式能正常加载。

关于你尝试的@await Html.PartialAsync() #

PartialAsync本身只是把局部视图的内容渲染到主页面中，它不会改变资源的加载方式。如果你想通过Partial来管理字体加载逻辑，只需要把上面的HTML代码放到一个局部视图（比如_GoogleFonts.cshtml）里，然后在布局页中调用：

@await Html.PartialAsync("_GoogleFonts")

这样做的好处是把字体加载逻辑封装起来，方便维护，但核心还是靠输出的HTML标记实现异步加载，而非Partial本身的功能。

额外建议：缓存Google Font CSS（可选） #

如果网络问题是核心痛点，你还可以通过.NET Core的静态文件缓存，把Google Font的CSS下载到本地服务器后从本地加载，大幅提升加载速度：

1. 下载Google Font的CSS文件到项目wwwroot/css目录下。
2. 在视图中引用本地文件：

<link href='~/css/google-fonts.css' rel='stylesheet' media="print" onload="this.media='all'">

3. 在Program.cs（.NET 5+）中配置静态文件缓存：

app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        ctx.Context.Response.Headers.Append(
            "Cache-Control", "public, max-age=31536000");
    }
});

这样浏览器会长期缓存本地的字体CSS文件，避免每次请求都访问Google服务器。

内容的提问来源于stack exchange，提问作者Melon NG