1943230 - Perf comparison of creating large number of input type elements, and the perf of reloading page full of elements

Status: NEW

(Core :: DOM: Forms, defect)

Description

[Mayank Bansal]

Spurred by bug 1939344 (and bug 1941140) and undeterred by bug 1942561 I am now profiling the following for all HTML Input Elements:

• Creating a page full of input elements and comparing it to Chrome
• Reloading a page full of input elements for all possible input element types

****	****	Nightly	****	Chrome	****	****	****
Input element	Number of elements	Profile of generating the elements	Time taken (ms)	Profile of generating the elements	Time taken (ms)	Comment	Nightly- Perf of reloading a generated page
Button	450,000	https://share.firefox.dev/3CndhyX	2200	https://share.firefox.dev/4apI0Il	4700	Nightly is faster	https://share.firefox.dev/3E1OQHE
Color	150,000	https://share.firefox.dev/3WysMLd	1500	https://share.firefox.dev/3WuTbtc	3800	Nightly is faster	https://share.firefox.dev/3Cj4RIM
File	150,000	https://share.firefox.dev/3EgARhc	5200	https://share.firefox.dev/4huanHH	8600	Nightly is faster	https://share.firefox.dev/4jrUGlV
Hidden	1,500,000	https://share.firefox.dev/4h8QYMG	4100	https://share.firefox.dev/40JmFpU	7800	Nightly is faster	https://share.firefox.dev/3WuIVRM
Image	250,000	https://share.firefox.dev/4arizWA	8000	https://share.firefox.dev/3PO5Qnm	18000	Nightly is faster	https://share.firefox.dev/4g9IJOQ
Number	50,000	https://share.firefox.dev/4jupimI	2700	https://share.firefox.dev/3E9FvOb	1900	Nightly is slower	https://share.firefox.dev/42piYa1
Password	150,000	https://share.firefox.dev/4h54SPQ	18000	https://share.firefox.dev/4hs0udu	2900	Nightly is very slow	https://share.firefox.dev/4aviEc8
Range	150,000	https://share.firefox.dev/4aslDC2	4300	https://share.firefox.dev/3Cgic4L	5800	Nightly is faster	https://share.firefox.dev/42mGkgu
Reset button	400,000	https://share.firefox.dev/4hsBDGe	3600	https://share.firefox.dev/4jvaxQD	7600	Nightly is faster	https://share.firefox.dev/4ap8r0J
Search	150,000	https://share.firefox.dev/4jtrNpn	13000	https://share.firefox.dev/3PN5ZYn	11000	Nightly is slower	https://share.firefox.dev/4h5jbUj
Submit	450,000	https://share.firefox.dev/3E6uywS	7800	https://share.firefox.dev/3E7Ge2j	10000	Nightly is faster	https://share.firefox.dev/3WS3vvV
Text	150,000	https://share.firefox.dev/3ClhJ16	10000	https://share.firefox.dev/3WuWxwl	6000	Nightly is slower	https://share.firefox.dev/4apL1ID
URL	150,000	https://share.firefox.dev/3PJS0m2	11000	https://share.firefox.dev/4aqzWaf	6000	Nightly is slower	https://share.firefox.dev/3WuHsLp
Email	150,000	https://share.firefox.dev/4jpiGGp	12000	https://share.firefox.dev/3E6NjjK	5700	Nightly is slower	https://share.firefox.dev/4jwdhgT
Tel	150,000	https://share.firefox.dev/3E3NL29	13000	https://share.firefox.dev/3Wt3qOV	7400	Nightly is slower	https://share.firefox.dev/3WtNgF5
Time	15,000	https://share.firefox.dev/3E3NQmt	18000	https://share.firefox.dev/4jwdXmr	1800	Nightly is way slower and uses way more memory (2.4GB)	https://share.firefox.dev/3EgUWnz
Week	50,000	https://share.firefox.dev/4ga34nn	1800	https://share.firefox.dev/4jtuRln	5100	Nightly doesn’t seem to support this input type?	https://share.firefox.dev/4hnkQV6
Month	50,000	https://share.firefox.dev/3ClLGhs	2200	https://share.firefox.dev/40N0IGI	7800	Nightly is faster	https://share.firefox.dev/4hi6aqw
Date	15,000	https://share.firefox.dev/40HnHCR	18000	https://share.firefox.dev/42rDMxI	1700	Nightly is way slower and uses way more memory (4GB)	N/A- the page regenerates the elements on reload
Datetime-Local	15,000	https://share.firefox.dev/4apWHLn	21000	https://share.firefox.dev/4avBzTX	3200	Nightly is way slower and uses way more memory (4GB)	N/A- the page regenerates the elements on reload

Emilio had found something worth fixing in the image loading testcase, showed some initial interest in looking at profiles and suggested that a comparison with Chrome would be useful.
Note that the comparison between Firefox and Chrome is only for generating the page. The "Reload" perf has not been compared - the idea being that for reload any extra work should be avoided regardless of perf difference.
All testcases were geenrated by chatpgpt, with only minor edits to remove extra styling.
cc emilio and dholbert.

Comment 1

[Mayank Bansal]

Attachment: Layout.xlsx

Comment 2

[Mayank Bansal]

Attachment: Button.html

Comment 3

[Mayank Bansal]

Attachment: Color.html

Comment 4

[Mayank Bansal]

Attachment: Date.html

Comment 5

[Mayank Bansal]

Attachment: DateTime-Local.html

Comment 6

[Mayank Bansal]

Attachment: Email.html

Comment 7

[Mayank Bansal]

Attachment: File.html

Comment 8

[Mayank Bansal]

Attachment: Hidden.html

Comment 9

[Mayank Bansal]

Attachment: Image.html

Comment 10

[Mayank Bansal]

Attachment: Month.html

Comment 11

[Mayank Bansal]

Attachment: Number.html

Comment 12

[Mayank Bansal]

Attachment: Password.html

Comment 13

[Mayank Bansal]

Attachment: Range.html

Comment 14

[Mayank Bansal]

Attachment: Reset.html

Comment 15

[Mayank Bansal]

Attachment: Search.html

Comment 16

[Mayank Bansal]

Attachment: Submit.html

Comment 17

[Mayank Bansal]

Attachment: Tel.html

Comment 18

[Mayank Bansal]

Attachment: Text.html

Comment 19

[Mayank Bansal]

Attachment: Time.html

Comment 20

[Mayank Bansal]

Attachment: URL.html

Comment 21

[Mayank Bansal]

Attachment: Week.html

Comment 22

[Emilio Cobos Álvarez (:emilio)]

I think those dependencies are the most problematic, thanks for doing this.

Comment 23

[Sean Feng [:sefeng]]

Thanks for the work!

Comment 24

[Olli Pettay [:smaug][[e-mail]]]

The ones using UAWidgets (date and such) aren't very surprising. UAWidget setup is very slow. Luckily those elements are such that pages rarely have many of them.

Comment 25

[Mayank Bansal]

Attachment: Video elements.HTML

The perf difference of creating 5000 video elements is bad. By whatever magic, 5000 video elements are visible in Chrome in 1.2 seconds. We take 21s for the elements to appear.

nightly: https://share.firefox.dev/4hubYgE (21s+ 11s)
Chrome: https://share.firefox.dev/4aunyps (all video element visible after 1.2 seconds!)

Comment 26

[Olli Pettay [:smaug][[e-mail]]]

Could you file a separate bug for that. Looks like UAWidget for video element is flushing style and whatnot.

Comment 27

[Mayank Bansal]

(In reply to Olli Pettay [:smaug][[e-mail]] from comment #26)

Could you file a separate bug for that. Looks like UAWidget for video element is flushing style and whatnot.

Filed bug 1943629