JSF 推迟解析 JavaScript 的最佳方式？答案

【问题标题】：Best way for JSF to defer parsing of JavaScript?JSF 推迟解析 JavaScript 的最佳方式？
【发布时间】：2012-05-05 20:14:15
【问题描述】：

使用 JSF 延迟加载 JavaScript 库（Richfaces、Primefaces、自己的东西）以加快页面加载的最佳方法是什么？

正如 Google PageSpeed 插件所说，建议在网站完全加载时解析 JavaScript。实现此目的的一种方法是将 JavaScript 加载放在 <body> 标记的末尾。另一种方法是将“defer”属性放在<script>标签上，这在我看到的JSF的<h:outputScript>标签上是做不到的。

那么，你会怎么做呢？

【问题讨论】：

请使用 BalusC 的答案查看stackoverflow.com/questions/20514987/…。

标签： javascript jsf pagespeed

【解决方案1】：

使用<h:outputScript target="body">。然后它将在<h:body> 的最后结束。它即默认为视图中的“当前”位置（另一个target 值是head，这将使脚本以<h:head> 结尾，即使脚本在<h:body> 中的某处指定也是如此）。

<h:outputScript name="js/foo.js" target="body" />

如果您也想将此应用于第 3 方脚本，您需要创建一个自定义的 SystemEventListener 挂钩 PreRenderViewEvent，这正是在 UIViewRoot#getComponentResources() 和 UIViewRoot#addComponentResource() 的帮助下完成的。

【讨论】：

我的布局中唯一的 javascripts 是从以下位置调用的：<%= javascript_include_tag "application" %> <%= yield :scripts %> 这些调用我该怎么做？

【解决方案2】：

不知道这算不算（你可以称之为解决方法），

但是您始终可以在外部 xhtml 页面中包含一些 js 文件，这些文件将包含在您的主页面中，ui:include 将由 <h:panelGroup id="externalPageWrapper" render="#{myBean.renderExternalPage}" 包装，并且几乎没有 js/jquery 的帮助，您可以执行 .click() on一些隐藏的h:commandButton 和f:ajax 会将renderExternalPage 更改为true 并呈现externalPageWrapper，这将加载该xhtml 页面以及其中包含的所有js 文件...

【讨论】：