Usually, it took several seconds to move from the first screen to the third. After the upgrade, the time was prolonged to almost 50 seconds making it almost useless. It is not easy to find a bottleneck in an asynchronous framework. So firstly I discovered it is the map (12 * 8 tiles) which is the cause of the delay. Then I gritted my teeth and after several sleepless nights including meticulously comparing old and new JS files, I pinned down the culprit.
The problem was caused by iron-resizable-behavior/iron-resizable-behavior.js file. Next to the end, there is a slightly new code.
_requestResizeNotifications: function () {
if (!this.isAttached) {
return;
}
if (document.readyState === 'loading') {
var _requestResizeNotifications = this._requestResizeNotifications.bind(this);
document.addEventListener('readystatechange', function readystatechanged() {
document.removeEventListener('readystatechange', readystatechanged);
_requestResizeNotifications();
});
} else {
this._findParent();
if (!this._parentResizable) {
// If this resizable is an orphan, tell other orphans to try to find
// their parent again, in case it's this resizable.
ORPHANS.forEach(function (orphan) {
if (orphan !== this) {
orphan._findParent();
}
}, this);
window.addEventListener('resize', this._boundNotifyResize);
this.notifyResize();
} else {
// If this resizable has a parent, tell other child resizables of
// that parent to try finding their parent again, in case it's this
// resizable.
// this._parentResizable._interestedResizables.forEach(function (resizable) {
// if (resizable !== this) {
// resizable._findParent();
// }
// }, this);
}
}
},
_findParent: function () {
this.assignParentResizable(null);
this.fire('iron-request-resize-notifications', null, {
node: this,
bubbles: true,
cancelable: true
});
if (!this._parentResizable) {
ORPHANS.add(this);
} else {
ORPHANS.delete(this);
}
}
};
The temporary workaround is to comment out the code. // If this resizable has a parent, tell other child resizables of
// that parent to try finding their parent again, in case it's this
// resizable.
// this._parentResizable._interestedResizables.forEach(function (resizable) {
// if (resizable !== this) {
// resizable._findParent();
// }
// }, this);
}
Unfortunately, I'm unable to provide any explanation for that and the solution is nothing more than kicking the can down the road. Obviously, the code inside the else clause is doing something CPU thirsty but that is all I can make out of it. But it works for me.
