Log of the Rewrite's Performance Improvements

[snuffyDev]

Trending Page

Prior to the rewrite, the Trending Page would average 675-750ms response time on the dev server.

Current times in the rewritten version:

Artist Page

The performance wasn't too bad normally in the original version, but the code was a mess. Managed to get the times down from ~550ms average on the dev server to:

Here's the rewritten code:

import {
	MusicResponsiveListItemRenderer,
	MusicTwoRowItemRenderer
} from '$lib/parsers';
import type { CarouselHeader, ICarousel, Item, Thumbnail } from '$lib/types';
import type { IMusicResponsiveListItemRenderer } from '$lib/types/internals';

export interface IArtistPageHeader {
	name: string;
	thumbnails: Thumbnail[];
	buttons: {
		shuffle?: { params?: string; playlistId?: string; videoId?: string };
		radio?: {
			params?: string;
			playlistId?: string;
		};
	};
	mixInfo?: {
		params?: string;
		playlistId?: string;
	};
	description?: string;
	foregroundThumbnails?: Thumbnail[];
}

export interface ArtistPageBody {
	carousels?: { header: CarouselHeader; contents: Item[] }[];
	songs?: {
		header?: CarouselHeader;
		items?: IMusicResponsiveListItemRenderer[];
	};
}
export interface ArtistPage {
	header?: IArtistPageHeader;
	body?: ArtistPageBody;
}

export function ArtistPageParser({
	header = {},
	items = []
}: {
	header?: {
		musicImmersiveHeaderRenderer?: any;
		musicVisualHeaderRenderer?: any;
	};
	items?: any[];
}): ArtistPage {
	header = header?.musicImmersiveHeaderRenderer
		? header?.musicImmersiveHeaderRenderer
		: header?.musicVisualHeaderRenderer;
	let len = items.length;
	let songs = {};
	const carousels = [];

	for (; len--; ) {
		if (items[len]['musicShelfRenderer']) {
			songs = {
				items: parseSongs(items[len]['musicShelfRenderer']['contents']),
				header: items[len]['musicCarouselShelfRenderer']
					? {
							...items[len]['musicCarouselShelfRenderer']['bottomEndpoint'][
								'browseEndpoint'
							]
					  }
					: undefined
			};
		}
		if (items[len]['musicCarouselShelfRenderer']) {
			carousels[len - 1] = parseCarousel(
				items[len]['musicCarouselShelfRenderer']['contents'],
				items[len]['musicCarouselShelfRenderer']['header'][
					'musicCarouselShelfBasicHeaderRenderer'
				]
			);
		}
	}

	return {
		header: parseArtistHeader(header),
		body: {
			carousels,
			songs
		}
	};
}

function parseSongs(items = []) {
	let len = items.length;

	for (; len--; ) {
		items[len] = MusicResponsiveListItemRenderer(items[len]);
	}

	return items;
}

function parseCarousel(items = [], _header) {
	let len = items.length;
	const contents = [];

	for (; len--; ) {
		contents.push(MusicTwoRowItemRenderer(items[len]));
	}

	const header = {
		title: _header['title']['runs'][0]['text'],
		endpoint: _header['title']['runs'][0]['navigationEndpoint'] ?? undefined,
		itct:
			(_header['moreContentButton'] &&
				encodeURIComponent(
					_header.moreContentButton?.buttonRenderer?.navigationEndpoint
						?.clickTrackingParams
				)) ??
			undefined,
		browseId: _header['moreContentButton']
			? _header['moreContentButton']['buttonRenderer']['navigationEndpoint'][
					'browseEndpoint'
			  ]['browseId']
			: undefined,
		params: _header['moreContentButton']
			? _header['moreContentButton']['buttonRenderer']['navigationEndpoint'][
					'browseEndpoint'
			  ]['params']
			: undefined,
		type: _header['title']['runs'][0]['text'],
		data: _header
	};
	// moreContentButton.buttonRenderer.trackingParams
	return {
		header,
		contents
	};
}
// Main header parser
function parseArtistHeader(header: any): IArtistPageHeader {
	return {
		name: header['title']['runs'][0]['text'] || null,
		description: header['description']
			? header['description']['runs'][0]['text']
			: undefined,
		foregroundThumbnails: header['foregroundThumbnail']
			? header['foregroundThumbnail']['musicThumbnailRenderer']['thumbnail'][
					'thumbnails'
			  ]
			: undefined,
		thumbnails:
			header['thumbnail']['musicThumbnailRenderer']['thumbnail'][
				'thumbnails'
			] || [],
		buttons: {
			radio: {
				params: header['startRadioButton']['buttonRenderer'][
					'navigationEndpoint'
				]['watchPlaylistEndpoint']
					? header['startRadioButton']['buttonRenderer']['navigationEndpoint'][
							'watchPlaylistEndpoint'
					  ]['params']
					: undefined,
				playlistId: header['startRadioButton']
					? header['startRadioButton']['buttonRenderer']['navigationEndpoint'][
							'watchPlaylistEndpoint'
					  ]['playlistId']
					: undefined
			},
			shuffle: {
				params:
					header['playButton']['buttonRenderer']['navigationEndpoint'][
						'watchEndpoint'
					]['params'],
				playlistId:
					header['playButton']['buttonRenderer']['navigationEndpoint'][
						'watchEndpoint'
					]['playlistId'],
				videoId:
					header['playButton']['buttonRenderer']['navigationEndpoint'][
						'watchEndpoint'
					]['videoId']
			}
		}
	};
}

---

More improvements to come soon, as I am aiming to do a complete rewrite essentially.

[snuffyDev]

A small but massive change.

A big focus of this "rewrite" is for mainly performance, both on server-side and client-side. Currently Beatbump tends to just be a free-for-all of subpar, mostly copy + pasted from one fiile to another kind of code. To solve this, I am working on creating several helpers and utils for common pieces of code, as well as for performance and ease of use!

One problem that is encompasses the whole of this comment, is on the backend side. Beatbump has a parsers.ts file containing the parsers I use the most when fetching content from the YTM API. The files are massive and normally are deeply nested. Typically, iterating and transforming an Array of Objects is a walk in the park using array.map((val, idx, arr) => {// ...}) ... But that's not good enough.

Array.map is slow for almost any larger than ~250-400 items. Beatbump found this out quickly. After months of on and off benchmarking, here's a comparison of some of the good ways of going over large Arrays/Array of ObjectsJSBench.Me. Go to the pastebin found in the JSBench's description and copy and paste the JS Object into the "Setup JS" section within JSBench.

The goal is performance, standardized, and lean code. Here's what I've gotten so far for the Array module:

type VoidCallback<T> = (item: T, index: number, array: Array<T>) => void;
type ItemCallback<T> = (item: T, index: number, array: Array<T>) => T;

export function find<T>(
	array: Array<T>,
	predicate: (item: T) => boolean
): T | undefined {
	let len = array.length;
	for (; len--; ) {
		if (predicate(array[len])) {
			return array[len];
		}
	}
	return undefined;
}
export function findAll<T>(
	array: Array<T>,
	predicate: (item: T) => boolean
): T[] {
	let len = array.length;
	let idx = 0;
	const result = [];
	for (; len--; ) {
		if (predicate(array[len])) {
			result[idx++] = array[len];
		}
	}
	return result;
}

export function iter<T>(array: Array<T>, cb: VoidCallback<T>): void {
	const len = array.length;
	let idx = -1;
	for (; ++idx < len; ) {
		cb(array[idx], idx, array);
	}
}

export function map<T>(array: Array<T>, cb: ItemCallback<T>): T[] {
	let idx = -1;
	const length = array.length;
	const newArray = Array(length)
	for (; ++idx < length;) {
		newArray[idx] = cb(array[idx], idx, array);
	}
	return newArray;
}

This is just one example of many that will be completed in due time.

PS: Beatbumps gotten significant performance gains from these.