CPU USAGE GOES VERY HIGH when moving HTML DOM Elements using JavaScript and DOM




10 years ago
2 months ago


(Reporter: deep.abstractions, Unassigned)


Firefox Tracking Flags

(Not tracked)





10 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; pt-BR; rv: Gecko/2008070208 Firefox/3.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; pt-BR; rv: Gecko/2008070208 Firefox/3.0.1

I'm building a JavaScript Lib, that has full compatibility with more than ten web browsers. It has a prototype class, DOM, that turns easier and shorter the DOM Elements control, by JavaScript coding.

The code runs very well in WebKit based and in Opera Browser. CPU stays very low... under 4%. Testing on Firefox... the CPU goes hight(100% and 50%+ for kernel).

On http://jsleaf.webs.com/ I'm using a switch, inside a loop. The switch tests if a key is pressed (use S,E,D and F) and changes DOM background and position of the DIV element.

I'm not sure if the problem is only because of the repositioning or gif rendering. But a test with one and other showed me that they together make Firefox abuse of kernel and CPU, while WebKit and some others stays under 8%, in a Pentium 4 2.6 with 1GB RAM.

Reproducible: Always

Steps to Reproduce:
1.use the given function (see additional information)
2.Test changing background gifs (build a function or take a look on http://jsleaf.webs.com ... and use S,E,D and F keys)

Obs: the code does not cause the problem... or WebKit, Opera and others would present the same.
Actual Results:  
CPU and Kernel "peggs".

Expected Results:  
Optimized CPU usage.

Similar bug:27042 https://bugzilla.mozilla.org/show_bug.cgi?id=427042

Used JavaScript code:

[leaf.DOM instance].setBackground: function (color, src, x, y, repeat)
	var $ = this.core.style;
	if (isString(color)) { $.backgroundColor = color; }
	if (isString(src))   { $.backgroundImage = 'url(\"' + src + '\")'; }
	x = forceUnit(x)||'50%';
	y = forceUnit(y)||'50%';
	$.backgroundPosition = x +' '+ y;
	$.backgroundRepeat = repeat? repeat:'no-repeat';

[leaf.DOM instance].modPosition: function (x, y, z)
	var $ = this.getPosition();
		x? x +forceFloat($.x)+extUnit($.x):null,
		y? y +forceFloat($.y)+extUnit($.x):null,
		z? z +$.z:null

[leaf.DOM instance].setPosition: function (x, y, z, type)
	var $ = this.core.style;
	$.position = type||$.position||'absolute';
	if (hasValue(x)) {
		x = forceUnit(x);
		if ($.right) {
			$.left  = '';
			$.right = x;
		else {
			$.left  = x;
			$.right = '';
	if (hasValue(y)) {
		y = forceUnit(y);
		if ($.bottom) {
			$.top = '';
			$.bottom = y;
		else {
			$.top = y;
			$.bottom = '';
	if (hasValue(z)) {
		$.zIndex = z;

This code is part of Leaf JavaScript Library and is protected by licenses.
No other use, distribuition or any similar is, yet, allowed.

Sorry for the poor text, my English is too bad and I'm on a rush.
But, please, test all the concept by yourself too.
Over to Core::Dom for triage.
Component: Build Config → DOM
Product: Firefox → Core
QA Contact: build.config → general

Comment 2

4 years ago
comment 1 appears to never have been triaged

note, reporter's email address is dead.

Move all DOM bugs that haven’t been updated in more than 3 years and has no one currently assigned to P5.

If you have questions, please contact :mdaly.
Priority: -- → P5
You need to log in before you can comment on or make changes to this bug.