在现代Web开发中，页面加载性能至关重要。阻塞页面加载的脚本会显著影响用户体验，尤其是当引入像jQuery这样的大型库时。本文将详细介绍多种方法，帮助你在不阻塞页面加载的情况下高效异步引入jQuery库，并提供完整的代码示例和最佳实践。
为什么需要异步引入jQuery？
阻塞加载的问题
当浏览器遇到<script>标签时，默认行为是同步加载和执行。这意味着：
- 浏览器会暂停HTML解析，直到脚本下载并执行完毕
- 如果脚本文件较大（如jQuery的压缩版约30KB），会明显延迟页面渲染
- 多个脚本会按顺序阻塞，形成”脚本瀑布流”
异步引入的优势
- 非阻塞：脚本在后台下载，不干扰HTML解析
- 并行下载：浏览器可以同时下载多个资源
- 更快的首屏渲染：用户能更快看到内容
- 更好的用户体验：减少白屏时间
方法一：使用async属性（推荐）
async属性是HTML5标准，告诉浏览器异步下载脚本并在下载完成后立即执行，不保证执行顺序。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>异步引入jQuery示例</title>
<!-- 异步引入jQuery -->
<script async src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 依赖jQuery的脚本 -->
<script async>
// 注意：由于async特性，jQuery可能还未加载完成
// 需要等待jQuery加载完成后再执行
function waitForJQuery(callback) {
if (window.jQuery) {
callback();
} else {
setTimeout(() => waitForJQuery(callback), 50);
}
}
// 等待jQuery加载完成
waitForJQuery(function() {
console.log('jQuery已加载，版本：', jQuery.fn.jquery);
// 现在可以安全使用jQuery
$(document).ready(function() {
$('#message').text('jQuery已成功加载并执行！');
$('#message').css('color', 'green');
});
});
</script>
</head>
<body>
<h1>异步引入jQuery测试</h1>
<div id="message">正在加载jQuery...</div>
<!-- 页面内容 -->
<section>
<h2>页面内容</h2>
<p>即使jQuery正在异步加载，页面内容也能立即显示。</p>
<button id="testButton">测试jQuery功能</button>
</section>
<script>
// 这个脚本也会异步执行
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM已加载，jQuery状态：', window.jQuery ? '已加载' : '未加载');
// 为按钮添加事件监听器（不依赖jQuery）
document.getElementById('testButton').addEventListener('click', function() {
alert('按钮被点击了！');
});
});
</script>
</body>
</html>
async属性的注意事项
- 执行顺序不可控：如果多个脚本都使用
async，它们可能以任意顺序执行 - 依赖管理：如果脚本A依赖脚本B，不能同时使用
async - 错误处理：脚本加载失败不会阻塞页面，但可能影响功能
方法二：使用defer属性
defer属性也是HTML5标准，它告诉浏览器异步下载脚本，但在HTML解析完成后、DOMContentLoaded事件触发前按顺序执行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用defer引入jQuery</title>
<!-- defer引入jQuery -->
<script defer src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 其他依赖jQuery的脚本也使用defer -->
<script defer src="app.js"></script>
<script defer src="plugins.js"></script>
</head>
<body>
<h1>使用defer引入jQuery</h1>
<div id="content">页面内容</div>
<!-- 注意：defer脚本在DOMContentLoaded之前执行 -->
<script>
// 这个脚本没有defer，会立即执行
console.log('立即执行的脚本');
</script>
</body>
</html>
app.js文件内容
// app.js - 使用defer引入，会在jQuery之后执行
console.log('app.js执行，jQuery版本：', jQuery.fn.jquery);
$(document).ready(function() {
$('#content').text('jQuery已加载，页面功能已初始化！');
// 添加交互功能
$('#content').click(function() {
$(this).css('background-color', '#e0f7fa');
});
});
async vs defer 对比
| 特性 | async |
defer |
|---|---|---|
| 执行时机 | 下载完成后立即执行 | HTML解析完成后、DOMContentLoaded前 |
| 执行顺序 | 不保证顺序 | 保证顺序（按HTML中出现的顺序） |
| DOM依赖 | 可能阻塞DOM解析 | 不阻塞DOM解析 |
| 适用场景 | 独立脚本、无依赖的脚本 | 有依赖关系的脚本 |
| jQuery推荐 | 适合单个jQuery文件 | 适合jQuery+其他依赖脚本 |
方法三：动态创建脚本标签
通过JavaScript动态创建<script>元素，可以更灵活地控制加载时机和错误处理。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态创建脚本标签引入jQuery</title>
<style>
.loading { color: #666; }
.success { color: green; font-weight: bold; }
.error { color: red; }
</style>
</head>
<body>
<h1>动态创建脚本标签引入jQuery</h1>
<div id="status" class="loading">正在准备加载jQuery...</div>
<div id="result"></div>
<script>
// 动态加载jQuery的函数
function loadjQuery(callback) {
const statusEl = document.getElementById('status');
// 检查jQuery是否已存在
if (window.jQuery) {
statusEl.textContent = 'jQuery已存在，直接使用';
statusEl.className = 'success';
callback();
return;
}
// 创建script元素
const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
script.async = true; // 异步加载
// 加载成功回调
script.onload = function() {
statusEl.textContent = 'jQuery加载成功！版本：' + jQuery.fn.jquery;
statusEl.className = 'success';
callback();
};
// 加载失败处理
script.onerror = function() {
statusEl.textContent = 'jQuery加载失败！';
statusEl.className = 'error';
// 降级方案：使用本地备份
console.warn('CDN加载失败，尝试使用本地备份');
loadLocaljQuery(callback);
};
// 插入到head中
document.head.appendChild(script);
}
// 本地备份加载
function loadLocaljQuery(callback) {
const script = document.createElement('script');
script.src = 'js/jquery-3.6.0.min.js'; // 本地路径
script.onload = function() {
document.getElementById('status').textContent = '使用本地jQuery加载成功！';
document.getElementById('status').className = 'success';
callback();
};
script.onerror = function() {
document.getElementById('status').textContent = '所有jQuery加载方式均失败！';
document.getElementById('status').className = 'error';
// 执行降级方案：使用原生JavaScript
fallbackToNative();
};
document.head.appendChild(script);
}
// 降级到原生JavaScript
function fallbackToNative() {
document.getElementById('result').innerHTML =
'<p>jQuery加载失败，使用原生JavaScript实现功能：</p>' +
'<button id="nativeBtn">点击测试</button>';
document.getElementById('nativeBtn').addEventListener('click', function() {
alert('原生JavaScript工作正常！');
});
}
// 页面加载完成后开始加载jQuery
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM已加载，开始异步加载jQuery...');
// 延迟一小段时间，确保页面其他部分已渲染
setTimeout(function() {
loadjQuery(function() {
// jQuery加载完成后的回调
console.log('jQuery加载完成，开始初始化应用');
initializeApp();
});
}, 100);
});
// 应用初始化函数
function initializeApp() {
const resultEl = document.getElementById('result');
// 使用jQuery创建动态内容
const $container = $('<div>', {
id: 'dynamicContent',
html: '<h3>jQuery动态创建的内容</h3>' +
'<ul>' +
'<li>列表项1</li>' +
'<li>列表项2</li>' +
'<li>列表项3</li>' +
'</ul>'
});
resultEl.appendChild($container[0]);
// 添加交互
$('#dynamicContent li').click(function() {
$(this).toggleClass('highlight');
$(this).css('background-color', '#fff3cd');
});
// 添加样式
$('<style>')
.text('#dynamicContent li { cursor: pointer; padding: 5px; margin: 2px; }' +
'#dynamicContent li.highlight { background-color: #fff3cd; }')
.appendTo('head');
}
</script>
</body>
</html>
动态加载的优势
- 完全控制：可以精确控制加载时机
- 错误处理：可以处理加载失败的情况
- 降级方案：可以实现CDN失败时使用本地备份
- 条件加载：可以只在需要时加载jQuery
方法四：使用现代模块系统（ES6 Modules）
对于现代浏览器，可以使用ES6模块系统来管理依赖。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用ES6模块引入jQuery</title>
</head>
<body>
<h1>使用ES6模块引入jQuery</h1>
<div id="app"></div>
<!-- 注意：jQuery不是原生ES6模块，需要特殊处理 -->
<script type="module">
// 方法1：使用import（需要jQuery是ES6模块版本）
// import $ from 'https://code.jquery.com/jquery-3.6.0.min.js';
// 方法2：动态导入（推荐）
async function loadjQueryModule() {
try {
// 动态导入jQuery（需要jQuery的ES6模块版本）
// 或者使用以下方式：
const { default: $ } = await import('https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js');
console.log('jQuery模块加载成功，版本：', $.fn.jquery);
// 使用jQuery
$(document).ready(function() {
$('#app').html('<p>jQuery模块加载成功！</p>');
$('#app').append('<button id="moduleBtn">模块按钮</button>');
$('#moduleBtn').click(function() {
$(this).text('已点击！');
});
});
} catch (error) {
console.error('jQuery模块加载失败：', error);
// 降级方案
fallbackToAsyncScript();
}
}
// 降级到async脚本加载
function fallbackToAsyncScript() {
const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
script.async = true;
script.onload = function() {
console.log('降级方案：jQuery通过async脚本加载成功');
$('#app').html('<p>使用降级方案加载jQuery成功！</p>');
};
document.head.appendChild(script);
}
// 页面加载完成后开始
document.addEventListener('DOMContentLoaded', function() {
loadjQueryModule();
});
</script>
</body>
</html>
方法五：使用Service Worker缓存
对于需要频繁使用的jQuery，可以使用Service Worker进行缓存，实现更快的加载。
// service-worker.js
const CACHE_NAME = 'jquery-cache-v1';
const JQUERY_URL = 'https://code.jquery.com/jquery-3.6.0.min.js';
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('缓存jQuery文件');
return cache.add(JQUERY_URL);
})
);
});
self.addEventListener('fetch', function(event) {
if (event.request.url.includes('jquery')) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
console.log('从缓存中返回jQuery');
return response;
}
return fetch(event.request)
.then(function(response) {
// 克隆响应并缓存
const responseClone = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseClone);
});
return response;
});
})
);
}
});
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用Service Worker缓存jQuery</title>
</head>
<body>
<h1>使用Service Worker缓存jQuery</h1>
<div id="status">正在检查缓存...</div>
<script>
// 注册Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(function(registration) {
console.log('Service Worker注册成功');
// 等待Service Worker激活
navigator.serviceWorker.ready.then(function() {
loadjQueryWithCache();
});
})
.catch(function(error) {
console.error('Service Worker注册失败：', error);
loadjQueryWithoutCache();
});
} else {
console.warn('浏览器不支持Service Worker');
loadjQueryWithoutCache();
}
function loadjQueryWithCache() {
const statusEl = document.getElementById('status');
// 尝试从缓存加载
caches.open('jquery-cache-v1')
.then(function(cache) {
return cache.match('https://code.jquery.com/jquery-3.6.0.min.js');
})
.then(function(response) {
if (response) {
statusEl.textContent = '从Service Worker缓存中加载jQuery';
statusEl.style.color = 'green';
// 执行缓存的jQuery
response.text().then(function(code) {
eval(code); // 执行jQuery代码
initializeApp();
});
} else {
statusEl.textContent = '缓存中没有jQuery，从网络加载';
loadjQueryFromNetwork();
}
});
}
function loadjQueryFromNetwork() {
const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
script.async = true;
script.onload = function() {
document.getElementById('status').textContent = '从网络加载jQuery成功';
document.getElementById('status').style.color = 'blue';
initializeApp();
};
document.head.appendChild(script);
}
function loadjQueryWithoutCache() {
// 不使用缓存的加载方式
const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
script.async = true;
script.onload = function() {
document.getElementById('status').textContent = 'jQuery加载成功（无缓存）';
document.getElementById('status').style.color = 'green';
initializeApp();
};
document.head.appendChild(script);
}
function initializeApp() {
console.log('jQuery版本：', jQuery.fn.jquery);
$('#status').after('<p>应用初始化完成！</p>');
}
</script>
</body>
</html>
性能优化最佳实践
1. 使用CDN与本地备份结合
// 智能加载策略
function loadjQuerySmart() {
const CDN_URL = 'https://code.jquery.com/jquery-3.6.0.min.js';
const LOCAL_URL = 'js/jquery-3.6.0.min.js';
// 首先尝试CDN
const script = document.createElement('script');
script.src = CDN_URL;
script.async = true;
let timeoutId;
script.onload = function() {
clearTimeout(timeoutId);
console.log('CDN jQuery加载成功');
};
script.onerror = function() {
console.warn('CDN加载失败，尝试本地备份');
// 加载本地备份
const localScript = document.createElement('script');
localScript.src = LOCAL_URL;
localScript.async = true;
localScript.onload = function() {
console.log('本地jQuery加载成功');
};
document.head.appendChild(localScript);
};
// 设置超时，如果CDN太慢就切换到本地
timeoutId = setTimeout(function() {
if (!window.jQuery) {
console.warn('CDN加载超时，切换到本地备份');
script.onerror();
}
}, 3000); // 3秒超时
document.head.appendChild(script);
}
2. 预加载关键资源
<!-- 预加载jQuery，但不执行 -->
<link rel="preload" href="https://code.jquery.com/jquery-3.6.0.min.js" as="script">
<!-- 异步执行 -->
<script async src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
3. 使用Intersection Observer延迟加载
// 只在需要时加载jQuery
function loadjQueryWhenNeeded() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 当元素进入视口时加载jQuery
const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
script.async = true;
script.onload = function() {
console.log('jQuery在需要时加载完成');
// 执行依赖jQuery的代码
};
document.head.appendChild(script);
// 停止观察
observer.disconnect();
}
});
});
// 观察需要jQuery的元素
const targetElement = document.getElementById('jquery-dependent-section');
if (targetElement) {
observer.observe(targetElement);
}
}
4. 使用Web Workers预加载
// 在Web Worker中预加载jQuery
const workerCode = `
self.addEventListener('message', function(e) {
if (e.data === 'preload-jquery') {
// 在Worker中加载jQuery（仅缓存，不执行）
fetch('https://code.jquery.com/jquery-3.6.0.min.js')
.then(response => response.text())
.then(code => {
// 将代码发送回主线程
self.postMessage({ type: 'jquery-loaded', code: code });
})
.catch(error => {
self.postMessage({ type: 'error', error: error.message });
});
}
});
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
worker.addEventListener('message', function(e) {
if (e.data.type === 'jquery-loaded') {
console.log('Worker中jQuery预加载完成');
// 执行jQuery代码
eval(e.data.code);
// 初始化应用
initializeApp();
}
});
// 开始预加载
worker.postMessage('preload-jquery');
浏览器兼容性考虑
各浏览器对async和defer的支持
- 现代浏览器：完全支持
async和defer - IE 9及以下：不支持
async和defer，需要使用动态创建脚本的方式 - IE 10-11：支持
defer，不支持async
兼容性解决方案
// 检测浏览器支持情况
function getScriptLoadingStrategy() {
const script = document.createElement('script');
// 检测async支持
const supportsAsync = 'async' in script;
// 检测defer支持
const supportsDefer = 'defer' in script;
// 检测是否支持ES6模块
const supportsModules = 'type' in script && 'module' in script;
return {
async: supportsAsync,
defer: supportsDefer,
modules: supportsModules
};
}
// 根据浏览器能力选择加载策略
function loadjQueryWithCompatibility() {
const support = getScriptLoadingStrategy();
if (support.modules) {
// 使用ES6模块
loadjQueryAsModule();
} else if (support.async) {
// 使用async属性
loadjQueryWithAsync();
} else if (support.defer) {
// 使用defer属性
loadjQueryWithDefer();
} else {
// 降级到动态创建脚本
loadjQueryDynamically();
}
}
监控和调试
性能监控
// 监控jQuery加载性能
function monitorjQueryLoading() {
const startTime = performance.now();
let loadTime = 0;
// 监听脚本加载事件
document.addEventListener('load', function(e) {
if (e.target.tagName === 'SCRIPT' && e.target.src.includes('jquery')) {
loadTime = performance.now() - startTime;
console.log(`jQuery加载耗时：${loadTime.toFixed(2)}ms`);
// 发送到分析服务
if (window.analytics) {
window.analytics.track('jQuery Load Time', {
loadTime: loadTime,
timestamp: Date.now()
});
}
}
}, true); // 使用捕获阶段
// 监听错误
window.addEventListener('error', function(e) {
if (e.target.tagName === 'SCRIPT' && e.target.src.includes('jquery')) {
console.error('jQuery加载失败：', e);
// 发送错误报告
if (window.errorTracker) {
window.errorTracker.report('jQuery Load Error', {
url: e.target.src,
error: e.message
});
}
}
}, true);
}
使用Performance API
// 使用Performance API监控资源加载
function monitorResourceLoading() {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.initiatorType === 'script' && entry.name.includes('jquery')) {
console.log('jQuery资源加载详情：');
console.log(` URL: ${entry.name}`);
console.log(` 加载时间: ${entry.duration.toFixed(2)}ms`);
console.log(` 响应大小: ${(entry.transferSize / 1024).toFixed(2)}KB`);
console.log(` 缓存状态: ${entry.transferSize === 0 ? '缓存' : '网络'}`);
}
}
});
observer.observe({ entryTypes: ['resource'] });
}
总结
推荐方案选择
现代浏览器项目：使用
defer属性引入jQuery和相关脚本<script defer src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script defer src="app.js"></script>需要错误处理和降级：使用动态创建脚本标签
function loadjQuery() { const script = document.createElement('script'); script.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; script.async = true; script.onload = successCallback; script.onerror = fallbackToLocal; document.head.appendChild(script); }需要精确控制加载时机：使用
async属性配合等待机制<script async src="jquery.js"></script> <script async> function waitForJQuery(callback) { if (window.jQuery) callback(); else setTimeout(() => waitForJQuery(callback), 50); } </script>
关键要点
- 避免阻塞：始终使用
async或defer，或动态创建脚本 - 错误处理：实现CDN失败时的降级方案
- 性能监控：监控jQuery加载时间，优化用户体验
- 渐进增强：确保在jQuery加载失败时，页面基本功能仍可用
- 缓存策略：利用浏览器缓存和Service Worker加速重复访问
通过以上方法，你可以确保jQuery的引入不会阻塞页面加载，同时提供可靠的错误处理和性能优化。根据项目需求和浏览器支持情况，选择最适合的方案。