https://www.redmine.org/
https://www.redmine.org/favicon.ico?1679302129
2019-11-29T09:57:49Z
Redmine
Redmine - Patch #32523: Improve javascript performances on query edition
https://www.redmine.org/issues/32523?journal_id=95063
2019-11-29T09:57:49Z
Stéphane Parunakian
<ul><li><strong>File</strong> <a href="/attachments/24385">javascript-perf2.diff</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/24385/javascript-perf2.diff">javascript-perf2.diff</a> added</li></ul><p>There is a typo in the previous patch. Here is the corrected version.</p>
Redmine - Patch #32523: Improve javascript performances on query edition
https://www.redmine.org/issues/32523?journal_id=95237
2019-12-10T03:20:35Z
Yuichi HARADA
<ul><li><strong>File</strong> <a href="/attachments/24433">execution_speed_measurement.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/24433/execution_speed_measurement.png">execution_speed_measurement.png</a> added</li></ul><p>I changed the <code>for</code> statements of <a class="attachment" href="https://www.redmine.org/attachments/24385">javascript-perf2.diff</a> to <code>forEach</code>.<br /><a class="external" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach</a></p>
<p>I think <code>forEach</code> is better because the loop counter variable becomes unnecessary.</p>
<pre><code class="diff syntaxhl"><span class="gh">diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index e4e902d9c..354185c03 100644
</span><span class="gd">--- a/public/javascripts/application.js
</span><span class="gi">+++ b/public/javascripts/application.js
</span><span class="p">@@ -165,7 +165,7 @@</span> function buildFilterRow(field, operator, values) {
if (!filterOptions) return;
var operators = operatorByType[filterOptions['type']];
var filterValues = filterOptions['values'];
<span class="gd">- var i, select;
</span><span class="gi">+ var select;
</span>
var tr = $('<tr class="filter">').attr('id', 'tr_'+fieldId).html(
'<td class="field"><input checked="checked" id="cb_'+fieldId+'" name="f[]" value="'+field+'" type="checkbox"><label for="cb_'+fieldId+'"> '+filterOptions['name']+'</label></td>' +
<span class="p">@@ -175,11 +175,11 @@</span> function buildFilterRow(field, operator, values) {
filterTable.append(tr);
select = tr.find('td.operator select');
<span class="gd">- for (i = 0; i < operators.length; i++) {
- var option = $('<option>').val(operators[i]).text(operatorLabels[operators[i]]);
- if (operators[i] == operator) { option.prop('selected', true); }
</span><span class="gi">+ operators.forEach(function(op){
+ var option = $('<option>').val(op).text(operatorLabels[op]);
+ if (op == operator) { option.prop('selected', true); }
</span> select.append(option);
<span class="gd">- }
</span><span class="gi">+ });
</span> select.change(function(){ toggleOperator(field); });
switch (filterOptions['type']) {
<span class="p">@@ -193,8 +193,7 @@</span> function buildFilterRow(field, operator, values) {
);
select = tr.find('td.values select');
if (values.length > 1) { select.attr('multiple', true); }
<span class="gd">- for (i = 0; i < filterValues.length; i++) {
- var filterValue = filterValues[i];
</span><span class="gi">+ filterValues.forEach(function(filterValue){
</span> var option = $('<option>');
if ($.isArray(filterValue)) {
option.val(filterValue[1]).text(filterValue[0]);
<span class="p">@@ -209,7 +208,7 @@</span> function buildFilterRow(field, operator, values) {
if ($.inArray(filterValue, values) > -1) {option.prop('selected', true);}
}
select.append(option);
<span class="gd">- }
</span><span class="gi">+ });
</span> break;
case "date":
case "date_past":
<span class="p">@@ -236,13 +235,12 @@</span> function buildFilterRow(field, operator, values) {
);
$('#values_'+fieldId).val(values[0]);
select = tr.find('td.values select');
<span class="gd">- for (i = 0; i < filterValues.length; i++) {
- var filterValue = filterValues[i];
</span><span class="gi">+ filterValues.forEach(function(filterValue){
</span> var option = $('<option>');
option.val(filterValue[1]).text(filterValue[0]);
if (values[0] == filterValue[1]) { option.prop('selected', true); }
select.append(option);
<span class="gd">- }
</span><span class="gi">+ });
</span> break;
case "integer":
case "float":
</code></pre>
<p>I added <strong>200 users</strong> to the project member and compared the execution speed of the Author(author_id) filter. However, there is no significant difference in execution speed.</p>
<p><img src="https://www.redmine.org/attachments/download/24433/execution_speed_measurement.png" style="width:500px;border:1px solid #ccc;" alt="" /></p>
<p>I measured using <code>performance.now()</code> .<br /><a class="external" href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now">https://developer.mozilla.org/en-US/docs/Web/API/Performance/now</a></p>
<table>
<tr>
<td></td>
<th>Firefox</th>
<th>Chrome</th>
<th>Safari</th>
<th>Edge</th>
<th>IE11</th>
</tr>
<tr>
<td>trunk(<a class="changeset" title="Fixed that URL is replaced with "undefined" in IE11 and Edge (#32529). Patch by Marius BALTEANU." href="https://www.redmine.org/projects/redmine/repository/svn/revisions/19347">r19347</a>)</td>
<td>47 ms</td>
<td>24.56499999971129 ms</td>
<td>19 ms</td>
<td>184.20000000000004 ms</td>
<td>264.19999999999993 ms</td>
</tr>
<tr>
<td><a class="attachment" href="https://www.redmine.org/attachments/24385">javascript-perf2.diff</a></td>
<td>42 ms</td>
<td>23.549999999886495 ms</td>
<td>20 ms</td>
<td>188.89999999999998 ms</td>
<td>262.70000000000004 ms</td>
</tr>
<tr>
<td>forEach</td>
<td>42 ms</td>
<td>23.119999999835272 ms</td>
<td>20 ms</td>
<td>167.30000000000018 ms</td>
<td>305.6 ms</td>
</tr>
</table>
Redmine - Patch #32523: Improve javascript performances on query edition
https://www.redmine.org/issues/32523?journal_id=95303
2019-12-12T12:05:22Z
Go MAEDA
<ul></ul><p>According to <a class="issue tracker-3 status-1 priority-4 priority-default" title="Patch: Improve javascript performances on query edition (New)" href="https://www.redmine.org/issues/32523#note-2">#32523#note-2</a>, the patches don't improve the performance so much. I wonder if we should merge any of patches.</p>