Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Firefox super slow at adding event listeners

Status
Not open for further replies.
raphael75

raphael75

Programmer
Joined
Nov 15, 2012
Messages
67
Location
US
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.
 
Sort by date Sort by votes
Hi

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

Feherke.
feherke.ga
 
Upvote 0 Downvote
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>)

 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Hi

Interesting. No clue how to reproduce it as this works for me just fine :
HTML: 
[red]<!DOCTYPE[/red] [maroon]html[/maroon][red]>[/red]
[b]<html>[/b]
[b]<head>[/b]
[b]<script>[/b]
[b]var[/b] handler [teal]= {[/teal]
    focus[teal]:[/teal]   [b]function[/b][teal]([/teal]e[teal]) {[/teal] console[teal].[/teal][COLOR=orange]log[/color][teal]([/teal][i][green]'FOCUS'[/green][/i][teal],[/teal]    e[teal].[/teal]target[teal].[/teal]name[teal]) },[/teal]
    blur[teal]:[/teal]    [b]function[/b][teal]([/teal]e[teal]) {[/teal] console[teal].[/teal][COLOR=orange]log[/color][teal]([/teal][i][green]'BLUR'[/green][/i][teal],[/teal]     e[teal].[/teal]target[teal].[/teal]name[teal]) },[/teal]
    keyup[teal]:[/teal]   [b]function[/b][teal]([/teal]e[teal]) {[/teal] console[teal].[/teal][COLOR=orange]log[/color][teal]([/teal][i][green]'KEY UP'[/green][/i][teal],[/teal]   e[teal].[/teal]target[teal].[/teal]name[teal]) },[/teal]
    keydown[teal]:[/teal] [b]function[/b][teal]([/teal]e[teal]) {[/teal] console[teal].[/teal][COLOR=orange]log[/color][teal]([/teal][i][green]'KEY DOWN'[/green][/i][teal],[/teal] e[teal].[/teal]target[teal].[/teal]name[teal]) },[/teal]
[teal]}[/teal]
window[teal].[/teal][COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'load'[/green][/i][teal],[/teal] [b]function[/b][teal]() {[/teal]
    [b]var[/b] list [teal]=[/teal] document[teal].[/teal][COLOR=orange]querySelectorAll[/color][teal]([/teal][i][green]'input'[/green][/i][teal])[/teal]
    [b]for[/b] [teal]([/teal][b]var[/b] i [teal]=[/teal] [purple]0[/purple][teal],[/teal] l [teal]=[/teal] list[teal].[/teal]length[teal];[/teal] i [teal]<[/teal] l[teal];[/teal] i[teal]++)[/teal]
        Object[teal].[/teal][COLOR=orange]keys[/color][teal]([/teal]handler[teal]).[/teal][COLOR=orange]forEach[/color][teal]([/teal][b]function[/b][teal]([/teal]key[teal]) {[/teal]
            list[teal][[/teal]i[teal]].[/teal][COLOR=orange]addEventListener[/color][teal]([/teal]key[teal],[/teal] handler[teal][[/teal]key[teal]],[/teal] [b]false[/b][teal])[/teal]
        [teal]})[/teal]
[teal]},[/teal] [b]false[/b][teal])[/teal]
[b]</script>[/b]
[b]</head>[/b]
[b]<body>[/b]
[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][i][green]""[/green][/i][b]>[/b]
[teal]<?php[/teal]
[b]for[/b] [teal]([/teal][navy]$i[/navy] [teal]=[/teal] [purple]0[/purple][teal];[/teal] [navy]$i[/navy] [teal]<[/teal] [purple]572[/purple][teal];[/teal] [navy]$i[/navy][teal]++)[/teal]
    [b]echo[/b] [i][green]"<input type=text name=i$i>\n"[/green][/i][teal];[/teal]
[teal]?>[/teal]
[b]</form>[/b]
[b]</body>[/b]
[b]</html>[/b]

What I would try, is to detach the branch of DOM containing the [tt]input[/tt]s from the [tt]document[/tt] while adding the event handlers. For my above code sample this would mean :
Code: 
window[teal].[/teal][COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'load'[/green][/i][teal],[/teal] [b]function[/b][teal]() {[/teal]
    [b]var[/b] form [teal]=[/teal] document[teal].[/teal][COLOR=orange]querySelector[/color][teal]([/teal][i][green]'form'[/green][/i][teal])[/teal]
    [highlight]document[teal].[/teal]body[teal].[/teal][COLOR=orange]removeChild[/color][teal]([/teal]form[teal])[/teal][/highlight]
    [b]var[/b] list [teal]=[/teal] form[teal].[/teal][COLOR=orange]querySelectorAll[/color][teal]([/teal][i][green]'input'[/green][/i][teal])[/teal]
    [b]for[/b] [teal]([/teal][b]var[/b] i [teal]=[/teal] [purple]0[/purple][teal],[/teal] l [teal]=[/teal] list[teal].[/teal]length[teal];[/teal] i [teal]<[/teal] l[teal];[/teal] i[teal]++)[/teal]
        Object[teal].[/teal][COLOR=orange]keys[/color][teal]([/teal]handler[teal]).[/teal][COLOR=orange]forEach[/color][teal]([/teal][b]function[/b][teal]([/teal]key[teal]) {[/teal]
            list[teal][[/teal]i[teal]].[/teal][COLOR=orange]addEventListener[/color][teal]([/teal]key[teal],[/teal] handler[teal][[/teal]key[teal]],[/teal] [b]false[/b][teal])[/teal]
        [teal]})[/teal]
    [highlight]document[teal].[/teal]body[teal].[/teal][COLOR=orange]appendChild[/color][teal]([/teal]form[teal])[/teal][/highlight]
[teal]},[/teal] [b]false[/b][teal])[/teal]

Feherke.
feherke.ga
 
Upvote 0 Downvote
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!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question Question
Javascript events
Replies
1
Views
619
Daniel K
Daniel K
Ahmad khalafalla
  • Locked
  • Question Question
How to listen to 'onclick' event on the document
Replies
1
Views
472
feherke
feherke
lexer
  • Locked
  • Question Question
Adding datepicker calendar dynamically
Replies
0
Views
416
lexer
lexer
damipera
  • Locked
  • Question Question
Checkboxes - At Least 1 is Selected?
Replies
2
Views
460
damipera
damipera
AbidingDude
  • Locked
  • Question Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
487
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top