5 Replies Latest reply on Dec 6, 2008 1:41 AM by JP Smith

    Size of and content of generated HTML

    JP Smith Newbie

      Hi Experts,

      I'm using Richfaces with my JSF project and I'm quite happy with it, except for two nuisances. The first is the size of the pages that regularly exceeds 400kb without any images. Inspecting this with YSlow shows 375kb of javascript, with our custom javascript being only about 5kb of that. Is there any way to bring this size down?

      The next is the generated HTML which contains a lot of javascript markup, making it very difficult to debug. An example of this is the following:

      <script type="text/javascript">new ModalPanel('newFilePanel',
       {
       width: 450,
       height: 100,
      
       minWidth: -1,
       minHeight: -1,
      
       resizeable: false,
       moveable: true,
      
       left: "auto",
       top: "auto",
      
       zindex: 100,onresize: '',onmove: '',onshow: '',onhide: '',onbeforeshow: '',onbeforehide: '',
      
       keepVisualState: false,
       showWhenRendered: false,
       selectBehavior: "disable",
      
       autosized: true});</script></div><script type="text/javascript"></script>
      


      This is included in the HTML for every possible modal panel (about 12 on that page) and makes the HTML hard to read and much larger than it should be. Is there anything that I can do about this?

      Thank you,
      SumDude

        • 2. Re: Size of and content of generated HTML
          Nick Belaevski Master

           

          "SumDude" wrote:
          The next is the generated HTML which contains a lot of javascript markup, making it very difficult to debug. An example of this is the following:

          <script type="text/javascript">new ModalPanel('newFilePanel',
           {
           width: 450,
           height: 100,
          
           minWidth: -1,
           minHeight: -1,
          
           resizeable: false,
           moveable: true,
          
           left: "auto",
           top: "auto",
          
           zindex: 100,onresize: '',onmove: '',onshow: '',onhide: '',onbeforeshow: '',onbeforehide: '',
          
           keepVisualState: false,
           showWhenRendered: false,
           selectBehavior: "disable",
          
           autosized: true});</script></div><script type="text/javascript"></script>
          


          This is included in the HTML for every possible modal panel (about 12 on that page) and makes the HTML hard to read and much larger than it should be. Is there anything that I can do about this?


          Looks like no. These scripts contain components initialization information and they're necessary.

          • 3. Re: Size of and content of generated HTML
            JP Smith Newbie

            Hi nbelaevski,

            Thanks for the reply.
            I tried the ALL strategy for loading script and stylesheets, but that causes the initial page to be over 900kb (which is then cached, but still, almost 1MB for the first time any page is loaded). Ideally I'd want to keep every page in the 200kb region (excluding images). Is there any way to accomplish this?

            As for the script I posted, perhaps it was a bad example. I was in a hurry so I just grabbed the first large section of code I saw. However, I don't understand why the default values aren't optionally assigned in the javascript. That piece of script could only be this:

            <script type="text/javascript">new ModalPanel('newFilePanel',
             {
             width: 450,
             height: 100
            });</script></div><script type="text/javascript"></script>
            


            How about something like this?

            <div id="frmMain:optionmenu"><script>var contextMenu = new Richfaces.ContextMenu('frmMain:optionmenu', 50, [new E('div',{'style':'display: none; z-index: 2;', 'className':'dr-menu-list-border rich-menu-list-border', 'id':'frmMain:optionmenu_menu'},[new E('div',{'className':'dr-menu-list-bg rich-menu-list-bg'},[new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id181').style.cssText='; ; ;'; $('frmMain:j_id181:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id181:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id181').style.cssText=';'; $('frmMain:j_id181:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id181:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; Richfaces.componentControl.performOperation(event,'#newFolderPanel','show',{},false); A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id181':'frmMain:j_id181'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id181', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id181:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id181:anchor', 'className':'rich-menu-item-label'},[new T('New'),new E('script',{'type':'text/javascript'},[new T('//<![CDATA[\n Richfaces.onAvailable(\'\', function()\n{\n Richfaces.componentControl.attachEvent(\'#\', \'onselect\', \'#newFolderPanel\', \'show\', function() { return {}; }, false);\n });//\x5D\x5D>')])])]),new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id183').style.cssText='; ; ;'; $('frmMain:j_id183:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id183:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id183').style.cssText=';'; $('frmMain:j_id183:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id183:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; Richfaces.componentControl.performOperation(event,'#editFolderPanel','show',{},false); A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id183':'frmMain:j_id183'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id183', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id183:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id183:anchor', 'className':'rich-menu-item-label'},[new T('Edit'),new E('script',{'type':'text/javascript'},[new T('//<![CDATA[\n Richfaces.onAvailable(\'\', function()\n{\n Richfaces.componentControl.attachEvent(\'#\', \'onselect\', \'#editFolderPanel\', \'show\', function() { return {}; }, false);\n });//\x5D\x5D>')])])]),new E('div',{'id':'frmMain:j_id185', 'className':'dr-menu-separator rich-menu-separator'}),new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id186').style.cssText='; ; ;'; $('frmMain:j_id186:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id186:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id186').style.cssText=';'; $('frmMain:j_id186:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id186:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id186':'frmMain:j_id186'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id186', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id186:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id186:anchor', 'className':'rich-menu-item-label'},[new T('Cut')])]),new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id187').style.cssText='; ; ;'; $('frmMain:j_id187:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id187:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id187').style.cssText=';'; $('frmMain:j_id187:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id187:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id187':'frmMain:j_id187'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id187', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id187:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id187:anchor', 'className':'rich-menu-item-label'},[new T('Copy')])]),new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id188').style.cssText='; ; ;'; $('frmMain:j_id188:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id188:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id188').style.cssText=';'; $('frmMain:j_id188:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id188:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; Richfaces.componentControl.performOperation(event,'#confirmMovePanel','show',{},false); A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id188':'frmMain:j_id188'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id188', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id188:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id188:anchor', 'className':'rich-menu-item-label'},[new T('Paste'),new E('script',{'type':'text/javascript'},[new T('//<![CDATA[\n Richfaces.onAvailable(\'\', function()\n{\n Richfaces.componentControl.attachEvent(\'#\', \'onselect\', \'#confirmMovePanel\', \'show\', function() { return {}; }, false);\n });//\x5D\x5D>')])])]),new E('div',{'id':'frmMain:j_id190', 'className':'dr-menu-separator rich-menu-separator'}),new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id191').style.cssText='; ; ;'; $('frmMain:j_id191:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id191:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id191').style.cssText=';'; $('frmMain:j_id191:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id191:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; Richfaces.componentControl.performOperation(event,'#deleteFolderPanel','show',{},false); A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id191':'frmMain:j_id191'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id191', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id191:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id191:anchor', 'className':'rich-menu-item-label'},[new T('Delete'),new E('script',{'type':'text/javascript'},[new T('//<![CDATA[\n Richfaces.onAvailable(\'\', function()\n{\n Richfaces.componentControl.attachEvent(\'#\', \'onselect\', \'#deleteFolderPanel\', \'show\', function() { return {}; }, false);\n });//\x5D\x5D>')])])]),new E('div',{'className':'dr-menu-list-strut rich-menu-list-strut'},[new E('div',{'style':'', 'height':'1', 'width':'1', 'className':'dr-menu-list-strut rich-menu-list-strut'},[new T(' ')])])])])
            , new E('script',{'type':'text/javascript', 'id':'frmMain:optionmenu_menu_script'},[new T('new RichFaces.Menu.Layer(\'frmMain:optionmenu_menu\',50,800).asContextMenu({\'onitemselect\':function(event){;return true;},\'oncollapse\':function(event){;return true;},\'onexpand\':function(event){;return true;},\'dummy\':\'dummy\',\'ongroupactivate\':function(event){;return true;}} ).addItem(\'frmMain:j_id181\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} ).addItem(\'frmMain:j_id183\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} ).addItem(\'frmMain:j_id186\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} ).addItem(\'frmMain:j_id187\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} ).addItem(\'frmMain:j_id188\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} ).addItem(\'frmMain:j_id191\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} );')])
            ]);Richfaces.onAvailable('frmMain:tree',function () {var vars = {contextMenu:contextMenu};return function() { with (vars) {contextMenu.attachToElementById('frmMain:tree','oncontextmenu',{} )}}}());Richfaces.disableDefaultHandler('oncontextmenu');</script></div>
            


            I'm not exactly sure what's going on in there - but is it needed for all of that to be duplicated everytime such a context menu is used?

            Thanks for your help,
            SumDude

            • 4. Re: Size of and content of generated HTML
              Nick Belaevski Master

              SumDude,

              Yes, menus definitely need some cleaning: https://jira.jboss.org/jira/browse/RF-5226

              • 5. Re: Size of and content of generated HTML
                JP Smith Newbie

                Thanks nbelaevski,

                I really like RichFaces for its wide variety of components and beautiful styling, but unfortunately the size of the generated response is outside the range which our client will find acceptable. I hope you guys can get that fixed, because I'd love to work with RichFaces again sometime in the future.

                Thanks for the replies.