[Phpmyadmin-devel] Query statistics chart slows down page load
Hi, Query statistics tab greatly increases page load time in my browser - I get about 5s delay before tabs are created which is IMO too slow. Removing "<?php printQueryStatistics(); ?>" from the code decreases it to less than a second and causes page load event to be fired about 10 seconds earlier (at 2nd second instead of 12th). I think this should be fixed, eg. by initializing chart only when user actually navigates to it. -- Regards, Piotr Przybylski
On Thu, Aug 4, 2011 at 5:10 PM, Piotr Przybylski <piotr.prz@gmail.com> wrote:
Hi,
Query statistics tab greatly increases page load time in my browser - I get about 5s delay before tabs are created which is IMO too slow. Removing "<?php printQueryStatistics(); ?>" from the code decreases it to less than a second and causes page load event to be fired about 10 seconds earlier (at 2nd second instead of 12th).
printQueryStatistics() itself only displays a rather small table and a bit of json code. That itself should actually hardly make a difference. To test the page load time without the chart you'd need to remove the PMA_createChart()-call inside initTab() in server_status.js. In my tests it only loaded 200-300ms faster though. The page load event in my case (on a thinkpad x61s - older dual core / 2gb ram, windows xp using chrome as browser, and on localhost) fires in 6-8 seconds on a full page reload (without frames). Removing printQueryStatistics() actually throws a js error which might be the reason why your page loads so much faster. Though for me it still requires over 5 seconds. I think the most gain we could get from: - loading the status variables page on demand. Reason: with js disabled, a page reload still takes up to 4 seconds (till load event), and the variables table is ~90% of all the sent content. - load javascript libraries on demand: js disabled speeds up page reload 2-4 seconds for me. Also merging js files would help - the status page currently has 21 (!) seperate javascript files to load.
I think this should be fixed, eg. by initializing chart only when user actually navigates to it.
Yes I also have my concerns about this. This is why I added css sprites to pma Loading chart on demand is certainly a good idea.
-- Regards, Piotr Przybylski
------------------------------------------------------------------------------ BlackBerry® DevCon Americas, Oct. 18-20, San Francisco, CA The must-attend event for mobile developers. Connect with experts. Get tools for creating Super Apps. See the latest technologies. Sessions, hands-on labs, demos & much more. Register early & save! http://p.sf.net/sfu/rim-blackberry-1 _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
On Thu, Aug 4, 2011 at 5:36 PM, Tyron Madlener <tyronx@gmail.com> wrote:
On Thu, Aug 4, 2011 at 5:10 PM, Piotr Przybylski <piotr.prz@gmail.com> wrote:
Hi,
Query statistics tab greatly increases page load time in my browser - I get about 5s delay before tabs are created which is IMO too slow. Removing "<?php printQueryStatistics(); ?>" from the code decreases it to less than a second and causes page load event to be fired about 10 seconds earlier (at 2nd second instead of 12th).
printQueryStatistics() itself only displays a rather small table and a bit of json code. That itself should actually hardly make a difference. To test the page load time without the chart you'd need to remove the PMA_createChart()-call inside initTab() in server_status.js. In my tests it only loaded 200-300ms faster though.
The page load event in my case (on a thinkpad x61s - older dual core / 2gb ram, windows xp using chrome as browser, and on localhost) fires in 6-8 seconds on a full page reload (without frames).
Removing printQueryStatistics() actually throws a js error which might be the reason why your page loads so much faster. Though for me it still requires over 5 seconds.
I think the most gain we could get from: - loading the status variables page on demand. Reason: with js disabled, a page reload still takes up to 4 seconds (till load event), and the variables table is ~90% of all the sent content. - load javascript libraries on demand: js disabled speeds up page reload 2-4 seconds for me. Also merging js files would help - the status page currently has 21 (!) seperate javascript files to load.
Actually 22 files I just counted. Some ideas we could do with those: - Merge/Append flashcanvas.js, canvg.js and rgbcolor.js into exporting.js (though this should be done when a pma relase is being created) - When loading the monitor on demand we could save ~35kb from server_status.js, jquery.sortableTable.js, jquery.sprintf.js (i think), timepicker.js, codemirror.js, mysql.js - config.js doesn't look like its required everywhere. At least it's first comment line mentions "Functions used in configuration forms and on user preferences pages" - maybe it could be only included where its needed - Any possibility that framing_protection.js and update-location.js can be merged into another file? If all this would implemented we would eliminate 14.5 js files on page load. That should significantly reduce the page load time.
I think this should be fixed, eg. by initializing chart only when user actually navigates to it.
Yes I also have my concerns about this. This is why I added css sprites to pma Loading chart on demand is certainly a good idea.
-- Regards, Piotr Przybylski
------------------------------------------------------------------------------ BlackBerry® DevCon Americas, Oct. 18-20, San Francisco, CA The must-attend event for mobile developers. Connect with experts. Get tools for creating Super Apps. See the latest technologies. Sessions, hands-on labs, demos & much more. Register early & save! http://p.sf.net/sfu/rim-blackberry-1 _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
2011/8/4 Tyron Madlener <tyronx@gmail.com>:
On Thu, Aug 4, 2011 at 5:10 PM, Piotr Przybylski <piotr.prz@gmail.com> wrote:
Hi,
Query statistics tab greatly increases page load time in my browser - I get about 5s delay before tabs are created which is IMO too slow. Removing "<?php printQueryStatistics(); ?>" from the code decreases it to less than a second and causes page load event to be fired about 10 seconds earlier (at 2nd second instead of 12th).
printQueryStatistics() itself only displays a rather small table and a bit of json code. That itself should actually hardly make a difference. To test the page load time without the chart you'd need to remove the PMA_createChart()-call inside initTab() in server_status.js. In my tests it only loaded 200-300ms faster though.
In my test it loaded 8s faster (time betreen DOMContentLoaded and load events) after adding "break;" in initTab() for 'statustabs_queries'. Firebug profiler shows that PMA_createChart executes in 500 ms, but it also causes 8s of delay. I guess it is caused by page reflows during chart drawing. It definitely shouldn't happen during page load, even 500ms is a lot. localhost, Intel i5 M540 (2,53 GHz), Windows 7 and Firefox 5. -- Piotr Przybylski
On Thu, Aug 4, 2011 at 11:12 PM, Piotr Przybylski <piotr.prz@gmail.com> wrote:
2011/8/4 Tyron Madlener <tyronx@gmail.com>:
On Thu, Aug 4, 2011 at 5:10 PM, Piotr Przybylski <piotr.prz@gmail.com> wrote:
Hi,
Query statistics tab greatly increases page load time in my browser - I get about 5s delay before tabs are created which is IMO too slow. Removing "<?php printQueryStatistics(); ?>" from the code decreases it to less than a second and causes page load event to be fired about 10 seconds earlier (at 2nd second instead of 12th).
printQueryStatistics() itself only displays a rather small table and a bit of json code. That itself should actually hardly make a difference. To test the page load time without the chart you'd need to remove the PMA_createChart()-call inside initTab() in server_status.js. In my tests it only loaded 200-300ms faster though.
In my test it loaded 8s faster (time betreen DOMContentLoaded and load events) after adding "break;" in initTab() for 'statustabs_queries'. Firebug profiler shows that PMA_createChart executes in 500 ms, but it also causes 8s of delay. I guess it is caused by page reflows during chart drawing. It definitely shouldn't happen during page load, even 500ms is a lot.
localhost, Intel i5 M540 (2,53 GHz), Windows 7 and Firefox 5.
Also when adding a break; there and using FF5 I cannot reproduce this huge speedup as you have. For me it only loads about a second longer. If you say it might be caused by page reflows - what if you add the following to theme_right.css.php? div#statustabs_queries .highcharts-container { width:530px; height: 350px; } Does that help with anything? As for me, I see no clear speed improvements in ff or chrome
-- Piotr Przybylski
On Thu, Aug 4, 2011 at 5:10 PM, Piotr Przybylski <piotr.prz@gmail.com> wrote:
Hi,
Query statistics tab greatly increases page load time in my browser - I get about 5s delay before tabs are created which is IMO too slow. Removing "<?php printQueryStatistics(); ?>" from the code decreases it to less than a second and causes page load event to be fired about 10 seconds earlier (at 2nd second instead of 12th).
I think this should be fixed, eg. by initializing chart only when user actually navigates to it.
I've now merged rgbcolor.js into canvg.js and set up the status page to load the monitor code on demand (when the tab is clicked). For me on localhost the page now loads twice as fast (unless you had the monitor tab active last load, since it remembers the last active tab)
-- Regards, Piotr Przybylski
------------------------------------------------------------------------------ BlackBerry® DevCon Americas, Oct. 18-20, San Francisco, CA The must-attend event for mobile developers. Connect with experts. Get tools for creating Super Apps. See the latest technologies. Sessions, hands-on labs, demos & much more. Register early & save! http://p.sf.net/sfu/rim-blackberry-1 _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
On Mon, Aug 8, 2011 at 2:11 PM, Tyron Madlener <tyronx@gmail.com> wrote:
On Thu, Aug 4, 2011 at 5:10 PM, Piotr Przybylski <piotr.prz@gmail.com> wrote:
Hi,
Query statistics tab greatly increases page load time in my browser - I get about 5s delay before tabs are created which is IMO too slow. Removing "<?php printQueryStatistics(); ?>" from the code decreases it to less than a second and causes page load event to be fired about 10 seconds earlier (at 2nd second instead of 12th).
I think this should be fixed, eg. by initializing chart only when user actually navigates to it.
I've now merged rgbcolor.js into canvg.js and set up the status page to load the monitor code on demand (when the tab is clicked). For me on localhost the page now loads twice as fast (unless you had the monitor tab active last load, since it remembers the last active tab)
flashcanvas.js is now only included for MSIE below version 9, so that should also give a bit less loading time. In the process I also fixed this ugly bug in IE 6-8 creating a gradient on every single row on a table (someone forgot to clear the filters for td.odd and td.even)
-- Regards, Piotr Przybylski
------------------------------------------------------------------------------ BlackBerry® DevCon Americas, Oct. 18-20, San Francisco, CA The must-attend event for mobile developers. Connect with experts. Get tools for creating Super Apps. See the latest technologies. Sessions, hands-on labs, demos & much more. Register early & save! http://p.sf.net/sfu/rim-blackberry-1 _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
2011/8/8 Tyron Madlener <tyronx@gmail.com>:
On Thu, Aug 4, 2011 at 5:10 PM, Piotr Przybylski <piotr.prz@gmail.com> wrote:
Hi,
Query statistics tab greatly increases page load time in my browser - I get about 5s delay before tabs are created which is IMO too slow. Removing "<?php printQueryStatistics(); ?>" from the code decreases it to less than a second and causes page load event to be fired about 10 seconds earlier (at 2nd second instead of 12th).
I think this should be fixed, eg. by initializing chart only when user actually navigates to it.
I've now merged rgbcolor.js into canvg.js and set up the status page to load the monitor code on demand (when the tab is clicked). For me on localhost the page now loads twice as fast (unless you had the monitor tab active last load, since it remembers the last active tab)
Thanks. I will check when I get back home, on my current poor EDGE connection downloading anything takes too much time. -- Piotr Przybylski
participants (2)
-
Piotr Przybylski -
Tyron Madlener