From 83c6af4438a9fad5dbc3123302c1d319010e6e0c Mon Sep 17 00:00:00 2001 From: XPoet Date: Fri, 8 Jan 2021 16:07:54 +0800 Subject: [PATCH] perf: optimizing DOM naming --- layout/_partial/progress-bar.ejs | 4 ++-- source/css/common/basic.styl | 7 ++++++- source/css/common/variables.styl | 14 +++++++------- source/css/layout/_partial/progress-bar.styl | 8 ++++---- source/js/utils.js | 20 ++++++++++---------- 5 files changed, 29 insertions(+), 24 deletions(-) diff --git a/layout/_partial/progress-bar.ejs b/layout/_partial/progress-bar.ejs index 14cba45..e09ce8f 100644 --- a/layout/_partial/progress-bar.ejs +++ b/layout/_partial/progress-bar.ejs @@ -2,8 +2,8 @@ <% if (theme.pjax.enable === true) { %> - - + + <% } %> diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl index e82f980..4e65226 100644 --- a/source/css/common/basic.styl +++ b/source/css/common/basic.styl @@ -16,6 +16,11 @@ html, body { font-size: $default-font-size; line-height: $default-font-line-height; + &::-webkit-scrollbar { + width: 8px; + height: 6px; + } + +keep-tablet() { font-size: $default-font-size * 0.96; line-height: $default-font-line-height * 0.96; @@ -39,7 +44,7 @@ html, body { } &::-webkit-scrollbar-thumb { - background: var(--scroll-bar-color); + background: var(--scrollbar-color); } &::-webkit-scrollbar-track { diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl index b7cdb0f..a7febd3 100644 --- a/source/css/common/variables.styl +++ b/source/css/common/variables.styl @@ -8,7 +8,7 @@ // ======================================================================================== $header-height = 76px; // header height $header-shrink-height = $header-height * 0.72; // header shrink height -$scroll-progress-bar-height = 2.8px; // scroll progress bar height +$scroll-progress-bar-height = 2px; // scroll progress bar height $main-content-width = 80%; // main content width (PC) $main-content-width-tablet = 86%; // main content width (tablet) $main-content-width-mobile = 90%; // main content width (mobile) @@ -71,12 +71,12 @@ $border-color = darken($background-color, 30%); $selection-color = lighten($primary-color, 10%); $shadow-color = rgba(0, 0, 0, 0.2); $shadow-hover-color = rgba(0, 0, 0, 0.28); -$scroll-bar-color = lighten($default-text-color, 20%); +$scrollbar-color = lighten($default-text-color, 20%); $scroll-bar-bg-color = darken($background-color, 10%); $link-color = darken($default-text-color, 10%); $copyright-info-color = #CC0033; $avatar-background-color = #0066CC; -$loading-progress-bar-color = linear-gradient(45deg, #ef0e18, #ff5f00, #eea40b, #1fe708, #00d6d6, #016bd7, #f300f3); +$pjax-progress-bar-color = linear-gradient(45deg, #ef0e18, #ff5f00, #eea40b, #1fe708, #00d6d6, #016bd7, #f300f3); // ======================================================================================== @@ -94,12 +94,12 @@ $dark-border-color = lighten($dark-background-color, 20%); $dark-selection-color = $selection-color; $dark-shadow-color = rgba(128, 128, 128, 0.2); $dark-shadow-hover-color = rgba(128, 128, 128, 0.28); -$dark-scroll-bar-color = darken($dark-background-color, 30%); +$dark-scrollbar-color = darken($dark-background-color, 30%); $dark-scroll-bar-bg-color = lighten($dark-background-color, 10%); $dark-link-color = lighten($dark-default-text-color, 10%); $dark-copyright-info-color = darken($copyright-info-color, 20%); $dark-avatar-background-color = darken($avatar-background-color, 10%); -$dark-loading-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee); +$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee); // ======================================================================== @@ -127,12 +127,12 @@ root-color(mode) { --selection-color: mode == 'light' ? $selection-color : $dark-selection-color; --shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color; --shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color; - --scroll-bar-color: mode == 'light' ? $scroll-bar-color : $dark-scroll-bar-color; + --scrollbar-color: mode == 'light' ? $scrollbar-color : $dark-scrollbar-color; --scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color; --link-color: mode == 'light' ? $link-color : $dark-link-color; --copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color; --avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color; - --loading-progress-bar-color : mode == 'light' ? $loading-progress-bar-color : $dark-loading-progress-bar-color; + --pjax-progress-bar-color : mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color; } diff --git a/source/css/layout/_partial/progress-bar.styl b/source/css/layout/_partial/progress-bar.styl index e673f5e..f567ac5 100644 --- a/source/css/layout/_partial/progress-bar.styl +++ b/source/css/layout/_partial/progress-bar.styl @@ -5,13 +5,13 @@ width: 100%; z-index: $z-index-9; - .loading-progress-bar { + .pjax-progress-bar { position: absolute; top: 0; left: 0; - height: 1.8px; + height: 2px; width: 0; - background: var(--loading-progress-bar-color); + background: var(--pjax-progress-bar-color); visibility: hidden; opacity: 0; z-index: $z-index-8; @@ -25,7 +25,7 @@ } - .loading-progress-icon { + .pjax-progress-icon { position: absolute; top: 0; right: 0; diff --git a/source/js/utils.js b/source/js/utils.js index 6cd2fbd..7e2633c 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -7,8 +7,8 @@ KEEP.initUtils = () => { pageTop_dom: document.querySelector('.page-main-content-top'), firstScreen_dom: document.querySelector('.first-screen-container'), scrollProgressBar_dom: document.querySelector('.scroll-progress-bar'), - loadingProgressBar_dom: document.querySelector('.loading-progress-bar'), - loadingProgressCircle_dom: document.querySelector('.loading-progress-icon'), + pjaxProgressBar_dom: document.querySelector('.pjax-progress-bar'), + pjaxProgressIcon_dom: document.querySelector('.pjax-progress-icon'), innerHeight: window.innerHeight, loadingProgressBarTimer: null, @@ -240,31 +240,31 @@ KEEP.initUtils = () => { // loading progress bar start loadingProgressBarStart() { this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer); - this.loadingProgressBar_dom.style.width = '0'; + this.pjaxProgressBar_dom.style.width = '0'; this.scrollProgressBar_dom.classList.add('hide'); - this.loadingProgressCircle_dom.classList.add('show'); + this.pjaxProgressIcon_dom.classList.add('show'); let width = 5; const maxWidth = 99; - this.loadingProgressBar_dom.classList.add('show'); - this.loadingProgressBar_dom.style.width = width + '%'; + this.pjaxProgressBar_dom.classList.add('show'); + this.pjaxProgressBar_dom.style.width = width + '%'; this.loadingProgressBarTimer = setInterval(() => { width += 5; if (width > maxWidth) width = maxWidth; - this.loadingProgressBar_dom.style.width = width + '%'; + this.pjaxProgressBar_dom.style.width = width + '%'; }, 100); }, // loading progress bar end loadingProgressBarEnd() { this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer); - this.loadingProgressBar_dom.style.width = '100%'; + this.pjaxProgressBar_dom.style.width = '100%'; const tempTimeout = setTimeout(() => { - this.loadingProgressBar_dom.classList.remove('show'); - this.loadingProgressCircle_dom.classList.remove('show'); + this.pjaxProgressBar_dom.classList.remove('show'); + this.pjaxProgressIcon_dom.classList.remove('show'); this.scrollProgressBar_dom.classList.remove('hide'); clearTimeout(tempTimeout); }, 200);