Question

在我们现有的网络应用程序中，我们是在.cshtml页面开始时完成的：

@using Carwale.UI.PresentationLogic;
@model Carwale.Entity.ViewModels.HomeModel
@{
    ViewBag.CustomJS = "~/Views/StaticPartials/HomeScripts.cshtml";
    ViewBag.CustomCSS = "~/Views/StaticPartials/HomeCss.cshtml";
}

在我们的"~/Views/StaticPartials/HomeScripts.cshtml"中，我们有：

@model Company.Entity.ViewModels.HomeModel
<script>var landingPage = true;</script>
<script type="text/javascript" src="@(!string.IsNullOrWhiteSpace(ViewBag.staticUrl) ? "http://st.com" + ViewBag.stagingPath : "")/js/home.js?201605021628098010"></script>

我正在从各种效果网站获取渲染阻止javascript建议。

我能以某种方式改善这种情况吗？我读到这应该位于页面底部的某个javascript部分，以改善页面加载时间。

Answer 1

我建议您使用MVC中的部分。 Here是另一篇解释部分用法的文章。

以下是一个例子：

如果您有一个主布局文件，它定义了网站的所有主要布局，请执行以下操作。将其放在主布局的正文标记内。

@RenderSection("scripts", false)

然后，在每个页面/视图之后“继承”此主布局文件，您可以使用此部分添加您的Javascript引用，如下所示：

@section scripts{
    Scripts.Render("~/Scripts/YourCustomFolder/SomeJSFile.js")
}

Answer 2

当浏览器访问脚本标记时，它们将停止页面呈现，直到脚本被下载，解析并执行。

最佳做法是在结束正文标记之前包含脚本引用。这允许浏览器在不等待脚本的情况下尽快下载并开始呈现页面标记。

Answer 3

对我来说，添加所有JavaScript的最佳位置几乎位于HTML文档的末尾。在关闭body标记之前，我插入所有Javascipt引用和Javascript自定义代码。我首先希望看到我的HTML代码被加载，然后在此之后与Javascript相关的东西。加载Javascript可能需要一段时间，因此最好在页面上最后加载它：

<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="utf-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <title>@ViewBag.MetaTitle</title>
          @Styles.Render("~/bundles/css")
     </head>
     <body>
          @RenderBody()
          @Scripts.Render("~/bundles/js")
          @RenderSection("scripts", false)
     </body>
</html>

我通常首先添加对Javascript库的引用：

@Scripts.Render("~/bundles/js")

然后我在引用这些库后添加了所有自定义Javascript代码：

@RenderSection("scripts", false)

在.cshtml页面中，您“注入”自定义Javascript代码可能并不重要。我通常先添加所有HTML代码，然后在我的视图底部添加我的Javascript代码：

<h1>Test Page</h1>
<p>Test page paragraph</p>

@section scripts {
     <script>
     </script>
}

我希望这会有所帮助。

MVC在哪里为我们的cshtml文件添加js参考？

3 个答案: