作为经历过数百个WordPress性能优化项目的技术专家，我必须告诉你：加载进度条不仅仅是UI装饰，更是用户体验和性能监控的关键工具。一个正确实现的进度条可以将跳出率降低15-25%，而错误的实现反而会拖慢网站速度。
痛点场景
用户A的困惑：安装了“加载进度条插件”，网站反而变慢了2秒，进度条在页面加载完成后才出现。
开发者B的挫折：手动编写了进度条，但在移动端闪烁不定，在Safari浏览器上根本不显示。
企业主C的尴尬：客户投诉“看到进度条一直在转，以为网站坏了”，实际上页面已经加载完成。
SEO专员D的发现：添加进度条后，核心网页指标中的LCP（最大内容绘制）时间增加了300ms，搜索排名下降。
问题的核心是：大多数进度条实现没有反映真实的加载进度，只是视觉安慰剂，甚至成为性能负担。
快速方案
5分钟实现基础进度条
如果今天必须上线，用这个经过测试的方案：
// 在主题的functions.php中添加
function add_loading_progress_bar() {
if (is_admin()) return;
?>
<style>
#global-loading-bar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #3498db, #2ecc71);
z-index: 999999;
transition: width 0.4s ease;
box-shadow: 0 2px 5px rgba(52, 152, 219, 0.3);
}
#global-loading-bar.loading {
width: 85%;
transition: width 3s cubic-bezier(0.1, 0.5, 0.1, 1);
}
#global-loading-bar.complete {
width: 100%;
opacity: 0;
transition: width 0.2s ease, opacity 0.5s ease 0.2s;
}
</style>
<div id="global-loading-bar"></div>
<script>
(function() {
const progressBar = document.getElementById('global-loading-bar');
if (!progressBar) return;
// 立即显示进度条
progressBar.classList.add('loading');
// 页面加载完成
window.addEventListener('load', function() {
setTimeout(function() {
progressBar.classList.remove('loading');
progressBar.classList.add('complete');
// 移除进度条元素
setTimeout(function() {
if (progressBar.parentNode) {
progressBar.parentNode.removeChild(progressBar);
}
}, 700);
}, 100);
});
// 防止卡在85%
setTimeout(function() {
if (progressBar.classList.contains('loading')) {
progressBar.classList.remove('loading');
progressBar.classList.add('complete');
}
}, 5000);
})();
</script>
<?php
}
add_action('wp_body_open', 'add_loading_progress_bar');这个方案的优势：
- 无外部依赖，不增加HTTP请求
- 自动清理DOM，不留下未使用的元素
- 5秒超时保护，防止进度条卡住
- 平滑动画，不阻塞主线程
- 响应式，所有设备兼容
需要调整的地方：
- 颜色代码（#3498db, #2ecc71）改为你的品牌色
- 高度（3px）根据设计调整
- 超时时间（5000ms）根据网站速度调整
详细教程
第一阶段：真实加载进度实现
基于资源加载的真实进度
// 真实进度追踪器
class RealLoadingProgress {
constructor() {
this.progressBar = null;
this.totalResources = 0;
this.loadedResources = 0;
this.isDocumentReady = false;
this.isWindowLoaded = false;
this.progress = 0;
this.weights = {
document: 10, // DOM解析完成占10%
css: 20, // CSS加载占20%
images: 40, // 图片加载占40%
scripts: 20, // 脚本加载占20%
fonts: 10 // 字体加载占10%
};
this.init();
}
init() {
this.createProgressBar();
this.setupResourceTracking();
this.setupPerformanceAPI();
this.startProgressSimulation();
}
createProgressBar() {
// 创建进度条容器
const bar = document.createElement('div');
bar.id = 'real-loading-progress';
bar.innerHTML = `
<div class="progress-track">
<div class="progress-bar"></div>
<div class="progress-text">0%</div>
</div>
<div class="progress-details">
<span class="current-status">正在初始化...</span>
<span class="loading-speed">0 KB/s</span>
</div>
`;
document.body.appendChild(bar);
this.progressBar = bar;
// 添加样式
this.injectStyles();
}
injectStyles() {
const style = document.createElement('style');
style.textContent = `
#real-loading-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(240, 240, 240, 0.9);
z-index: 2147483647;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.progress-track {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg,
#4f46e5,
#7c3aed,
#a855f7);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.4),
transparent);
animation: shimmer 2s infinite;
}
.progress-text {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
font-weight: 600;
color: #4f46e5;
background: white;
padding: 2px 6px;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.progress-details {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
padding: 8px 12px;
font-size: 12px;
color: #666;
border-top: 1px solid #eee;
display: none;
justify-content: space-between;
}
#real-loading-progress:hover .progress-details {
display: flex;
}
.current-status {
font-weight: 500;
}
.loading-speed {
color: #10b981;
font-family: 'SF Mono', Monaco, monospace;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* 完成状态 */
#real-loading-progress.complete {
opacity: 0;
transform: translateY(-100%);
transition: opacity 0.5s ease, transform 0.5s ease 0.3s;
}
/* 错误状态 */
#real-loading-progress.error .progress-bar {
background: #ef4444;
}
/* 移动端优化 */
@media (max-width: 768px) {
#real-loading-progress {
height: 3px;
}
.progress-text {
display: none;
}
}
`;
document.head.appendChild(style);
}
setupResourceTracking() {
// 追踪图片加载
document.addEventListener('readystatechange', () => {
if (document.readyState === 'interactive') {
this.updateProgress('document', this.weights.document);
this.trackImages();
this.trackCSS();
this.trackFonts();
}
});
// 追踪脚本加载
this.trackScripts();
// 窗口加载完成
window.addEventListener('load', () => {
this.isWindowLoaded = true;
this.updateProgress('window', 100);
this.completeLoading();
});
// 错误处理
window.addEventListener('error', (e) => {
this.handleResourceError(e);
}, true);
}
trackImages() {
const images = document.images;
this.totalResources += images.length;
let loadedCount = 0;
Array.from(images).forEach(img => {
if (img.complete) {
loadedCount++;
this.resourceLoaded('image');
} else {
img.addEventListener('load', () => {
loadedCount++;
this.resourceLoaded('image');
});
img.addEventListener('error', () => {
loadedCount++;
this.resourceLoaded('image');
});
}
});
// 如果没有图片，直接标记完成
if (images.length === 0) {
this.updateProgress('images', this.weights.images);
}
}
trackCSS() {
const stylesheets = document.styleSheets;
let loadedCount = 0;
const totalCSS = stylesheets.length;
if (totalCSS === 0) {
this.updateProgress('css', this.weights.css);
return;
}
Array.from(stylesheets).forEach((sheet, index) => {
try {
if (sheet.cssRules || sheet.rules) {
loadedCount++;
} else {
// 跨域样式表，通过加载事件检测
sheet.ownerNode.addEventListener('load', () => {
loadedCount++;
this.checkCSSProgress(totalCSS, loadedCount);
});
sheet.ownerNode.addEventListener('error', () => {
loadedCount++;
this.checkCSSProgress(totalCSS, loadedCount);
});
}
} catch (e) {
// 跨域安全错误
loadedCount++;
}
});
this.checkCSSProgress(totalCSS, loadedCount);
}
checkCSSProgress(total, loaded) {
if (loaded >= total) {
this.updateProgress('css', this.weights.css);
}
}
trackFonts() {
if (document.fonts && document.fonts.ready) {
document.fonts.ready.then(() => {
this.updateProgress('fonts', this.weights.fonts);
}).catch(() => {
this.updateProgress('fonts', this.weights.fonts);
});
} else {
// 不支持Font Loading API
setTimeout(() => {
this.updateProgress('fonts', this.weights.fonts);
}, 1000);
}
}
trackScripts() {
const scripts = document.querySelectorAll('script[src]');
this.totalResources += scripts.length;
if (scripts.length === 0) {
this.updateProgress('scripts', this.weights.scripts);
return;
}
let loadedCount = 0;
scripts.forEach(script => {
if (script.getAttribute('data-tracked')) return;
script.setAttribute('data-tracked', 'true');
if (script.readyState && script.readyState === 'loaded') {
loadedCount++;
} else {
script.addEventListener('load', () => {
loadedCount++;
this.checkScriptsProgress(scripts.length, loadedCount);
});
script.addEventListener('error', () => {
loadedCount++;
this.checkScriptsProgress(scripts.length, loadedCount);
});
}
});
this.checkScriptsProgress(scripts.length, loadedCount);
}
checkScriptsProgress(total, loaded) {
if (loaded >= total) {
this.updateProgress('scripts', this.weights.scripts);
}
}
resourceLoaded(type) {
this.loadedResources++;
// 更新进度（基于资源数量）
if (this.totalResources > 0) {
const resourceProgress = (this.loadedResources / this.totalResources) * 100;
const weightedProgress = resourceProgress * 0.3; // 资源加载占30%权重
this.setProgress(Math.min(this.progress + weightedProgress, 100));
}
}
updateProgress(phase, targetProgress) {
const phaseProgress = targetProgress;
this.setProgress(Math.max(this.progress, phaseProgress));
// 更新状态文本
const statusMap = {
document: '解析页面结构',
css: '加载样式表',
images: '加载图片资源',
scripts: '执行JavaScript',
fonts: '加载字体',
window: '页面加载完成'
};
this.updateStatus(statusMap[phase] || '加载中...');
}
setProgress(percent) {
this.progress = Math.min(100, Math.max(0, percent));
const bar = this.progressBar.querySelector('.progress-bar');
const text = this.progressBar.querySelector('.progress-text');
if (bar) bar.style.width = this.progress + '%';
if (text) text.textContent = Math.round(this.progress) + '%';
// 更新速度显示
this.updateSpeed();
}
updateStatus(status) {
const statusEl = this.progressBar.querySelector('.current-status');
if (statusEl) {
statusEl.textContent = status;
}
}
updateSpeed() {
// 模拟速度计算
const speedEl = this.progressBar.querySelector('.loading-speed');
if (speedEl && this.progress > 0 && this.progress < 100) {
const speed = 100 + Math.random() * 200; // 模拟速度
speedEl.textContent = Math.round(speed) + ' KB/s';
}
}
setupPerformanceAPI() {
// 使用Performance API获取真实数据
if (window.performance && performance.getEntriesByType) {
const resources = performance.getEntriesByType('resource');
this.totalResources = resources.length;
// 监听后续资源
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
this.resourceLoaded('performance');
});
});
observer.observe({ entryTypes: ['resource'] });
}
}
startProgressSimulation() {
// 保底进度模拟，防止卡住
let simulatedProgress = 0;
const simulate = () => {
if (this.progress >= 100) return;
simulatedProgress += 0.5;
this.setProgress(Math.max(this.progress, Math.min(simulatedProgress, 90)));
if (simulatedProgress < 90) {
setTimeout(simulate, 100);
}
};
setTimeout(simulate, 500);
}
handleResourceError(error) {
console.warn('资源加载错误:', error);
this.progressBar.classList.add('error');
this.updateStatus('资源加载异常');
}
completeLoading() {
this.setProgress(100);
this.updateStatus('页面加载完成');
// 延迟隐藏进度条
setTimeout(() => {
this.progressBar.classList.add('complete');
// 完全移除
setTimeout(() => {
if (this.progressBar.parentNode) {
this.progressBar.parentNode.removeChild(this.progressBar);
}
}, 800);
}, 500);
}
}
// 初始化
document.addEventListener('DOMContentLoaded', () => {
new RealLoadingProgress();
});PHP端集成与优化
// 在functions.php中添加进度条控制器
class LoadingProgressController {
private static $instance = null;
private $options = [];
public static function get_instance() {
if (null === self::$instance) {
self::$instance = new self();
}
return self::$instance;
}
private function __construct() {
$this->options = get_option('loading_progress_settings', [
'enabled' => true,
'type' => 'advanced',
'color' => '#4f46e5',
'height' => 4,
'position' => 'top',
'show_percentage' => true,
'show_speed' => false,
'excluded_pages' => [],
'min_load_time' => 1000,
'debug_mode' => false
]);
$this->init_hooks();
}
private function init_hooks() {
// 前端输出
add_action('wp_body_open', [$this, 'output_progress_html'], 1);
// 管理后台设置
add_action('admin_menu', [$this, 'add_admin_menu']);
add_action('admin_init', [$this, 'register_settings']);
// 性能监控
add_action('wp_footer', [$this, 'output_performance_data'], 99);
// 条件加载
add_filter('loading_progress_should_show', [$this, 'should_show_progress']);
}
public function output_progress_html() {
// 检查是否应该显示
if (!apply_filters('loading_progress_should_show', true)) {
return;
}
// 检查最小加载时间
if (!$this->should_show_based_on_timing()) {
return;
}
// 根据设置输出不同版本
if ($this->options['type'] === 'advanced') {
$this->output_advanced_progress();
} else {
$this->output_basic_progress();
}
// 输出性能监控脚本
$this->output_performance_tracker();
}
private function should_show_based_on_timing() {
// 如果页面加载很快，不需要显示进度条
if (defined('DOING_AJAX') && DOING_AJAX) {
return false;
}
// 通过Cookie检测用户是否经常访问
if (isset($_COOKIE['frequent_visitor']) && $_COOKIE['frequent_visitor'] === 'true') {
// 老用户，页面加载快时不显示
return $this->options['min_load_time'] > 500;
}
return true;
}
private function output_basic_progress() {
$height = intval($this->options['height']);
$color = sanitize_hex_color($this->options['color']);
$position = $this->options['position'] === 'bottom' ? 'bottom: 0; top: auto;' : 'top: 0;';
?>
<style>
.wp-loading-progress {
position: fixed;
<?php echo $position; ?>
left: 0;
width: 0%;
height: <?php echo $height; ?>px;
background: <?php echo $color; ?>;
z-index: 999999;
transition: width 0.3s ease;
box-shadow: 0 2px 8px <?php echo $color; ?>40;
}
.wp-loading-progress.loading {
width: 85%;
transition: width 2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wp-loading-progress.complete {
width: 100%;
opacity: 0;
transition: width 0.2s ease, opacity 0.3s ease 0.2s;
}
/* 减少布局偏移 */
html.has-loading-progress {
scroll-padding-top: <?php echo $position === 'top: 0;' ? $height + 10 : 0; ?>px;
}
</style>
<div class="wp-loading-progress" id="wp-loading-bar"></div>
<script>
(function() {
document.documentElement.classList.add('has-loading-progress');
const bar = document.getElementById('wp-loading-bar');
if (!bar) return;
// 开始加载
setTimeout(() => bar.classList.add('loading'), 10);
// 监听加载事件
window.addEventListener('load', () => {
setTimeout(() => {
bar.classList.remove('loading');
bar.classList.add('complete');
// 清理
setTimeout(() => {
if (bar.parentNode) {
bar.parentNode.removeChild(bar);
document.documentElement.classList.remove('has-loading-progress');
}
}, 500);
}, 50);
});
// 超时保护
setTimeout(() => {
if (bar.classList.contains('loading')) {
bar.classList.remove('loading');
bar.classList.add('complete');
}
}, 8000);
})();
</script>
<?php
}
private function output_advanced_progress() {
// 这里输出上面JavaScript类RealLoadingProgress的代码
// 为了简洁，这里只输出调用代码
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (typeof RealLoadingProgress !== 'undefined') {
new RealLoadingProgress();
}
});
</script>
<?php
}
private function output_performance_tracker() {
if (!$this->options['debug_mode']) {
return;
}
?>
<script>
// 性能数据追踪
if (window.performance && performance.timing) {
const timing = performance.timing;
window.addEventListener('load', function() {
const data = {
dns: timing.domainLookupEnd - timing.domainLookupStart,
tcp: timing.connectEnd - timing.connectStart,
ttfb: timing.responseStart - timing.requestStart,
dom: timing.domContentLoadedEventStart - timing.domLoading,
resources: timing.loadEventStart - timing.domContentLoadedEventEnd,
total: timing.loadEventStart - timing.navigationStart
};
// 发送到服务器（用于分析）
if (navigator.sendBeacon) {
navigator.sendBeacon(
'/wp-admin/admin-ajax.php?action=track_loading_performance',
new Blob([JSON.stringify(data)], { type: 'application/json' })
);
}
});
}
</script>
<?php
}
public function output_performance_data() {
if (!$this->options['debug_mode'] || !current_user_can('administrator')) {
return;
}
if (wp_script_is('jquery', 'done')) {
?>
<script>
jQuery(document).ready(function($) {
if (window.performance && performance.getEntriesByType) {
const resources = performance.getEntriesByType('resource');
const slowResources = resources.filter(r => r.duration > 1000);
if (slowResources.length > 0) {
console.group('🚨 慢速资源警告');
slowResources.forEach(resource => {
console.log(`%c${resource.name}`, 'color: #ef4444', `${Math.round(resource.duration)}ms`);
});
console.groupEnd();
}
}
});
</script>
<?php
}
}
public function should_show_progress($default) {
// 排除的页面类型
if (is_admin() || wp_is_json_request() || wp_is_xml_request()) {
return false;
}
// 排除的特定页面
$excluded = $this->options['excluded_pages'];
if (!empty($excluded)) {
global $post;
if ($post && in_array($post->ID, $excluded)) {
return false;
}
}
// 排除AMP页面
if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
return false;
}
// 排除RSS订阅
if (is_feed()) {
return false;
}
return $default;
}
// 管理后台设置页面
public function add_admin_menu() {
add_options_page(
'加载进度条设置',
'加载进度条',
'manage_options',
'loading-progress',
[$this, 'render_settings_page']
);
}
public function register_settings() {
register_setting('loading_progress_settings', 'loading_progress_settings');
add_settings_section(
'loading_progress_main',
'主要设置',
null,
'loading-progress'
);
add_settings_field(
'progress_type',
'进度条类型',
[$this, 'render_type_field'],
'loading-progress',
'loading_progress_main'
);
add_settings_field(
'progress_color',
'进度条颜色',
[$this, 'render_color_field'],
'loading-progress',
'loading_progress_main'
);
add_settings_field(
'excluded_pages',
'排除的页面',
[$this, 'render_excluded_pages_field'],
'loading-progress',
'loading_progress_main'
);
}
public function render_settings_page() {
?>
<div class="wrap">
<h1>加载进度条设置</h1>
<form method="post" action="options.php">
<?php
settings_fields('loading_progress_settings');
do_settings_sections('loading-progress');
submit_button();
?>
</form>
<div class="card">
<h3>性能统计</h3>
<?php $this->render_performance_stats(); ?>
</div>
</div>
<?php
}
public function render_type_field() {
$type = $this->options['type'] ?? 'basic';
?>
<select name="loading_progress_settings[type]">
<option value="basic" <?php selected($type, 'basic'); ?>>基础进度条</option>
<option value="advanced" <?php selected($type, 'advanced'); ?>>高级进度条（显示百分比）</option>
</select>
<p class="description">高级版本显示加载百分比和状态，但略微增加代码量</p>
<?php
}
public function render_color_field() {
$color = $this->options['color'] ?? '#4f46e5';
?>
<input type="color" name="loading_progress_settings[color]" value="<?php echo esc_attr($color); ?>">
<?php
}
public function render_excluded_pages_field() {
$excluded = $this->options['excluded_pages'] ?? [];
$pages = get_pages();
?>
<select name="loading_progress_settings[excluded_pages][]" multiple style="width: 300px; height: 150px;">
<?php foreach ($pages as $page): ?>
<option value="<?php echo $page->ID; ?>" <?php selected(in_array($page->ID, $excluded)); ?>>
<?php echo esc_html($page->post_title); ?>
</option>
<?php endforeach; ?>
</select>
<p class="description">按住Ctrl键多选</p>
<?php
}
private function render_performance_stats() {
$stats = get_option('loading_performance_stats', []);
if (empty($stats)) {
echo '<p>暂无性能统计数据。</p>';
return;
}
echo '<p>平均加载时间: ' . round($stats['avg_load_time'] / 1000, 2) . '秒</p>';
echo '<p>最慢资源: ' . esc_html($stats['slowest_resource']) . '</p>';
}
}
// 初始化控制器
add_action('init', function() {
LoadingProgressController::get_instance();
});第二阶段：性能影响最小化
关键渲染路径优化
// 非阻塞加载进度条
class NonBlockingProgressLoader {
constructor() {
this.loadPriority = 'idle'; // 'idle', 'low', 'high'
this.isCritical = false;
this.init();
}
init() {
// 检测连接速度
this.detectConnectionSpeed();
// 根据网络状况决定加载策略
if (this.shouldLoadImmediately()) {
this.loadImmediately();
} else {
this.loadOnIdle();
}
}
detectConnectionSpeed() {
// 使用Network Information API
if (navigator.connection) {
const connection = navigator.connection;
switch (connection.effectiveType) {
case 'slow-2g':
case '2g':
this.loadPriority = 'idle';
break;
case '3g':
this.loadPriority = 'low';
break;
case '4g':
default:
this.loadPriority = 'high';
}
// 如果用户开启了节省流量模式
if (connection.saveData === true) {
this.loadPriority = 'idle';
this.isCritical = false;
}
}
}
shouldLoadImmediately() {
// 页面加载缓慢时立即显示
if (performance.timing) {
const domReady = performance.timing.domContentLoadedEventStart -
performance.timing.navigationStart;
if (domReady > 2000) {
return true; // DOM解析超过2秒，立即显示
}
}
return this.loadPriority === 'high' && !this.isCritical;
}
loadImmediately() {
// 内联关键CSS
const criticalCSS = `
.loading-progress-critical {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: #4f46e5;
z-index: 999999;
transition: width 0.3s ease;
}
`;
// 插入关键CSS
const style = document.createElement('style');
style.textContent = criticalCSS;
style.setAttribute('data-critical', 'true');
document.head.insertBefore(style, document.head.firstChild);
// 插入进度条HTML
const progressBar = document.createElement('div');
progressBar.className = 'loading-progress-critical';
progressBar.id = 'critical-progress-bar';
document.body.insertBefore(progressBar, document.body.firstChild);
// 立即开始动画
requestAnimationFrame(() => {
progressBar.style.width = '30%';
});
// 加载非关键部分
this.loadLazyParts();
}
loadOnIdle() {
// 使用requestIdleCallback延迟加载
if ('requestIdleCallback' in window) {
window.requestIdleCallback(() => {
this.loadProgressBar();
}, { timeout: 2000 });
} else {
// 回退方案
setTimeout(() => {
this.loadProgressBar();
}, 2000);
}
}
loadProgressBar() {
// 动态加载完整进度条
const script = document.createElement('script');
script.src = this.getProgressBarScriptURL();
script.async = true;
script.defer = true;
// 添加资源提示
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'script';
link.href = script.src;
document.head.appendChild(link);
document.head.appendChild(script);
}
loadLazyParts() {
// 延迟加载非关键部分
const lazyCSS = `
.loading-progress-critical.complete {
opacity: 0;
transition: opacity 0.5s ease;
}
.progress-details {
display: none;
}
@media (max-width: 768px) {
.loading-progress-critical {
height: 2px;
}
}
`;
// 在空闲时加载
if ('requestIdleCallback' in window) {
window.requestIdleCallback(() => {
this.injectLazyCSS(lazyCSS);
});
} else {
setTimeout(() => {
this.injectLazyCSS(lazyCSS);
}, 3000);
}
}
injectLazyCSS(css) {
const style = document.createElement('style');
style.textContent = css;
style.setAttribute('data-lazy', 'true');
document.head.appendChild(style);
}
getProgressBarScriptURL() {
// 根据设置返回不同版本的脚本
const config = window.loadingProgressConfig || {};
if (config.type === 'basic') {
return '/wp-content/plugins/loading-progress/js/basic.min.js?ver=1.0.0';
} else {
return '/wp-content/plugins/loading-progress/js/advanced.min.js?ver=1.0.0';
}
}
}
// 在合适的时候初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new NonBlockingProgressLoader();
});
} else {
new NonBlockingProgressLoader();
}服务器端性能监控
// 性能监控与自适应调整
class LoadingProgressPerformanceMonitor {
private $stats = [];
private $thresholds = [
'fast' => 1000, // 1秒内 - 不显示进度条
'medium' => 3000, // 3秒内 - 显示基础进度条
'slow' => 5000 // 5秒以上 - 显示详细进度条
];
public function __construct() {
$this->load_stats();
$this->setup_hooks();
}
private function setup_hooks() {
// 记录性能数据
add_action('wp_ajax_track_loading_performance', [$this, 'track_performance']);
add_action('wp_ajax_nopriv_track_loading_performance', [$this, 'track_performance']);
// 输出自适应配置
add_action('wp_head', [$this, 'output_adaptive_config'], 1);
// 定期清理旧数据
add_action('loading_progress_cleanup', [$this, 'cleanup_old_stats']);
if (!wp_next_scheduled('loading_progress_cleanup')) {
wp_schedule_event(time(), 'daily', 'loading_progress_cleanup');
}
}
public function track_performance() {
// 验证请求
if (!isset($_SERVER['HTTP_REFERER']) ||
strpos($_SERVER['HTTP_REFERER'], home_url()) !== 0) {
wp_die('Invalid request', 403);
}
$data = json_decode(file_get_contents('php://input'), true);
if ($data && is_array($data)) {
$this->save_performance_data($data);
}
wp_die('OK');
}
private function save_performance_data($data) {
$today = current_time('Y-m-d');
$stats = $this->stats;
if (!isset($stats[$today])) {
$stats[$today] = [
'count' => 0,
'total_time' => 0,
'fast' => 0,
'medium' => 0,
'slow' => 0,
'resources' => []
];
}
// 更新统计数据
$stats[$today]['count']++;
$stats[$today]['total_time'] += $data['total'];
// 分类统计
if ($data['total'] < $this->thresholds['fast']) {
$stats[$today]['fast']++;
} elseif ($data['total'] < $this->thresholds['medium']) {
$stats[$today]['medium']++;
} else {
$stats[$today]['slow']++;
}
// 保存
$this->stats = $stats;
update_option('loading_progress_performance_stats', $stats, false);
// 更新全局建议
$this->update_recommendations();
}
private function update_recommendations() {
$last_7_days = array_slice($this->stats, -7);
if (count($last_7_days) < 3) {
return; // 数据不足
}
$total_loads = 0;
$total_time = 0;
foreach ($last_7_days as $day) {
$total_loads += $day['count'];
$total_time += $day['total_time'];
}
$avg_load_time = $total_time / $total_loads;
$recommendations = get_option('loading_progress_recommendations', []);
// 根据平均加载时间给出建议
if ($avg_load_time < $this->thresholds['fast']) {
$recommendations['progress_type'] = 'none'; // 不需要进度条
$recommendations['reason'] = '网站加载速度很快，进度条可能反而干扰用户';
} elseif ($avg_load_time < $this->thresholds['medium']) {
$recommendations['progress_type'] = 'basic';
$recommendations['reason'] = '加载速度中等，基础进度条即可';
} else {
$recommendations['progress_type'] = 'advanced';
$recommendations['reason'] = '加载较慢，详细进度条可减少用户焦虑';
}
update_option('loading_progress_recommendations', $recommendations);
}
public function output_adaptive_config() {
$recommendations = get_option('loading_progress_recommendations', []);
$user_config = get_option('loading_progress_settings', []);
// 用户设置优先
$type = $user_config['type'] ?? ($recommendations['progress_type'] ?? 'advanced');
// 如果是移动端且网络慢，使用基础版
if (wp_is_mobile()) {
$type = 'basic';
}
?>
<script>
window.loadingProgressConfig = {
type: '<?php echo esc_js($type); ?>',
adaptive: true,
showForReturningVisitors: <?php echo $this->should_show_for_returning_visitors() ? 'true' : 'false'; ?>,
minLoadTime: <?php echo $this->get_min_load_time(); ?>
};
// 存储用户访问模式
if (!sessionStorage.getItem('first_visit_today')) {
sessionStorage.setItem('first_visit_today', 'true');
document.cookie = 'frequent_visitor=true; max-age=86400; path=/';
}
</script>
<?php
}
private function should_show_for_returning_visitors() {
// 回头客对网站速度有预期，可以减少进度条显示
$stats = $this->stats;
if (empty($stats)) {
return true;
}
$last_day = end($stats);
if ($last_day['fast'] / $last_day['count'] > 0.8) {
return false; // 80%的访问都很快，回头客可不显示
}
return true;
}
private function get_min_load_time() {
$recommendations = get_option('loading_progress_recommendations', []);
switch ($recommendations['progress_type'] ?? 'advanced') {
case 'none':
return 3000; // 3秒以上才显示
case 'basic':
return 1500; // 1.5秒以上显示
case 'advanced':
default:
return 800; // 0.8秒以上显示
}
}
private function load_stats() {
$this->stats = get_option('loading_progress_performance_stats', []);
// 只保留30天数据
$thirty_days_ago = date('Y-m-d', strtotime('-30 days'));
foreach ($this->stats as $date => $data) {
if ($date < $thirty_days_ago) {
unset($this->stats[$date]);
}
}
}
public function cleanup_old_stats() {
$this->load_stats(); // 重新加载，确保最新
update_option('loading_progress_performance_stats', $this->stats, false);
}
}
// 初始化性能监控
new LoadingProgressPerformanceMonitor();第三阶段：用户体验与无障碍访问
无障碍访问支持
// 无障碍访问增强
class AccessibleLoadingProgress {
constructor() {
this.progressBar = null;
this.liveRegion = null;
this.init();
}
init() {
this.createLiveRegion();
this.setupARIA();
this.setupKeyboardNavigation();
}
createLiveRegion() {
// 创建ARIA实时区域
this.liveRegion = document.createElement('div');
this.liveRegion.setAttribute('aria-live', 'polite');
this.liveRegion.setAttribute('aria-atomic', 'true');
this.liveRegion.setAttribute('aria-relevant', 'additions text');
this.liveRegion.className = 'screen-reader-text';
this.liveRegion.style.cssText = `
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
`;
document.body.appendChild(this.liveRegion);
}
setupARIA() {
// 监听进度条创建
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.id && node.id.includes('progress')) {
this.progressBar = node;
this.enhanceProgressBar();
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
// 初始检查
const existingBar = document.querySelector('[id*="progress"], .progress-bar, .loading-bar');
if (existingBar) {
this.progressBar = existingBar;
this.enhanceProgressBar();
}
}
enhanceProgressBar() {
if (!this.progressBar) return;
// 添加ARIA属性
this.progressBar.setAttribute('role', 'progressbar');
this.progressBar.setAttribute('aria-valuemin', '0');
this.progressBar.setAttribute('aria-valuemax', '100');
this.progressBar.setAttribute('aria-valuenow', '0');
this.progressBar.setAttribute('aria-label', '页面加载进度');
// 添加描述
const descriptionId = 'progress-description-' + Date.now();
const description = document.createElement('div');
description.id = descriptionId;
description.className = 'screen-reader-text';
description.textContent = '显示页面加载进度，从0%到100%';
this.progressBar.appendChild(description);
this.progressBar.setAttribute('aria-describedby', descriptionId);
// 监听进度变化
this.observeProgressChanges();
}
observeProgressChanges() {
// 监听宽度变化
const widthObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'style') {
this.updateARIAValues();
}
});
});
widthObserver.observe(this.progressBar, {
attributes: true,
attributeFilter: ['style']
});
// 监听类名变化
const classObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'class') {
this.announceStatusChange();
}
});
});
classObserver.observe(this.progressBar, {
attributes: true,
attributeFilter: ['class']
});
}
updateARIAValues() {
if (!this.progressBar) return;
const width = this.progressBar.style.width || '0%';
const percent = parseInt(width, 10);
if (!isNaN(percent)) {
this.progressBar.setAttribute('aria-valuenow', percent);
// 播报重要节点
if (percent === 50 || percent === 80 || percent === 100) {
this.announceProgress(percent);
}
}
}
announceProgress(percent) {
if (!this.liveRegion) return;
let message = '';
switch (percent) {
case 50:
message = '页面加载完成一半';
break;
case 80:
message = '页面加载即将完成';
break;
case 100:
message = '页面加载完成';
break;
default:
message = `页面加载 ${percent}%`;
}
this.liveRegion.textContent = message;
// 为屏幕阅读器添加延迟
setTimeout(() => {
this.liveRegion.textContent = '';
}, 1000);
}
announceStatusChange() {
if (!this.progressBar || !this.liveRegion) return;
if (this.progressBar.classList.contains('complete')) {
this.liveRegion.textContent = '页面加载完成，进度条已隐藏';
setTimeout(() => {
this.liveRegion.textContent = '';
}, 1500);
} else if (this.progressBar.classList.contains('error')) {
this.liveRegion.textContent = '页面加载遇到问题，请刷新页面';
}
}
setupKeyboardNavigation() {
// 允许通过键盘跳过进度条
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && this.progressBar) {
this.skipProgressBar();
}
});
}
skipProgressBar() {
if (!this.progressBar) return;
// 立即完成进度条
this.progressBar.style.width = '100%';
this.progressBar.classList.add('complete');
// 播报
if (this.liveRegion) {
this.liveRegion.textContent = '已跳过加载进度条';
setTimeout(() => {
this.liveRegion.textContent = '';
}, 1000);
}
// 快速移除
setTimeout(() => {
if (this.progressBar && this.progressBar.parentNode) {
this.progressBar.parentNode.removeChild(this.progressBar);
this.progressBar = null;
}
}, 300);
}
}
// 初始化无障碍支持
if (typeof window !== 'undefined') {
document.addEventListener('DOMContentLoaded', () => {
new AccessibleLoadingProgress();
});
}视觉反馈优化
/* 视觉反馈增强 */
.loading-progress-enhanced {
/* 基础样式 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
z-index: 2147483647;
overflow: hidden;
/* 现代渐变 */
background: linear-gradient(
90deg,
rgba(79, 70, 229, 0.1) 0%,
rgba(79, 70, 229, 0.3) 20%,
rgba(79, 70, 229, 0.6) 40%,
rgba(124, 58, 237, 0.8) 60%,
rgba(168, 85, 247, 0.9) 80%,
rgba(79, 70, 229, 1) 100%
);
/* 动画效果 */
animation: pulse-background 2s ease-in-out infinite;
}
.loading-progress-enhanced .progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(
90deg,
#4f46e5,
#7c3aed,
#a855f7,
#d946ef
);
position: relative;
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
/* 光泽效果 */
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4) 50%,
transparent
);
animation: shimmer 1.5s infinite;
}
}
/* 不同状态的视觉反馈 */
.loading-progress-enhanced.loading-fast .progress-fill {
background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.loading-progress-enhanced.loading-slow .progress-fill {
background: linear-gradient(90deg, #f59e0b, #fbbf24, #fcd34d);
animation: pulse-warning 1s infinite;
}
.loading-progress-enhanced.loading-stalled .progress-fill {
background: linear-gradient(90deg, #ef4444, #f87171, #fca5a5);
animation: pulse-error 0.8s infinite;
}
.loading-progress-enhanced.complete .progress-fill {
width: 100% !important;
background: linear-gradient(90deg, #10b981, #34d399);
transition: width 0.2s ease, background 0.3s ease;
&::after {
animation: none;
background: rgba(255, 255, 255, 0.8);
transition: opacity 0.5s ease;
}
}
/* 进度点标记 */
.progress-milestone {
position: absolute;
top: 50%;
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.5);
z-index: 2;
/* 不同里程碑 */
&.milestone-25 { left: 25%; }
&.milestone-50 { left: 50%; }
&.milestone-75 { left: 75%; }
/* 到达时的动画 */
&.reached {
animation: milestone-reached 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
background: #4f46e5;
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.3);
}
}
/* 百分比显示 */
.progress-percentage {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-family: 'SF Mono', Monaco, monospace;
font-size: 11px;
font-weight: 600;
color: #4f46e5;
background: white;
padding: 2px 6px;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
opacity: 0.9;
transition: all 0.3s ease;
.loading-progress-enhanced:hover & {
opacity: 1;
transform: translateY(-50%) scale(1.05);
}
}
/* 加载完成庆祝效果 */
.loading-progress-enhanced.complete::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent,
rgba(16, 185, 129, 0.2) 20%,
rgba(16, 185, 129, 0.4) 40%,
rgba(16, 185, 129, 0.2) 60%,
transparent
);
animation: complete-celebration 1s ease-out;
z-index: 1;
}
/* 动画定义 */
@keyframes pulse-background {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.2; }
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes pulse-warning {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
@keyframes pulse-error {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes milestone-reached {
0% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.5); }
100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes complete-celebration {
0% { opacity: 0; transform: translateX(-100%); }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; transform: translateX(100%); }
}
/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
.loading-progress-enhanced {
background: linear-gradient(
90deg,
rgba(79, 70, 229, 0.05) 0%,
rgba(79, 70, 229, 0.15) 20%,
rgba(79, 70, 229, 0.25) 40%,
rgba(124, 58, 237, 0.35) 60%,
rgba(168, 85, 247, 0.45) 80%,
rgba(79, 70, 229, 0.5) 100%
);
}
.progress-percentage {
background: #1f2937;
color: #a5b4fc;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.progress-milestone {
background: #374151;
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
&.reached {
background: #818cf8;
box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.3);
}
}
}
/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {
.loading-progress-enhanced,
.loading-progress-enhanced .progress-fill,
.progress-milestone,
.progress-percentage {
animation: none !important;
transition: none !important;
}
.progress-fill::after {
display: none;
}
}进阶技巧
基于用户行为的智能控制
// 智能进度条控制器
class IntelligentProgressController {
constructor() {
this.config = window.loadingProgressConfig || {};
this.userBehavior = this.getUserBehaviorProfile();
this.pageType = this.detectPageType();
this.init();
}
init() {
this.setupEventListeners();
this.adaptToUserBehavior();
this.setupPerformanceBudget();
}
getUserBehaviorProfile() {
const profile = {
isReturning: sessionStorage.getItem('visited_before') === 'true',
visitCount: parseInt(localStorage.getItem('visit_count') || 0),
avgStayTime: parseInt(localStorage.getItem('avg_stay_time') || 0),
preferredDevice: this.detectPreferredDevice(),
connectionHistory: JSON.parse(localStorage.getItem('connection_history') || '[]')
};
// 更新访问统计
profile.visitCount++;
localStorage.setItem('visit_count', profile.visitCount);
sessionStorage.setItem('visited_before', 'true');
return profile;
}
detectPreferredDevice() {
const ua = navigator.userAgent;
const isMobile = /Mobi|Android|iPhone/i.test(ua);
const isTablet = /Tablet|iPad/i.test(ua);
if (isMobile) return 'mobile';
if (isTablet) return 'tablet';
return 'desktop';
}
detectPageType() {
const path = window.location.pathname;
if (path === '/' || path === '') return 'homepage';
if (path.includes('/blog/') || path.includes('/article/')) return 'article';
if (path.includes('/product/') || path.includes('/shop/')) return 'product';
if (path.includes('/category/') || path.includes('/tag/')) return 'archive';
if (path.includes('/contact') || path.includes('/about')) return 'page';
return 'unknown';
}
adaptToUserBehavior() {
const { isReturning, visitCount, avgStayTime } = this.userBehavior;
// 老用户且网站快速加载，减少进度条显示
if (isReturning && visitCount > 3 && avgStayTime > 30000) {
this.config.minLoadTime = 2000; // 2秒以上才显示
this.config.showDetailed = false;
}
// 移动端用户，简化进度条
if (this.userBehavior.preferredDevice === 'mobile') {
this.config.height = 2;
this.config.showPercentage = false;
}
// 根据页面类型调整
switch (this.pageType) {
case 'article':
this.config.position = 'top';
this.config.showDetailed = true;
break;
case 'product':
this.config.position = 'top';
this.config.showDetailed = false; // 产品页专注于内容
break;
case 'homepage':
this.config.showDetailed = true; // 首页展示更多信息
break;
}
}
setupPerformanceBudget() {
// 设置性能预算
this.performanceBudget = {
maxDOMSize: 1500, // 最大DOM节点数
maxResources: 50, // 最大资源数
maxLoadTime: 3000 // 最大加载时间
};
// 监控性能
this.setupPerformanceMonitoring();
}
setupPerformanceMonitoring() {
if (window.performance && performance.getEntriesByType) {
const resources = performance.getEntriesByType('resource');
// 检查是否超预算
if (resources.length > this.performanceBudget.maxResources) {
this.showPerformanceWarning('too_many_resources');
}
// 监控DOM大小
setTimeout(() => {
const domSize = document.getElementsByTagName('*').length;
if (domSize > this.performanceBudget.maxDOMSize) {
this.showPerformanceWarning('large_dom');
}
}, 1000);
}
}
showPerformanceWarning(type) {
const warnings = {
too_many_resources: '检测到过多资源文件，可能影响加载速度',
large_dom: '页面结构复杂，建议优化DOM结构',
slow_network: '当前网络较慢，已启用轻量模式'
};
console.warn('🚨 性能警告:', warnings[type]);
// 在控制台显示详细建议
if (type === 'too_many_resources') {
console.group('资源优化建议:');
console.log('1. 合并CSS和JavaScript文件');
console.log('2. 使用WebP格式图片');
console.log('3. 启用CDN加速');
console.log('4. 移除未使用的资源');
console.groupEnd();
}
}
setupEventListeners() {
// 监听网络变化
if (navigator.connection) {
navigator.connection.addEventListener('change', () => {
this.handleNetworkChange();
});
}
// 监听页面可见性
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
this.handlePageHidden();
} else {
this.handlePageVisible();
}
});
// 监听用户互动
this.setupUserInteractionTracking();
}
handleNetworkChange() {
const connection = navigator.connection;
if (connection.effectiveType.includes('2g') || connection.effectiveType.includes('slow-2g')) {
// 网络变慢，简化进度条
this.simplifyProgressBar();
}
}
simplifyProgressBar() {
const progressBar = document.querySelector('.loading-progress-enhanced');
if (progressBar) {
progressBar.style.height = '2px';
progressBar.querySelectorAll('.progress-milestone, .progress-percentage').forEach(el => {
el.style.display = 'none';
});
}
}
handlePageHidden() {
// 页面被隐藏，暂停进度条动画
const progressBar = document.querySelector('.loading-progress-enhanced');
if (progressBar) {
progressBar.style.animationPlayState = 'paused';
}
}
handlePageVisible() {
// 页面恢复显示
const progressBar = document.querySelector('.loading-progress-enhanced');
if (progressBar) {
progressBar.style.animationPlayState = 'running';
}
}
setupUserInteractionTracking() {
let interactionTimeout;
const resetInteractionTimer = () => {
clearTimeout(interactionTimeout);
interactionTimeout = setTimeout(() => {
this.recordUserAttention();
}, 10000); // 10秒无操作记录为一次有效停留
};
// 监听用户互动
['mousemove', 'click', 'scroll', 'keydown'].forEach(event => {
document.addEventListener(event, resetInteractionTimer, { passive: true });
});
resetInteractionTimer();
}
recordUserAttention() {
const now = Date.now();
const lastVisit = parseInt(localStorage.getItem('last_visit') || '0');
const stayTime = now - lastVisit;
if (stayTime > 1000) { // 至少停留1秒
const avgStayTime = parseInt(localStorage.getItem('avg_stay_time') || '0');
const newAvg = avgStayTime > 0 ? Math.round((avgStayTime + stayTime) / 2) : stayTime;
localStorage.setItem('avg_stay_time', newAvg.toString());
}
localStorage.setItem('last_visit', now.toString());
}
}
// 初始化智能控制器
document.addEventListener('DOMContentLoaded', () => {
new IntelligentProgressController();
});错误处理与降级策略
// 健壮的错误处理和降级
class ProgressBarFallback {
constructor() {
this.hasError = false;
this.fallbackActive = false;
this.init();
}
init() {
this.setupErrorHandling();
this.setupCompatibilityCheck();
this.prepareFallback();
}
setupErrorHandling() {
// 全局错误捕获
window.addEventListener('error', (e) => {
if (e.target && (
e.target.tagName === 'SCRIPT' ||
e.target.tagName === 'LINK' ||
e.target.tagName === 'STYLE'
)) {
this.handleResourceError(e);
}
}, true);
// 未处理的Promise拒绝
window.addEventListener('unhandledrejection', (e) => {
console.error('未处理的Promise拒绝:', e.reason);
this.activateFallback('promise_rejection');
});
// 监控进度条错误
this.monitorProgressBar();
}
monitorProgressBar() {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList') {
mutation.removedNodes.forEach((node) => {
if (node.id && node.id.includes('progress')) {
// 进度条被意外移除
this.restoreProgressBar();
}
});
}
});
});
observer.observe(document.body, { childList: true, subtree: true });
// 检查进度条是否正常显示
setTimeout(() => {
const progressBar = document.querySelector('[id*="progress"], .progress-bar');
if (!progressBar || getComputedStyle(progressBar).display === 'none') {
this.activateFallback('missing_progress');
}
}, 1000);
}
setupCompatibilityCheck() {
// 检查浏览器兼容性
const compatibility = {
cssTransitions: 'transition' in document.documentElement.style,
cssAnimations: 'animation' in document.documentElement.style,
intersectionObserver: 'IntersectionObserver' in window,
performanceAPI: 'performance' in window && 'getEntriesByType' in performance
};
// 如果不支持关键特性，启用降级模式
if (!compatibility.cssTransitions || !compatibility.cssAnimations) {
this.activateFallback('legacy_browser');
}
}
prepareFallback() {
// 准备降级样式
const fallbackCSS = `
.progress-bar-fallback {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 2px;
background: #4f46e5;
z-index: 999999;
}
.progress-bar-fallback.active {
width: 85%;
transition: width 3s linear;
}
.progress-bar-fallback.complete {
width: 100%;
opacity: 0;
}
/* 极简模式，兼容性最好 */
.progress-bar-minimal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: #ddd;
z-index: 999999;
}
.progress-bar-minimal::before {
content: '';
display: block;
height: 100%;
width: 0%;
background: #4f46e5;
animation: minimal-loading 2s linear infinite;
}
.progress-bar-minimal.active {
display: block;
}
@keyframes minimal-loading {
0% { width: 0%; margin-left: 0%; }
50% { width: 50%; margin-left: 25%; }
100% { width: 0%; margin-left: 100%; }
}
/* 无JavaScript备用 */
.no-js-progress {
display: none;
}
.no-js .no-js-progress {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
#4f46e5 0%,
#4f46e5 50%,
transparent 50%,
transparent 100%);
background-size: 200% 100%;
animation: no-js-loading 1s linear infinite;
}
@keyframes no-js-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
`;
const style = document.createElement('style');
style.id = 'progress-fallback-styles';
style.textContent = fallbackCSS;
document.head.appendChild(style);
// 添加无JS支持
document.documentElement.className =
document.documentElement.className.replace(/\bno-js\b/, '') + ' js';
}
handleResourceError(error) {
console.warn('资源加载错误:', error);
// 不因为单个资源错误就降级
this.errorCount = (this.errorCount || 0) + 1;
if (this.errorCount > 3) {
this.activateFallback('multiple_errors');
}
}
activateFallback(reason) {
if (this.fallbackActive) return;
console.log('激活降级模式，原因:', reason);
this.fallbackActive = true;
this.hasError = true;
// 移除高级进度条
const advancedBars = document.querySelectorAll(
'.loading-progress-enhanced, ' +
'.real-loading-progress, ' +
'.wp-loading-progress'
);
advancedBars.forEach(bar => {
bar.parentNode.removeChild(bar);
});
// 根据原因选择降级方案
switch (reason) {
case 'legacy_browser':
this.showMinimalProgress();
break;
case 'multiple_errors':
this.showFallbackProgress();
break;
default:
this.showFallbackProgress();
}
// 发送错误报告
this.reportError(reason);
}
showMinimalProgress() {
const bar = document.createElement('div');
bar.className = 'progress-bar-minimal active';
bar.id = 'minimal-progress-bar';
document.body.appendChild(bar);
// 窗口加载完成后移除
window.addEventListener('load', () => {
setTimeout(() => {
if (bar.parentNode) {
bar.parentNode.removeChild(bar);
}
}, 500);
});
}
showFallbackProgress() {
const bar = document.createElement('div');
bar.className = 'progress-bar-fallback';
bar.id = 'fallback-progress-bar';
document.body.appendChild(bar);
// 开始加载
requestAnimationFrame(() => {
bar.classList.add('active');
});
// 完成加载
window.addEventListener('load', () => {
bar.classList.remove('active');
bar.classList.add('complete');
setTimeout(() => {
if (bar.parentNode) {
bar.parentNode.removeChild(bar);
}
}, 500);
});
// 超时保护
setTimeout(() => {
if (bar.classList.contains('active')) {
bar.classList.remove('active');
bar.classList.add('complete');
}
}, 8000);
}
restoreProgressBar() {
if (this.fallbackActive) return;
console.log('恢复进度条显示');
this.showFallbackProgress();
}
reportError(reason) {
const data = {
error: reason,
url: window.location.href,
userAgent: navigator.userAgent,
timestamp: new Date().toISOString()
};
// 发送错误报告
if (navigator.sendBeacon) {
navigator.sendBeacon(
'/wp-json/loading-progress/v1/error',
new Blob([JSON.stringify(data)], { type: 'application/json' })
);
}
}
}
// 立即初始化错误处理
new ProgressBarFallback();FAQ
Q：进度条会影响我的网站速度吗？如何量化影响？
A：会，但影响可控。
湘公网安备43020002000238