Permalink
Browse files

Added major improvements regarding browser performance when opening h…

…eavy HTML stack trace pages:

- using padding instead of non-breakable spaces (doh!)
- reduced white lines and white space
- added a threshold (< 0.001s) for folding calls at default and rendering its 'child calls' as comment (see http://ravirajsblog.blogspot.nl/2010/12/another-hack-to-render-heavy-html-pages.html)
- parsing commented 'child calls' at initial unfold
  • Loading branch information...
Paul Engel
Paul Engel committed Aug 25, 2012
1 parent 986bcc4 commit 0bb49669015b44cd24715988bf9f7e4cf03a5dad
Showing with 78 additions and 70 deletions.
  1. +15 −0 ui/assets/comments.js
  2. +3 −7 ui/assets/stack_tracy.css
  3. +7 −1 ui/assets/stack_tracy.js
  4. +53 −62 ui/index.html.erb
View
@@ -0,0 +1,15 @@
+jQuery.fn.comments = function() {
+ var comments = [];
+
+ this.each(function(i, node) {
+ var child = node.firstChild;
+ while (child) {
+ if (child.nodeType === 8) {
+ comments.push(child.nodeValue);
+ }
+ child = child.nextSibling;
+ }
+ });
+
+ return comments;
+};
View
@@ -72,8 +72,8 @@ a {
#page .tab-pane div span.average,
#page .tab-pane div span.duration,
#page .tab-pane div span.count {
- width: 100px;
- padding-right: 15px;
+ width: 70px;
+ padding-right: 20px;
text-align: right;
display: -moz-inline-block;
display: inline-block;
@@ -82,17 +82,13 @@ a {
#page .tab-pane div span.call {
width: 950px;
- padding-left: 15px;
display: -moz-inline-block;
display: inline-block;
*display: inline;
zoom: 1; }
#page #cumulatives div span.count {
- width: 65px; }
-
-#page #cumulatives div span.call {
- width: 790px; }
+ width: 45px; }
#footer {
padding-top: 45px;
View
@@ -4,7 +4,13 @@ StackTracy = (function() {
var sortation = [];
var toggle = function(event) {
- $(event.target).closest("div").next("div.group").toggle();
+ var group = $(event.target).closest("div").next("div.group");
+ var comments = group.comments();
+ if (comments.length) {
+ group.html(comments.join("\n"));
+ } else {
+ group.toggle();
+ }
};
$(function() {
View
@@ -8,6 +8,7 @@
<script src="assets/jquery.js" type="text/javascript"></script>
<script src="assets/bootstrap-tab.js" type="text/javascript"></script>
<script src="assets/tiny_sort.js" type="text/javascript"></script>
+ <script src="assets/comments.js" type="text/javascript"></script>
<script src="assets/stack_tracy.js" type="text/javascript"></script>
<link href="assets/bootstrap-tab.css" type="text/css" rel="stylesheet" media="screen"/>
<link href="assets/stack_tracy.css" type="text/css" rel="stylesheet" media="screen"/>
@@ -26,26 +27,25 @@
<a href="#cumulatives" data-toggle="tab">Cumulatives</a>
</li>
</ul>
- <div class="tab-content">
- <%
- current_depth = 0
- excluded_objects = if events.size > 7500
- %w(Array BasicObject Enumerable Fixnum Float Hash IO Kernel Module Mutex Numeric Object Rational String Symbol Thread Time)
- else
- []
- end
- corrections = []
- cumulatives = {}
- %>
+ <div class="tab-content"><%
+ comment_depth = nil
+ last_depth = nil
+ last_duration = nil
+ excluded_objects = if events.size > 7500
+ %w(Array BasicObject Enumerable Fixnum Float Hash IO Kernel Module Mutex Numeric Object Rational String Symbol Thread Time)
+ else
+ []
+ end
+ corrections = []
+ cumulatives = {} %>
<div class="tab-pane active" id="stack_trace">
<div class="head">
<span class="time">Time</span>
<span class="duration">Duration</span>
<span class="call">Call</span>
</div>
- <div class="body">
- <% events.each_with_index do |event, index| %>
- <%
+ <div class="body"><%
+ events.each_with_index do |event, index|
skip = excluded_objects.include?(event[:object]) || "#{event[:object]}".match(/^#/)
cumulatives[event[:call]] ||= {:duration => 0.0, :count => 0}
cumulatives[event[:call]][:duration] += event[:duration].to_f
@@ -54,37 +54,38 @@
corrections.size.times do |i|
event[:depth] <= corrections[0] ? corrections.shift : break
end
- %>
- <% if skip %>
- <% corrections.unshift event[:depth] if corrections.empty? || corrections.first != event[:depth] %>
- <% else %>
- <% if current_depth < event[:depth] - corrections.size %>
- <div class="group">
- <% elsif current_depth > event[:depth] - corrections.size %>
- <%= "</div>" * (current_depth - (event[:depth] - corrections.size)) %>
- <% end %>
- <div>
- <span class="time">
- <%= "%.6f" % event[:time] %>
- </span>
- <span class="duration">
- <%= event[:duration] ? ("%.6f" % event[:duration]) : "?" %>
- </span>
- <span class="call">
- <%= "&nbsp;&nbsp;&nbsp;" * (event[:depth] - corrections.size) %>
- <% if (next_event = events[index + 1]) && next_event[:depth] > event[:depth] %>
- <a class="toggler" href="#" onclick="return false">
- <%= event[:call] %>
- </a>
- <% else %>
- <%= event[:call] %>
- <% end %>
- </span>
- </div>
- <% current_depth = event[:depth] - corrections.size %>
- <% end %>
- <% end %>
- <%= "</div>" * current_depth %>
+if skip
+corrections.unshift event[:depth] if corrections.empty? || corrections.first != event[:depth]
+else
+if last_depth.to_i < event[:depth] - corrections.size %>
+<div class="group"><% if comment_depth.nil? && last_duration && last_duration < 0.001 %><% comment_depth = event[:depth] %><%= "\n<!--" %><% end %><% else
+close_tags = ((event[:depth] - corrections.size + 1)..last_depth.to_i).collect do |depth|
+ if depth == comment_depth
+ comment_depth = nil
+ "-->\n</div>"
+ else
+ "</div>"
+ end
+end.reverse.join("\n")
+%><%= close_tags %><% end %>
+<div>
+<span class="time"><%= "%.6f" % event[:time] %></span>
+<span class="duration"><%= event[:duration] ? ("%.6f" % event[:duration]) : "?" %></span>
+<span style="padding-left: <%= 10 * (event[:depth] - corrections.size) %>px"><% if (next_event = events[index + 1]) && next_event[:depth] > event[:depth] %><a class="toggler" href="#" onclick="return false"><%= event[:call] %></a><% else %><%= event[:call] %><% end %></span>
+</div><%
+last_depth = event[:depth] - corrections.size
+last_duration = event[:duration]
+end
+end
+close_tags = (1..last_depth.to_i).collect do |depth|
+ if depth == comment_depth
+ comment_depth = nil
+ "-->\n</div>"
+ else
+ "</div>"
+ end
+end.reverse.join("\n")
+%><%= close_tags %>
</div>
</div>
<div class="tab-pane" id="cumulatives">
@@ -94,23 +95,13 @@
<span class="count"><a href="javascript:StackTracy.sort(2)">Count</a></span>
<span class="call"><a href="javascript:StackTracy.sort(3)">Call</a></span>
</div>
- <div class="body">
- <% cumulatives.sort{|(ak, av), (bk, bv)| bv[:average] <=> av[:average]}.each do |call, stats| %>
- <div>
- <span class="average" abbr="<%= "%.6f" % stats[:average] %>">
- <%= "%.6f" % stats[:average] %>
- </span>
- <span class="duration" abbr="<%= "%.6f" % stats[:duration] %>">
- <%= "%.6f" % stats[:duration] %>
- </span>
- <span class="count" abbr="<%= stats[:count] %>">
- <%= stats[:count] %>
- </span>
- <span class="call" abbr="<%= call.gsub("<", "&lt;").gsub(">", "&gt;") %>">
- <%= call.gsub("<", "&lt;").gsub(">", "&gt;") %>
- </span>
- </div>
- <% end %>
+ <div class="body"><% cumulatives.sort{|(ak, av), (bk, bv)| bv[:average] <=> av[:average]}.each do |call, stats| %>
+<div>
+<span class="average" abbr="<%= "%.6f" % stats[:average] %>"><%= "%.6f" % stats[:average] %></span>
+<span class="duration" abbr="<%= "%.6f" % stats[:duration] %>"><%= "%.6f" % stats[:duration] %></span>
+<span class="count" abbr="<%= stats[:count] %>"><%= stats[:count] %></span>
+<span class="call" abbr="<%= call.gsub("<", "&lt;").gsub(">", "&gt;") %>"><%= call.gsub("<", "&lt;").gsub(">", "&gt;") %></span>
+</div><% end %>
</div>
</div>
</div>

0 comments on commit 0bb4966

Please sign in to comment.