From 40d10041e64592aa7636ef293ac13dc3e0fc5e8c Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 20 Jul 2023 22:49:23 +0800 Subject: [PATCH] performance --- themes/heo/components/BlogPostListScroll.js | 8 +-- themes/heo/components/Catalog.js | 4 +- themes/heo/components/NavBar.js | 23 ++++----- themes/heo/components/Progress.js | 44 ---------------- themes/heo/components/ReadingProgress.js | 56 +++++++++++++-------- themes/heo/components/RightFloatArea.js | 42 ---------------- 6 files changed, 51 insertions(+), 126 deletions(-) delete mode 100644 themes/heo/components/Progress.js delete mode 100644 themes/heo/components/RightFloatArea.js diff --git a/themes/heo/components/BlogPostListScroll.js b/themes/heo/components/BlogPostListScroll.js index d1f4bba4..20202a9f 100644 --- a/themes/heo/components/BlogPostListScroll.js +++ b/themes/heo/components/BlogPostListScroll.js @@ -2,7 +2,7 @@ import BLOG from '@/blog.config' import BlogPostCard from './BlogPostCard' import BlogPostListEmpty from './BlogPostListEmpty' import { useGlobal } from '@/lib/global' -import React from 'react' +import React, { useEffect, useRef, useState } from 'react' import CONFIG from '../config' import { getListByPage } from '@/lib/utils' @@ -15,7 +15,7 @@ import { getListByPage } from '@/lib/utils' */ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => { const postsPerPage = BLOG.POSTS_PER_PAGE - const [page, updatePage] = React.useState(1) + const [page, updatePage] = useState(1) const postsToShow = getListByPage(posts, page, postsPerPage) let hasMore = false @@ -41,14 +41,14 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.PO } // 监听滚动 - React.useEffect(() => { + useEffect(() => { window.addEventListener('scroll', scrollTrigger) return () => { window.removeEventListener('scroll', scrollTrigger) } }) - const targetRef = React.useRef(null) + const targetRef = useRef(null) const { locale } = useGlobal() if (!postsToShow || postsToShow.length === 0) { diff --git a/themes/heo/components/Catalog.js b/themes/heo/components/Catalog.js index 726aed27..d1ce700d 100644 --- a/themes/heo/components/Catalog.js +++ b/themes/heo/components/Catalog.js @@ -27,8 +27,8 @@ const Catalog = ({ toc }) => { // 同步选中目录事件 const [activeSection, setActiveSection] = useState(null) - const throttleMs = 200 const actionSectionScrollSpy = useCallback(throttle(() => { + console.log('目录') const sections = document.getElementsByClassName('notion-h') let prevBBox = null let currentSectionId = activeSection @@ -53,7 +53,7 @@ const Catalog = ({ toc }) => { setActiveSection(currentSectionId) const index = tocIds.indexOf(currentSectionId) || 0 tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' }) - }, throttleMs)) + }, 200)) // 无目录就直接返回空 if (!toc || toc.length < 1) { diff --git a/themes/heo/components/NavBar.js b/themes/heo/components/NavBar.js index 277e95b8..baa65e73 100644 --- a/themes/heo/components/NavBar.js +++ b/themes/heo/components/NavBar.js @@ -26,23 +26,11 @@ const NavBar = props => { slideOverRef?.current?.toggleSlideOvers() } - // 监听滚动 - useEffect(() => { - scrollTrigger() - window.addEventListener('scroll', scrollTrigger) - return () => { - window.removeEventListener('scroll', scrollTrigger) - } - }, []) - - const throttleMs = 200 - /** * 根据滚动条，切换导航栏样式 */ const scrollTrigger = useCallback(throttle(() => { const scrollS = window.scrollY - // 导航栏设置 白色背景 if (scrollS <= 0) { setFixedNav(false) @@ -60,7 +48,16 @@ const NavBar = props => { setTextWhite(false) setBgWhite(true) } - }, throttleMs)) + }, 200)) + + // 监听滚动 + useEffect(() => { + scrollTrigger() + window.addEventListener('scroll', scrollTrigger) + return () => { + window.removeEventListener('scroll', scrollTrigger) + } + }, []) // 监听导航栏显示文字 useEffect(() => { diff --git a/themes/heo/components/Progress.js b/themes/heo/components/Progress.js deleted file mode 100644 index 5b4f9b20..00000000 --- a/themes/heo/components/Progress.js +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useEffect, useState } from 'react' -import { isBrowser } from '@/lib/utils' - -/** - * 顶部页面阅读进度条 - * @returns {JSX.Element} - * @constructor - */ -const Progress = ({ targetRef, showPercent = true }) => { - const currentRef = targetRef?.current || targetRef - const [percent, changePercent] = useState(0) - const scrollListener = () => { - const target = currentRef || (isBrowser() && document.getElementById('article-wrapper')) - if (target) { - const clientHeight = target.clientHeight - const scrollY = window.pageYOffset - const fullHeight = clientHeight - window.outerHeight - let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0)) - if (per > 100) per = 100 - if (per < 0) per = 0 - changePercent(per) - } - } - - useEffect(() => { - document.addEventListener('scroll', scrollListener) - return () => document.removeEventListener('scroll', scrollListener) - }, []) - - return ( -
-
- {showPercent && ( -
{percent}%
- )} -
-
- ) -} - -export default Progress diff --git a/themes/heo/components/ReadingProgress.js b/themes/heo/components/ReadingProgress.js index fed74a54..ada553ce 100644 --- a/themes/heo/components/ReadingProgress.js +++ b/themes/heo/components/ReadingProgress.js @@ -7,36 +7,50 @@ import { useEffect, useState } from 'react' */ export default function ReadingProgress() { const [scrollPercentage, setScrollPercentage] = useState(0) + + function handleScroll() { + const scrollHeight = document.documentElement.scrollHeight + const clientHeight = document.documentElement.clientHeight + const scrollY = window.scrollY || window.pageYOffset + + const percent = Math.floor((scrollY / (scrollHeight - clientHeight)) * 100) + setScrollPercentage(percent) + } + + // 监听滚动事件 useEffect(() => { let requestId - function handleScroll() { - const scrollHeight = document.documentElement.scrollHeight - const clientHeight = document.documentElement.clientHeight - const scrollY = window.scrollY || window.pageYOffset - - const percent = Math.floor((scrollY / (scrollHeight - clientHeight)) * 100) - setScrollPercentage(percent) - - requestId = requestAnimationFrame(handleScroll) + function updateScrollPercentage() { + handleScroll() + requestId = null } - handleScroll() // 初始化滚动位置 + function handleAnimationFrame() { + if (requestId) { + return + } + requestId = requestAnimationFrame(updateScrollPercentage) + } + window.addEventListener('scroll', handleAnimationFrame) return () => { - cancelAnimationFrame(requestId) + window.removeEventListener('scroll', handleAnimationFrame) + if (requestId) { + cancelAnimationFrame(requestId) + } } }, []) - return (<> -
window.scrollTo({ top: 0, behavior: 'smooth' })} - className={`${scrollPercentage > 0 ? 'w-10 h-10 ' : 'w-0 h-0 opacity-0'} group cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full flex justify-center items-center duration-200 transition-all`} > -