From 7b197c867b8bb4a34fa46716b9abf53ef986dae9 Mon Sep 17 00:00:00 2001 From: Ethan Dalool Date: Thu, 27 Aug 2020 16:53:51 -0700 Subject: [PATCH] Speed up filtering by hiding #video_cards first. On large channels, filter_video_cards is painfully slow because of all the forced reflows. I'm currently trying to find a better solution. In the meantime, hiding the containing div does prevent those reflows until the end, but itself is also quite slow. --- frontends/ycdl_flask/templates/channel.html | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/frontends/ycdl_flask/templates/channel.html b/frontends/ycdl_flask/templates/channel.html index 7276225..b34fd7b 100644 --- a/frontends/ycdl_flask/templates/channel.html +++ b/frontends/ycdl_flask/templates/channel.html @@ -342,17 +342,15 @@ function filter_video_cards(search_term) */ var count = 0; video_cards = document.getElementById("video_cards"); - cards = video_cards.getElementsByClassName("video_card"); + video_cards.classList.add("hidden"); search_term = search_term.toLocaleLowerCase(); var download_filter_class = "video_card_" + DOWNLOAD_FILTER; - for (var index = 0; index < cards.length; index += 1) + Array.from(video_cards.getElementsByClassName("video_card")).forEach(function(video_card) { - var video_card = cards[index]; var title = video_card.getElementsByClassName("video_title")[0].innerText.toLocaleLowerCase(); if (DOWNLOAD_FILTER && !video_card.classList.contains(download_filter_class)) { video_cards.removeChild(video_card); - index -= 1; } else if (search_term !== "" && title.indexOf(search_term) == -1) { @@ -363,7 +361,8 @@ function filter_video_cards(search_term) video_card.classList.remove("hidden"); count += 1; } - } + }); + video_cards.classList.remove("hidden"); document.getElementById("search_filter_count").innerText = count; }