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!

  • Congratulations Chris Miller 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

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.
 
Hi

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

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

 
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.
 
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
 
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!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top