Closed Bug 470532 Opened 11 years ago Closed 6 years ago

Slow Performance of JS in Firefox 3 when compared to FF2

Categories

(Core :: DOM: Core & HTML, defect)

1.9.0 Branch
x86
Windows XP
defect
Not set

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: jayakrishnan, Unassigned)

Details

(Keywords: perf, regression)

Attachments

(1 file)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Build Identifier: Firefox 3.0.5

Is there anyone who has experienced slow performance of js execution or sluggishness in user experience in Firefox 3?

In my app, all the scripts written in onmousemove and onmouseover events are working slowly? Happens when offsetLeft and offsetTop calculations are done! But, the same worked in a jiffy in Firefox 2?

Reproducible: Always

Steps to Reproduce:
Pls test this html in both FF3 and FF2... u can feel the sluggishness of grid selection in FF3

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style>
    table {
       border-left: 1px solid #CCC;
       border-top: 1px solid #CCC;
       -moz-user-select: none;
    }

    td {
       border-right: 1px solid #CCC;
       border-bottom: 1px solid #CCC;
    }

    #focusDiv {
       position: absolute;
       background: #81A7D1;
       opacity: 0.3;
       z-index: 2;
    }
    </style>
    <script>
    /* Author: Peter-Paul Koch, Available for download at: http://www.quirksmode.org/js/findpos.html */
    function findPosX(obj) {
       var curleft = 0;
       if (document.getElementById || document.all) {
          try {
          while (obj.offsetParent) {
             curleft += obj.offsetLeft;
             obj = obj.offsetParent;
          }
       } catch (e) {
             return curleft;
          }
       }
       else if (document.layers) {
          curleft += obj.x;
       }
       return curleft;
    }

    //  ---------------------------------------

    /**
    * Retruns the x position of the given object in the window / screen.
    */

    /* Author: Peter-Paul Koch, Available for download at: http://www.quirksmode.org/js/findpos.html */
    function findPosY(obj) {
       var curtop = 0;
       if (document.getElementById || document.all) {
          try {
          while (obj.offsetParent) {
             curtop += obj.offsetTop;
             obj = obj.offsetParent;
          }
       } catch (e) {
             return curtop;
          }
       }
       else if (document.layers) {
          curtop += obj.y;
       }
       return curtop;
    }

    function getCursorPos(ev) {
       var x = ev.pageX;
       var y = ev.pageY;

       return {x : x, y : y};
    }
    </script>
    </head>

    <body onLoad="renderGrid();">
    </body>
    </html>
    <script>
    var grid, gridLeft, gridTop, focusDiv;

    function renderGrid() {
       var gridStr = "<table id='grid' border='0' cellspacing='0' cellpadding='0' width='100%' onmousedown='startFocus(event)'>";
       for (var i = 0; i < 20; i++) {
          gridStr += "<tr>";
          for (var j = 0; j < 20; j++) {
             gridStr += "<td>&nbsp;</td>";
          }
          gridStr += "</tr>";
       }
       gridStr += "</table>";
       
       document.body.innerHTML = "<h3>Drag over the grid using your mouse!</h3>" + gridStr + "<div id='focusDiv' style='display:none;width:0px;height:0px;' onmousedown='clearFocus();'></div>";

       grid = document.getElementById("grid");
       gridLeft = findPosX(grid);
       gridTop = findPosY(grid);
       
       focusDiv = document.getElementById("focusDiv");
    }

    function getCell(row, col) {
       if (grid.rows[row].cells[col] != null) return grid.rows[row].cells[col];   
    }

    var selRow, selCol;
    function startFocus(ev) {
       var cell = ev.target;
       selRow = cell.parentNode.rowIndex;
       selCol = cell.cellIndex;
       
       focusDiv.style.left = findPosX(cell) + "px";
       focusDiv.style.top = findPosY(cell) + "px";
       focusDiv.style.width = cell.offsetWidth + "px";
       focusDiv.style.height = cell.offsetHeight + "px";
       
       focusDiv.style.display = "";
       
       document.addEventListener("mousemove", doFocus, false);
       document.addEventListener("mouseup", endFocus, false);   
    }

    function doFocus(ev) {
       var el = ev.target;
       
       var cursorPos = getCursorPos(ev);
       var x = cursorPos.x - gridLeft;
       var y = cursorPos.y - gridTop;

       var width = parseInt(focusDiv.style.width);
       var height = parseInt(focusDiv.style.height);

       var prevColCell = getCell(selRow, selCol - 1);
       var prevRowCell = getCell(selRow - 1, selCol);
       var currCell = getCell(selRow, selCol);
       var nextColCell = getCell(selRow, selCol + 1);
       var nextRowCell = getCell(selRow + 1, selCol);

       if (x > nextColCell.offsetLeft) {
          focusDiv.style.width = (width + nextColCell.offsetWidth) + "px";
          selCol++;
       } else if (x < prevColCell.offsetLeft + prevColCell.offsetWidth) {
          focusDiv.style.width = (width - currCell.offsetWidth) + "px";
          selCol--;
       }

       if (y > nextRowCell.offsetTop) {
          focusDiv.style.height = (height + nextRowCell.offsetHeight) + "px";
          selRow++;
       } else if (y < prevRowCell.offsetTop + prevRowCell.offsetHeight) {
          focusDiv.style.height = (height - currCell.offsetHeight) + "px";
          selRow--;
       }
    }

    function endFocus() {
       document.removeEventListener("mousemove", doFocus, false);
       document.removeEventListener("mouseup", endFocus, false);
    }

    function clearFocus() {
       focusDiv.style.display = "none";
       focusDiv.style.width = focusDiv.style.height = "0px";
    }
    </script>

Actual Results:  
Sluggish performance of grid selection

Expected Results:  
Similar to that of Firefox 2
not a bugzilla issue.
Assignee: general → nobody
Component: Bugzilla-General → General
Product: Bugzilla → Firefox
QA Contact: default-qa → general
I've posted this issue in forums.mozillazine.org

They've advised me to post the same here
Pls test the attached html in both FF3 and FF2... u can feel the sluggishness of grid selection in FF3
Do you mean "select header and draw circles with it over the grid"? In that case I can experience indeed a performance regression. It uses twice as much CPU. But just drawing circles hovering over the grid makes no difference here.
Ria Klassen,

Yeah you are right, just click-n-drag over the grid... similar to cell range selection you do in MS Excel

I hope you can find the difference in performance
This could be caused by Bug 374593. In that case I wouldn't know what could be done about it.
Blocks: 374593
Status: UNCONFIRMED → NEW
Component: General → Drag and Drop
Ever confirmed: true
Keywords: perf, regression
Product: Firefox → Core
QA Contact: general → drag-drop
Version: unspecified → Trunk
Ria, why do you think this could be caused by bug 374593? Did you find a regression range that indicated that? I ask this, because this kind of click-n-drag doesn't necessarily have to be related to the os level drag and drop, which bug 374593 was involved with.
Like I said in comment 5, the only regression I could find in the testcase was "selecting header and draw circles with it over the grid". This gave a performance regression. Only builds with this translucent drag feedback had this problem, I did some checks around the time this patch was checked in.
As I read it now the reporter just meant that I should mouse down on the grid and select some cells. This showed no performance regression. Little misunderstanding I think.
No longer blocks: 374593
Component: Drag and Drop → DOM
QA Contact: drag-drop → general
In the meantime I found indeed a regression, if I quickly try to select nearly all cells. So if I mouse down on one of the first cells on the top left and then very quickly drag-select far to the right, I see indeed some delay. This regressed somewhere in the first half of August 2006. But I can't reproduce it on my Vista computer where I have more archive and a working optical drive so trying to find a range is more complicated and would require more time.
Ok, I'll try to come up with a testcase that more clearly shows a performance regression, first.
I believe everyone understood the issue, am i right?
(In reply to comment #13)
> I believe everyone understood the issue, am i right?

I hope so. To get this clear, does comment 11 describe your bug?
> I hope so. To get this clear, does comment 11 describe your bug?

Yes. To be more clear, mousedown over a cell and then move your mouse towards right and bottom side in a quicker way. The selection of cells will be highlighted with a blue background.

And then, compare the same user experience in Firefox 2. I am sure you can feel the difference in speed.

Fyki, I used FF2 portable edition for testing this case in both FF3 and FF2 in a same machine.
Any updates on this issue? Pls help

Thanks
Jay
Version: Trunk → 1.9.0 Branch
weird testcase. can't multiselect starting in row 1 or column 1
Works for me in Firefox 4 (and Opera)

Buggy behavior in Chrome.
WFM: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → WORKSFORME
Component: DOM → DOM: Core & HTML
You need to log in before you can comment on or make changes to this bug.