improve layout and scroll-view performance

Author: hakimel

js/controllers/scrollview.js

@@ -17,6 +17,8 @@ export default class ScrollView {
 		this.Reveal = Reveal;
 
 		this.active = false;
+		this.activeProgressBarPage = null;
+		this.activeProgressBarTrigger = null;
 		this.activatedCallbacks = [];
 
 		this.onScroll = this.onScroll.bind( this );
@@ -171,6 +173,11 @@ export default class ScrollView {
 		this.viewportElement.removeEventListener( 'scroll', this.onScroll );
 		this.viewportElement.classList.remove( 'reveal-scroll' );
 
+		if( this.pendingScrollRaf ) {
+			cancelAnimationFrame( this.pendingScrollRaf );
+			this.pendingScrollRaf = 0;
+		}
+
 		this.removeProgressBar();
 
 		this.Reveal.getSlidesElement().innerHTML = this.slideHTMLBeforeActivation;
@@ -262,6 +269,9 @@ export default class ScrollView {
 			this.progressBar = null;
 		}
 
+		this.activeProgressBarPage = null;
+		this.activeProgressBarTrigger = null;
+
 	}
 
 	layout() {
@@ -551,6 +561,13 @@ export default class ScrollView {
 	syncProgressBar() {
 
 		this.progressBarInner.querySelectorAll( '.scrollbar-slide' ).forEach( slide => slide.remove() );
+		this.activeProgressBarPage = null;
+		this.activeProgressBarTrigger = null;
+
+		this.getAllPages().forEach( page => {
+			page.progressBarSlide = null;
+			page.scrollTriggers.forEach( trigger => trigger.progressBarElement = null );
+		} );
 
 		const scrollHeight = this.viewportElement.scrollHeight;
 		const viewportHeight = this.viewportElement.offsetHeight;
@@ -581,7 +598,7 @@ export default class ScrollView {
 				this.progressBarInner.appendChild( page.progressBarSlide );
 
 				// Visual representations of each scroll trigger
-				page.scrollTriggerElements = page.scrollTriggers.map( ( trigger, i ) => {
+				page.scrollTriggers.forEach( ( trigger, i ) => {
 
 					const triggerElement = document.createElement( 'div' );
 					triggerElement.className = 'scrollbar-trigger';
@@ -591,18 +608,13 @@ export default class ScrollView {
 
 					if( i === 0 ) triggerElement.style.display = 'none';
 
-					return triggerElement;
+					trigger.progressBarElement = triggerElement;
 
 				} );
 
 			} );
 
 		}
-		else {
-
-			this.pages.forEach( page => page.progressBarSlide = null );
-
-		}
 
 	}
 
@@ -621,6 +633,7 @@ export default class ScrollView {
 		const scrollProgressMid = Math.max( Math.min( ( scrollTop + viewportHeight / 2 ) / this.viewportElement.scrollHeight, 1 ), 0 );
 
 		let activePage;
+		let activeScrollTrigger = null;
 
 		this.slideTriggers.forEach( ( trigger ) => {
 			const { page } = trigger;
@@ -655,6 +668,7 @@ export default class ScrollView {
 			activePage.scrollTriggers.forEach( ( trigger ) => {
 				if( scrollProgressMid >= trigger.range[0] && scrollProgressMid <= trigger.range[1] ) {
 					this.activateTrigger( trigger );
+					activeScrollTrigger = trigger;
 				}
 				else if( trigger.active ) {
 					this.deactivateTrigger( trigger );
@@ -663,30 +677,38 @@ export default class ScrollView {
 		}
 
 		// Update our visual progress indication
-		this.setProgressBarValue( scrollTop / ( this.viewportElement.scrollHeight - viewportHeight ) );
+		this.setProgressBarValue(
+			scrollTop / ( this.viewportElement.scrollHeight - viewportHeight ),
+			activePage,
+			activeScrollTrigger
+		);
 
 	}
 
 	/**
 	 * Moves the progress bar playhead to the specified position.
 	 *
 	 * @param {number} progress 0-1
+	 * @param {object} activePage
+	 * @param {object} activeScrollTrigger
 	 */
-	setProgressBarValue( progress ) {
+	setProgressBarValue( progress, activePage = null, activeScrollTrigger = null ) {
 
 		if( this.progressBar ) {
 
 			this.progressBarPlayhead.style.transform = `translateY(${progress * this.progressBarScrollableHeight}px)`;
 
-			this.getAllPages()
-				.filter( page => page.progressBarSlide )
-				.forEach( ( page ) => {
-					page.progressBarSlide.classList.toggle( 'active', page.active === true );
+			if( this.activeProgressBarPage !== activePage ) {
+				this.activeProgressBarPage?.progressBarSlide?.classList.remove( 'active' );
+				activePage?.progressBarSlide?.classList.add( 'active' );
+				this.activeProgressBarPage = activePage;
+			}
 
-					page.scrollTriggers.forEach( ( trigger, i ) => {
-						page.scrollTriggerElements[i].classList.toggle( 'active', page.active === true && trigger.active === true );
-					} );
-				} );
+			if( this.activeProgressBarTrigger !== activeScrollTrigger ) {
+				this.activeProgressBarTrigger?.progressBarElement?.classList.remove( 'active' );
+				activeScrollTrigger?.progressBarElement?.classList.add( 'active' );
+				this.activeProgressBarTrigger = activeScrollTrigger;
+			}
 
 			this.showProgressBar();
 
@@ -909,8 +931,13 @@ export default class ScrollView {
 
 	onScroll() {
 
-		this.syncScrollPosition();
-		this.storeScrollPosition();
+		if( this.pendingScrollRaf ) return;
+
+		this.pendingScrollRaf = requestAnimationFrame( () => {
+			this.pendingScrollRaf = 0;
+			this.syncScrollPosition();
+			this.storeScrollPosition();
+		} );
 
 	}
 

js/reveal.js

@@ -859,31 +859,32 @@ export default function( revealElement, options ) {
 					transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
 				}
 
-				// Select all slides, vertical and horizontal
-				const slides = Array.from( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) );
+				const visibleSlides = Array.from( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) )
+					.filter( slide => slide.style.display !== 'none' );
 
-				for( let i = 0, len = slides.length; i < len; i++ ) {
-					const slide = slides[ i ];
+				// Pass 1: read sizes of visible slides
+				const tops = new Array( visibleSlides.length );
+				for( let i = 0, len = visibleSlides.length; i < len; i++ ) {
+					const slide = visibleSlides[ i ];
 
-					// Don't bother updating invisible slides
-					if( slide.style.display === 'none' ) {
-						continue;
-					}
-
-					if( ( config.center || slide.classList.contains( 'center' ) ) ) {
+					if( config.center || slide.classList.contains( 'center' ) ) {
 						// Vertical stacks are not centred since their section
 						// children will be
 						if( slide.classList.contains( 'stack' ) ) {
-							slide.style.top = 0;
+							tops[ i ] = 0;
 						}
 						else {
-							slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';
+							tops[ i ] = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';
 						}
 					}
 					else {
-						slide.style.top = '';
+						tops[ i ] = '';
 					}
+				}
 
+				// Pass 2: write top values to visible slides
+				for( let i = 0, len = visibleSlides.length; i < len; i++ ) {
+					visibleSlides[ i ].style.top = tops[ i ];
 				}
 
 				if( oldScale !== scale ) {