我的问题
对于我的Web应用程序,页面的初始加载时间超过20秒。 在Chrome上-Audit -LightHouse显示以下信息。
我不知道如何解决这个问题,以使我的页面加载速度更快。我已经很长时间了。
在下面,我详细介绍了如何在部分布局和主页中捆绑和呈现捆绑包。任何帮助都非常感谢。
下面是我的js和css文件捆绑包。
SELECT SELECT NVL(TO_CHAR(TRANS.ID), 'NULL') AS ID
, 'HEADER'
,NVL(TO_CHAR((SELECT L_APP.DESCRIPTION
FROM L_APP L_APP
WHERE EXISTS ( SELECT 1 FROM TRANS WHERE L_APP.APP = TRANS.APP AND LANGUAGE = 2
)
)), 'NULL') AS KEY_EVENT
在我的_Layout.cshtml
在局部视图(_Lyout.cshtml)的开始处,我呈现了以下内容
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));/*2.1.1*/
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui.js"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.min.js",
"~/Scripts/respond.min.js"));
bundles.Add(new ScriptBundle("~/bundles/signalConnect").Include(
"~/Scripts/SignalScripts/SignalConnectScript.js"));
bundles.Add(new ScriptBundle("~/Content/sliderpips").Include(
"~/Content/jQuery_Slider_Pips/js/jquery-ui-slider-pips.js"));//,
//"~/Scripts/respond.js"));
bundles.Add(new ScriptBundle("~/bundles/highcharts").Include(
"~/Scripts/HighCharts/highcharts.js",
"~/Scripts/HighCharts/highcharts-more.js",
"~/Scripts/HighCharts/exporting.js")
);
bundles.Add(new ScriptBundle("~/Content/TinyDateTimePicker").Include(
"~/Content/TinyDateTimePicker/demo/events.js",
"~/Content/TinyDateTimePicker/calendar.js",
"~/Content/TinyDateTimePicker/datePicker.js",
"~/Content/TinyDateTimePicker/tinyDateTimePicker.js")
);
bundles.Add(new ScriptBundle("~/bundles/signalgen").Include(
"~/Scripts/SignalScripts/SignalGenScript.js"));
bundles.Add(new ScriptBundle("~/bundles/signaldata").Include(
"~/Scripts/SignalScripts/SignalDataScript.js"));
bundles.Add(new ScriptBundle("~/bundles/signaldatacompare").Include(
"~/Scripts/SignalScripts/SignalScript.js"));
bundles.Add(new ScriptBundle("~/bundles/signaldatareport").Include(
"~/Scripts/SignalScripts/SignalReportScript.js"));
bundles.Add(new ScriptBundle("~/bundles/signaldataalarm").Include(
"~/Scripts/SignalScripts/SignalAlarmScript.js"));
bundles.Add(new ScriptBundle("~/bundles/signalmaster").Include(
"~/Scripts/SignalScripts/SignalMasterScript.js",
"~/Scripts/Misc/jscolor.js"));
//bundles.Add(new ScriptBundle("~/bundles/highcharts").IncludeDirectory("~/Scripts/HighCharts","*.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"//,
));
bundles.Add(new StyleBundle("~/Content/papercss").Include(
"~/Content/assets/css/paper-dashboard.css",
// "~/Content/assets/css/themify-icons.css",
//"~/Content/Custom/site_layout/css/bootstrap-responsive.min.css"//,
"~/Content/Custom/site_layout/css/site_layout.css"
//"~/Content/3rdCss/flick/jquery-ui.css",
//"~/Content/3rdCss/smoothness/jquery-ui.css"
));
bundles.Add(new StyleBundle("~/Content/jqueryUIcss").Include(
"~/Content/jqueryui.min.css"));
bundles.Add(new StyleBundle("~/Content/sliderpipscss").Include(
"~/Content/jQuery_Slider_Pips/css/jquery-ui-slider-pips.css"));
bundles.Add(new StyleBundle("~/Content/TinyDateTimePickercss").Include(
"~/Content/TinyDateTimePicker/datePicker.css",
"~/Content/TinyDateTimePicker/themes/white/datePicker.css"));
在部分视图(_Layout.cshtml)的结尾处,我呈现了以下脚本
<title>@ViewBag.Title - Dashboard - IO </title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
在我的index.cshtml中,我在最终视图中具有以下代码
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/signalgen")
@RenderSection("Scripts", required: false)
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/highcharts")</body>
答案 0 :(得分:0)
组合css / js文件以最小化请求。
与外部域进行预连接,例如:
预加载css / js,例如:
<!-预加载资源 –––––––––––––––––––––––––––––––––––––––––––––––– ->
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="http://www.pagespeedinsights.org/theme/css/normalize.css">
<link rel="stylesheet" href="http://www.pagespeedinsights.org/theme/css/skeleton.css">
<link rel="stylesheet" href="http://www.pagespeedinsights.org/theme/css/custom.css" >