Optimize attach behavior Drupal.behaviors.horizontalTabs

Problem/Motivation

The attach behavior for the horizontal tabs might get really slow depending on how much content will be under each horizontal tab. The problem is that the attach behavior uses the jquery .wrap() function which relies on the .appendChild() function. As an example in my case the horizontal tabs processing takes 2105ms! You might look at the following screenshot from the java script profiler.

Proposed resolution

1. Instead of modifying the DOM to wrap the content for the horizontal tabs in a outer div, just place the outer div in the twig template and there is no need for a DOM modification anymore.
2. Instead of modifying the DOM to insert the content for the tabs column, just place it in the twig template and there is no need for a DOM modification anymore.

Measurements for the total execution duration of the function Drupal.attachBehaviors:

The current approach:
10 subsequent reloads result in an average total execution time of 2189,8ms.

With the proposed resolution:
10 subsequent reloads result in an average total execution time of 1499,8ms.

Result:
An amazing execution speed up of 690ms!

Remaining tasks

Review.

User interface changes

none

API changes

none

Data model changes

none