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 Mike Lewis 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
Nov 15, 2012
67
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
Javascript events
Replies
1
Views
179
Daniel K
Daniel K
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
111
feherke
feherke
lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
154
lexer
lexer
damipera
  • Locked
  • Question
Checkboxes - At Least 1 is Selected? 1
Replies
2
Views
107
damipera
damipera
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
135
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top