From 32b03fc76f1912e787d0ce3ae3a73df454f1232b Mon Sep 17 00:00:00 2001 From: Wyatt Allen Date: Fri, 5 Aug 2016 15:56:33 -0700 Subject: [PATCH] Applies optimizations to diff comment DOM attachment A source of latency when creating diff comments in large diffs is the work needed to reflow the diff DOM to make room for the new comment. This is particularly evident when adding comments to new files because the diff is built as an addition group representing the entire file, so the comment causes a reflow on every subsequent line. This change optimizes this process in three ways. * **Limit the size of ADD & REMOVE groups:** The diff processor will now break an add or a remove chunk into a series of smaller chunks of the same kind. This is controlled by the MAX_GROUP_SIZE constant. In this way the number of nodes that need to be reflowed when a comment is added to an add or remove group is limited to the number of subsequent lines in that group plus the subsequent number of groups. * **GPU optimize group in general:** Adds CSS properties to diff TBODY elements (which correspond to groups, for the most part) that trigger GPU acceleration when available. * **Apply `table-layout: fixed;`** This style speeds up table reflow in general. Change-Id: Ie0e3665b7752fec67f7123cfae70ae99e6f67521 --- .../gr-diff-processor/gr-diff-processor.js | 59 ++++++++++++++++- .../gr-diff-processor_test.html | 63 +++++++++++++++++++ .../app/elements/diff/gr-diff/gr-diff.html | 9 +++ 3 files changed, 130 insertions(+), 1 deletion(-) diff --git a/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor.js b/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor.js index e301d9495f..2a1e880538 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor.js +++ b/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor.js @@ -32,6 +32,16 @@ REMOVED: 'edit_a', }; + /** + * The maximum size for an addition or removal chunk before it is broken down + * into a series of chunks that are this size at most. + * + * Note: The value of 70 is chosen so that it is larger than the default + * _asyncThreshold of 64, but feel free to tune this constant to your + * performance needs. + */ + var MAX_GROUP_SIZE = 70; + Polymer({ is: 'gr-diff-processor', @@ -328,13 +338,17 @@ // If it isn't a common group, append it as-is and update line numbers. if (!content[i].ab) { - result.push(content[i]); if (content[i].a) { leftLineNum += content[i].a.length; } if (content[i].b) { rightLineNum += content[i].b.length; } + + this._breakdownGroup(content[i]).forEach(function(group) { + result.push(group); + }); + continue; } @@ -434,5 +448,48 @@ } return normalized; }, + + /** + * If a group is an addition or a removal, break it down into smaller groups + * of that type using the MAX_GROUP_SIZE. If the group is a shared section + * or a delta it is returned as the single element of the result array. + * @param {!Object} A raw chunk from a diff response. + * @return {!Array>} + */ + _breakdownGroup: function(group) { + var key = null; + if (group.a && !group.b) { + key = 'a'; + } else if (group.b && !group.a) { + key = 'b'; + } + + if (!key) { return [group]; } + + return this._breakdown(group[key], MAX_GROUP_SIZE) + .map(function(subgroupLines) { + var subGroup = {}; + subGroup[key] = subgroupLines; + return subGroup; + }); + }, + + /** + * Given an array and a size, return an array of arrays where no inner array + * is larger than that size, preserving the original order. + * @param {!Array} + * @param {number} + * @return {!Array>} + * @template T + */ + _breakdown: function(array, size) { + if (!array.length) { return []; } + if (array.length < size) { return [array]; } + + var head = array.slice(0, array.length - size); + var tail = array.slice(array.length - size); + + return this._breakdown(head, size).concat([tail]) + }, }); })(); diff --git a/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor_test.html b/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor_test.html index 4d890eaa3b..9d687ac11b 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor_test.html +++ b/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor_test.html @@ -510,6 +510,69 @@ limitations under the License. assert.notOk(result[result.length - 1].afterNumber); }); }); + + suite('_breakdown*', function() { + var sandbox; + setup(function() { + sandbox = sinon.sandbox.create(); + }); + + teardown(function() { + sandbox.restore(); + }); + + test('_breakdownGroup ignores shared groups', function() { + sandbox.stub(element, '_breakdown'); + var chunk = {ab: ['blah', 'blah', 'blah']}; + var result = element._breakdownGroup(chunk); + assert.deepEqual(result, [chunk]); + assert.isFalse(element._breakdown.called); + }); + + test('_breakdownGroup breaks down additions', function() { + sandbox.spy(element, '_breakdown'); + var chunk = {b: ['blah', 'blah', 'blah']}; + var result = element._breakdownGroup(chunk); + assert.deepEqual(result, [chunk]); + assert.isTrue(element._breakdown.called); + }); + + test('_breakdown common case', function() { + var array = 'Lorem ipsum dolor sit amet, suspendisse inceptos' + .split(' '); + var size = 3; + + var result = element._breakdown(array, size); + + result.forEach(function(subResult) { + assert.isAtMost(subResult.length, size); + }); + var flattened = result + .reduce(function(a, b) { return a.concat(b); }, []); + assert.deepEqual(flattened, array); + }); + + test('_breakdown smaller than size', function() { + var array = 'Lorem ipsum dolor sit amet, suspendisse inceptos' + .split(' '); + var size = 10; + var expected = [array]; + + var result = element._breakdown(array, size); + + assert.deepEqual(result, expected); + }); + + test('_breakdown empty', function() { + var array = []; + var size = 10; + var expected = []; + + var result = element._breakdown(array, size); + + assert.deepEqual(result, expected); + }); + }); }); }); diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html index 69bd5e4c39..63a66a441d 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html +++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html @@ -43,6 +43,14 @@ limitations under the License. table { border-collapse: collapse; border-right: 1px solid #ddd; + table-layout: fixed; + } + table tbody { + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); } .lineNum { background-color: #eee; @@ -141,6 +149,7 @@ limitations under the License. } .tab { display: inline-block; + position: relative; } .tab.withIndicator:before { color: #C62828;