javascript - 延迟加载和解析 PrimeFaces JavaScript 文件

Question

在使用 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()电话？

Answer 1

最初作为对 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 而中断。