| OLD | NEW |
|---|
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <title>Chromium Perf Tracker</title> |
| 4 <link rel="stylesheet" href="styles/style.css"> |
| 5 <script src="scripts/util.js"></script> |
| 6 <script src="jst/util.js" type="text/javascript"></script> |
| 7 <script src="jst/jsevalcontext.js" type="text/javascript"></script> |
| 8 <script src="jst/jstemplate.js" type="text/javascript"></script> |
| 9 <script type="text/javascript" src="https://www.google.com/jsapi"></script> |
| 10 </head> |
| 11 |
| 12 <body onload="loadData()"> |
| 13 <h1><div id="header">Chromium Page Tracker View Test Set</div></h1> |
| 14 |
| 15 <script> |
| 16 var datas = []; |
| 17 var metricTitles = { |
| 18 num_connects: "Number of connections", |
| 19 num_requests: "Number of requests", |
| 20 read_bytes_kb: "KB downloaded", |
| 21 write_bytes_kb: "KB uploaded", |
| 22 dns_time: "Root DNS Complete", |
| 23 connect_time: "Root Connection Established", |
| 24 first_byte_time: "Root Document First Byte Received", |
| 25 last_byte_time: "Root Document Last Byte Received", |
| 26 paint_time: "First Paint Time", |
| 27 doc_load_time: "DOM readyState Interactive", |
| 28 dcl_time: "DOMContendLoaded Event", |
| 29 total_time: "Page Load Time", |
| 30 }; |
| 31 |
| 32 function getName(allObjs, obj) { |
| 33 var date = obj.obj.date; |
| 34 var cpu = obj.cpu.cpu; |
| 35 var network = obj.network.network_type; |
| 36 var notes = obj.obj.notes; |
| 37 var use_date = false; |
| 38 var use_cpu = false; |
| 39 var use_network = false; |
| 40 var use_notes = false; |
| 41 for (var i = 0; i < allObjs.length; i++) { |
| 42 use_date |= date != allObjs[i].obj.date; |
| 43 use_cpu |= cpu != allObjs[i].cpu.cpu; |
| 44 use_network |= network != allObjs[i].network.network_type; |
| 45 use_notes |= notes != allObjs[i].obj.notes; |
| 46 } |
| 47 var parts = []; |
| 48 if (use_date) parts.push(date); |
| 49 if (use_cpu) parts.push(cpu); |
| 50 if (use_network) parts.push(network); |
| 51 if (use_notes) parts.push(notes); |
| 52 return parts.join(' '); |
| 53 } |
| 54 |
| 55 function loadData() { |
| 56 var baseUrl = "/json?type=set"; |
| 57 var set_ids = location.queryString()["id"]; |
| 58 if (set_ids == undefined) { |
| 59 alert("missing id="); |
| 60 return; |
| 61 } |
| 62 set_ids = set_ids.split(","); |
| 63 for (var i = 0; i < set_ids.length; i++) { |
| 64 var url = baseUrl + "&id=" + set_ids[i]; |
| 65 new XHRGet(url, function(result) { |
| 66 datas.push(JSON.parse(result)); |
| 67 if (datas.length == set_ids.length) { |
| 68 var metric = getParams()["metric"] || "total_time"; |
| 69 setSelectValue("metric", metric) |
| 70 compareMetric(datas, metric, metricTitles[metric]); |
| 71 } |
| 72 }); |
| 73 } |
| 74 } |
| 75 |
| 76 function compareMetric(datas, metric, title) { |
| 77 var cols = []; |
| 78 var sets = []; |
| 79 |
| 80 var rows = []; |
| 81 var isSignificants = []; |
| 82 var deltaConfidenceIntervals = []; |
| 83 |
| 84 cols.push('URL'); |
| 85 var url_map = {}; |
| 86 for (var i = 0; i < datas.length; i++) { |
| 87 var result = datas[i]; |
| 88 cols.push(getName(datas, result)); |
| 89 sets.push(result.summaries[0].set); |
| 90 for (var j = 0; j < result.summaries.length; j++) { |
| 91 var url = result.summaries[j].url; |
| 92 if (!url_map[url]) |
| 93 url_map[url] = { |
| 94 avgs: [url], |
| 95 iterations: [url], |
| 96 stddevs: [url], |
| 97 }; |
| 98 url_map[url].avgs.push(result.summaries[j][metric]); |
| 99 url_map[url].iterations.push(result.summaries[j].iterations); |
| 100 // TODO(tonyg): The stddev is only stored for total_time. Do this for |
| 101 // others as well. |
| 102 if (metric == "total_time") { |
| 103 url_map[url].stddevs.push(result.summaries[j].total_time_stddev); |
| 104 } |
| 105 } |
| 106 } |
| 107 for (var url in url_map) { |
| 108 var obj = url_map[url]; |
| 109 if (obj.avgs.length != cols.length) continue; |
| 110 rows.push(obj.avgs); |
| 111 if (obj.stddevs.length == 3) { |
| 112 var deltaCi = getDeltaConfidenceInterval( |
| 113 obj.avgs[1], obj.stddevs[1], obj.iterations[1], |
| 114 obj.avgs[2], obj.stddevs[2], obj.iterations[2]); |
| 115 deltaConfidenceIntervals.push(deltaCi); |
| 116 isSignificants.push(!!deltaCi); |
| 117 } |
| 118 } |
| 119 drawTable(cols, sets, rows, isSignificants, deltaConfidenceIntervals); |
| 120 drawChart(cols, rows, title); |
| 121 } |
| 122 |
| 123 function drawTable(cols, sets, rows, isSignificants, |
| 124 deltaConfidenceIntervals) { |
| 125 var stats = []; |
| 126 for (var i = 0; i < rows.length; i++) { |
| 127 var row = rows[i]; |
| 128 for (var j = 0; j < row.length; j++) { |
| 129 if (!stats[j]) stats[j] = []; |
| 130 stats[j].push(row[j]); |
| 131 } |
| 132 } |
| 133 |
| 134 var rowsWithStats = rows.clone(); |
| 135 if (rows.length > 1) { |
| 136 var mins = ["Min"]; |
| 137 var maxs = ["Max"]; |
| 138 var avgs = ["Average"]; |
| 139 var meds = ["Median"]; |
| 140 for (var i = 1; i < stats.length; i++) { |
| 141 mins.push(stats[i].min()); |
| 142 maxs.push(stats[i].max()); |
| 143 avgs.push(Math.round(stats[i].average())); |
| 144 meds.push(Math.round(stats[i].median())); |
| 145 } |
| 146 rowsWithStats.push(mins); |
| 147 rowsWithStats.push(maxs); |
| 148 rowsWithStats.push(avgs); |
| 149 rowsWithStats.push(meds); |
| 150 } |
| 151 |
| 152 var context = new JsEvalContext({ |
| 153 cols: cols, |
| 154 rows: rowsWithStats, |
| 155 }); |
| 156 context.setVariable('isSignificants', isSignificants); |
| 157 context.setVariable('deltaConfidenceIntervals', deltaConfidenceIntervals); |
| 158 context.setVariable('sets', sets); |
| 159 var template = document.getElementById("template"); |
| 160 jstProcess(context, template); |
| 161 } |
| 162 |
| 163 // http://code.google.com/apis/visualization/documentation/gallery/columncha
rt.html |
| 164 google.load('visualization', '1', {'packages':['corechart']}); |
| 165 |
| 166 function drawChart(cols, rows, title) { |
| 167 var graph_data = new google.visualization.DataTable(); |
| 168 for (var i = 0; i < cols.length; i++) { |
| 169 if (i == 0) |
| 170 graph_data.addColumn('string', cols[i]); |
| 171 else |
| 172 graph_data.addColumn('number', cols[i]); |
| 173 } |
| 174 for (var i = 0; i < rows.length; i++) { |
| 175 graph_data.addRow(rows[i]); |
| 176 } |
| 177 |
| 178 var chart_div = document.getElementById('chart_div'); |
| 179 if (graph_data.getNumberOfRows()) { |
| 180 var chart = new google.visualization.ColumnChart(chart_div); |
| 181 chart.draw(graph_data, {displayAnnotations: true, |
| 182 legend: 'bottom', |
| 183 title: title, |
| 184 hAxis: { |
| 185 title: "URL" |
| 186 }, |
| 187 vAxis: { |
| 188 title: "ms" |
| 189 }, |
| 190 }); |
| 191 google.visualization.events.addListener(chart, 'onmouseover', function(e
) { |
| 192 var tr = document.getElementById('data').rows[e.row+1]; |
| 193 var td = tr.cells[e.column+1]; |
| 194 tr.style.backgroundColor = "#ffe87c"; |
| 195 td.style.backgroundColor = "#fbb117"; |
| 196 }); |
| 197 google.visualization.events.addListener(chart, 'onmouseout', function(e)
{ |
| 198 var tr = document.getElementById('data').rows[e.row+1]; |
| 199 var td = tr.cells[e.column+1]; |
| 200 tr.style.backgroundColor = ""; |
| 201 td.style.backgroundColor = ""; |
| 202 }); |
| 203 |
| 204 } else { |
| 205 chart_div.innerHTML = "No data"; |
| 206 } |
| 207 } |
| 208 |
| 209 function metricChanged() { |
| 210 var metric = getSelectValue("metric"); |
| 211 var params = {}; |
| 212 params["metric"] = metric; |
| 213 setParams(params); |
| 214 compareMetric(datas, metric, metricTitles[metric]); |
| 215 } |
| 216 </script> |
| 217 |
| 218 <div id="template"> |
| 219 Compare: <select id="metric" onchange="metricChanged()"> |
| 220 <option value="num_connects">Number of Connections</option> |
| 221 <option value="num_requests">Number of Requests</option> |
| 222 <option value="read_bytes_kb">KB Downloaded</option> |
| 223 <option value="write_bytes_kb">KB Uploaded</option> |
| 224 <option value="dns_time">Root DNS Complete</option> |
| 225 <option value="connect_time">Root Connection Established</option> |
| 226 <option value="first_byte_time">Root Document First Byte Received</option> |
| 227 <option value="last_byte_time">Root Document Last Byte Received</option> |
| 228 <option value="paint_time">First Paint Time</option> |
| 229 <option value="doc_load_time">DOM readyState Interactive</option> |
| 230 <option value="dcl_time">DOMContendLoaded Event</option> |
| 231 <option value="total_time">Page Load Time</option> |
| 232 </select> <a jsvalues="href:'/do_compare_set?id='+sets.clone().revers
e().join(',')">swap sets</a> |
| 233 |
| 234 <div id="chart_div" style="width:1024px;height:240px"></div> |
| 235 |
| 236 <table class="sortable" id="data"> |
| 237 <tr> |
| 238 <th jsselect="cols"> |
| 239 <span jscontent="$this" jsdisplay="!$index"></span> |
| 240 <a jscontent="$this" jsdisplay="$index" jsvalues="href:'/do_view_set?i
d=' + sets[$index-1]"></a> |
| 241 </th> |
| 242 <th>Delta</th> |
| 243 <th>Percent</th> |
| 244 <th>Delta 95% ci</th> |
| 245 </tr> |
| 246 <tr jsselect="rows" jseval="$delta = $this[2] - $this[1]" jsvalues=".style
.fontWeight:$this[0].indexOf('http:') ? 'bold' : 'normal'"> |
| 247 <td jsselect="summaries"><span jscontent="total_time"></span></td> |
| 248 <!-- TODO(tonyg): Link to details page for each URL. --> |
| 249 <td jsselect="$this" jsvalues="class:$index > 0 ? 'righttext' : ''"><spa
n jscontent="$this"></span></td> |
| 250 <td class="righttext" jscontent="$delta" jsvalues=".style.color:$index >
isSignificants.length - 1 || isSignificants[$index] ? ($delta < 0 ? 'red' : 'bl
ack') : 'gray'"></td> |
| 251 <td class="righttext" jscontent="Math.round(10000 * $delta / $this[1]) /
100 + '%'" jsvalues=".style.color:$index > isSignificants.length - 1 || isSigni
ficants[$index] ? ($delta < 0 ? 'red' : 'black') : 'gray'"></td> |
| 252 <td class="righttext" jscontent="deltaConfidenceIntervals[$index] || ''"
></td> |
| 253 </tr> |
| 254 </table> |
| 255 </div> |
| 256 <div id="footer"> |
| 257 ©2011 Google - <a href="http://code.google.com/p/web-page-replay/wiki
/ChromeBenchmarkMetrics">Metric definitions</a> | <a href="http://code.google.co
m/p/web-page-replay/wiki/ChromeBenchmark">Running the benchmark</a><br> |
| 258 Powered by <a href="http://code.google.com/p/web-page-replay/">Web Page Re
play</a> |
| 259 </div> |
| 260 </body> |
| 261 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 18418010:
Check in the thirdparty libs needed for webkitpy. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk