JavaScript實(shí)現(xiàn)無(wú)阻塞加載的常用方式
更新時(shí)間：2025年03月11日 08:40:30 作者：Epicurus
在 JavaScript 中,無(wú)阻塞加載（Non-blocking Loading）是優(yōu)化網(wǎng)頁(yè)性能的關(guān)鍵技術(shù),通過(guò)避免腳本阻塞頁(yè)面渲染和其他資源的加載,提升用戶(hù)體驗(yàn),以下是實(shí)現(xiàn)無(wú)阻塞加載的常用方法及示例,需要的朋友可以參考下
JavaScript無(wú)阻塞加載的方式
在 JavaScript 中，無(wú)阻塞加載（Non-blocking Loading）是優(yōu)化網(wǎng)頁(yè)性能的關(guān)鍵技術(shù)，通過(guò)避免腳本阻塞頁(yè)面渲染和其他資源的加載，提升用戶(hù)體驗(yàn)。以下是實(shí)現(xiàn)無(wú)阻塞加載的常用方法及示例：
1. 使用 async 屬性
- 作用：異步加載腳本，下載完成后立即執(zhí)行，不阻塞 HTML 解析。
- 適用場(chǎng)景：獨(dú)立腳本，不依賴(lài)其他腳本或 DOM。
- 示例：
<script async src="script.js"></script>
2. 使用 defer 屬性
- 作用：異步加載腳本，但延遲到 HTML 解析完成后按順序執(zhí)行。
- 適用場(chǎng)景：需要按順序執(zhí)行且依賴(lài) DOM 的腳本。
- 示例：
<script defer src="script1.js"></script> <script defer src="script2.js"></script> <!-- script1 先執(zhí)行 -->
3. 動(dòng)態(tài)腳本加載
通過(guò) JavaScript 動(dòng)態(tài)創(chuàng)建 <script> 標(biāo)簽，實(shí)現(xiàn)按需加載。
- 適用場(chǎng)景：非關(guān)鍵腳本或條件加載。
- 示例：
function loadScript(src) {
const script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
}
// 在需要時(shí)加載
window.addEventListener('DOMContentLoaded', () => {
loadScript('script.js');
});
4. 使用 Promise 或 async/await 控制加載順序
結(jié)合動(dòng)態(tài)加載和 Promise，管理腳本依賴(lài)關(guān)系。
- 示例：
function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
async function init() {
await loadScript('lib.js');
await loadScript('app.js'); // 確保 lib.js 先加載
}
init();
5. 使用 Intersection Observer 延遲加載
在元素進(jìn)入視口時(shí)加載腳本，適用于非首屏資源。
- 示例：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadScript('lazy-script.js');
observer.unobserve(entry.target);
}
});
});
observer.observe(document.querySelector('#lazy-element'));
6. 模塊化動(dòng)態(tài)導(dǎo)入（ES6 import()）
按需加載 ES6 模塊，適用于現(xiàn)代瀏覽器。
- 示例：
button.addEventListener('click', async () => {
const module = await import('./module.js');
module.doSomething();
});
7. 使用 Web Workers 處理計(jì)算密集型任務(wù)
將耗時(shí)任務(wù)移至后臺(tái)線(xiàn)程，避免阻塞主線(xiàn)程。
- 示例：
const worker = new Worker('worker.js');
worker.postMessage({ data: 'start' });
worker.onmessage = (e) => {
console.log('Result:', e.data);
};
8. 資源預(yù)加載（preload 和 prefetch）
通過(guò) <link> 標(biāo)簽提示瀏覽器提前加載資源。
preload：高優(yōu)先級(jí)資源，當(dāng)前頁(yè)面使用。
<link rel="preload" href="critical.js" rel="external nofollow" as="script">
prefetch：低優(yōu)先級(jí)資源，未來(lái)頁(yè)面可能使用。
<link rel="prefetch" href="next-page.js" rel="external nofollow" as="script">
9. 條件加載（根據(jù)瀏覽器特性）
檢測(cè)瀏覽器支持后加載特定腳本。
- 示例：
if ('IntersectionObserver' in window) {
loadScript('modern-script.js');
} else {
loadScript('fallback-script.js');
}
10. 服務(wù)端異步加載（SSR + Hydration）
結(jié)合服務(wù)端渲染（SSR）和客戶(hù)端激活（Hydration），按需加載交互邏輯。
- 示例（Next.js 框架）：
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));
總結(jié)
| 方法 | 核心原理 | 適用場(chǎng)景 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|---|---|
async/defer | 異步加載腳本 | 首屏非關(guān)鍵腳本 | 簡(jiǎn)單易用 | async 不保證執(zhí)行順序 |
| 動(dòng)態(tài)腳本加載 | 按需創(chuàng)建<script> 標(biāo)簽 | 非關(guān)鍵腳本/條件加載 | 靈活控制加載時(shí)機(jī) | 需手動(dòng)管理依賴(lài) |
import() 動(dòng)態(tài)導(dǎo)入 | 按需加載 ES6 模塊 | 現(xiàn)代瀏覽器應(yīng)用 | 模塊化支持 | 需支持 ES6 模塊 |
Intersection Observer | 延遲加載視口外資源 | 圖片、懶加載組件 | 高性能懶加載 | 兼容性需處理 |
Web Workers | 后臺(tái)線(xiàn)程執(zhí)行任務(wù) | 計(jì)算密集型操作 | 避免主線(xiàn)程阻塞 | 無(wú)法直接操作 DOM |
| 資源預(yù)加載 | 提前加載關(guān)鍵資源 | 優(yōu)化關(guān)鍵路徑 | 減少加載延遲 | 可能浪費(fèi)帶寬 |
注意事項(xiàng)：
- 依賴(lài)管理：確保異步腳本的執(zhí)行順序（如使用
defer或Promise）。 - 兼容性：舊版瀏覽器（如 IE）不支持
async/defer和 ES6 模塊，需降級(jí)處理。 - 性能監(jiān)控：使用工具（如 Lighthouse）分析加載性能，針對(duì)性?xún)?yōu)化。
通過(guò)合理組合這些方法，可顯著提升頁(yè)面加載速度和交互體驗(yàn)。
以上就是JavaScript實(shí)現(xiàn)無(wú)阻塞加載的常用方式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript無(wú)阻塞加載的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問(wèn)題
這篇文章主要給大家介紹了關(guān)于如何解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問(wèn)題的相關(guān)資料,xlsx.js是一種前端庫(kù),它可以使您使用JavaScript讀取、解析和導(dǎo)出電子表格文件,如Microsoft Excel,需要的朋友可以參考下2024-03-03
JavaScript實(shí)現(xiàn)繼承的4種方法總結(jié)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)繼承的4種方法總結(jié),本文給出了原型鏈繼承、構(gòu)造繼承、實(shí)例繼承、拷貝繼承等實(shí)現(xiàn)JS繼承的方法,需要的朋友可以參考下2014-10-10
Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)實(shí)例代碼
最近項(xiàng)目用到了Echarts圖進(jìn)行數(shù)據(jù)展示,所以下面這篇文章主要給大家介紹了關(guān)于Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要介紹了JavaScript中為事件指定處理程序的五種方式,結(jié)合實(shí)例形式簡(jiǎn)單分析了JavaScript事件處理的相關(guān)原理與事件指定處理程序的五種常用方式,需要的朋友可以參考下2018-07-07
原生JavaScript實(shí)現(xiàn)異步多文件上傳
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)異步多文件上傳，感興趣的小伙伴們可以參考一下
2015-12-12 
小程序?qū)崿F(xiàn)搜索界面 小程序?qū)崿F(xiàn)推薦搜索列表效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)搜索界面，小程序?qū)崿F(xiàn)推薦搜索列表效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05 
經(jīng)過(guò)這么多年的發(fā)展，JavaScript 早已經(jīng)不是當(dāng)年那個(gè)不太起眼的腳本語(yǔ)言。如今的 JavaScript 可以說(shuō)是風(fēng)光無(wú)限，在 Web 前端、移動(dòng)端、服務(wù)端甚至物聯(lián)網(wǎng)設(shè)備上都大展身手，到處都有它的身影。
2021-05-05 
使用JS中的Replace()方法遇到的問(wèn)題小結(jié)
這篇文章主要介紹了使用JS中的Replace()方法遇到的問(wèn)題小結(jié),需要的朋友可以參考下
2017-10-10 
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)加載進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10