tldr: Tab bar is just a DIV full of SPANs, one SPAN per Tab. Pages are in a list of DIVs containing iframes. Switching a Tab is a simple process of moving "active" class from one SPAN to another and changing style of one iframe to "visibility: hidden; z-index: -1;" while another one gets "visibility: inherit; z-index: initial;". So far so ~good. So how does Vivaldi handle Tab close? You would guess closing a Tab would entail
- switching iframe visibility away from Tab being closed first - instant visual feedback for the user
- removing SPAN representing Tab we want closed
- maybe fixing widths of remaining SPANs
What actually happens is a horror show normally reserved for second semester CS students trying OOP for the first time. List of all Tabs gets traversed multiple times, most of them rewritten couple of times, everything generating individual DOM changes.
10 Tabs open and you close the first one = ~30 DOM Reflows.
100 Tabs open and you close two in the middle = ~300 DOM Reflows.
100 Tabs open and you close first 10 = ~3000 DOM Reflows.
Stuttering UI is the staple of Vivaldi, codebase is full of functions running in linear/polynomial time to the number of Tabs open/Tab position on the list, in places where O(1) is trivial. Vivaldi is a browser that used to Resize contents of every single Tab opened when you resized its window - resizing was slower the more Tabs you had in Tab bar :o, going fullscreen could take 10 seconds.
https://www.reddit.com/r/vivaldibrowser/comments/nrasof/fix_...
tldr: Tab bar is just a DIV full of SPANs, one SPAN per Tab. Pages are in a list of DIVs containing iframes. Switching a Tab is a simple process of moving "active" class from one SPAN to another and changing style of one iframe to "visibility: hidden; z-index: -1;" while another one gets "visibility: inherit; z-index: initial;". So far so ~good. So how does Vivaldi handle Tab close? You would guess closing a Tab would entail
What actually happens is a horror show normally reserved for second semester CS students trying OOP for the first time. List of all Tabs gets traversed multiple times, most of them rewritten couple of times, everything generating individual DOM changes.10 Tabs open and you close the first one = ~30 DOM Reflows.
100 Tabs open and you close two in the middle = ~300 DOM Reflows.
100 Tabs open and you close first 10 = ~3000 DOM Reflows.
Stuttering UI is the staple of Vivaldi, codebase is full of functions running in linear/polynomial time to the number of Tabs open/Tab position on the list, in places where O(1) is trivial. Vivaldi is a browser that used to Resize contents of every single Tab opened when you resized its window - resizing was slower the more Tabs you had in Tab bar :o, going fullscreen could take 10 seconds.