在使用 Google PageSpeed 分析 JSF 2.1 + PrimeFaces 4.0 webapp 的性能时,它建议延迟解析 JavaScript 文件。在带有 <p:layout>
的测试页上和带有 <p:watermark>
的表格和 <p:fileUpload>
看起来如下...
<p:layout>
<p:layoutUnit position="west" size="100">Test</p:layoutUnit>
<p:layoutUnit position="center">
<h:form enctype="multipart/form-data">
<p:inputText id="input" />
<p:watermark for="input" value="watermark" />
<p:focus for="input" />
<p:fileUpload/>
<p:commandButton value="submit" />
</h:form>
</p:layoutUnit>
</p:layout>
...它列出了以下可以延迟的 JavaScript 文件:
primefaces.js
(219.5KiB) jquery-plugins.js
(191.8KiB) jquery.js
(95.3KiB) layout.js
(76.4KiB) fileupload.js
(23.8KiB) watermark.js
(4.7KiB) 它链接到 this Google Developers article其中解释了延迟加载以及如何实现它。您基本上需要动态创建所需的
<script>
在 onload
期间window
的事件.在最简单的形式中,旧的和有缺陷的浏览器被完全忽略,它看起来像这样:<script>
window.addEventListener("load", function() {
var script = document.createElement("script");
script.src = "filename.js";
document.head.appendChild(script);
}, false);
</script>
好的,如果您可以控制这些脚本,这是可行的,但是列出的脚本都是由 JSF 强制自动包含的。此外,PrimeFaces 将一堆内联脚本渲染到直接调用
$(xxx)
的 HTML 输出。来自 jquery.js
和 PrimeFaces.xxx()
来自 primefaces.js
.这意味着很难将它们真正推迟到onload
。事件,因为您最终只会遇到像 $ is undefined
这样的错误和 PrimeFaces is undefined
.但是,这在技术上应该是可行的。鉴于只有 jQuery 不需要延迟,因为该网站的许多自定义脚本也依赖它,我如何阻止 JSF 强制自动包含 PrimeFaces 脚本以便我可以延迟它们,我该如何处理这些内联
PrimeFaces.xxx()
电话?
最佳答案
最初作为对 Defer primefaces.js loading 的回答发布
为遇到相同问题的其他人添加另一个解决方案。
您将需要自定义primefaces HeadRenderer
达到推荐的订购页面速度。虽然 PrimeFaces 可以实现这一点,但我在 v5.2.RC2 中看不到它。这些是 encodeBegin
中的行需要改变的:
96 //Registered Resources
97 UIViewRoot viewRoot = context.getViewRoot();
98 for (UIComponent resource : viewRoot.getComponentResources(context, "head")) {
99 resource.encodeAll(context);
100 }
只需为
head
编写一个自定义组件即可标记,然后将其绑定(bind)到覆盖上述行为的渲染器。现在您不想仅仅为了这个更改而复制整个方法,添加一个名为“last”的构面并将脚本资源移动到渲染器中的开头作为新的
deferredScript
可能会更干净。组件。让我知道是否有兴趣,我将创建一个 fork 来演示如何。这种方法是“面向 future 的”,因为它不会随着新的资源依赖项添加到组件或新组件添加到 View 而中断。
关于javascript - 延迟加载和解析 PrimeFaces JavaScript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23173639/