优化一下博客的性能

This commit is contained in:
zqlit committed 2026-05-20 14:33:05 +08:00
1 parent 15421ff0ac
commit 427b17d7a0
24 files changed
+2045 -148

No files matched your search

+46 -23
View File
@@ -513,8 +513,8 @@ ul {
z-index: 10;
position: relative;
text-align: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
/* Smoother transition */
transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
@@ -528,15 +528,26 @@ ul {
contain-intrinsic-size: 1000px;
} */
/* Mobile Optimization: Remove expensive effects */
@media (max-width: 767px) {
.main,
[data-theme="dark"] .main,
.artalk-related,
.floating-tools {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
@media (min-width: 768px) {
.main {
background: rgba(255, 255, 255, 0.88);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
[data-theme="dark"] #pjax-loading-skeleton {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.floating-tools a {
-webkit-backdrop-filter: blur(4px) saturate(140%);
backdrop-filter: blur(4px) saturate(140%);
}
.atk-loading {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@@ -1825,7 +1836,8 @@ darkb-text:active {
[data-theme="dark"] #pjax-loading-skeleton {
background: rgba(15, 23, 42, 0.94) !important;
box-shadow: var(--card-shadow-dark) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
[data-theme="dark"] .skeleton-line {
@@ -2969,6 +2981,17 @@ input[type=submit] {
.lazyload {
width: 100%;
max-width: 100%;
height: auto;
}
.post-content img,
.entry-content img {
display: block;
max-width: 100%;
height: auto;
content-visibility: auto;
contain-intrinsic-size: 700px auto;
}
/* 设置进度条的背景色 */
@@ -3504,8 +3527,8 @@ input[type=submit] {
/* Optimized transition: specific properties instead of all */
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
/* Restored backdrop-filter */
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(4px) saturate(140%);
-webkit-backdrop-filter: blur(4px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.4);
/* GPU Acceleration for individual items */
transform: translate3d(0, 0, 0);
@@ -4060,8 +4083,8 @@ img[atk-emoticon] {
background: rgba(255, 255, 255, 0.8) !important;
box-shadow: none !important; /* 去除阴影,更简洁 */
border-radius: 8px !important;
backdrop-filter: blur(4px); /* 轻微模糊 */
-webkit-backdrop-filter: blur(4px);
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* display: flex !important; <-- 移除这个强制显示 */
align-items: center;
justify-content: center;
@@ -4747,17 +4770,17 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
/* Lazy Load Animation */
.lazyload {
opacity: 0;
transform: translateY(30px); /* 稍微增加位移距离,增强上浮感 */
filter: blur(5px); /* 减少模糊,避免过于影响性能 */
transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.8s ease-out; /* 使用 ease-out 和自定义贝塞尔曲线,模拟自然惯性 */
will-change: opacity, transform; /* 移除 filter 的 will-change 以节省内存 */
opacity: 1;
transform: none;
filter: none;
transition: none;
will-change: auto;
}
.lazyload.lazy-loaded {
opacity: 1;
transform: translateY(0);
filter: blur(0);
transform: none;
filter: none;
}
[data-theme="dark"] .ai-comment-card .atk-content p {