gpt4 book ai didi

javascript - nopcommerce 3.80 首屏内容中的 ender-blocking JavaScript 和 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 07:51:55 24 4
gpt4 key购买 nike

我在 nopcommerce 3.80 中使用 Html.AppendScriptParts 方法的“异步”属性 Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js ",假,真);

google PageSpeed Tools 给它一个高分,这是我所期望的: enter image description here但这似乎对网站的其他功能有影响(nivo slider 、来自 Seven Spikes 插件的 ajax 过滤器,...) enter image description here enter image description here

我没有在 nopcommerce 中使用 js 和 css 捆绑功能。你们能告诉我现在我的场景中最好的解决方案是什么吗?任何帮助都非常有用。非常感谢。

这是我的 _Root.head.cshtml 代码:

@using Nop.Core.Domain.Common;
@using Nop.Core.Domain.Seo
@using Nop.Core.Infrastructure;
@{
var displayMiniProfiler = EngineContext.Current.Resolve<Nop.Core.Domain.StoreInformationSettings>().DisplayMiniProfilerInPublicStore;

Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
var commonSettings = EngineContext.Current.Resolve<CommonSettings>();
if (commonSettings.RenderXuaCompatible)
{
Html.AppendHeadCustomParts(string.Format("<meta http-equiv=\"X-UA-Compatible\" content=\"{0}\"/>", commonSettings.XuaCompatibleValue));
}
var seoSettings = EngineContext.Current.Resolve<SeoSettings>();
if (!string.IsNullOrEmpty(seoSettings.CustomHeadTags))
{
Html.AppendHeadCustomParts(seoSettings.CustomHeadTags);
}
}
<!DOCTYPE html>
<html@(this.ShouldUseRtlTheme() ? Html.Raw(" dir=\"rtl\"") : null) @Html.NopPageCssClasses()>
<head>
<title>@Html.NopTitle()</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="description" content="@(Html.NopMetaDescription())" />
<meta name="keywords" content="@(Html.NopMetaKeywords())" />
<meta name="generator" content="nopCommerce" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@Html.NopHeadCustom()
@Html.Partial("Head")
@Html.Widget("head_html_tag")
@Html.NopCssFiles(this.Url, ResourceLocation.Head)
@Html.NopScripts(this.Url, ResourceLocation.Head)
@Html.NopCanonicalUrls()
@Html.Action("RssHeaderLink", "News")
@Html.Action("RssHeaderLink", "Blog")
@Html.Action("Favicon", "Common")
@if (displayMiniProfiler)
{
@StackExchange.Profiling.MiniProfiler.RenderIncludes()
}
</head>
<body>
@RenderBody()
@Html.NopCssFiles(this.Url, ResourceLocation.Foot)
@Html.NopScripts(this.Url, ResourceLocation.Foot)


</body>
</html>

enter image description here

最佳答案

首先,它与七钉插件无关。此问题是由于 async 行为造成的。当您将 jquery 文件设为异步时,这意味着应用程序将不会等待加载该文件并去加载下一个 js 文件。但是其他 js 文件依赖于第一个主文件,这就是你得到错误的方式。

让我们用当前场景来理解它,默认代码是:

Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");

在这种情况下,js文件的顺序是: enter image description here

现在异步加载 jquery min js 文件。

Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js", false, true);

并检查控制台:

enter image description here

进行此更改后,您将收到错误消息。
要解决此问题,您必须根据依赖关系以特定顺序加载 js min 文件。

旁注:此问题也与默认代码有关!!我已经使用 nopCommerce 3.80 和 3.90 进行了测试

关于javascript - nopcommerce 3.80 首屏内容中的 ender-blocking JavaScript 和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47690111/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com