how to split a large page into small pieces and keep the layout for the page?

everyone! I am writing a page with composed with tabview and panels. There are a few panels in A like xhtmls.

   Tabview.xhtml:
       <p:tabView>
            <p:tab title="1">
               <ui:include src="/Apanel.xhtml"/>
            </p:tab>
            <p:tab title="2">
               <ui:include src="/Bpanel.xhtml"/>
            </p:tab>
            <p:tab title="3">
               <ui:include src="/Cpanel.xhtml"/>
            </p:tab>
            <p:tab title="4">
               <ui:include s开发者_JS百科rc="/Dpanel.xhtml"/>
            </p:tab>
            <p:tab title="5">
               <ui:include src="/Epanel.xhtml"/>
            </p:tab>
        </p:tabView>

    Apanel.xhtml:
      <p:panel>
         <ui:include src="/A1.xhtml"/>
      </p:panel>
      <p:panel>
         <ui:include src="/A2.xhtml"/>
      </p:panel>

So this page has a lot of html and js code. The performance of the page is terrible,even the response of a click on the checkbox is very slow! But the layout is convenient for system users. Are there any ways to achieve the effect which the user works on A1 page,the other pages don't be loaded,or the other tab pages don't be loaded. Thanks in advance!

I can confirm that the performance of Primefaces' Panels (eg. Yahoo UI panels) is terrible.

So what you can do instead is to use classic HTML + CSS, and have a separate page for each tab. That is a bit more manual work than simply dropping p:panel on your page, but it really pays off in the end.

I know it doesn't sound like "good design", but a JSF application is more like a webpage than a rich client GUI - so the design principles are different. At least that's my experience - once I put on my webdesigner hat, JSF + Primefaces became a lightning fast solution that worked very well and according to my expectations.