问题标签 [deferred-loading]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 延迟加载在 HTML 中正常添加的 CSS
我正在针对 PageSpeed 优化 Shopify 网站，并且正在研究“消除首屏内容中的渲染阻止 JavaScript 和 CSS”。我使用 . 优化了许多文件的 CSS 交付filamentgroup/loadCSS。但是 Shopify 和我正在使用的其他应用程序添加了一些 CSS 文件。由于这些是添加到里面的<head>，我无法控制它，我怎样才能推迟加载这些 CSS？
javascript - 如何使用html webpack插件将脚本标签放在样式标签之前
TL;DR 检查最后一段
我的场景： 我有以下文件：
- app.css（在 html 之前添加
</head>） - vendor.js（在 html 之前添加
</body>） - app.js（在
</body>vendor.js 之后的 html 中添加）
Html webpack 插件正在我的 html 模板中添加上述文件。在这种情况下，首先我的浏览器将无法发出下载请求，vendor并且app必须等待样式表首先被下载。那很糟。其次，当我的脚本已经是 SSR 渲染的 html 时，我的脚本将不必要地停止我的 DOM 来渲染第一次绘制。
其次，我要添加解决defer它的方法。但是首先，为什么我的defer脚本必须等待样式表才能下载，即使是那些在 DOM 构建中不需要（但只是功能）的脚本！
所以，我想把这些deferred scripts放在 head 标记中，这是可能的，html webpack plugin但我想把它们放在样式标记（用于外部样式表）之前，以使浏览器可以并行请求这些脚本而不是等待。
首先，你认为这是一个好主意吗？（可能是因为浏览器只能有有限的并行连接，所以它可能会阻碍下载图像等。或者可能是现代浏览器在尝试在 html 中向前看并请求延迟脚本时自动执行此操作，但它只是最近的浏览器，不是它？ ）
其次，如何使用html webpack插件实现将延迟脚本放在样式标签之前？ （我想具体了解一下）
javascript - 如何使用webpack实现Gmail延迟JS解析的策略
看完之后
- http://googlecode.blogspot.in/2009/09/gmail-for-mobile-html5-series-reducing.html
- http://www.lostsaloon.com/technology/how-and-why-to-defer-parsing-of-javascript-in-a-webpage/
由 Google 的 Gmail 推广，代码加载在页面源的评论中。浏览器不会解析它，假设它只是注释，并且当需要时，您可以找到注释的 DOM 元素，去掉注释块并使用 eval() 方法运行代码。
Webpack 目前有什么方法可以允许这样的事情吗？
ajax - 使用按钮加载 wordpress 短代码？
问题：
是否可以按需加载 WordPress 短代码，例如使用按钮？
解释：
我有一个画廊插件，它有一个简码。不幸的是，该插件在页面加载时不使用图像延迟机制。所以它有太多的图像请求会影响速度排名。
这个想法是否可行：
我想要一个“加载画廊”按钮。当它被按下时，画廊简码被加载。欢迎任何推荐/文章/关键概念。我什至不知道从哪里开始。
javascript - 使用脚本标签延迟加载 HTML 小部件
我有一个号召性用语小部件，我想在移动设备的首屏显示它。但是，Google PageSpeed 正在惩罚我在加载主要内容之前加载小部件。我尝试将小部件嵌入script带有defer属性的标签中，但现在小部件根本没有加载。
使用此代码，我在移动设备上的 Google PageSpeed 得分为 99，但无法加载小部件。
使用此代码，该小部件确实可以在移动设备中加载，但我的 Google Page Speed 得分下降到 93。
这是完整的 HTML 小部件，以及 @randy-casburn 建议的修复程序。小部件也不使用此代码加载。
编辑：添加了惩罚代码的示例。
jquery - 我在 laravel 5.3 中使用 twitter 引导程序，并且折叠功能在本地完美运行，但在实时服务器上却没有
我对一个我似乎无法弄清楚的问题感到头疼，并且仔细阅读了所有我能找到的类似问题，但无济于事。
我有一个 laravel 5.3 项目，使用 twitter bootstrap 3.3.7 和缩小的 jquery 3.1.1。
Jquery 通过 CDN 包含在内。
脚本加载的顺序如下，它们是在 , 之后加载<footer>的<body>，除了 jquery 是在 末尾加载的<head>：
- jQuery
- app.js（laravel 构建了这个，它包括引导程序）
- jQuery UI
- 我的自定义 javacript 文件
基本上这是做什么的，有2个按钮。完整和不完整，为了简单起见，我们现在将它们称为 A 和 B。每一个都与一个 div 相关联。在页面加载时，所有内容都被隐藏。当您单击 A 时，它将显示 div A，如果尚未隐藏，则隐藏 div B。当您单击 B 时，它将执行相同但相反的操作。
令人沮丧的部分？正如预期的那样，这在我的 Web 应用程序的 XAMPP 本地版本中本地运行完美，没有错误。然而，当移动到实时服务器时，在我（认为）几乎相同的环境中，它可以正常工作 80%。
当你点击A时，它会显示A。（好）
当你点击 B 时，它会显示 B。（好）
当您单击 A 或 B 时，它不会像本地那样隐藏相反的 div。（坏）
因此，例如，您单击 A，然后单击 B，现在您可以同时看到 A 和 B div 而不仅仅是 B。
这是相关的 javascript 片段。例如，您可以看到该$('#complete-'+eid).collapse('hide');行是在本地工作但不在服务器上工作的行。
我已经移动了脚本，并在开发工具中检查了它们以查看它们何时加载。（我最初认为这与脚本或类似内容无法访问的隐藏 div 有关）。我尝试推迟脚本加载，或者在页面加载时不隐藏 div，但这些都没有改变我遇到的问题。
我不知所措，将不胜感激任何见解。
谢谢大家
编辑：
我制作的一个例子的小提琴：https ://jsfiddle.net/3o0Lfw7n/18/
编辑2：
简化的代码，仍然可以在本地工作，仍然不能在服务器上工作。任何浏览器或设备上都没有控制台错误。（它可以正常折叠/打开，一直存在的问题是当您打开一个时，另一个没有正确关闭。
javascript - DOMContentLoaded 与 Web 组件有什么关系？
仅当 DOM 准备好并且我们可以确定所有元素都可用时才开始操作它是古老的常识，在后 jQuery 时代，我们都DOMContentLoaded为此使用事件。
现在 Web 组件（尤其是自治自定义元素的形式）倾向于创建自己的 HTML，通常采用connectedCallback()生命周期方法。
第一个问题：
与DOMContentLoaded（自主）自定义元素有何关系？只有在所有组件 connectedCallbacks 完成后才会发生事件吗？如果没有，我如何确保某些代码仅在 Web 组件完成初始化后执行？
第二个问题，完全相关：
Web 组件如何与元素的defer属性相关联script？
javascript - Google Maps API 使用 async defer 的说明
我试图了解https://developers.google.com/maps/documentation/javascript/tutorial<script>代码片段中元素的加载：
据推测，google.maps.Map对象是在后者中定义的script。但是，该脚本具有async defer属性，根据https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script ，这意味着它将在文档被解析后异步执行。但是由于这是在 first 之后， firstscript如何在定义加载之前script实例化 a ？Map
javascript - 延迟的javascript noConflict不同版本的jquery
在我的一个功能中，我需要使用两次jquery 版本。一个用于所有功能，另一个用于一个功能的 jquery ..
我无法控制延迟中的冲突。
jquery - 不能将异步延迟与 Jquery 脚本一起使用
我正在尝试将此脚本与异步延迟一起使用，但它会影响功能。我不确定我做错了什么？如果您需要查看网站，请参阅以下信息：环聊