Diffstat (limited to 'flamegraph.svg')
| -rw-r--r-- | flamegraph.svg | 491 |
1 files changed, 491 insertions, 0 deletions
diff --git a/flamegraph.svg b/flamegraph.svg new file mode 100644 index 0000000..ccb5eab --- /dev/null +++ b/flamegraph.svg @@ -0,0 +1,491 @@ +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" width="1200" height="118" onload="init(evt)" viewBox="0 0 1200 118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:fg="http://github.com/jonhoo/inferno"><!--Flame graph stack visualization. See https://github.com/brendangregg/FlameGraph for latest version, and http://www.brendangregg.com/flamegraphs.html for examples.--><!--NOTES: --><defs><linearGradient id="background" y1="0" y2="1" x1="0" x2="0"><stop stop-color="#eeeeee" offset="5%"/><stop stop-color="#eeeeb0" offset="95%"/></linearGradient></defs><style type="text/css"> +text { font-family:monospace; font-size:12px } +#title { text-anchor:middle; font-size:17px; } +#matched { text-anchor:end; } +#search { text-anchor:end; opacity:0.1; cursor:pointer; } +#search:hover, #search.show { opacity:1; } +#subtitle { text-anchor:middle; font-color:rgb(160,160,160); } +#unzoom { cursor:pointer; } +#frames > *:hover { stroke:black; stroke-width:0.5; cursor:pointer; } +.hide { display:none; } +.parent { opacity:0.5; } +</style><script type="text/ecmascript"><![CDATA[ + var nametype = 'Function:'; + var fontsize = 12; + var fontwidth = 0.59; + var xpad = 10; + var inverted = false; + var searchcolor = 'rgb(230,0,230)'; + var fluiddrawing = true; + var truncate_text_right = false; + ]]><![CDATA["use strict"; +var details, searchbtn, unzoombtn, matchedtxt, svg, searching, frames, known_font_width; +function init(evt) { + details = document.getElementById("details").firstChild; + searchbtn = document.getElementById("search"); + unzoombtn = document.getElementById("unzoom"); + matchedtxt = document.getElementById("matched"); + svg = document.getElementsByTagName("svg")[0]; + frames = document.getElementById("frames"); + known_font_width = get_monospace_width(frames); + total_samples = parseInt(frames.attributes.total_samples.value); + searching = 0; + + // Use GET parameters to restore a flamegraph's state. + var restore_state = function() { + var params = get_params(); + if (params.x && params.y) + zoom(find_group(document.querySelector('[*|x="' + params.x + '"][y="' + params.y + '"]'))); + if (params.s) + search(params.s); + }; + + if (fluiddrawing) { + // Make width dynamic so the SVG fits its parent's width. + svg.removeAttribute("width"); + // Edge requires us to have a viewBox that gets updated with size changes. + var isEdge = /Edge\/\d./i.test(navigator.userAgent); + if (!isEdge) { + svg.removeAttribute("viewBox"); + } + var update_for_width_change = function() { + if (isEdge) { + svg.attributes.viewBox.value = "0 0 " + svg.width.baseVal.value + " " + svg.height.baseVal.value; + } + + // Keep consistent padding on left and right of frames container. + frames.attributes.width.value = svg.width.baseVal.value - xpad * 2; + + // Text truncation needs to be adjusted for the current width. + update_text_for_elements(frames.children); + + // Keep search elements at a fixed distance from right edge. + var svgWidth = svg.width.baseVal.value; + searchbtn.attributes.x.value = svgWidth - xpad; + matchedtxt.attributes.x.value = svgWidth - xpad; + }; + window.addEventListener('resize', function() { + update_for_width_change(); + }); + // This needs to be done asynchronously for Safari to work. + setTimeout(function() { + unzoom(); + update_for_width_change(); + restore_state(); + }, 0); + } else { + restore_state(); + } +} +// event listeners +window.addEventListener("click", function(e) { + var target = find_group(e.target); + if (target) { + if (target.nodeName == "a") { + if (e.ctrlKey === false) return; + e.preventDefault(); + } + if (target.classList.contains("parent")) unzoom(); + zoom(target); + + // set parameters for zoom state + var el = target.querySelector("rect"); + if (el && el.attributes && el.attributes.y && el.attributes["fg:x"]) { + var params = get_params() + params.x = el.attributes["fg:x"].value; + params.y = el.attributes.y.value; + history.replaceState(null, null, parse_params(params)); + } + } + else if (e.target.id == "unzoom") { + unzoom(); + + // remove zoom state + var params = get_params(); + if (params.x) delete params.x; + if (params.y) delete params.y; + history.replaceState(null, null, parse_params(params)); + } + else if (e.target.id == "search") search_prompt(); +}, false) +// mouse-over for info +// show +window.addEventListener("mouseover", function(e) { + var target = find_group(e.target); + if (target) details.nodeValue = nametype + " " + g_to_text(target); +}, false) +// clear +window.addEventListener("mouseout", function(e) { + var target = find_group(e.target); + if (target) details.nodeValue = ' '; +}, false) +// ctrl-F for search +window.addEventListener("keydown",function (e) { + if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) { + e.preventDefault(); + search_prompt(); + } +}, false) +// functions +function get_params() { + var params = {}; + var paramsarr = window.location.search.substr(1).split('&'); + for (var i = 0; i < paramsarr.length; ++i) { + var tmp = paramsarr[i].split("="); + if (!tmp[0] || !tmp[1]) continue; + params[tmp[0]] = decodeURIComponent(tmp[1]); + } + return params; +} +function parse_params(params) { + var uri = "?"; + for (var key in params) { + uri += key + '=' + encodeURIComponent(params[key]) + '&'; + } + if (uri.slice(-1) == "&") + uri = uri.substring(0, uri.length - 1); + if (uri == '?') + uri = window.location.href.split('?')[0]; + return uri; +} +function find_child(node, selector) { + var children = node.querySelectorAll(selector); + if (children.length) return children[0]; + return; +} +function find_group(node) { + var parent = node.parentElement; + if (!parent) return; + if (parent.id == "frames") return node; + return find_group(parent); +} +function orig_save(e, attr, val) { + if (e.attributes["fg:orig_" + attr] != undefined) return; + if (e.attributes[attr] == undefined) return; + if (val == undefined) val = e.attributes[attr].value; + e.setAttribute("fg:orig_" + attr, val); +} +function orig_load(e, attr) { + if (e.attributes["fg:orig_"+attr] == undefined) return; + e.attributes[attr].value = e.attributes["fg:orig_" + attr].value; + e.removeAttribute("fg:orig_" + attr); +} +function g_to_text(e) { + var text = find_child(e, "title").firstChild.nodeValue; + return (text) +} +function g_to_func(e) { + var func = g_to_text(e); + // if there's any manipulation we want to do to the function + // name before it's searched, do it here before returning. + return (func); +} +function get_monospace_width(frames) { + // Given the id="frames" element, return the width of text characters if + // this is a monospace font, otherwise return 0. + text = find_child(frames.children[0], "text"); + originalContent = text.textContent; + text.textContent = "!"; + bangWidth = text.getComputedTextLength(); + text.textContent = "W"; + wWidth = text.getComputedTextLength(); + text.textContent = originalContent; + if (bangWidth === wWidth) { + return bangWidth; + } else { + return 0; + } +} +function update_text_for_elements(elements) { + // In order to render quickly in the browser, you want to do one pass of + // reading attributes, and one pass of mutating attributes. See + // https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/ for details. + + // Fall back to inefficient calculation, if we're variable-width font. + // TODO This should be optimized somehow too. + if (known_font_width === 0) { + for (var i = 0; i < elements.length; i++) { + update_text(elements[i]); + } + return; + } + + var textElemNewAttributes = []; + for (var i = 0; i < elements.length; i++) { + var e = elements[i]; + var r = find_child(e, "rect"); + var t = find_child(e, "text"); + var w = parseFloat(r.attributes.width.value) * frames.attributes.width.value / 100 - 3; + var txt = find_child(e, "title").textContent.replace(/\([^(]*\)$/,""); + var newX = format_percent((parseFloat(r.attributes.x.value) + (100 * 3 / frames.attributes.width.value))); + + // Smaller than this size won't fit anything + if (w < 2 * known_font_width) { + textElemNewAttributes.push([newX, ""]); + continue; + } + + // Fit in full text width + if (txt.length * known_font_width < w) { + textElemNewAttributes.push([newX, txt]); + continue; + } + + var substringLength = Math.floor(w / known_font_width) - 2; + if (truncate_text_right) { + // Truncate the right side of the text. + textElemNewAttributes.push([newX, txt.substring(0, substringLength) + ".."]); + continue; + } else { + // Truncate the left side of the text. + textElemNewAttributes.push([newX, ".." + txt.substring(txt.length - substringLength, txt.length)]); + continue; + } + } + + console.assert(textElemNewAttributes.length === elements.length, "Resize failed, please file a bug at https://github.com/jonhoo/inferno/"); + + // Now that we know new textContent, set it all in one go so we don't refresh a bazillion times. + for (var i = 0; i < elements.length; i++) { + var e = elements[i]; + var values = textElemNewAttributes[i]; + var t = find_child(e, "text"); + t.attributes.x.value = values[0]; + t.textContent = values[1]; + } +} + +function update_text(e) { + var r = find_child(e, "rect"); + var t = find_child(e, "text"); + var w = parseFloat(r.attributes.width.value) * frames.attributes.width.value / 100 - 3; + var txt = find_child(e, "title").textContent.replace(/\([^(]*\)$/,""); + t.attributes.x.value = format_percent((parseFloat(r.attributes.x.value) + (100 * 3 / frames.attributes.width.value))); + + // Smaller than this size won't fit anything + if (w < 2 * fontsize * fontwidth) { + t.textContent = ""; + return; + } + t.textContent = txt; + // Fit in full text width + if (t.getComputedTextLength() < w) + return; + if (truncate_text_right) { + // Truncate the right side of the text. + for (var x = txt.length - 2; x > 0; x--) { + if (t.getSubStringLength(0, x + 2) <= w) { + t.textContent = txt.substring(0, x) + ".."; + return; + } + } + } else { + // Truncate the left side of the text. + for (var x = 2; x < txt.length; x++) { + if (t.getSubStringLength(x - 2, txt.length) <= w) { + t.textContent = ".." + txt.substring(x, txt.length); + return; + } + } + } + t.textContent = ""; +} +// zoom +function zoom_reset(e) { + if (e.tagName == "rect") { + e.attributes.x.value = format_percent(100 * parseInt(e.attributes["fg:x"].value) / total_samples); + e.attributes.width.value = format_percent(100 * parseInt(e.attributes["fg:w"].value) / total_samples); + } + if (e.childNodes == undefined) return; + for(var i = 0, c = e.childNodes; i < c.length; i++) { + zoom_reset(c[i]); + } +} +function zoom_child(e, x, zoomed_width_samples) { + if (e.tagName == "text") { + var parent_x = parseFloat(find_child(e.parentNode, "rect[x]").attributes.x.value); + e.attributes.x.value = format_percent(parent_x + (100 * 3 / frames.attributes.width.value)); + } else if (e.tagName == "rect") { + e.attributes.x.value = format_percent(100 * (parseInt(e.attributes["fg:x"].value) - x) / zoomed_width_samples); + e.attributes.width.value = format_percent(100 * parseInt(e.attributes["fg:w"].value) / zoomed_width_samples); + } + if (e.childNodes == undefined) return; + for(var i = 0, c = e.childNodes; i < c.length; i++) { + zoom_child(c[i], x, zoomed_width_samples); + } +} +function zoom_parent(e) { + if (e.attributes) { + if (e.attributes.x != undefined) { + e.attributes.x.value = "0.0%"; + } + if (e.attributes.width != undefined) { + e.attributes.width.value = "100.0%"; + } + } + if (e.childNodes == undefined) return; + for(var i = 0, c = e.childNodes; i < c.length; i++) { + zoom_parent(c[i]); + } +} +function zoom(node) { + var attr = find_child(node, "rect").attributes; + var width = parseInt(attr["fg:w"].value); + var xmin = parseInt(attr["fg:x"].value); + var xmax = xmin + width; + var ymin = parseFloat(attr.y.value); + unzoombtn.classList.remove("hide"); + var el = frames.children; + var to_update_text = []; + for (var i = 0; i < el.length; i++) { + var e = el[i]; + var a = find_child(e, "rect").attributes; + var ex = parseInt(a["fg:x"].value); + var ew = parseInt(a["fg:w"].value); + // Is it an ancestor + if (!inverted) { + var upstack = parseFloat(a.y.value) > ymin; + } else { + var upstack = parseFloat(a.y.value) < ymin; + } + if (upstack) { + // Direct ancestor + if (ex <= xmin && (ex+ew) >= xmax) { + e.classList.add("parent"); + zoom_parent(e); + to_update_text.push(e); + } + // not in current path + else + e.classList.add("hide"); + } + // Children maybe + else { + // no common path + if (ex < xmin || ex >= xmax) { + e.classList.add("hide"); + } + else { + zoom_child(e, xmin, width); + to_update_text.push(e); + } + } + } + update_text_for_elements(to_update_text); +} +function unzoom() { + unzoombtn.classList.add("hide"); + var el = frames.children; + for(var i = 0; i < el.length; i++) { + el[i].classList.remove("parent"); + el[i].classList.remove("hide"); + zoom_reset(el[i]); + } + update_text_for_elements(el); +} +// search +function reset_search() { + var el = document.querySelectorAll("#frames rect"); + for (var i = 0; i < el.length; i++) { + orig_load(el[i], "fill") + } + var params = get_params(); + delete params.s; + history.replaceState(null, null, parse_params(params)); +} +function search_prompt() { + if (!searching) { + var term = prompt("Enter a search term (regexp " + + "allowed, eg: ^ext4_)", ""); + if (term != null) { + search(term) + } + } else { + reset_search(); + searching = 0; + searchbtn.classList.remove("show"); + searchbtn.firstChild.nodeValue = "Search" + matchedtxt.classList.add("hide"); + matchedtxt.firstChild.nodeValue = "" + } +} +function search(term) { + var re = new RegExp(term); + var el = frames.children; + var matches = new Object(); + var maxwidth = 0; + for (var i = 0; i < el.length; i++) { + var e = el[i]; + // Skip over frames which are either not visible, or below the zoomed-to frame + if (e.classList.contains("hide") || e.classList.contains("parent")) { + continue; + } + var func = g_to_func(e); + var rect = find_child(e, "rect"); + if (func == null || rect == null) + continue; + // Save max width. Only works as we have a root frame + var w = parseInt(rect.attributes["fg:w"].value); + if (w > maxwidth) + maxwidth = w; + if (func.match(re)) { + // highlight + var x = parseInt(rect.attributes["fg:x"].value); + orig_save(rect, "fill"); + rect.attributes.fill.value = searchcolor; + // remember matches + if (matches[x] == undefined) { + matches[x] = w; + } else { + if (w > matches[x]) { + // overwrite with parent + matches[x] = w; + } + } + searching = 1; + } + } + if (!searching) + return; + var params = get_params(); + params.s = term; + history.replaceState(null, null, parse_params(params)); + + searchbtn.classList.add("show"); + searchbtn.firstChild.nodeValue = "Reset Search"; + // calculate percent matched, excluding vertical overlap + var count = 0; + var lastx = -1; + var lastw = 0; + var keys = Array(); + for (k in matches) { + if (matches.hasOwnProperty(k)) + keys.push(k); + } + // sort the matched frames by their x location + // ascending, then width descending + keys.sort(function(a, b){ + return a - b; + }); + // Step through frames saving only the biggest bottom-up frames + // thanks to the sort order. This relies on the tree property + // where children are always smaller than their parents. + for (var k in keys) { + var x = parseInt(keys[k]); + var w = matches[keys[k]]; + if (x >= lastx + lastw) { + count += w; + lastx = x; + lastw = w; + } + } + // display matched percent + matchedtxt.classList.remove("hide"); + var pct = 100 * count / maxwidth; + if (pct != 100) pct = pct.toFixed(1); + matchedtxt.firstChild.nodeValue = "Matched: " + pct + "%"; +} +function format_percent(n) { + return n.toFixed(4) + "%"; +} +]]></script><rect x="0" y="0" width="100%" height="118" fill="url(#background)"/><text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text><text id="details" fill="rgb(0,0,0)" x="10" y="101.00"> </text><text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text><text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text><text id="matched" fill="rgb(0,0,0)" x="1190" y="101.00"> </text><svg id="frames" x="10" width="1180" total_samples="1163"><g><title><alloc::vec::Vec<T> as alloc::vec::spec_from_iter::SpecFromIter<T,I>>::from_iter (23 samples, 1.98%)</title><rect x="0.0000%" y="37" width="1.9776%" height="15" fill="rgb(227,0,7)" fg:x="0" fg:w="23"/><text x="0.2500%" y="47.50"><..</text></g><g><title>[ld-linux-x86-64.so.2] (2 samples, 0.17%)</title><rect x="1.9776%" y="37" width="0.1720%" height="15" fill="rgb(217,0,24)" fg:x="23" fg:w="2"/><text x="2.2276%" y="47.50"></text></g><g><title>[libc.so.6] (16 samples, 1.38%)</title><rect x="2.1496%" y="37" width="1.3758%" height="15" fill="rgb(221,193,54)" fg:x="25" fg:w="16"/><text x="2.3996%" y="47.50"></text></g><g><title>[unknown] (8 samples, 0.69%)</title><rect x="3.5254%" y="37" width="0.6879%" height="15" fill="rgb(248,212,6)" fg:x="41" fg:w="8"/><text x="3.7754%" y="47.50"></text></g><g><title>__cpu_indicator_init@GCC_4.8.0 (1 samples, 0.09%)</title><rect x="4.2132%" y="37" width="0.0860%" height="15" fill="rgb(208,68,35)" fg:x="49" fg:w="1"/><text x="4.4632%" y="47.50"></text></g><g><title>crc32fast::Hasher::update (2 samples, 0.17%)</title><rect x="4.2992%" y="37" width="0.1720%" height="15" fill="rgb(232,128,0)" fg:x="50" fg:w="2"/><text x="4.5492%" y="47.50"></text></g><g><title>fdeflate::compress::Compressor<W>::write_data (20 samples, 1.72%)</title><rect x="4.4712%" y="37" width="1.7197%" height="15" fill="rgb(207,160,47)" fg:x="52" fg:w="20"/><text x="4.7212%" y="47.50"></text></g><g><title>fdeflate::compress::Compressor<W>::write_run (6 samples, 0.52%)</title><rect x="6.1909%" y="37" width="0.5159%" height="15" fill="rgb(228,23,34)" fg:x="72" fg:w="6"/><text x="6.4409%" y="47.50"></text></g><g><title>fdeflate::decompress::Decompressor::read (65 samples, 5.59%)</title><rect x="6.7068%" y="37" width="5.5890%" height="15" fill="rgb(218,30,26)" fg:x="78" fg:w="65"/><text x="6.9568%" y="47.50">fdeflat..</text></g><g><title>fdeflate::huffman::build_table (8 samples, 0.69%)</title><rect x="12.2958%" y="37" width="0.6879%" height="15" fill="rgb(220,122,19)" fg:x="143" fg:w="8"/><text x="12.5458%" y="47.50"></text></g><g><title>fimg::convert::f32s_to_u8s (63 samples, 5.42%)</title><rect x="12.9837%" y="37" width="5.4170%" height="15" fill="rgb(250,228,42)" fg:x="151" fg:w="63"/><text x="13.2337%" y="47.50">fimg::c..</text></g><g><title>fimg::convert::mapping (26 samples, 2.24%)</title><rect x="18.4007%" y="37" width="2.2356%" height="15" fill="rgb(240,193,28)" fg:x="214" fg:w="26"/><text x="18.6507%" y="47.50">f..</text></g><g><title>fimg::convert::u8s_to_f32s (5 samples, 0.43%)</title><rect x="20.6363%" y="37" width="0.4299%" height="15" fill="rgb(216,20,37)" fg:x="240" fg:w="5"/><text x="20.8863%" y="47.50"></text></g><g><title>png::decoder::transform::expand_trns_line (15 samples, 1.29%)</title><rect x="21.0662%" y="37" width="1.2898%" height="15" fill="rgb(206,188,39)" fg:x="245" fg:w="15"/><text x="21.3162%" y="47.50"></text></g><g><title>png::filter::filter_internal (2 samples, 0.17%)</title><rect x="22.3560%" y="37" width="0.1720%" height="15" fill="rgb(217,207,13)" fg:x="260" fg:w="2"/><text x="22.6060%" y="47.50"></text></g><g><title>png::filter::unfilter (4 samples, 0.34%)</title><rect x="22.5279%" y="37" width="0.3439%" height="15" fill="rgb(231,73,38)" fg:x="262" fg:w="4"/><text x="22.7779%" y="47.50"></text></g><g><title>remapper::kd::KDNode::find_nearest (895 samples, 76.96%)</title><rect x="22.8719%" y="37" width="76.9561%" height="15" fill="rgb(225,20,46)" fg:x="266" fg:w="895"/><text x="23.1219%" y="47.50">remapper::kd::KDNode::find_nearest</text></g><g><title>simd_adler32::imp::avx2::imp::update (1 samples, 0.09%)</title><rect x="99.8280%" y="37" width="0.0860%" height="15" fill="rgb(210,31,41)" fg:x="1161" fg:w="1"/><text x="100.0780%" y="47.50"></text></g><g><title>all (1,163 samples, 100%)</title><rect x="0.0000%" y="69" width="100.0000%" height="15" fill="rgb(221,200,47)" fg:x="0" fg:w="1163"/><text x="0.2500%" y="79.50"></text></g><g><title>remapper (1,163 samples, 100.00%)</title><rect x="0.0000%" y="53" width="100.0000%" height="15" fill="rgb(226,26,5)" fg:x="0" fg:w="1163"/><text x="0.2500%" y="63.50">remapper</text></g><g><title>std::sys::sync::once::futex::Once::call (1 samples, 0.09%)</title><rect x="99.9140%" y="37" width="0.0860%" height="15" fill="rgb(249,33,26)" fg:x="1162" fg:w="1"/><text x="100.1640%" y="47.50"></text></g></svg></svg>
\ No newline at end of file |
