Javascript optimization

[GoogleCodeExporter]

In the project I was going to use this in I place 2560 markers and 641 poly
lines on the map, each with it's own htmlInfoWindow. The JS code that your
project produced is just over 5MB for this and fails on IE and Chrome
(Works on FF, but takes 2 min to load)

Now this is unacceptable for my purposes as we must support IE 7/8 and
FF3/3.5 on this project, and the goal is to move away from all the custom
JS that I originally wrote to use more jsf since I am the only developer
here that understands Javascript and a single point of failure is also not
acceptable.

So I spent the last two weeks going though your code with a fine tooth comb
trying to understand it (I have never written a tag library) and finding
all the ways I could think to optimize it. Then I started from scratch and
wrote a new tag library that borrowed ideas and occasionally code from
yours but ended up so different it would be hard to supply a patch to merge
in my JS optimizations and attribute property changes (allowing a Double,
Integer, Boolean or the String representation of that value where
appropriate so you can store the values in a backing bean/db correctly)

If you are interested I would be happy to supply you the code so you can go
though it and see if any of it would work for your project

Original issue reported on code.google.com by digitalx...@gmail.com on 15 Jul 2009 at 7:05

[GoogleCodeExporter]

This is really an amazing use case!
It will be nice to communicate your ideas and improvements to our project.
At the end, It is an open source project that is done for all the whole world 
benefits.

Thank you!

Original comment by Hazem.sa...@gmail.com on 15 Jul 2009 at 8:36

[GoogleCodeExporter]

Here is my project code (It is an eclipse project as where I work we dont use 
Maven)
For the same use case the JS code my project produces is just under 1MB and 
loads in 
IE and FF. In FF it takes under 10 sec to load in IE it takes 30 sec, but thats 
to be 
expected with IE's dinosaur of a JS engine

The basic premise behind the JS optimizations is I wrote some optimized 
boilerplate 
map management code, and make calls to it. So the js output for each Marker 
looks 
something like

gmaps4jsf.buildMaker({id:'marker_j_id17_1279_j_id18', 
latitude:38.478645324707,longitude: -107.877616882324, draggable:false, 
showInformationEvent:'click', infoWindow:{latitude:38.478645324707,longitude:-
107.877616882324,html:'Close the marker window!!!',events:[]}, 
icon:{url:'../../resources/img/city.gif',width:20,height:20}});

instead of

      function createMarkerFunctionj_id13_1_j_id14(map_base_variable) {
         function createIconFunctionj_id16() {
            var iconObject = new GIcon(G_DEFAULT_ICON);
            iconObject.shadow = '../../resources/img/cleardot.gif';
            iconObject.iconSize = new GSize(20, 34);
            iconObject.shadowSize = new GSize(37, 34);
            iconObject.iconAnchor = new GPoint(9, 34);
            iconObject.infoWindowAnchor = new GPoint(9, 2);
            iconObject.image = '../../resources/img/facility.gif';
            return iconObject;
            }
         var marker_j_id14 = new GMarker(new GLatLng(35.056953, - 106.623496), {
            draggable : false, icon : createIconFunctionj_id16()}
         );
         map_base_variable.addOverlay(marker_j_id14);
         function marker_j_id14_dragEnd(latlng) {
            var markersState = 
document.getElementById('com.googlecode.gmaps4jsf.mapStateMap').value;
            if (markersState.indexOf('j_id14=') != - 1) {
               var markersArray = markersState.split('&');
               var updatedMarkersState = '';
               for (i = 0; i < markersArray.length; ++i) {
                  if (markersArray[i].indexOf('j_id14=') == - 1) {
                     updatedMarkersState += markersArray[i];
                     if (markersArray.length != 1 && i < markersArray.length - 1) {
                        updatedMarkersState += '&';
                        }
                     }
                  }
               markersState = updatedMarkersState;
               }
            if (markersState != '' && markersState.charAt(markersState.length - 1) != 
'&') {
               markersState += '&';
               }
            markersState += 'j_id14=' + latlng;
            document.getElementById('com.googlecode.gmaps4jsf.mapStateMap').value = 
markersState;
            }
         GEvent.addListener(marker_j_id14, 'dragend', marker_j_id14_dragEnd);
         GEvent.addListener(marker_j_id14, 'click', function() {
            marker_j_id14.openInfoWindowHtml('Close the marker window!!!'); var 
window_j_id15 = map_base_variable.getInfoWindow(); }
         );
         }
      createMarkerFunctionj_id13_1_j_id14(map_base_variable);

Original comment by digitalx...@gmail.com on 15 Jul 2009 at 8:53

Attachments:

• google4jsf.zip

[GoogleCodeExporter]

I will check it.
Thank you.

Original comment by Hazem.sa...@gmail.com on 15 Jul 2009 at 10:11

• Changed state: Done

[GoogleCodeExporter]

If we start any kinf of JS optimization our first task should be to generate 
valid JS 
code (see JSLint). At least we should strive to avoid function declarations 
inside 
function declarations as:

function x() {
   function y() {
    ...
   }
   ....
}

Original comment by jose.noh...@gmail.com on 16 Jul 2009 at 7:40

[GoogleCodeExporter]

The base.js is valid JS. It has implied globals in regards since it expects 
google maps 
to be loaded before you start calling any of it's methods, and js lint 
complains about 
declaring functions inside of a loop, but since you can have multiple events 
for each 
element it is required to do so. Other then that it validates.

The base.js is a JS library and it actually models on jQuery's code style. Also 
not 
creating closures (The functions within functions) cause alot of memory leaks 
in JS.

Original comment by digitalx...@gmail.com on 16 Jul 2009 at 12:25

[GoogleCodeExporter]

I've taken a look at base.js and it looks pretty good. I need to check that 
event functions not because they're declared inside a loop 
(that's fine) but because the scope seems to be mixed up. Probably you need 
something like:

for(var event in line_data.infoWindow.events) {
   if(event.func === null) {
      event.func = (function (iw) {
         var info = iw;
         return function(latlng, tile) {
             gmaps4jsf.showLocationInfo(info);
         }
      })(line_data.infoWindow);
   }
   gmaps4jsf.addEventListener(line, event.name, event.func);
}

Given that an extend function is provided I would split the code accordingly 
and avoid a global script tag (which means a resource 
handler). The map tag would take care of the initialization code and then each 
tag could add the new functionality as required. How do 
you see it?

Original comment by jose.noh...@gmail.com on 20 Jul 2009 at 7:48

[GoogleCodeExporter]

Ya I noticed the scope issues late Friday in my testing as well and am going to 
fix it 
today when I get to work.

Each tag extending in it's own required code is a good idea, just need some 
flag to 
declare that it has already added it's own code so it does not try for to add 
it for 
each tag.

Original comment by digitalx...@gmail.com on 20 Jul 2009 at 11:44