Problem/Motivation
Front-end performance of the toolbar is quite poor in Chrome/safari webkit browsers, reasonable in Firefox and untested in IE(so far). Not in terms of asset loading, but simply in terms of perceived performance on screen.
#1847314: Reduce the dependency on JavaScript for the toolbar to display properly probably helped with that, but when JS is enabled, it's still pretty awful. Very significant flickering. Everything you see in the toolbar, is done through JS, except the bulk of the rendering:
- The toolbar is only initialized AFTER the document is ready (because it is implemented as a behavior). Consequently, this has flicker pretty much by design.
- Once that is done, even then there are lots of performance problems (too much stuff being called multiple times, too slow jQuery stuff in the critical path, too much JS reliance in general).
Drupal.displace()is called multiple times, and hence can cause multiple displacements of the underlying page. Worse, in order to determine how to displace, it traverses the DOM.
Proposed resolution
Get rid of the useless .each() call (which in case of attaching the behaviors BEFORE the document is ready apparently blocks until the document is ready anyway…)
Remaining tasks
- Review Patch
User interface changes
- No visible changes but we added a hidden control element to toolbar (and which will be removed after JS executed0
(
This is what we have after patching:
- There's should be no vertical jumping anymore
- There's 1px movement from LEFT to RIGHT (affected by active-link.js, it changed the font weight.)
- There's flashing on Toolbar only. This is loading & rendering the SVG icons.
)
API changes
- N / A
Data model changes
- Insert a control element to toolbar elements. (affect theme element only, no DB changes)