Closed Bug 143097 Opened 22 years ago Closed 11 years ago

Slow execution of javascript manipulation regarding the DOM

Categories

(Core :: Layout: Block and Inline, defect)

Product:
Core
Component:
Layout: Block and Inline
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: dralion, Unassigned)

References

(
URL
)

Details

(Keywords: perf)

Attachments

(2 files)

TESTCASE
14.50 KB, text/html
Details
Profile in a May 12, 2002 build
553.48 KB, text/html
Details 
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.0rc1)
Gecko/20020417
BuildID:    RC1

Hi ! It's my first bug submission so I will try to be as clear as possible.

I'm experiencing some REALLY slow response from the browser regarding this
script (check out the "demo" link).

This script is doing a scrolling menu with layers. If you check the demo, you
will see that everything is fine. However, add a form (with 10 cells) in a table
and the browser cannot render at good speed. The browser is so slow that at some
moment, it freeze for a few seconds after the execution of the script.

Reproducible: Always
Steps to Reproduce:
1. take the script
2. add content - a table and a simple form with 10 cells
3. load the page with Mozilla.

Actual Results:  At the first load, everything seems to be normal. However,
press the up and down button regulary and you will see the browser slowing.

Expected Results:  The menu should move in a fluid way.

I attached my own example of html to demonstrate the problem :

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style_commande.css" type="text/css">
<!-- 
Validation de champs 
Javascript créé par Laurent Hogue (dralion@sympatico.ca) - mai 2002
-->

<script language="Javascript1.2">
iens6=document.all||document.getElementById
ns4=document.layers

<!-- Lower is faster -->
var scrollspeed = 60

<!-- functions that open and close the box -->

function openBox(){
	if (iens6) {
	obj.style.height=200
	}else{
	obj.clip.height=200
	}
}
function closeBox(){
	if (iens6) {
	obj.style.height=0
	}else{
	obj.clip.height=0
	}
}
<!-- scroll down function -->
function scrolldown() {
	if(window.scrolltimerup){
		clearTimeout(scrolltimerup)
	}
	if(iens6&&parseInt(contentobj.style.top)>=(contentheight*(-1)+100)){
		contentobj.style.top=parseInt(contentobj.style.top)-step
	}else if(ns4&&contentobj.top>=(contentheight*(-1)+100)){
		contentobj.top-=step
	}
	scrolltimerdown = setTimeout("scrolldown()",scrollspeed)
}
<!-- scroll up function -->
function scrollup() {
	if(window.scrolltimerdown){
		clearTimeout(scrolltimerdown)
	}
	if(iens6&&parseInt(contentobj.style.top)<=0){
		contentobj.style.top=parseInt(contentobj.style.top)+step
	}else if(ns4&&contentobj.top<=0){ 
		contentobj.top+=step
	}
	scrolltimerup = setTimeout("scrollup()",scrollspeed)	
}
<!-- function to stop all scroll timers -->
function stopall() {
	if(window.scrolltimerup){
		clearTimeout(scrolltimerup)
	}
	if(window.scrolltimerdown){
		clearTimeout(scrolltimerdown)
	}
}
<!-- function that shifts the object to top -->
function shifttotop(){
	stopall()
	if (iens6) {
		contentobj.style.top=0
	}else{
		contentobj.top=0
	}
}

function getcontent_height(){
	if (iens6)
	contentheight=contentobj.offsetHeight
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="2" topmargin="0"
marginwidth="2" marginheight="0">
<!-- Start Dynamic scroller -->
<table width="100" cellspacing="0" cellpadding="0" border="0" bgcolor="#E1F0F0">
		<tr>
		<td width=50% align="center">
		<a href="Javascript:void(0)" onmousedown="scrolldown()"
onmouseup="stopall()"><b><font face="Verdana" size="1">Down</font></b></a>
		</td>
		<td width=50% align="center">
		<a href="Javascript:void(0)" onmousedown="scrollup()"
onmouseup="stopall()"><b><font face="Verdana" size="1">Up</font></b></a>
		</td>
		</tr>	
</table>
<script language="JavaScript1.2">
// Author: Ron Grafe rgrafe@texas.net
http://www.lonestar.texas.net/~rgrafe/Pages/Scripts/BottomSlider/bottomslider.htm
// Permission granted to SimplytheBest.net to feature script in its
// DHTML script collection at http://simplythebest.net/info/dhtml_scripts.html
// Modified by Laurent Hogue.
iens6=document.all||document.getElementById
ns4=document.layers

<!-- Lower is faster -->
var scrollspeed = 10

<!-- Container setup -->
if (iens6){
document.write('<div id="container"
style="position:relative;width:310;height:330px;overflow:hidden;border:0px ridge
white">')
document.write('<div id="content"
style="position:absolute;width:310;left:0;top:0;padding-left:5px;padding-right:5px">')
}
</script>
<ilayer name="nscontainer" width=310 height=330 clip="0,0,302,330">
<layer name="nscontent" width=310 height=330
style="padding-left:5px;padding-right:5px">

<!--INSERT CONTENT HERE-->
<form name="formulaire" method="post"
action="http://scripts.iwebgroup.com/cgi-bin/formmail.pl">
	<INPUT TYPE=hidden NAME="recipient" VALUE="louis@univers-cite.qc.ca">
	<INPUT TYPE=hidden NAME="subject" VALUE="ID4 : Pour commander">
	<INPUT TYPE=hidden NAME="redirect" VALUE="http://www.id4marketing.com/fr/Merci.html">
    <p>
    Les informations donn&eacute;es sur cette page sont prot&eacute;g&eacute;es
et confidentielles.
    <p>
	Tous les champs sont requis sinon la commande sera refusée. Une fois fait,
appuyez sur le bouton se trouvant à la fin du formulaire.
	<p>
    Cochez les services <a href="NotreService.html" target="main"><font
color="#00CC00">LocusID<sup>*TM</sup></font></a> 
    que vous d&eacute;sirez :
	<table id="small" cellspacing="2">
	<tr>
		<td width="10" align="right"><input type="checkbox" name="LocusId Pays"
value="solution_choisie"></td>
		<td width="50%" align="left"><a href="Pays.html" target="main"><font
size="2"><font face="Arial, Helvetica, sans-serif"><font
color="#00CC00">LocusID<sup>*TM</sup></font></font></font>pays</a></td>
		<td width="10" align="right"><input type="checkbox" name="LocusId r&eacute;gions"
value="solution_choisie"></td>
		<td width="50%" align="left"><a href="Regions.html" target="main"><font
size="2"><font face="Arial, Helvetica, sans-serif"><font
color="#00CC00">LocusID<sup>*TM</sup></font></font></font>r&eacute;gions</a></td>
	</tr>
	<tr>
		<td width="10" align="right"><input type="checkbox" name="LocusId Villes"
value="solution_choisie"></td>
		<td width="50%" align="left"><a href="Villes.html" target="main"><font
size="2"><font face="Arial, Helvetica, sans-serif"><font
color="#00CC00">LocusID<sup>*TM</sup></font></font></font>villes</a></td>
		<td width="10" align="right"><input type="checkbox" name="LocusId Stats"
value="solution_choisie"></td>
		<td width="50%" align="left"><a href="Stats.html" target="main"><font
size="2"><font face="Arial, Helvetica, sans-serif"><font
color="#00CC00">LocusID<sup>*TM</sup></font></font></font>stats</a></td>
	</tr>
	</table>
	<br>
	<!-- style="background-color:#faf1be;" -->
	<table id="small" cellspacing="2">
		<tr>
			<td>Nom :</td>
			<td><input id="case" type="text" name="Nom_client" id="Nom_client"></td>
		</tr>
		<tr>
			<td>Titre :</td>
			<td><input id="case" type="text" name="Titre_client"></td>
		</tr>
		<tr>
			<td>Courriel :</td>
			<td><input id="case" id="email" type="text" name="Courriel"></td>
		</tr>
		<tr>
			<td>Téléphone :</td>
			<td><input id="case" type="text" name="Telephone"></td>
		</tr>
		<tr>
			<td>Nom de l'entreprise :</td>
			<td><input id="case" type="text" name="Nom_entreprise"></td>
		</tr>
		<tr>
			<td>Secteur d'activité :</td>
			<td><input id="case" type="text" name="Secteur_activite"></td>
		</tr>
		<tr>
			<td>Adresse :</td>
			<td><input id="case" type="text" name="Adresse"></td>
		</tr>
		<tr>
			<td>Ville :</td>
			<td><input id="case" type="text" name="Ville"></td>
		</tr>
		<tr>
			<td>Province :</td>
			<td><input id="case" type="text" name="Province"></td>
		</tr>
		<tr>
			<td>Code Postal :</td>
			<td><input id="case" type="text" name="Code_postal"></td>
		</tr>
		<tr>
			<td>Pays :</td>
			<td><input id="case" type="text" name="Pays"></td>
		</tr>
	</table>
    <p>
	Cliquez ici pour envoyer votre commande :
	<p>
    <img src="http://www.id4marketing.com/images/btn_soumettre.gif"
onmouseover="this.style.cursor='hand';" onclick="return validate()">
  </form>

  <!--END CONTENT-->
</layer></ilayer>

<script language="JavaScript1.2">
var step=1
var obj
if (iens6){
	document.write('</div></div>')
	var contentobj=document.getElementById? document.getElementById("content") :
document.all.content
	var contentheight=contentobj.offsetHeight
	if (document.getElementById&&!document.all){
   		step=1
	}
}
else if(ns4){
	var contentobj=document.nscontainer.document.nscontent
	var contentheight=contentobj.clip.height
}

if (iens6) {
	obj=document.getElementById? document.getElementById("container") :
document.all.container
}else{
	obj=document.nscontainer
}
window.onload=getcontent_height
</script>
</body>
</html>
Keywords: perf
Keywords: qawanted
Try this link, the online version of the html file attached with the submitted
bug. Compare the speed execution of this page on Mozilla and IE6.

http://www3.sympatico.ca/dralion/PourCommander_bug.html
I'm seeing this on RC2 2002051006 Win2000 as well.  

I'm going to try to put together a smaller test case.
Attached file TESTCASE — 
All cross-browser stuff has been removed, leaving only DOM methods/props.  The
form fields were also removed in lieu of a bunch of text.  This problem seems
more evident when the scrolling DIV contains a lot of data (text, tags, what
have you...)
This is a profile in a build that _includes_ the reflow-tree branch.

We seem to spend all our time reflowing textframes...

This is likely caused by the fact that repositioning and clip-changes both
require reflows, whereas they in fact should not....
Depends on: 113083
Keywords: testcase
Oh, and this is layout, really.
Assignee: jst → attinasi
Component: DOM Core → Layout
QA Contact: desale → petersen
Marking NEW.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P3
Target Milestone: --- → Future
How are we performing with a recent trunk build ?

.
Assignee: attinasi → block-and-inline
Component: Layout → Layout: Block & Inline
OS: Windows XP → All
Priority: P3 → --
QA Contact: cpetersen0953 → ian
Hardware: PC → All
Target Milestone: Future → ---
isn't this just bug 157681?
Dependent, but probably not a dup...
Depends on: 157681
Assignee: layout.block-and-inline → nobody
QA Contact: ian → layout.block-and-inline
Not an issue on Latest Nightly builds 25. If someone can still reproduce this issue please reopen the bug.
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: