INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Firefox super slow at adding event listeners

Firefox super slow at adding event listeners

(OP)
I have a website on our Intranet that is used by our accounting dept for financial planning. The site has about 20 tabs, and each tab has about 572 <input type="text"> boxes. When the pages load, the program adds event listeners to each textbox. On Firefox, this takes about 48 seconds, but in Chrome it takes less than 5 seconds. Is there anything I can do to speed it up on FF?

Why is FF so slow at adding event listeners?

Unfortunately, due to the nature of the site I can't provide links to it, but I might be able to post parts of the code. Thank you.

RE: Firefox super slow at adding event listeners

What events are you listening to?

Keith
www.studiosoft.co.uk

RE: Firefox super slow at adding event listeners

Hi

How are you referring the elements when adding the listeners ? Are you using a JavaScript framework ? If yes, which ?

Feherke.
feherke.ga

RE: Firefox super slow at adding event listeners

(OP)
It uses plain old javascript, no frameworks. It adds each of these event listeners to each text box:

focus
blur
keyup
keydown

It uses:

el.addEventListener(<event type>, <js function call>, <true/false>)

RE: Firefox super slow at adding event listeners

(OP)
In addition, it does a querySelectorAll to get an array of all the textboxes, and then loops through them all with the 4 addEventListener lines noted above.

RE: Firefox super slow at adding event listeners

Hi

Interesting. No clue how to reproduce it as this works for me just fine :

CODE --> HTML

<!DOCTYPE html>
<html>
<head>
<script>
var handler = {
    focus:   function(e) { console.log('FOCUS',    e.target.name) },
    blur:    function(e) { console.log('BLUR',     e.target.name) },
    keyup:   function(e) { console.log('KEY UP',   e.target.name) },
    keydown: function(e) { console.log('KEY DOWN', e.target.name) },
}
window.addEventListener('load', function() {
    var list = document.querySelectorAll('input')
    for (var i = 0, l = list.length; i < l; i++)
        Object.keys(handler).forEach(function(key) {
            list[i].addEventListener(key, handler[key], false)
        })
}, false)
</script>
</head>
<body>
<form action="">
<?php
for ($i = 0; $i < 572; $i++)
    echo "<input type=text name=i$i>\n";
?>
</form>
</body>
</html> 

What I would try, is to detach the branch of DOM containing the inputs from the document while adding the event handlers. For my above code sample this would mean :

CODE --> JavaScript ( fragment )

window.addEventListener('load', function() {
    var form = document.querySelector('form')
    document.body.removeChild(form)
    var list = form.querySelectorAll('input')
    for (var i = 0, l = list.length; i < l; i++)
        Object.keys(handler).forEach(function(key) {
            list[i].addEventListener(key, handler[key], false)
        })
    document.body.appendChild(form)
}, false) 

Feherke.
feherke.ga

RE: Firefox super slow at adding event listeners

(OP)
I was able to find a fix for this in a different forum. They suggested that I add the event listeners to the form itself and then route the event to the appropriate function based on the event type. It worked! It is SO much faster now!

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close