javascript - Form in view 破坏 CSS/JS 性能优化-6ren

javascript - Form in view 破坏 CSS/JS 性能优化

转载作者：塔克拉玛干更新时间：2023-11-02 21:10:00

25

4

我正在为 Asp.Net Core MVC 应用程序中脚本和 CSS 的性能优化而苦苦挣扎。

我使用带有 LoadCSS 的 Bootstrap 来预加载它。 FontsAwesome CSS 和 JavaScript 在内容之后加载。

我的 _Layout 页面看起来像这样。

<head>

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">     

<script>
    LoadCSS script here...
</script>

<script async defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<link rel="preload" as="style" type="text/css" onload="this.onload=null;this.rel='stylesheet'" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<noscript>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</noscript>


<style>
    inline critical path CSS here...
</style>

</head>
<body>

<div class="container-fluid body-content">
    @RenderBody()
    @RenderSection("scripts", false)
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>

这很好用，只要页面不包含输入表单，我就会获得良好的性能分数(在 Google PageSpped 上为 94)。

对于具有输入表单的页面，性能优化停止工作，Google PageSpeed 提示渲染阻塞 jquery.js 和 bootstrap CSS。出于某种原因，Bootstrap 似乎加载了两次!？以下是 PageSpeed 对带有表单的页面的说明，其他页面没有此问题。

Remove render-blocking JavaScript:

https://code.jquery.com/jquery-3.3.1.slim.min.js

Optimize CSS Delivery of the following:

https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css

我不太明白这里发生了什么。不知何故，表单的存在似乎迫使 Bootstrap 提前加载并预加载，而 LoadCSS 不“工作”。

表单确实使用了客户端数据验证，这可能是罪魁祸首。

最佳答案

我设法解决了问题。我在许多网站上读到，为了获得最佳性能，JavaScript 应该放在关闭 body 标记之前，但这个建议似乎有些过时了。将脚本放在头部并使用 defer 实际上更有意义。 Defer 会在不阻塞渲染的情况下并行加载它们，并在它们之后按顺序执行，这是完美的。

CSS 问题是由于内联关键 CSS 中缺少一些元素，即表单控制。这导致整个 CSS 被加载，出于某种原因两次。我用了penthouse为每个页面生成关键 CSS，然后合并它们。

改进的布局页面:

<head>

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">     

<script>
    LoadCSS script here...
</script>

<script async defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<link rel="preload" as="style" type="text/css" onload="this.onload=null;this.rel='stylesheet'" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<noscript>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</noscript>


<style>
    inline critical path CSS here...
</style>

<script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</head>

<body>

<div class="container-fluid body-content">
    @RenderBody()
    @RenderSection("scripts", false)
</div>

</body>

关于javascript - Form in view 破坏 CSS/JS 性能优化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51569626/

25

4

0

文章推荐： java - 如何实现 android fab 快速拨号选择器？

文章推荐： javascript - 如何使用参数和#reference从http> https重定向网页

canvas - 破坏 Canvas
我正在尝试完成撤消/重做。我正在使用loadFromJSON(...)从我存储在数组中的 Canvas 状态重新构建 Canvas 。基本上，我的想法是破坏现有的 Canvas 并重新构建 Canva
JavaScript iframe 破坏
在某些情况下，我有一个在 iframe 中打开的网页。当它被加载到那个 iframe 中时，我需要它将窗口位置设置为资源以下载文件(所有这些都是为了更新 GreaseMonkey 脚本......所有
android - 破坏 Intent ？
当我创建 Intent 时: Intent in = new Intent(this, myclass.class); this.startActivity(in); 我创建了一个新的 Intent
php - 破坏 Wordpress 网站的简码
我正在我本地版本的 Wordpress 网站上为 Wordpress 创建新的短代码。在 functions.php 中，我添加了例如: function shortTest() { re
javascript - 破坏 JavaScript 代码的特殊字符
我正在为机械网站制作 JavaScript 闪卡游戏。因为我想将方程写在卡片上，所以我需要使用 delta(Δ) 符号。一张卡片可能有:一侧是“功率方程”，另一侧是“P=W/Δt”。如果卡片从第一面
javascript - addClass 破坏 JS
我编写了以下代码: document.addEventListener("DOMContentLoaded", ()=>{ let menu = document.querySelector(
javascript - 破坏 Chrome 缓存以进行浏览器同步重新加载
我的浏览器同步工作正常，但我仍然很难处理之前的 html 的缓存。即使选中了 Chrome 的“禁用缓存”，甚至在隐身模式下也是如此! 要加载页面更改，我总是必须“清除缓存并硬重新加载”。我想知道，
extjs - 破坏 ExtJS 中的上下文菜单？
我注意到每次打开和关闭(通过单击菜单项或单击菜单外的某个区域)时，上下文菜单 ( Ext.menu.Menu ) s 不会从 DOM 中删除，它们只是以某种方式变得不可见。如何改变这个？最佳答案
coq - 破坏 coq 中依赖记录的相等性
给定依赖记录类型: Record FinPath : Type := mkPath { fp_head : S i; fp_tail
teamcity - 破坏 Teamcity 中构建的电子邮件用户
在 Husdon/Jenkins 中，我可以在构建被破坏时设置通知，以向进行破坏构建的 checkin 的用户发送电子邮件。如何在 Teamcity 中执行此操作？我知道个人用户可以通过 Teamc
extjs - 破坏 ExtJS 中的上下文菜单？
我注意到每次打开和关闭(通过单击菜单项或单击菜单外的某个区域)时，上下文菜单 ( Ext.menu.Menu ) s 不会从 DOM 中删除，它们只是以某种方式变得不可见。如何改变这个？最佳答案
django html2text anchor 破坏
使用 MIMEMultipart('alternative') 发送 html 和 pain-text 时将 html 转换为文本时，html 的 anchor 换行 http://127.0.0.
java - 破坏 Activity 导致服务丢失数据
每当我的应用程序最小化时，我都会启动一个服务，该服务向我的 HTTP 服务器发送拉取请求以检查通知，当应用程序恢复时，服务将被终止(以及计划的可运行项)。一切正常，直到我决定终止该应用程序(将其从正在
jQuery Mobile 破坏 OmniAuth
我意识到该框架处于 alpha 阶段，但正在实现 jQuery Mobile破坏了我的omniauth 身份验证。当我尝试登录时，一旦我尝试点击/auth/twitter Controller ，jQ
jquery 破坏 Angular 指令
我对 Angular 比较陌生，经过几个小时的调试，我发现添加 jquery 时存在一些不兼容性。该指令在没有 jquery 的情况下工作正常，但在使用 jquery 时会中断:/ 这是一个 plnk
JQuery .trigger ('submit' )破坏
我发现，因为我正在处理的所有表单都有一个包含“name =“submit””属性的提交按钮，所以当我单击应该触发表单提交的链接时，触发器提交会中断. 有谁知道我该如何解决这个问题。下面的 JQuer
Javascript 破坏 CSS 悬停
我遇到了一个问题:/我得到了一个 CSS 东西，它使悬停时背景位置发生变化。但是当我在 javascript 中运行一个改变悬停的函数后，CSS 停止工作。这是函数: function tree()
javascript - qooxdoo 破坏，处置
谁能给出一个完整的例子来说明 qooxdoo 1.6 中的 dispose 和 destruct 是如何工作的？，我在 qooxdoo 演示或文档中找不到任何好的示例。谢谢你的建议。最佳答案处
java - JFormattedTextField 破坏 DocumentFilter
我对 JFormattedTextField 有疑问(我将它用作我们所有文本字段的基类)。今天我尝试向该字段的文档添加一个文档过滤器，它工作得很好，但前提是它没有设置格式化程序工厂。问题是，当设置
javascript - 破坏 JavaScript 函数
我有一个点击事件 $('#ship_Move').click(function (event) { event.stopPropagation();

首页

博学

6Ren·AI

商城

javascript - Form in view 破坏 CSS/JS 性能优化