/* ===================================
CCBONLINE 网站性能优化系统
Created: 2025-01-27
Purpose: 全面优化网站加载性能、渲染性能和用户体验
=================================== */
/* ===========================================
1. 预加载和资源优化
=========================================== */
/* 预连接到重要的外部资源 */
.performance-preconnect {
/* 这些链接应该在HTML head中使用 */
/* */
/* */
/* */
}
/* 字体优化 - 防止字体闪烁(FOIT) */
@font-face {
font-family: 'Inter';
src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
font-display: swap; /* 使用swap策略避免不可见文本闪烁 */
}
/* ===========================================
2. 关键渲染路径优化
=========================================== */
/* 避免重排和重绘 */
.performance-optimized {
contain: layout style paint; /* CSS Containment 优化 */
will-change: auto; /* 避免不必要的硬件加速 */
}
/* 图片延迟加载优化 */
.lazy-image {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.lazy-image.loaded {
opacity: 1;
}
/* 占位符防止布局偏移 */
.image-placeholder {
background-color: #f3f4f6;
background-image: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
background-size: 200% 100%;
animation: loading-shimmer 1.5s infinite;
min-height: 200px; /* 防止CLS */
}
@keyframes loading-shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* ===========================================
3. CSS优化和最小化重绘
=========================================== */
/* 使用transform代替改变top/left */
.performance-transform {
transform: translateZ(0); /* 创建合成层 */
backface-visibility: hidden; /* 避免闪烁 */
}
/* 优化动画性能 */
.smooth-animation {
will-change: transform, opacity;
transform: translateZ(0);
}
.smooth-animation:hover {
transform: translateY(-2px) translateZ(0);
transition: transform 0.2s ease-out;
}
/* 按钮点击优化 */
.performance-button {
transform: translateZ(0);
transition: transform 0.15s ease-out;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation; /* 移除点击延迟 */
}
.performance-button:active {
transform: scale(0.98) translateZ(0);
}
/* ===========================================
4. 布局稳定性优化(CLS)
=========================================== */
/* 防止累积布局偏移 */
.cls-prevention {
/* 为动态内容预留空间 */
min-height: var(--expected-height, auto);
/* 使用aspect-ratio保持比例 */
aspect-ratio: var(--aspect-ratio, auto);
}
/* 响应式图片容器 */
.responsive-image-container {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
}
/* 16:9 比例 */
.aspect-16-9 {
padding-bottom: 56.25%;
}
/* 4:3 比例 */
.aspect-4-3 {
padding-bottom: 75%;
}
/* 1:1 比例 */
.aspect-1-1 {
padding-bottom: 100%;
}
.responsive-image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ===========================================
5. 滚动性能优化
=========================================== */
/* 优化滚动性能 */
.scroll-optimized {
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
scroll-behavior: smooth;
overscroll-behavior: contain; /* 防止滚动链 */
}
/* 虚拟滚动优化 */
.virtual-scroll-container {
height: 400px;
overflow-y: auto;
contain: strict; /* 严格包含优化 */
}
/* 固定位置元素优化 */
.fixed-optimized {
position: fixed;
transform: translateZ(0); /* 创建合成层 */
will-change: transform;
}
/* ===========================================
6. 字体加载优化
=========================================== */
/* 字体加载状态管理 */
.font-loading {
font-family: system-ui, -apple-system, sans-serif; /* 系统字体回退 */
}
.font-loaded {
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}
/* 字体大小优化 - 避免闪烁 */
.text-optimize {
font-size: clamp(0.875rem, 2.5vw, 1.125rem); /* 流式字体大小 */
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed; /* 性能优先 */
}
/* ===========================================
7. 交互响应优化
=========================================== */
/* 输入延迟优化 */
.input-optimized {
touch-action: manipulation; /* 移除300ms延迟 */
user-select: none; /* 避免意外选择 */
}
.input-optimized input,
.input-optimized textarea,
.input-optimized select {
user-select: text; /* 恢复输入框选择 */
}
/* 点击区域优化 */
.click-area-optimized {
min-height: 44px; /* iOS建议的最小点击区域 */
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===========================================
8. 关键CSS内联优化
=========================================== */
/* 首屏关键样式 - 应该内联到HTML */
.critical-above-fold {
/* Header样式 */
.header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
transform: translateZ(0);
}
/* Hero区域 */
.hero {
min-height: 60vh;
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
display: flex;
align-items: center;
}
/* 基础布局 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
}
/* ===========================================
9. 缓存和压缩优化指示
=========================================== */
/* 这些是服务器端配置建议，放在注释中供参考 */
/*
服务器配置建议:
1. 启用Gzip/Brotli压缩
2. 设置适当的Cache-Control头
3. 使用ETags进行缓存验证
4. 启用HTTP/2
5. 压缩CSS/JS文件
*/
/* ===========================================
10. 移动端性能优化
=========================================== */
@media (max-width: 768px) {
/* 移动端特定优化 */
.mobile-optimized {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* 减少移动端动画 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* 移动端字体优化 */
.mobile-text-optimize {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
}
/* ===========================================
11. 性能监控辅助样式
=========================================== */
/* 性能指标可视化 - 开发时使用 */
.perf-monitor {
position: fixed;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px;
border-radius: 4px;
font-family: monospace;
font-size: 12px;
z-index: 9999;
display: none; /* 生产环境隐藏 */
}
.perf-monitor.show {
display: block;
}
/* Core Web Vitals 指示器 */
.cwv-indicator {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
.cwv-indicator.good {
background: #0cce6b;
}
.cwv-indicator.needs-improvement {
background: #ffa400;
}
.cwv-indicator.poor {
background: #ff4e42;
}