none
a script on this page is causing your web browser to run slowly

    Question

  • Hello Bing Mappers,

    I am writing a Bing Map Ajax 7 an admittedly large application and continue to come upon the error “a script on this page is causing your web browser to run slowly”.  I have included setTimeout and that seem to have somewhat improved thing, but the error still does occur.  Any feedback on methods for dealing w/ this would be greatly appreciated.

     

    Thanks,


    derek
    Tuesday, May 03, 2011 9:13 PM

Answers

  • This is kind of impossible to answer without seeing your page - please post the code or a link to your URL.

    If you're using HTML5 and have a multi-core CPU, you can avoid the "script on this page is causing the browser to run slowly" by running your long-running process on a separate thread using a Web Worker, which will avoid locking up the main UI thread. Alternatively, you simply have to streamline your code so that it executes more efficiently...


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Tuesday, May 03, 2011 11:11 PM
  • Lots of things to point out here...

    Basic principle of efficient coding is that you should never have to write the same piece of code twice. Write it once, put it in a function, and then call that function. It seems to me that AddPoly1(), AddPoly2() + however many more there are all do exactly the same thing, except with different sets of vertices? If so, put that whole block of code that adds a polygon to the map into a function and just call it with the changed vertices values.

    Secondly, rather than stating the whole Microsoft.Maps.Location before each coordinate, you might want to add an alias var MM = Microsoft.Maps; to the top of your code so that it just becomes new Array(new MM.Location(30.4501557915, -862340923), new MM.Location(2340923049) etc. - it will shave off quite a few unnecessary repetitive characters. Also, do you really need that level of precision in your coordinates? I'd bet you could cut it down to 30.45016, -86.39470 and you wouldn't notice the difference. Again, it's unnecessary stuff that the browser is having to load and process, but adds little or no value.

    The thing that I suspect is giving you the slow script warning, however, is that you're calling setTimeout(xxx, 100); in between each call to AddPolyx(). i.e. you're intentionally slowing your script down by forcing it to wait for 0.1 second in between adding each shape. Why?!


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Wednesday, May 04, 2011 2:22 PM

All replies

  • This is kind of impossible to answer without seeing your page - please post the code or a link to your URL.

    If you're using HTML5 and have a multi-core CPU, you can avoid the "script on this page is causing the browser to run slowly" by running your long-running process on a separate thread using a Web Worker, which will avoid locking up the main UI thread. Alternatively, you simply have to streamline your code so that it executes more efficiently...


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Tuesday, May 03, 2011 11:11 PM
  • Thank you very much for your response.  I am thinking that I may need to optimize my code in some way… perhaps w/ recursion..  Below is a stripped down view of my code for readability.  Essentially you can see that I am using separate functions to add every item to the map e.g. polygons and text labels.  Can you recommend a more optimize fashion that I might go about this.  Here is the code

     

    script on this page is causing your web browser to run slowly":

    var map = null;

    var polygoncolor;

    var polygon;

    var mapOptions;

    var mainMap;

    var vertices;

    var boundBoxVertices;

     

    mainMap = new Microsoft.Maps.Map(document.getElementById("MainMap"),{ credentials: "my creds",center: new Microsoft.Maps.Location(28.0, -84.1),zoom: 9,animate: false,showCopyright: false,showDashboard: false,enableSearchLogo: false,enableClickableLogo: false,padding: 0,mapTypeId: Microsoft.Maps.MapTypeId.mercator});

     

    AddPoly1();

     

    function AddPoly1(){vertices = new Array(new Microsoft.Maps.Location(30.4501557915, -86.3947038675),new Microsoft.Maps.Location(30.450761933625, -86.3947038675)…);

    polygoncolor = new Microsoft.Maps.Color(100,159,136,253);

    polygon = new Microsoft.Maps.Polygon(vertices,{fillColor: polygoncolor, strokeColor: '255,0,0,0', strokeThickness: .25});

    mainMap.entities.push(polygon);

    setTimeout('AddPoly2()', 100);}

     

    function AddPoly2(){vertices = new Array(new Microsoft.Maps.Location(30.4501557915, -86.3947038675),new Microsoft.Maps.Location(30.450761933625, -86.3947038675)…);

    polygoncolor = new Microsoft.Maps.Color(100,159,136,253);

    polygon = new Microsoft.Maps.Polygon(vertices,{fillColor: polygoncolor, strokeColor: '255,0,0,0', strokeThickness: .25});

    mainMap.entities.push(polygon);

    setTimeout('AddPoly3()', 100);}

    function AddBaseLabel8(){alert('test');

    var squareCentroid = new Microsoft.Maps.Location(-82.437327, 27.03525);

    var squaretext = document.createElement('div');

    squaretext.style.position = 'absolute';var pixelLocation = map.tryLocationToPixel(squareCentroid, Microsoft.Maps.PixelReference.control);

    squaretext.style.top = pixelLocation.x;squaretext.style.left = pixelLocation.y;squaretext.style.zIndex = '10000';

    squaretext.appendChild(document.createTextNode('This is a square'));

    document.body.appendChild(squaretext);

    setTimeout('AddBaseLabel9()', 100);}

    ---

    document.getElementById("fileControlDiv").style.display='none';"

     

     


    derek
    Wednesday, May 04, 2011 2:01 PM
  • Lots of things to point out here...

    Basic principle of efficient coding is that you should never have to write the same piece of code twice. Write it once, put it in a function, and then call that function. It seems to me that AddPoly1(), AddPoly2() + however many more there are all do exactly the same thing, except with different sets of vertices? If so, put that whole block of code that adds a polygon to the map into a function and just call it with the changed vertices values.

    Secondly, rather than stating the whole Microsoft.Maps.Location before each coordinate, you might want to add an alias var MM = Microsoft.Maps; to the top of your code so that it just becomes new Array(new MM.Location(30.4501557915, -862340923), new MM.Location(2340923049) etc. - it will shave off quite a few unnecessary repetitive characters. Also, do you really need that level of precision in your coordinates? I'd bet you could cut it down to 30.45016, -86.39470 and you wouldn't notice the difference. Again, it's unnecessary stuff that the browser is having to load and process, but adds little or no value.

    The thing that I suspect is giving you the slow script warning, however, is that you're calling setTimeout(xxx, 100); in between each call to AddPolyx(). i.e. you're intentionally slowing your script down by forcing it to wait for 0.1 second in between adding each shape. Why?!


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Wednesday, May 04, 2011 2:22 PM
  • Hello,

    Great pointers! I will be trying to implement all of these.  The reason that I have the setTimeout’s in there is based on a forum posting I came upon at http://stackoverflow.com/questions/2692628/my-javascript-object-is-too-bigwhere a posted answer says that IE counts the number of javascript statements that it could and that this setTimeout function would reset the counter.  It did seem to improve things at first, but then as my script has grown in size I suspect that I have come upon the other issues that you have pointed out.

    Thanks again,


    derek
    Wednesday, May 04, 2011 2:50 PM