Skip to content

Commit d9acc18

Browse files
luzatmarcj
authored andcommitted
Removed dirty checking, minor optimizations (#135)
* Removed dirty checking, minor optimizations An update will now only be queued through requestAnimationFrame whenever changes occurred. This means that absolutely no code is running when the page is idling (helpful for power saving and scalability). Care was taken to first read from the DOM and afterwards update it in the new scroll handler to prevent any possible layout thrashing as described here: http://wilsonpage.co.uk/preventing-layout-thrashing/ lastWidth, lastHeight and all sensor properties are only updated once every frame. * Run callbacks only if size changed between two frames An element may change its size multiple times during a frame. Do not emit events anymore if its size returned to its previous size since the last update. This means that events occurring in between two frames - which are never visible to the user - may be skipped. * Reset sensors always Sensors need to be reset even if the element's size returned to its original dimensions. * Fix performance regression Resetting within the requestAnimationFrame handler lead to bad performance. This was noticeable in the performance demo where this version fares about as good as older versions. * Avoid initial resize event * Code simplification
1 parent 520c969 commit d9acc18

File tree

1 file changed

+21
-19
lines changed

1 file changed

+21
-19
lines changed

src/ResizeSensor.js

+21-19
Original file line numberDiff line numberDiff line change
@@ -143,10 +143,13 @@
143143
var expand = element.resizeSensor.childNodes[0];
144144
var expandChild = expand.childNodes[0];
145145
var shrink = element.resizeSensor.childNodes[1];
146+
var dirty, rafId, newWidth, newHeight;
147+
var lastWidth = element.offsetWidth;
148+
var lastHeight = element.offsetHeight;
146149

147150
var reset = function() {
148-
expandChild.style.width = 100000 + 'px';
149-
expandChild.style.height = 100000 + 'px';
151+
expandChild.style.width = '100000px';
152+
expandChild.style.height = '100000px';
150153

151154
expand.scrollLeft = 100000;
152155
expand.scrollTop = 100000;
@@ -156,31 +159,30 @@
156159
};
157160

158161
reset();
159-
var dirty = false;
160162

161-
var dirtyChecking = function() {
162-
if (!element.resizedAttached) return;
163+
var onResized = function() {
164+
rafId = 0;
163165

164-
if (dirty) {
166+
if (!dirty) return;
167+
168+
lastWidth = newWidth;
169+
lastHeight = newHeight;
170+
171+
if (element.resizedAttached) {
165172
element.resizedAttached.call();
166-
dirty = false;
167173
}
168-
169-
requestAnimationFrame(dirtyChecking);
170174
};
171175

172-
requestAnimationFrame(dirtyChecking);
173-
var lastWidth, lastHeight;
174-
var cachedWidth, cachedHeight; //useful to not query offsetWidth twice
175-
176176
var onScroll = function() {
177-
if ((cachedWidth = element.offsetWidth) != lastWidth || (cachedHeight = element.offsetHeight) != lastHeight) {
178-
dirty = true;
177+
newWidth = element.offsetWidth;
178+
newHeight = element.offsetHeight;
179+
dirty = newWidth != lastWidth || newHeight != lastHeight;
180+
181+
if (dirty && !rafId) {
182+
rafId = requestAnimationFrame(onResized);
183+
}
179184

180-
lastWidth = cachedWidth;
181-
lastHeight = cachedHeight;
182-
}
183-
reset();
185+
reset();
184186
};
185187

186188
var addEvent = function(el, name, cb) {

0 commit comments

Comments
 (0)