From c0844eb0a59a37f4a4872017c5d95b856f4bd5f6 Mon Sep 17 00:00:00 2001
From: hotbees <78449839+hotbees@users.noreply.github.com>
Date: Thu, 11 Jun 2026 14:07:26 -0400
Subject: [PATCH] [HTML Report] Reduce report load time by deferring collapsed
 section parsing (#11495)

* [HTML Report] Render Raid DPS chart early

render the main raid DPS chart early so that it doesn't take forever to appear on large reports. motivated by full raid sim stacks like are published on simulationcraft.org

* [HTML Report] Emit grouping classes by default

the section-open / grouped-first / grouped-last classes that separate and round the report's sections were only applied by `validate_section()` on document.ready, causing a noticable layout shift when they snap apart on larger (longer-loading) reports.

instead, we include them directly on the sections we know will be present: section-open for the default-open sections (raid summary and profile sets), grouped-first for hotfixes and grouped-last for the table of contents. this makes the styling and layout mostly correct before document.ready, improving the feel on larger reports.

* [HTML Report] Emit `section-open` for main actor of single actor reports

* [HTML Report] Defer actor subsection loading

A significant portion of page load time on larger reports is spent parsing HTML and building the DOM. By enclosiong heavier per-actor subsections (Abilities, Buffs, Procs/Uptimes/Benefits, Resources, Action Priority List, Statistics & Data Analysis, Stats, Gear, Profile, Talents (multi-player only), Parsed Player Effects) in `<script type="text/x-deferred-html">` blocks, the browser will skip parsing these sections, and we can later inject this unparsed HTML into the DOM with a bit of JS once the user actually opens the section. This gives us a report which is interactive much faster by avoiding having the browser do heavy parsing work on sections that may never be opened.

* [report] Remove special casing for HTML reports based on actor count.

* [report] Defer only actor, as nested script tags are not permitted.

---------

Co-authored-by: Kate Martin <51387586+renanthera@users.noreply.github.com>
---
 engine/report/data/html_report_script.js | 38 +++++++---
 engine/report/data/report_data.inc       | 92 ++++++++++++------------
 engine/report/report_html_player.cpp     | 49 ++++++-------
 engine/report/report_html_sim.cpp        | 32 +++------
 engine/sim/sim.cpp                       | 10 +--
 engine/sim/sim.hpp                       |  7 +-
 6 files changed, 108 insertions(+), 120 deletions(-)

diff --git a/engine/report/data/html_report_script.js b/engine/report/data/html_report_script.js
index 68d91a4cb48..713b9fe7eff 100644
--- a/engine/report/data/html_report_script.js
+++ b/engine/report/data/html_report_script.js
@@ -67,9 +67,10 @@ jQuery(document).ready(function ($) {
             scrollTop: $anchor.parent().offset().top - $anchor.height()
         }, 300);
     });
-    $('.toggle').click(function (e) {
+    $(document).on('click', '.toggle', function (e) {
         e.preventDefault();
         var $me = $(this);
+        revealSection(this.id);
         $me.toggleClass('open');
         $me.next('.toggle-content').slideToggle(150);
         var section = $me.parent('.section');
@@ -86,10 +87,11 @@ jQuery(document).ready(function ($) {
             }
         }
     });
-    $('.toggle-details').click(function (e) {
+    $(document).on('click', '.toggle-details', function (e) {
         e.preventDefault();
         e.stopPropagation();
         var $me = $(this);
+        if ( this.id ) renderCharts(this.id);
         var $row = $me.closest('tr').nextAll('.details').first();
         if ($me.hasClass('open')) {
             $me.removeClass('open');
@@ -99,16 +101,30 @@ jQuery(document).ready(function ($) {
             $row.fadeToggle(150);
         }
     });
-    $('.toggle, .toggle-details').each(function() {
-        if ( __chartData[this.id] === undefined ) return;
-        $(this).one('click', function() {
-            var d = __chartData[this.id];
-            for (var idx in d) {
-                $('#' + d[idx]['target']).highcharts(d[idx]['data']);
+    function renderCharts(key) {
+        var items = __chartData[key];
+        if ( items === undefined ) return;
+        items.forEach(function(chart) {
+            var $el = $('#' + chart.target);
+            if ( $el.length && !$el.highcharts() ) {
+                $el.highcharts(chart.data);
             }
         });
-    });
-    $('table.stripetoprow .toprow td:first-of-type, table.stripebody tbody td:first-of-type').click(function (e) {
+    }
+    function revealSection(id) {
+        var $deferred = id ? $('script[type="text/x-deferred-html"][data-toggle="' + id + '"]') : $();
+        if ( $deferred.length ) {
+            $deferred.each(function() {
+                $(this).replaceWith($($.parseHTML(this.textContent)));
+            });
+            $('.stripetoprow').oddstripe();
+            renderCharts('');
+        }
+        if ( id ) renderCharts(id);
+    }
+    $('.toggle.open').each(function() { revealSection(this.id); });
+    renderCharts('');
+    $(document).on('click', 'table.stripetoprow .toprow td:first-of-type, table.stripebody tbody td:first-of-type', function (e) {
         e.preventDefault();
         $(this).children('.toggle-details').first().click();
     });
@@ -202,7 +218,7 @@ jQuery(document).ready(function ($) {
             $cells.removeClass('pulse');
         }, 150);
     }
-    $('.sort').on('click', 'th.toggle-sort', function (e) {
+    $(document).on('click', '.sort th.toggle-sort', function (e) {
         e.preventDefault();
         var $me = $(this);
         var $col = $me.closest('th');
diff --git a/engine/report/data/report_data.inc b/engine/report/data/report_data.inc
index e55d8319aaf..c070c957ed7 100644
--- a/engine/report/data/report_data.inc
+++ b/engine/report/data/report_data.inc
@@ -1135,50 +1135,54 @@ static const char* __html_report_script[] = {
 "$('a.ext').mouseover(function () { $(this).attr('target', '_blank'); }); $('ul.toc li a').click(function (e) { e.pre",
 "ventDefault(); var href = this.getAttribute('href'); var $anchor = $(href).children('h2').first(); if (!$anchor.hasC",
 "lass('open')) { $anchor.click(); } $('html, body').animate( { scrollTop: $anchor.parent().offset().top - $anchor.hei",
-"ght() }, 300); }); $('.toggle').click(function (e) { e.preventDefault(); var $me = $(this); $me.toggleClass('open');",
-" $me.next('.toggle-content').slideToggle(150); var section = $me.parent('.section'); if (section.length) { section.v",
-"alidate_section(); if ($me.hasClass('open')) { var wh = $(window).height() / 3; var pos = section[0].getBoundingClie",
-"ntRect().top; if (pos > wh * 2) { $('html, body').animate( { scrollTop: section.offset().top - wh }, 300); } } } });",
-" $('.toggle-details').click(function (e) { e.preventDefault(); e.stopPropagation(); var $me = $(this); var $row = $m",
-"e.closest('tr').nextAll('.details').first(); if ($me.hasClass('open')) { $me.removeClass('open'); $row.fadeToggle(75",
-"); } else { $me.addClass('open'); $row.fadeToggle(150); } }); $('.toggle, .toggle-details').each(function() { if ( _",
-"_chartData[this.id] === undefined ) return; $(this).one('click', function() { var d = __chartData[this.id]; for (var",
-" idx in d) { $('#' + d[idx]['target']).highcharts(d[idx]['data']); } }); }); $('table.stripetoprow .toprow td:first-",
-"of-type, table.stripebody tbody td:first-of-type').click(function (e) { e.preventDefault(); $(this).children('.toggl",
-"e-details').first().click(); }); var hoverTimeout; function hoverHide() { clearTimeout(hoverTimeout); $('#active-hel",
-"p','.help-box').hide(); $('#active-help').removeAttr('style'); } $('.help').hover(function (e) { var $target = $(thi",
-"s.dataset.help + ' .help-box'); var content; if (!$target.length) { content = '<h3>NO HELP FOUND</h3><p>PLEASE REPOR",
-"T AS A BUG</p>'; } else { content = $target.html(); } $('#active-help-dynamic .help-box').html(content); $('#active-",
-"help .help-box').show(); var pos = $(this).offset(); $('#active-help').css({ top: pos.top - $('#active-help').height",
-"() - $(this).height(), left: pos.left, }); hoverTimeout = setTimeout(function() { $('#active-help').fadeIn(300); }, ",
-"750); }, hoverHide); window.onblur = hoverHide; function getCell(elem, i, both) { var $row; var ret; var idx = i; if",
-" ($(elem).is('tr')) { $row = $(elem); } else { $row = $(elem).find('tr').first(); } ret = $row.children('td').eq(idx",
-").text().trim(); if (!ret.length && both) { var span = $row.children('td[rowspan]').length; $row = $row.nextAll('.ch",
-"ildrow').first(); if ($row.length && idx >= span) { idx -= span; ret = $row.children('td').eq(idx).text().trim(); } ",
-"} return ret; } function strip(val) { return val.slice(val.indexOf('\\xa0') + 1).replace(/[^\\d.-]/g,''); } function",
-" numberSort(a, b, i, dsc, both) { var va = +strip(getCell(a, i, both)) || 0; var vb = +strip(getCell(b, i, both)) ||",
-" 0; return dsc \? vb - va : va - vb; } function alphaSort(a, b, i, dsc, both) { var va = getCell(a, i, both); var vb",
-" = getCell(b, i, both); if (dsc) { return va < vb \? 1 : -1; } else { return va > vb \? 1 : -1; } } function pulseco",
-"lumn(table, index, both) { var $cells = $(); if (table.hasClass('stripetoprow')) { table.find('.toprow:not(.childrow",
-")').each(function() { var me = $(this); var cell = me.children('td').eq(index); if (both && (!cell.length || cell.is",
-"(':empty'))) { var span = me.children('td[rowspan]').length; var row = me.nextAll('.childrow').first(); if (row.leng",
-"th && index >= span) { cell = row.children('td').eq(index - span); } } if (cell.length && !cell.is(':empty')) { $.me",
-"rge($cells, cell); } }); } else if (table.hasClass('stripebody')) { $cells = table.find('tbody tr:first-of-type td:n",
-"th-of-type(' + (index + 1) + '):not(:empty)'); } else { $cells = table.find('tbody tr td:nth-of-type(' + (index + 1)",
-" + '):not(:empty)'); } $cells.addClass('pulse'); setTimeout(function () { $cells.removeClass('pulse'); }, 150); } $(",
-"'.sort').on('click', 'th.toggle-sort', function (e) { e.preventDefault(); var $me = $(this); var $col = $me.closest(",
-"'th'); var $thd = $col.closest('thead'); var $tbl = $thd.closest('table.sort'); var $sib = $col.siblings('.asc-sorte",
-"d, .dsc-sorted'); $sib.removeClass('asc-sorted dsc-sorted'); var idx = $col.index(); var doAlpha = this.dataset.sort",
-"type == 'alpha'; var doAsc = this.dataset.sortdir == 'asc'; var doRows = this.dataset.sortrows == 'both'; if (!($me.",
-"hasClass('dsc-sorted') || $me.hasClass('asc-sorted'))) { $me.toggleClass('dsc-sorted', !doAsc); } else { $me.toggleC",
-"lass('dsc-sorted'); } var isDsc = $me.hasClass('dsc-sorted'); $me.toggleClass('asc-sorted', !isDsc); var srt; if (do",
-"Alpha) { srt = function(i, dsc, both) { return function(a, b) { return alphaSort(a, b, i, dsc, both); }; }; } else {",
-" srt = function(i, dsc, both) { return function(a, b) { return numberSort(a, b, i, dsc, both); }; }; } var $bucket =",
-" $thd.nextUntil('.petrow'); if ($bucket.length == 1) { $bucket = $bucket.children('tr').first().nextUntil('.petrow')",
-".addBack(); } var $remain = $bucket.last().nextAll(); var $petrow; do { $bucket.sort(srt(idx, isDsc, doRows)); $tbl.",
-"append($bucket); if (!$remain.length) { break; } $tbl.append($remain); $petrow = $remain.first(); $bucket = $petrow.",
-"nextUntil('.petrow'); $remain = $bucket.last().nextAll(); } while ($bucket.length > 1); if ($tbl.hasClass('stripetop",
-"row')) { $tbl.oddstripe(); } pulsecolumn($tbl, idx, doRows); });});",
+"ght() }, 300); }); $(document).on('click', '.toggle', function (e) { e.preventDefault(); var $me = $(this); revealSe",
+"ction(this.id); $me.toggleClass('open'); $me.next('.toggle-content').slideToggle(150); var section = $me.parent('.se",
+"ction'); if (section.length) { section.validate_section(); if ($me.hasClass('open')) { var wh = $(window).height() /",
+" 3; var pos = section[0].getBoundingClientRect().top; if (pos > wh * 2) { $('html, body').animate( { scrollTop: sect",
+"ion.offset().top - wh }, 300); } } } }); $(document).on('click', '.toggle-details', function (e) { e.preventDefault(",
+"); e.stopPropagation(); var $me = $(this); if ( this.id ) renderCharts(this.id); var $row = $me.closest('tr').nextAl",
+"l('.details').first(); if ($me.hasClass('open')) { $me.removeClass('open'); $row.fadeToggle(75); } else { $me.addCla",
+"ss('open'); $row.fadeToggle(150); } }); function renderCharts(key) { var items = __chartData[key]; if ( items === un",
+"defined ) return; items.forEach(function(chart) { var $el = $('#' + chart.target); if ( $el.length && !$el.highchart",
+"s() ) { $el.highcharts(chart.data); } }); } function revealSection(id) { var $deferred = id \? $('script[type=\"text",
+"/x-deferred-html\"][data-toggle=\"' + id + '\"]') : $(); if ( $deferred.length ) { $deferred.each(function() { $(thi",
+"s).replaceWith($($.parseHTML(this.textContent))); }); $('.stripetoprow').oddstripe(); renderCharts(''); } if ( id ) ",
+"renderCharts(id); } $('.toggle.open').each(function() { revealSection(this.id); }); renderCharts(''); $(document).on",
+"('click', 'table.stripetoprow .toprow td:first-of-type, table.stripebody tbody td:first-of-type', function (e) { e.p",
+"reventDefault(); $(this).children('.toggle-details').first().click(); }); var hoverTimeout; function hoverHide() { c",
+"learTimeout(hoverTimeout); $('#active-help','.help-box').hide(); $('#active-help').removeAttr('style'); } $('.help')",
+".hover(function (e) { var $target = $(this.dataset.help + ' .help-box'); var content; if (!$target.length) { content",
+" = '<h3>NO HELP FOUND</h3><p>PLEASE REPORT AS A BUG</p>'; } else { content = $target.html(); } $('#active-help-dynam",
+"ic .help-box').html(content); $('#active-help .help-box').show(); var pos = $(this).offset(); $('#active-help').css(",
+"{ top: pos.top - $('#active-help').height() - $(this).height(), left: pos.left, }); hoverTimeout = setTimeout(functi",
+"on() { $('#active-help').fadeIn(300); }, 750); }, hoverHide); window.onblur = hoverHide; function getCell(elem, i, b",
+"oth) { var $row; var ret; var idx = i; if ($(elem).is('tr')) { $row = $(elem); } else { $row = $(elem).find('tr').fi",
+"rst(); } ret = $row.children('td').eq(idx).text().trim(); if (!ret.length && both) { var span = $row.children('td[ro",
+"wspan]').length; $row = $row.nextAll('.childrow').first(); if ($row.length && idx >= span) { idx -= span; ret = $row",
+".children('td').eq(idx).text().trim(); } } return ret; } function strip(val) { return val.slice(val.indexOf('\\xa0')",
+" + 1).replace(/[^\\d.-]/g,''); } function numberSort(a, b, i, dsc, both) { var va = +strip(getCell(a, i, both)) || 0",
+"; var vb = +strip(getCell(b, i, both)) || 0; return dsc \? vb - va : va - vb; } function alphaSort(a, b, i, dsc, bot",
+"h) { var va = getCell(a, i, both); var vb = getCell(b, i, both); if (dsc) { return va < vb \? 1 : -1; } else { retur",
+"n va > vb \? 1 : -1; } } function pulsecolumn(table, index, both) { var $cells = $(); if (table.hasClass('stripetopr",
+"ow')) { table.find('.toprow:not(.childrow)').each(function() { var me = $(this); var cell = me.children('td').eq(ind",
+"ex); if (both && (!cell.length || cell.is(':empty'))) { var span = me.children('td[rowspan]').length; var row = me.n",
+"extAll('.childrow').first(); if (row.length && index >= span) { cell = row.children('td').eq(index - span); } } if (",
+"cell.length && !cell.is(':empty')) { $.merge($cells, cell); } }); } else if (table.hasClass('stripebody')) { $cells ",
+"= table.find('tbody tr:first-of-type td:nth-of-type(' + (index + 1) + '):not(:empty)'); } else { $cells = table.find",
+"('tbody tr td:nth-of-type(' + (index + 1) + '):not(:empty)'); } $cells.addClass('pulse'); setTimeout(function () { $",
+"cells.removeClass('pulse'); }, 150); } $(document).on('click', '.sort th.toggle-sort', function (e) { e.preventDefau",
+"lt(); var $me = $(this); var $col = $me.closest('th'); var $thd = $col.closest('thead'); var $tbl = $thd.closest('ta",
+"ble.sort'); var $sib = $col.siblings('.asc-sorted, .dsc-sorted'); $sib.removeClass('asc-sorted dsc-sorted'); var idx",
+" = $col.index(); var doAlpha = this.dataset.sorttype == 'alpha'; var doAsc = this.dataset.sortdir == 'asc'; var doRo",
+"ws = this.dataset.sortrows == 'both'; if (!($me.hasClass('dsc-sorted') || $me.hasClass('asc-sorted'))) { $me.toggleC",
+"lass('dsc-sorted', !doAsc); } else { $me.toggleClass('dsc-sorted'); } var isDsc = $me.hasClass('dsc-sorted'); $me.to",
+"ggleClass('asc-sorted', !isDsc); var srt; if (doAlpha) { srt = function(i, dsc, both) { return function(a, b) { retu",
+"rn alphaSort(a, b, i, dsc, both); }; }; } else { srt = function(i, dsc, both) { return function(a, b) { return numbe",
+"rSort(a, b, i, dsc, both); }; }; } var $bucket = $thd.nextUntil('.petrow'); if ($bucket.length == 1) { $bucket = $bu",
+"cket.children('tr').first().nextUntil('.petrow').addBack(); } var $remain = $bucket.last().nextAll(); var $petrow; d",
+"o { $bucket.sort(srt(idx, isDsc, doRows)); $tbl.append($bucket); if (!$remain.length) { break; } $tbl.append($remain",
+"); $petrow = $remain.first(); $bucket = $petrow.nextUntil('.petrow'); $remain = $bucket.last().nextAll(); } while ($",
+"bucket.length > 1); if ($tbl.hasClass('stripetoprow')) { $tbl.oddstripe(); } pulsecolumn($tbl, idx, doRows); });});",
 };
 
 // Automatically generated from file style.css
diff --git a/engine/report/report_html_player.cpp b/engine/report/report_html_player.cpp
index a262bb4575c..47e7bd4b474 100644
--- a/engine/report/report_html_player.cpp
+++ b/engine/report/report_html_player.cpp
@@ -2046,18 +2046,13 @@ void print_html_talents( report::sc_html_stream& os, const player_t& p )
      << "<h3 class=\"toggle\">Talents</h3>\n"
      << "<div class=\"toggle-content hide\">\n";
 
-  auto num_players = p.sim->players_by_name.size();
-  if ( num_players == 1 )
-  {
-    auto max_col = class_columns( p.specialization(), p.is_ptr() ) + spec_columns( p.specialization(), p.is_ptr() );
-    auto h_ = static_cast<int>( 1165 - max_col * 28 );
-    os.format( R"(<iframe src="{}" width="1165" height="{}"></iframe>)",
-               raidbots_talent_render_src( p.talents_str, p.true_level, 1165, false, p.dbc->ptr ), h_ );
+  auto max_col = class_columns( p.specialization(), p.is_ptr() ) + spec_columns( p.specialization(), p.is_ptr() );
+  auto h_ = static_cast<int>( 1165 - max_col * 28 );
+  os.format( R"(<iframe src="{}" width="1165" height="{}" style="background:#160f0b"></iframe>)",
+              raidbots_talent_render_src( p.talents_str, p.true_level, 1165, false, p.dbc->ptr ), h_ );
 
-    // Hide the talent table only if the Raidbots talent iframe is present.
-    os << "<h3 class=\"toggle\">Talent Tables</h3>\n"
-       << "<div class=\"toggle-content hide\">\n";
-  }
+  os << "<h3 class=\"toggle\">Talent Tables</h3>\n"
+     << "<div class=\"toggle-content hide\">\n";
 
   if ( range::accumulate( class_traits, 0, &std::vector<talentrank_t>::size ) )
   {
@@ -2087,11 +2082,8 @@ void print_html_talents( report::sc_html_stream& os, const player_t& p )
     os << "</div>\n";
   }
 
-  // Close the talent table div only if it exists.
-  if ( num_players == 1 )
-    os << "</div>\n";
-
   os << "</div>\n"
+     << "</div>\n"
      << "</div>\n";
 }
 
@@ -2653,9 +2645,9 @@ void print_html_player_statistics( report::sc_html_stream& os, const player_t& p
   // Statistics & Data Analysis
 
   os << "<div class=\"player-section analysis\">\n"
-        "<h3 class=\"toggle\">Statistics & Data Analysis</h3>\n"
-        "<div class=\"toggle-content hide\">\n"
-        "<table class=\"sc stripebody\">\n";
+     << "<h3 class=\"toggle\">Statistics & Data Analysis</h3>\n"
+     << "<div class=\"toggle-content hide\">\n"
+     << "<table class=\"sc stripebody\">\n";
 
   report_helper::print_html_sample_data( os, p, p.collected_data.fight_length, "Fight Length" );
   report_helper::print_html_sample_data( os, p, p.collected_data.dps, "DPS" );
@@ -2674,8 +2666,8 @@ void print_html_player_statistics( report::sc_html_stream& os, const player_t& p
   }
 
   os << "</table>\n"
-        "</div>\n"
-        "</div>\n";
+     << "</div>\n"
+     << "</div>\n";
 }
 
 // print_html_player_statistics =============================================
@@ -2994,7 +2986,8 @@ void print_html_player_resources( report::sc_html_stream& os, const player_t& p
       print_html_resource_changes_table( os, p );
   }
 
-  os << "</div><div class=\"column-charts\">\n"; // Open DIV for charts
+  os << "</div>\n"
+     << "<div class=\"column-charts\">\n"; // Open DIV for charts
 
   for ( resource_e r = RESOURCE_MAX; --r > RESOURCE_NONE; )
   {
@@ -3721,13 +3714,8 @@ void print_html_player_description( report::sc_html_stream& os, const player_t&
   bool one_player = sim.players_by_name.size() == 1 && !p.is_enemy() && sim.profilesets->n_profilesets() == 0;
 
   // Player Description
-  os << "<div id=\"player" << p.index << "\" class=\"player section\">\n";
-
-  os << "<h2 id=\"player" << p.index << "toggle\" class=\"toggle";
-  if ( one_player )
-  {
-    os << " open";
-  }
+  os.printf( R"(<div id="player%d" class="player section%s">)""\n", p.index, (one_player ? " section-open" : "" ) );
+  os.printf( R"(<h2 id="player%dtoggle" class="toggle%s")", p.index, (one_player ? " open" : "" ) );
 
   const std::string n = util::encode_html( p.name() );
   if ( ( p.collected_data.dps.mean() >= p.collected_data.hps.mean() && sim.enemy_targets > 1 ) ||
@@ -3766,6 +3754,8 @@ void print_html_player_description( report::sc_html_stream& os, const player_t&
   }
   os << "\">\n";
 
+  os.printf( R"(<script type="text/x-deferred-html" data-toggle="player%dtoggle">)", p.index );
+
   os << "<ul class=\"params\">\n";
 #if SC_BETA
   os << "<li><b>BETA activated</b></li>\n";
@@ -3836,7 +3826,7 @@ void print_html_player_results_spec_gear( report::sc_html_stream& os, const play
 
   os << "<div class=\"toggle-content\">\n";
 
-  if ( p.sim->players_by_name.size() == 1 && p.is_player() )
+  if ( p.is_player() )
   {
     auto max_col = class_columns( p.specialization(), p.is_ptr() ) + spec_columns( p.specialization(), p.is_ptr() );
     auto w_ = static_cast<int>( max_col * 12.5 - 25 );
@@ -4987,6 +4977,7 @@ void print_html_player_( report::sc_html_stream& os, const player_t& p )
 
   // print_html_player_gear_weights( os, p, p.report_information );
 
+  os << "</script>\n";
   os << "</div>\n"
      << "</div>\n\n";
 }
diff --git a/engine/report/report_html_sim.cpp b/engine/report/report_html_sim.cpp
index 32dac66b791..fd0b58d94ab 100644
--- a/engine/report/report_html_sim.cpp
+++ b/engine/report/report_html_sim.cpp
@@ -58,7 +58,7 @@ void print_html_contents( report::sc_html_stream& os, const sim_t& sim )
     }
   }
 
-  os << "<div id=\"table-of-contents\" class=\"section\">\n"
+  os << "<div id=\"table-of-contents\" class=\"section grouped-last\">\n"
      << "<h2 class=\"toggle\">Table of Contents</h2>\n"
      << "<div class=\"toggle-content hide\">\n";
 
@@ -349,7 +349,7 @@ void print_html_sim_summary( report::sc_html_stream& os, sim_t& sim )
 
 void print_html_raid_summary( report::sc_html_stream& os, sim_t& sim )
 {
-  os << "<div id=\"raid-summary\" class=\"section\">\n\n"
+  os << "<div id=\"raid-summary\" class=\"section section-open\">\n\n"
      << "<h2 class=\"toggle open\">Raid Summary</h2>\n"
      << "<div class=\"toggle-content\">\n";
 
@@ -377,16 +377,18 @@ void print_html_raid_summary( report::sc_html_stream& os, sim_t& sim )
   {
     raid_dps.width_ += raid_dps.width_ + 12;
     raid_dps.set( "chart.marginLeft", margin );
+    raid_dps.set( "plotOptions.series.animation", false );  // no initial draw animation on the main DPS chart
     os << raid_dps.to_target_div();
-    sim.add_chart_data( raid_dps );
+    os << "<script type=\"text/javascript\">\n" << raid_dps.to_aggregate_string( false ) << "</script>\n";
   }
 
   if ( has_priority )
   {
     priority_dps.width_ += priority_dps.width_ + 12;
     priority_dps.set( "chart.marginLeft", margin );
+    priority_dps.set( "plotOptions.series.animation", false );
     os << priority_dps.to_target_div();
-    sim.add_chart_data( priority_dps );
+    os << "<script type=\"text/javascript\">\n" << priority_dps.to_aggregate_string( false ) << "</script>\n";
   }
 
   if ( !sim.raid_events_str.empty() )
@@ -888,7 +890,7 @@ void print_html_hotfixes( report::sc_html_stream& os, const sim_t& sim )
 {
   std::vector<const hotfix::hotfix_entry_t*> entries = hotfix::hotfix_entries();
 
-  os << "<div class=\"section\">\n";
+  os << "<div class=\"section grouped-first\">\n";
   os << "<h2 class=\"toggle\">Current simulator hotfixes</h2>\n";
   os << "<div class=\"toggle-content hide\">\n";
 
@@ -1156,7 +1158,7 @@ void print_profilesets( std::ostream& out, const profileset::profilesets_t& prof
     return;
   }
 
-  out << "<div class=\"section\">\n";
+  out << "<div class=\"section section-open\">\n";
   out << "<h2 class=\"toggle open\">Profile sets</h2>\n";
   out << "<div class=\"toggle-content\">\n";
 
@@ -1276,15 +1278,7 @@ void print_html_( report::sc_html_stream& os, sim_t& sim )
 
   if ( sim.decorated_tooltips )
   {
-    //Apply the prettification stuff only if its a single report
-    if ( num_players > 1 )
-    {
-      os << R"(<script>var whTooltips = {colorLinks: false, iconizeLinks: false, renameLinks: false};</script>)";
-    }
-    else
-    {
-      os << R"(<script>var whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>)";
-    }
+    os << R"(<script>var whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>)";
 
     if ( !sim.offline )
       os << std::endl << R"(<script type="text/javascript" src="https://wow.zamimg.com/widgets/power.js"></script>)";
@@ -1300,14 +1294,6 @@ void print_html_( report::sc_html_stream& os, sim_t& sim )
   print_html_report_scripts( os );
   os << "\n</script>\n";
 
-  os << "<script type=\"text/javascript\">\n";
-  os << "jQuery( document ).ready( function( $ ) {\n";
-  for ( const auto& data : sim.on_ready_chart_data )
-  {
-    os << data << std::endl;
-  }
-  os << "});\n";
-  os << "</script>\n";
   os << "<script type=\"text/javascript\">\n";
   os << "__chartData = {\n";
   for ( const auto& entry : sim.chart_data )
diff --git a/engine/sim/sim.cpp b/engine/sim/sim.cpp
index 1ad3e9eb4a2..31b8fbdd0bf 100644
--- a/engine/sim/sim.cpp
+++ b/engine/sim/sim.cpp
@@ -4492,14 +4492,8 @@ void sim_t::abort()
 /// add chart to sim for end of report processing
 void sim_t::add_chart_data( const highchart::chart_t& chart )
 {
-  if ( chart.toggle_id_str_.empty() )
-  {
-    on_ready_chart_data.push_back( chart.to_aggregate_string( false ) );
-  }
-  else
-  {
-    chart_data[ chart.toggle_id_str_ ].push_back( chart.to_data() );
-  }
+  // the report script renders charts with an empty toggle id once their target div is in the DOM.
+  chart_data[ chart.toggle_id_str_ ].push_back( chart.to_data() );
 }
 
 void sim_t::print_spell_query()
diff --git a/engine/sim/sim.hpp b/engine/sim/sim.hpp
index f9c88a483df..ef5e29e25e5 100644
--- a/engine/sim/sim.hpp
+++ b/engine/sim/sim.hpp
@@ -609,12 +609,9 @@ struct sim_t : private sc_thread_t
 
   // Highcharts stuff
 
-  // Vector of on-ready charts. These receive individual jQuery handlers in the HTML report (at the
-  // end of the report) to load the highcharts into the target div.
-  std::vector<std::string> on_ready_chart_data;
-
   // A map of highcharts data, added as a json object into the HTML report. JQuery installs handlers
-  // to correct elements (toggled elements in the HTML report) based on the data.
+  // to correct elements (toggled elements in the HTML report) based on the data. Charts with no toggle
+  // are grouped under the empty-string key and rendered as soon as their target div is in the DOM.
   std::map<std::string, std::vector<std::string> > chart_data;
 
   bool chart_show_relative_difference;