perf: Only observe mutations when the page is visible (#273)

Closes #269.
matatk · Mar 13, 2019 · f1c0a01 · f1c0a01
1 parent 9f1924e
commit f1c0a01
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/src/code/_content.js b/src/code/_content.js
@@ -13,8 +13,10 @@ const elementFocuser = new ElementFocuser(document, borderDrawer)
 const msr = new MutationStatsReporter()
 const pauseHandler = new PauseHandler(msr.setPauseTime)
 
-const outOfDateTime = 2000
+const outOfDateTime = 2e3
+const observerReconnectionGrace = 1e3
 let observer = null
+let observerReconnectionTimer = null
 
 
 //
@@ -134,7 +136,7 @@ function sendLandmarks() {
 }
 
 function findLandmarksAndUpdateExtension() {
-	console.timeStamp('findLandmarksAndUpdateExtension()')
+	console.timeStamp(`findLandmarksAndUpdateExtension() on ${window.location.href}`)
 	const start = performance.now()
 	landmarksFinder.find()
 	msr.setLastScanDuration(performance.now() - start)
@@ -188,7 +190,7 @@ function shouldRefreshLandmarkss(mutations) {
 }
 
 function setUpMutationObserver() {
-	observer = new MutationObserver((mutations) => {
+	observer = new MutationObserver(function(mutations) {
 		msr.incrementTotalMutations()
 
 		// Guard against being innundated by mutation events
@@ -201,6 +203,7 @@ function setUpMutationObserver() {
 				msr.incrementCheckedMutations()
 				if (shouldRefreshLandmarkss(mutations)) {
 					findLandmarksAndUpdateExtension()
+					// msr.sendMutationUpdate() called below
 				}
 			},
 			// Scheduled task
@@ -212,6 +215,10 @@ function setUpMutationObserver() {
 		msr.sendMutationUpdate()
 	})
 
+	observeMutationObserver()
+}
+
+function observeMutationObserver() {
 	observer.observe(document, {
 		attributes: true,
 		childList: true,
@@ -222,16 +229,26 @@ function setUpMutationObserver() {
 	})
 }
 
+function reflectPageVisibility() {
+	if (document.hidden) {
+		if (observerReconnectionTimer) {
+			clearTimeout(observerReconnectionTimer)
+			observerReconnectionTimer = null
+		}
+		observer.disconnect()
+	} else {
+		observerReconnectionTimer = setTimeout(function() {
+			observeMutationObserver()
+			findLandmarksAndUpdateExtension()
+			msr.sendMutationUpdate()
+			observerReconnectionTimer = null
+		}, observerReconnectionGrace)
+	}
+}
+
 function bootstrap() {
 	browser.runtime.onMessage.addListener(messageHandler)
 
-	// At the start, the ElementFocuser is always managing borders
-	browser.runtime.sendMessage({ name: 'toggle-state-is', data: 'selected' })
-	console.log('Booting')
-	findLandmarksAndUpdateExtension()
-	msr.sendMutationUpdate()  // There will've been one scan now
-	setUpMutationObserver()
-
 	if (BROWSER === 'chrome' || BROWSER === 'opera' || BROWSER === 'edge') {
 		browser.runtime.connect({ name: 'disconnect-checker' })
 			.onDisconnect.addListener(function() {
@@ -240,6 +257,11 @@ function bootstrap() {
 			})
 	}
 
+	// At the start, the ElementFocuser is always managing borders
+	browser.runtime.sendMessage({ name: 'toggle-state-is', data: 'selected' })
+	setUpMutationObserver()
+	reflectPageVisibility()
+	document.addEventListener('visibilitychange', reflectPageVisibility, false)
 	browser.runtime.sendMessage({ name: 'get-devtools-state' })
 }
 

diff --git a/src/code/pauseHandler.js b/src/code/pauseHandler.js
@@ -31,7 +31,7 @@ export default function PauseHandler(pauseTimeHook) {
 		if (pause >= maxPause) {
 			pause = maxPause
 		}
-		console.log(`Increased pause to: ${pause}`)
+		console.timeStamp(`Increased pause to: ${pause}`)
 		pauseTimeHook(pause)
 	}
 
@@ -69,21 +69,17 @@ export default function PauseHandler(pauseTimeHook) {
 
 		const now = Date.now()
 		if (now > lastEvent + pause) {
-			console.log('Running guarded task')
 			guardedTask()
 			lastEvent = now
 		} else if (!haveIncreasedPauseAndScheduledTask) {
 			increasePause()
 			console.timeStamp(`Scheduling task in: ${pause}`)
 			setTimeout(() => {
-				console.log('Running scheduled task')
 				scheduledTask()
 				decreasePause()
 				haveIncreasedPauseAndScheduledTask = false
 			}, pause)
 			haveIncreasedPauseAndScheduledTask = true
-		} else {
-			console.log(`Already increased pause (${pause})`)
 		}
 	}
 

diff --git a/test/manual-test-auto-add.html b/test/manual-test-auto-add.html
@@ -30,14 +30,16 @@ <h1>Test automatically added landmarks</h1>
 	pool.insertBefore(landmark, pool.firstChild)
 }
 
-function doStuff() {
-	console.log('doStuff()')
+function createLandmarksGroup() {
+	console.log('Starting a group')
 	createLandmark()
 	setTimeout(createLandmark,  750 - 20)
 	setTimeout(createLandmark, 1125 - 20)
+	setTimeout(() => console.log('Finished a group'), 1125 - 20 + 10)
+	setTimeout(createLandmarksGroup, 1125 - 20 + 4000)
 }
 
-setTimeout(doStuff, 500)
+setTimeout(createLandmarksGroup, 2000)
 	</script>
 </body>
 </html>