Primefaces JavaScript延迟解析 [英] Primefaces javascript defer parsing

问题描述

从PageSpeed Insights可以看出，Primefaces 4.0在页面加载期间会产生大量开销:

Primefaces 4.0 is generating lots of overhead during page loading as seen from PageSpeed Insights:

**605.3KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.**
http://localhost:8888/.../primefaces.js.xhtml?... (219.5KiB)
http://localhost:8888/.../jquery-plugins.js.xhtml?... (191.8KiB)
http://localhost:8888/.../jquery.js.xhtml?... (95.3KiB)
http://localhost:8888/.../tooltip.js.xhtml?... (34.5KiB)
http://localhost:8888/.../jsf.js.xhtml?... (25.4KiB)
http://localhost:8888/.../primefaces-extensions.js.xhtml?... (19.7KiB)
http://localhost:8888/.../watermark.js.xhtml?... (4.7KiB)
http://localhost:8888/.../hotkey.js.xhtml?... (1.2KiB)

有人知道如何将这些第三方javascript文件设置为在body部分的底部，而不是head或使用defer/async参数吗?在这种情况下，JavaScript加载程序无济于事，因为它们来自JSF渲染器.我也尝试为PreRenderView创建一个侦听器( JSF的最佳方法推迟对JavaScript的解析?)，但没有成功.还有其他方法可以解决此问题吗?感谢您的帮助！

Any idea how these 3rd party javascript files could be set to be in the bottom of the body section instead head or use defer/async parameters? Javascript loaders do not help in this case as these are coming from the JSF renderer. Also I tried to create a Listener for PreRenderView (Best way for JSF to defer parsing of JavaScript?) but that did not work out. Any other options that could solve this problem? Thanks for your help!

推荐答案

我移动了脚本以与followind代码段一起使用:

I got the moving of the scripts to work with the followind snippet:

public class ScriptValidateListener implements SystemEventListener {

    @Override
    public void processEvent(SystemEvent event) throws AbortProcessingException {
        UIViewRoot root = (UIViewRoot) event.getSource();
        FacesContext ctx = FacesContext.getCurrentInstance();
        List<UIComponent> resources = root.getComponentResources(ctx, "HEAD");
        for (UIComponent r : resources) {
            String name = (String) r.getAttributes().get("name");
            if (name == null) {
                continue;
            }

            if (name.contains(".js")) {
                root.removeComponentResource(ctx, r, "HEAD");
                root.addComponentResource(ctx, r, "BODY");
            }
        }
    }

    @Override
    public boolean isListenerForSource(Object source) {
        return (source instanceof UIViewRoot);
    }
}

这会将所有JavaScript从HEAD移到BODY的末尾.但. Primefaces存在此问题，即呈现的组件将尝试访问JQuery($.)或PrimeFaces javascript函数，这将破坏页面上的所有ajax功能.大概我将需要决定要移动哪些脚本和不移动哪些脚本.作为侦听器的一部分，我还需要为faces-config.xml定义以下内容以使其起作用:

This moves all javascripts from HEAD to end of the BODY. But. There is this problem with Primefaces that the components rendered will try to access either JQuery ($.) or PrimeFaces javascript functions and that will break all ajax functionality on the page. Propably I will need to decide what of the scripts to move and what not to move. Also a part from the Listener I needed to define the following to faces-config.xml to make it work:

<application>
    <system-event-listener>
        <system-event-listener-class>com.example.listener.ScriptValidateListener</system-event-listener-class>
        <system-event-class>javax.faces.event.PreRenderViewEvent</system-event-class>
    </system-event-listener>
</application>

这篇关于Primefaces JavaScript延迟解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！