Skip to content

Commit

Permalink
Reduce reflows when sizing columns (#17315)
Browse files Browse the repository at this point in the history 
This patch increases the reported fps from 10 to 17 in Chrome and from 5
to 10 in Firefox. No automatic test since performance testing on our
shared testing infrastructure would be quite error-prone.

Change-Id: I0bb6af250743058a8f32bb2df89da97660e94b52
  • Loading branch information
@Legioth
Legioth authored and Vaadin Code Review committed Mar 30, 2015
1 parent 722072b commit 103b329
Show file tree
Hide file tree
Showing 5 changed files with 328 additions and 38 deletions.
110 changes: 72 additions & 38 deletions client/src/com/vaadin/client/widgets/Escalator.java
View file
Expand Up @@ -16,6 +16,7 @@
package com.vaadin.client.widgets;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Collections;
import java.util.HashMap;
import java.util.LinkedList;
Expand Down Expand Up @@ -2010,9 +2011,8 @@ public Cell getCell(final Element element) {
return new Cell(domRowIndex, domColumnIndex, cellElement);
}

double getMaxCellWidth(int colIndex) throws IllegalArgumentException {
double maxCellWidth = -1;

void createAutoSizeElements(int colIndex,
Collection<TableCellElement> elements) {
assert isAttached() : "Can't measure max width of cell, since Escalator is not attached to the DOM.";

NodeList<TableRowElement> rows = root.getRows();
Expand Down Expand Up @@ -2041,24 +2041,9 @@ public Cell getCell(final Element element) {
cellClone.getStyle().clearWidth();

rowElement.insertBefore(cellClone, cellOriginal);
double requiredWidth = WidgetUtil
.getRequiredWidthBoundingClientRectDouble(cellClone);

if (BrowserInfo.get().isIE()) {
/*
* IE browsers have some issues with subpixels. Occasionally
* content is overflown even if not necessary. Increase the
* counted required size by 0.01 just to be on the safe
* side.
*/
requiredWidth += 0.01;
}

maxCellWidth = Math.max(requiredWidth, maxCellWidth);
cellClone.removeFromParent();
elements.add(cellClone);
}

return maxCellWidth;
}

private boolean cellIsPartOfSpan(TableCellElement cell) {
Expand Down Expand Up @@ -3789,7 +3774,8 @@ public void setWidth(double px) {

if (px < 0) {
if (isAttached()) {
calculateWidth();
autosizeColumns(Collections.singletonList(columns
.indexOf(this)));
} else {
/*
* the column's width is calculated at Escalator.onLoad
Expand Down Expand Up @@ -3843,10 +3829,6 @@ public boolean measureAndSetWidthIfNeeded() {
}
return false;
}

private void calculateWidth() {
calculatedWidth = getMaxCellWidth(columns.indexOf(this));
}
}

private final List<Column> columns = new ArrayList<Column>();
Expand Down Expand Up @@ -4151,6 +4133,7 @@ public void setColumnWidths(Map<Integer, Double> indexWidthMap)
return;
}

List<Integer> autosizeColumns = new ArrayList<Integer>();
for (Entry<Integer, Double> entry : indexWidthMap.entrySet()) {
int index = entry.getKey().intValue();
double width = entry.getValue().doubleValue();
Expand All @@ -4160,10 +4143,15 @@ public void setColumnWidths(Map<Integer, Double> indexWidthMap)
}

checkValidColumnIndex(index);
columns.get(index).setWidth(width);

if (width >= 0) {
columns.get(index).setWidth(width);
} else {
autosizeColumns.add(index);
}
}

autosizeColumns(autosizeColumns);

widthsArray = null;
header.reapplyColumnWidths();
body.reapplyColumnWidths();
Expand All @@ -4174,6 +4162,64 @@ public void setColumnWidths(Map<Integer, Double> indexWidthMap)
recalculateElementSizes();
}

private void autosizeColumns(List<Integer> columns) {
if (columns.isEmpty()) {
return;
}

// Must process columns in index order
Collections.sort(columns);

Map<Integer, List<TableCellElement>> autoSizeElements = new HashMap<Integer, List<TableCellElement>>();
try {
// Set up the entire DOM at once
for (int i = columns.size() - 1; i >= 0; i--) {
// Iterate backwards to not mess with the indexing
Integer colIndex = columns.get(i);

ArrayList<TableCellElement> elements = new ArrayList<TableCellElement>();
autoSizeElements.put(colIndex, elements);

header.createAutoSizeElements(colIndex, elements);
body.createAutoSizeElements(colIndex, elements);
footer.createAutoSizeElements(colIndex, elements);
}

// Extract all measurements & update values
for (Integer colIndex : columns) {
double maxWidth = Double.NEGATIVE_INFINITY;
List<TableCellElement> elements = autoSizeElements
.get(colIndex);
for (TableCellElement element : elements) {

double cellWidth = WidgetUtil
.getRequiredWidthBoundingClientRectDouble(element);

maxWidth = Math.max(maxWidth, cellWidth);
}
assert maxWidth >= 0 : "Got a negative max width for a column, which should be impossible.";

if (BrowserInfo.get().isIE()) {
/*
* IE browsers have some issues with subpixels.
* Occasionally content is overflown even if not
* necessary. Increase the counted required size by 0.01
* just to be on the safe side.
*/
maxWidth += 0.01;
}

this.columns.get(colIndex).calculatedWidth = maxWidth;
}
} finally {
for (List<TableCellElement> list : autoSizeElements.values()) {
for (TableCellElement element : list) {
element.removeFromParent();
}
}
}
}

private void checkValidColumnIndex(int index)
throws IllegalArgumentException {
if (!Range.withLength(0, getColumnCount()).contains(index)) {
Expand All @@ -4193,18 +4239,6 @@ public double getColumnWidthActual(int index) {
return columns.get(index).getCalculatedWidth();
}

private double getMaxCellWidth(int colIndex)
throws IllegalArgumentException {
double headerWidth = header.getMaxCellWidth(colIndex);
double bodyWidth = body.getMaxCellWidth(colIndex);
double footerWidth = footer.getMaxCellWidth(colIndex);

double maxWidth = Math.max(headerWidth,
Math.max(bodyWidth, footerWidth));
assert maxWidth >= 0 : "Got a negative max width for a column, which should be impossible.";
return maxWidth;
}

/**
* Calculates the width of the columns in a given range.
*
Expand Down
45 changes: 45 additions & 0 deletions uitest/src/com/vaadin/tests/components/grid/GridResizeTerror.java
View file
@@ -0,0 +1,45 @@
/*
* Copyright 2000-2014 Vaadin Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.vaadin.tests.components.grid;

import com.vaadin.annotations.Widgetset;
import com.vaadin.server.VaadinRequest;
import com.vaadin.tests.util.ResizeTerrorizer;
import com.vaadin.tests.widgetset.TestingWidgetSet;
import com.vaadin.ui.Grid;
import com.vaadin.ui.UI;

@Widgetset(TestingWidgetSet.NAME)
public class GridResizeTerror extends UI {
@Override
protected void init(VaadinRequest request) {
Grid grid = new Grid();

int cols = 10;
Object[] data = new Object[cols];

for (int i = 0; i < cols; i++) {
grid.addColumn("Col " + i);
data[i] = "Data " + i;
}

for (int i = 0; i < 500; i++) {
grid.addRow(data);
}

setContent(new ResizeTerrorizer(grid));
}
}
51 changes: 51 additions & 0 deletions uitest/src/com/vaadin/tests/util/ResizeTerrorizer.java
View file
@@ -0,0 +1,51 @@
/*
* Copyright 2000-2014 Vaadin Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.vaadin.tests.util;

import com.vaadin.tests.widgetset.client.ResizeTerrorizerControlConnector.ResizeTerorrizerState;
import com.vaadin.ui.AbstractComponent;
import com.vaadin.ui.Component;
import com.vaadin.ui.VerticalLayout;

public class ResizeTerrorizer extends VerticalLayout {
private final ResizeTerrorizerControl control;

public class ResizeTerrorizerControl extends AbstractComponent implements
Component {

public ResizeTerrorizerControl(Component target) {
getState().target = target;
}

@Override
protected ResizeTerorrizerState getState() {
return (ResizeTerorrizerState) super.getState();
}
}

public ResizeTerrorizer(Component target) {
target.setWidth("700px");
setSizeFull();
addComponent(target);
setExpandRatio(target, 1);
control = new ResizeTerrorizerControl(target);
addComponent(control);
}

public void setDefaultWidthOffset(int px) {
control.getState().defaultWidthOffset = px;
}
}

0 comments on commit 103b329

Please sign in to comment.