问题标签 [deferred-loading]

我正在创建一个包含大量大尺寸图像的页面，所以我自然想确保页面加载没有太多麻烦。我在这里阅读了这篇文章http://24ways.org/2010/speed-up-your-site-with-delayed-content

延迟的方法如下（从页面拉，不要介意URL）

然后稍后一段 js 负责图像加载

我不打算对每张图片都这样做，但绝对是对一些我不需要它在页面加载时显示的图片。

这是最好的方法还是有更好的方法通过延迟图像来实现更快的页面加载？

谢谢

我只需要在 DOM 准备好时运行脚本，因为脚本会重写某些标签的某些属性。

目前我使用document.addEventListeneronDOMContentLoaded或者如果不可用document.attachEvent ononreadystatechange并且如果两者都没有给出我使用window.onload功能。

我阅读了关于在文档被解析后defer应该执行的脚本的标签。

• 这是否意味着通过设置defer属性我可以在 DOM 准备好时轻松执行我的脚本？
• 是否有一些我可能会错过的隐藏内容？
• Opera、WebKit、Firefox、IE 的支持情况如何？

编辑：我知道像 JQuery 这样的库，但我不能使用它们，因为我需要非常小的脚本，所以我需要一个低级别的解决方案。

我正在网站中显示 Norton Secure Site Seal，并且我想提高页面速度以延迟加载印章脚本。我所做的所有尝试都失败了，我只找到了提到这一点的这个页面（链接）。有没有人找到一个很好的解决方法？
我用来运行其他脚本的延迟代码如下所示：

如果您想查看站点印章初始化脚本：（我使用的是 Flash 动画印章）

显然这只会在我的网站上正确显示，我选择更改域名以保护隐私。我真的想避免使用 iframe，如果你觉得相关，我也在加载 jQuery

Google pagespeed 抱怨我的 facebook 喜欢按钮脚本。如何推迟脚本？

在初始页面加载期间解析 45KiB 的 JavaScript。延迟解析 JavaScript 以减少页面呈现的阻塞。 http://static.ak.facebook.com/.../xd_arbiter.php ?...（21KiB 的内联 JavaScript）https://s-static.ak.facebook.com/.../xd_arbiter.php ?...（21KiB 内联 JavaScript）http://www.facebook.com/.../like.php ?...（3KiB 内联 JavaScript）

这是我正在使用的代码，我将其加载到页面页脚的 .js 文件中。

产生以下脚本标签（通过 Chrome 的检查器）：

我使用 CakePHP，并且在模板中，我将每个 script-tag 推到了结束 body 标记之前，以获得快速的页面加载。现在在正文中，在脚本标签之前，有一些依赖于 jQuery（滑块和图表）的代码。所以我为此使用了 document.ready-function，但没有任何反应。我必须做什么才能实现工作脚本？

一些代码让您深入了解：

模板 index.php

在获取的内容中，例如有滑块功能：

我的方法：我也用 window.onload 尝试过，它也不起作用。由于我对 document.ready- 和 onload-functions 的理解，我绝对没有任何进一步的线索为什么它不起作用。我依靠你们:) 在此先感谢。

谷歌页面速度告诉我应该推迟 JavaScript 的解析。

我在标题中加载了两个外部 Javascript，并在我的文档底部调用了一个初始化函数。

如果我遵循谷歌的建议，我应该/可以创建一个这样的函数：

我可以 100% 确定myinitialization()在我的脚本成功加载和解析之前不会调用它吗？否则，有什么解决办法？

在我的 Angular 应用程序中，我需要先从服务器读取一些数据，然后才能允许我的应用程序的其余部分运行。例如，我需要对用户进行身份验证，以便在允许他们访问任何内容之前验证他们的权限。由于我需要在应用程序启动时执行此操作并且我不知道将首先加载哪个控制器，因此我无法使用 $routeProvider.when 方法的解析功能，因为我不知道哪个控制器将首先被击中，并且它只在应用程序启动时发生一次。

我一直转向在 module.run 方法中做一些事情，但我找不到阻止它继续的方法，直到从服务器取回数据。我发现了这一点，但它遇到了同样的问题：AngularJS : Initialize service with asynchronous data。

我也可以进行手动引导，但我找不到任何好的例子来说明如何做到这一点。您可以提供的任何帮助将不胜感激。

我正在尝试按照开发人员的谷歌文档优化 CSS 交付https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

正如您在内联小 CSS 文件的示例中看到的，关键的 CSS 内联在头部，原始的 small.css 是在页面加载后加载的。

我关于这个例子的问题：

页面加载后如何加载大型css文件？

谷歌 pagespeed 表明加载 primefaces.js 正在减慢我的页面速度：

从 pagespeed 报告中：

延迟 JavaScript 解析 通过最小化呈现页面所需的 JavaScript 数量，并将不需要的 JavaScript 解析延迟到需要执行时，您可以减少页面的初始加载时间。

我该如何解决这个问题？

谷歌建议脚本应该是“延迟的”，但他们没有提到标签的defer属性。<script>我想知道为什么他们甚至不提它，考虑到它已经有一段时间了。

相反，他们建议将脚本注入 DOM。defer与使用更简单和更清洁的属性相比，这有什么特别的好处吗？

https://developers.google.com/speed/docs/best-practices/payload?csw=1#DeferLoadingJS

我收集旧浏览器存在一些小问题，但我不支持 IE10 之前的任何东西，并且最感兴趣的是针对移动浏览器进行优化。

更新： 有趣的是，如果您使用谷歌地图 API，则不能使用任何脚本加载技术。maps API 用于document.write加载其他脚本，因此不能在延迟或异步脚本中使用，也不能注入 DOM，因为document.write不会触发。如果 Google 遵循他们自己的建议，那就太好了！