Slow Performance of JS in Firefox 3 when compared to FF2

RESOLVED WORKSFORME

Status

()

Core
DOM
RESOLVED WORKSFORME
9 years ago
4 years ago

People

(Reporter: Jayakrishnan G, Unassigned)

Tracking

({perf, regression})

1.9.0 Branch
x86
Windows XP
perf, regression
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

9 years ago
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
(Reporter)

Comment 2

9 years ago
I've posted this issue in forums.mozillazine.org

They've advised me to post the same here
Can you upload a testcase to https://bugzilla.mozilla.org/attachment.cgi?bugid=470532&action=enter
(Reporter)

Comment 4

9 years ago
Created attachment 353954 [details]
File to compare js performance in FF3 and FF2

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.
(Reporter)

Comment 6

9 years ago
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

Updated

9 years ago
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.
(Reporter)

Comment 13

9 years ago
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?
(Reporter)

Comment 15

9 years ago
> 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.
(Reporter)

Comment 16

9 years ago
Any updates on this issue? Pls help

Thanks
Jay
Version: Trunk → 1.9.0 Branch

Comment 17

7 years ago
weird testcase. can't multiselect starting in row 1 or column 1

Comment 18

7 years ago
Works for me in Firefox 4 (and Opera)

Buggy behavior in Chrome.

Comment 19

6 years ago
WFM: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0

Updated

4 years ago
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.