1. 從“Hello World”說(shuō)起為什么引入方式不是小事很多剛接觸前端開(kāi)發(fā)的朋友可能覺(jué)得JS引入不就是把代碼寫(xiě)進(jìn)HTML里嗎隨便找個(gè)地方一放能跑起來(lái)就行。我剛開(kāi)始學(xué)的時(shí)候也這么想直到后來(lái)在一個(gè)項(xiàng)目里因?yàn)橐粋€(gè)script標(biāo)簽放錯(cuò)了位置導(dǎo)致整個(gè)頁(yè)面的交互邏輯失效排查了大半天才找到原因。從那以后我就深刻意識(shí)到JS的引入方式是前端工程化最基礎(chǔ)、也最容易被忽視的基石。它直接關(guān)系到代碼的執(zhí)行時(shí)機(jī)、性能表現(xiàn)、模塊化管理以及后期的維護(hù)成本。簡(jiǎn)單來(lái)說(shuō)JS引入方式?jīng)Q定了你的代碼“在何時(shí)、以何種姿態(tài)、在哪個(gè)作用域下”被瀏覽器加載和執(zhí)行。這聽(tīng)起來(lái)有點(diǎn)抽象但我們可以把它想象成裝修房子時(shí)安排水電管線的順序和位置。你不能在墻都砌好了才想起來(lái)要埋水管也不能把總閘開(kāi)關(guān)放在一個(gè)很難夠到的地方。JS代碼的引入同樣需要講究“時(shí)機(jī)”和“位置”。這篇文章我們就來(lái)徹底拆解JavaScript的幾種核心引入方式。我不會(huì)只告訴你“怎么寫(xiě)”更重要的是我會(huì)結(jié)合我十多年踩過(guò)的坑告訴你“為什么這么寫(xiě)”以及“在什么場(chǎng)景下該選擇哪種方式”。無(wú)論你是剛?cè)腴T(mén)的新手還是有一定經(jīng)驗(yàn)想鞏固基礎(chǔ)的開(kāi)發(fā)者相信都能從中獲得一些新的啟發(fā)。2. 內(nèi)聯(lián)引入最直接也最“危險(xiǎn)”的起點(diǎn)內(nèi)聯(lián)引入也叫行內(nèi)腳本指的是直接將JavaScript代碼寫(xiě)在HTML文件的script標(biāo)簽內(nèi)部。這是所有教程里“Hello World”的標(biāo)準(zhǔn)寫(xiě)法也是我們認(rèn)知的起點(diǎn)。2.1 基本語(yǔ)法與執(zhí)行特點(diǎn)它的寫(xiě)法非常簡(jiǎn)單直接在HTML的head或body中插入一個(gè)script標(biāo)簽然后把代碼寫(xiě)進(jìn)去。!DOCTYPE html html head title內(nèi)聯(lián)腳本示例/title script // 這里是JavaScript代碼 function sayHello() { alert(Hello from inline script!); } // 注意這段代碼在解析到此處時(shí)會(huì)立即執(zhí)行 console.log(腳本標(biāo)簽內(nèi)的代碼已執(zhí)行); /script /head body button onclicksayHello()點(diǎn)擊我/button /body /html這種方式的第一個(gè)核心特點(diǎn)是代碼會(huì)在瀏覽器解析到該script標(biāo)簽時(shí)立即被解析和執(zhí)行。這帶來(lái)了一個(gè)非常關(guān)鍵的問(wèn)題——執(zhí)行時(shí)機(jī)不可控。如果腳本里包含操作DOM比如document.getElementById的代碼而該腳本被放在head里那么當(dāng)腳本執(zhí)行時(shí)body中的DOM元素很可能還沒(méi)有被瀏覽器解析和創(chuàng)建出來(lái)導(dǎo)致腳本報(bào)錯(cuò)“無(wú)法獲取到null的屬性”。注意這是內(nèi)聯(lián)腳本在head中最常見(jiàn)的坑。你定義了一個(gè)函數(shù)initPage來(lái)操作頁(yè)面元素但因?yàn)檫@個(gè)腳本執(zhí)行得太早頁(yè)面元素還不存在函數(shù)調(diào)用就會(huì)失敗。2.2 作用域與變量污染內(nèi)聯(lián)腳本的第二個(gè)特點(diǎn)是它的作用域是全局的。在script標(biāo)簽內(nèi)聲明的變量和函數(shù)除非使用ES6的let、const在塊級(jí)作用域中或使用IIFE包裹默認(rèn)都會(huì)成為window對(duì)象的屬性。script var globalVar 我是全局變量; function globalFunc() { console.log(globalVar); } /script script // 在另一個(gè)腳本塊中可以直接訪問(wèn) console.log(window.globalVar); // 輸出我是全局變量 globalFunc(); // 正常調(diào)用 /script這聽(tīng)起來(lái)很方便但卻是“變量污染”和“命名沖突”的罪魁禍?zhǔn)?。?dāng)項(xiàng)目中有多個(gè)內(nèi)聯(lián)腳本或者引入了第三方庫(kù)時(shí)大家都會(huì)向全局作用域window里扔?xùn)|西很容易發(fā)生變量或函數(shù)名被意外覆蓋的情況導(dǎo)致難以調(diào)試的Bug。2.3 適用場(chǎng)景與實(shí)戰(zhàn)建議既然有這么多問(wèn)題內(nèi)聯(lián)腳本是不是就該被淘汰了并非如此。它有其獨(dú)特的適用場(chǎng)景極簡(jiǎn)頁(yè)面或原型驗(yàn)證當(dāng)你快速搭建一個(gè)只有一個(gè)HTML文件的演示頁(yè)面或者做某個(gè)小功能驗(yàn)證時(shí)內(nèi)聯(lián)腳本省去了創(chuàng)建和管理額外文件的開(kāi)銷(xiāo)非常方便。需要直接訪問(wèn)服務(wù)端模板變量在一些服務(wù)端渲染SSR的場(chǎng)景中如PHP、JSP、或Node.js的模板引擎EJS, Pug里有時(shí)需要將服務(wù)端計(jì)算出的數(shù)據(jù)直接注入到頁(yè)面的腳本中。這時(shí)內(nèi)聯(lián)腳本是唯一的選擇。小型、獨(dú)立的交互邏輯比如一個(gè)僅針對(duì)當(dāng)前頁(yè)面某個(gè)按鈕的點(diǎn)擊事件處理邏輯非常簡(jiǎn)單且不與其他代碼交互。我的實(shí)戰(zhàn)建議是即便使用內(nèi)聯(lián)腳本也請(qǐng)務(wù)必用立即執(zhí)行函數(shù)表達(dá)式IIFE將其包裹起來(lái)。這是一個(gè)成本極低但收益巨大的好習(xí)慣。script (function() { // 你的所有代碼寫(xiě)在這里 var privateVar 我不會(huì)污染全局; // 這個(gè)變量外部訪問(wèn)不到 function privateFunc() { // 私有函數(shù) } // 如果確實(shí)需要暴露給外部可以顯式地掛載到window上 window.myExposedFunc function() { // 對(duì)外公開(kāi)的接口 }; })(); /script這樣做相當(dāng)于給你的代碼創(chuàng)建了一個(gè)“私有房間”里面的變量和函數(shù)不會(huì)跑到全局去干擾別人極大地減少了沖突的可能。對(duì)于新手我強(qiáng)烈建議從養(yǎng)成這個(gè)習(xí)慣開(kāi)始。3. 外部引入現(xiàn)代Web開(kāi)發(fā)的基石外部引入是目前最主流、最推薦的JS引入方式。它通過(guò)script標(biāo)簽的src屬性將一個(gè)獨(dú)立的.js文件鏈接到HTML頁(yè)面中。script srcpath/to/your-script.js/script從“裝修房子”的比喻來(lái)看這就像把水電設(shè)計(jì)圖JS文件從施工現(xiàn)場(chǎng)HTML文件里獨(dú)立出來(lái)。施工隊(duì)瀏覽器按照?qǐng)D紙HTML結(jié)構(gòu)施工需要接水電時(shí)就去參照獨(dú)立的設(shè)計(jì)圖加載并執(zhí)行JS文件。這樣做的好處是立竿見(jiàn)影的。3.1 核心優(yōu)勢(shì)分離、緩存與協(xié)作1. 關(guān)注點(diǎn)分離這是最重要的原則。HTML負(fù)責(zé)結(jié)構(gòu)和內(nèi)容CSS負(fù)責(zé)表現(xiàn)JavaScript負(fù)責(zé)行為。將三者分離到不同的文件中使得代碼結(jié)構(gòu)清晰易于理解和維護(hù)。你可以單獨(dú)修改JS邏輯而不必在冗長(zhǎng)的HTML中尋找script標(biāo)簽。2. 瀏覽器緩存獨(dú)立的.js文件可以被瀏覽器緩存。當(dāng)用戶訪問(wèn)同一個(gè)網(wǎng)站的多個(gè)頁(yè)面或者再次訪問(wèn)該網(wǎng)站時(shí)緩存的JS文件無(wú)需重新從服務(wù)器下載極大提升了頁(yè)面加載速度和用戶體驗(yàn)也減輕了服務(wù)器壓力。3. 團(tuán)隊(duì)協(xié)作前端工程師可以專(zhuān)注于.js文件的開(kāi)發(fā)后端或模板工程師可以專(zhuān)注于HTML。兩者通過(guò)定義好的接口如DOM元素的id、class或數(shù)據(jù)屬性進(jìn)行協(xié)作并行開(kāi)發(fā)互不干擾。4. 代碼復(fù)用一個(gè)寫(xiě)好的工具函數(shù)庫(kù)如utils.js可以被多個(gè)HTML頁(yè)面引用避免了代碼重復(fù)。3.2 阻塞渲染與async/defer屬性外部引入腳本有一個(gè)默認(rèn)行為當(dāng)瀏覽器解析HTML遇到帶有src的script標(biāo)簽時(shí)會(huì)停止對(duì)后續(xù)HTML的解析即“阻塞渲染”先去下載并執(zhí)行這個(gè)JS文件執(zhí)行完畢后才會(huì)繼續(xù)解析HTML。如果這個(gè)JS文件很大或者網(wǎng)絡(luò)很慢用戶就會(huì)看到一個(gè)長(zhǎng)時(shí)間的白屏。這對(duì)于用戶體驗(yàn)是致命的。為了解決這個(gè)問(wèn)題HTML5為script標(biāo)簽引入了兩個(gè)至關(guān)重要的屬性async和defer。為了讓你一目了然我把它們的區(qū)別總結(jié)成下表屬性腳本加載時(shí)機(jī)腳本執(zhí)行時(shí)機(jī)是否阻塞HTML解析執(zhí)行順序保證無(wú)屬性script src...立即加載加載完成后立即執(zhí)行阻塞在文檔中的順序執(zhí)行asyncscript async src...立即加載異步進(jìn)行加載完成后立即執(zhí)行不阻塞無(wú)保證。誰(shuí)先加載完誰(shuí)先執(zhí)行deferscript defer src...立即加載異步進(jìn)行延遲到整個(gè)HTML文檔解析完成后在DOMContentLoaded事件之前執(zhí)行不阻塞有保證。按照在文檔中出現(xiàn)的順序執(zhí)行async(異步) 的使用場(chǎng)景適用于那些完全獨(dú)立的腳本比如統(tǒng)計(jì)分析Google Analytics、廣告腳本、或是一些不操作DOM的獨(dú)立模塊。它們不依賴(lài)其他腳本也不被其他腳本依賴(lài)執(zhí)行時(shí)機(jī)早晚無(wú)所謂。但要注意如果有多個(gè)async腳本它們的執(zhí)行順序是不可預(yù)測(cè)的。defer(延遲) 的使用場(chǎng)景這是我最推薦用于常規(guī)業(yè)務(wù)代碼的方式。它保證了腳本在DOM完全就緒后才執(zhí)行因此可以安全操作DOM并且嚴(yán)格保持了多個(gè)腳本之間的執(zhí)行順序。這完美契合了大多數(shù)頁(yè)面初始化邏輯的需求。一個(gè)標(biāo)準(zhǔn)的現(xiàn)代頁(yè)面腳本引入順序應(yīng)該是這樣的!DOCTYPE html html head meta charsetUTF-8 title最佳實(shí)踐示例/title !-- 1. CSS 放頭部盡早加載不影響渲染 -- link relstylesheet hrefstyles.css !-- 2. 獨(dú)立、不依賴(lài)DOM的異步腳本如分析工具 -- script async srchttps://analytics.example.com/script.js/script !-- 3. 需要操作DOM的業(yè)務(wù)代碼使用defer -- script defer srcmain.js/script script defer srccomponents.js/script !-- 保證在main.js之后執(zhí)行 -- /head body !-- 頁(yè)面內(nèi)容 -- /body /html3.3 路徑解析與模塊化前夜在src屬性中指定路徑時(shí)有絕對(duì)路徑和相對(duì)路徑之分。相對(duì)路徑是相對(duì)于當(dāng)前HTML文件所在目錄。在開(kāi)發(fā)中我們常會(huì)組織這樣的目錄結(jié)構(gòu)project/ ├── index.html ├── css/ │ └── style.css ├── js/ │ ├── libs/ │ │ └── jquery.min.js │ ├── utils.js │ └── main.js └── images/那么在index.html中引入main.js就應(yīng)該寫(xiě)script srcjs/main.js/script引入jQuery庫(kù)則是script srcjs/libs/jquery.min.js/script這里有一個(gè)常見(jiàn)的坑在本地直接用瀏覽器打開(kāi)HTML文件file://協(xié)議如果JS文件路徑包含特殊符號(hào)或?qū)蛹?jí)較深有時(shí)會(huì)遇到跨域問(wèn)題導(dǎo)致腳本加載失敗。最可靠的方式是使用一個(gè)本地HTTP服務(wù)器來(lái)開(kāi)發(fā)比如用VS Code的Live Server插件或者簡(jiǎn)單的python -m http.server。外部引入腳本雖然解決了分離和緩存問(wèn)題但并沒(méi)有解決“模塊化”和“依賴(lài)管理”的問(wèn)題。所有通過(guò)script標(biāo)簽引入的JS文件其內(nèi)部聲明的變量除非用IIFE包裹依然會(huì)暴露在全局作用域。當(dāng)項(xiàng)目變大腳本文件增多時(shí)依賴(lài)關(guān)系會(huì)變得錯(cuò)綜復(fù)雜難以維護(hù)。這直接催生了后續(xù)的模塊化標(biāo)準(zhǔn)和打包工具的出現(xiàn)。4. 模塊化引入應(yīng)對(duì)復(fù)雜工程的必然選擇當(dāng)項(xiàng)目從簡(jiǎn)單的“幾個(gè)頁(yè)面幾個(gè)腳本”發(fā)展到擁有數(shù)十上百個(gè)JS文件的大型單頁(yè)應(yīng)用SPA時(shí)前面兩種方式就力不從心了。我們需要解決兩個(gè)核心問(wèn)題1.作用域隔離避免全局污染2.明確的依賴(lài)管理A文件需要B文件提供的功能。這就是JavaScript模塊化要解決的問(wèn)題。4.1 ES6 Modules現(xiàn)代的官方標(biāo)準(zhǔn)ES6ES2015正式在語(yǔ)言層面引入了模塊系統(tǒng)。它使用import和export語(yǔ)法來(lái)導(dǎo)入和導(dǎo)出功能。一個(gè)模塊一個(gè).js文件就是一個(gè)獨(dú)立的作用域。模塊內(nèi)的變量、函數(shù)、類(lèi)默認(rèn)對(duì)外是不可見(jiàn)的。除非你用export明確導(dǎo)出它們。導(dǎo)出模塊 (math.js):// 導(dǎo)出單個(gè)功能 export function add(a, b) { return a b; } // 導(dǎo)出多個(gè)功能 export const PI 3.14159; export function square(x) { return x * x; } // 默認(rèn)導(dǎo)出一個(gè)模塊只能有一個(gè) export default function multiply(a, b) { return a * b; }導(dǎo)入模塊 (main.js):// 導(dǎo)入指定的導(dǎo)出項(xiàng) import { add, PI } from ./math.js; console.log(add(2, 3)); // 5 console.log(PI); // 3.14159 // 導(dǎo)入整個(gè)模塊的所有命名導(dǎo)出為一個(gè)對(duì)象 import * as math from ./math.js; console.log(math.square(4)); // 16 // 導(dǎo)入默認(rèn)導(dǎo)出可以任意命名 import customMultiply from ./math.js; console.log(customMultiply(2, 5)); // 10在HTML中引入模塊關(guān)鍵點(diǎn)在于你引入的入口文件的script標(biāo)簽必須加上typemodule屬性。script typemodule srcjs/main.js/script瀏覽器看到typemodule就會(huì)以ES模塊的方式加載main.js。模塊系統(tǒng)會(huì)自動(dòng)處理main.js中所有的import語(yǔ)句遞歸地加載它所依賴(lài)的其他模塊。ES模塊的核心特性自動(dòng)嚴(yán)格模式模塊中的代碼默認(rèn)在嚴(yán)格模式下運(yùn)行。頂級(jí)作用域隔離每個(gè)模塊都有自己的頂級(jí)作用域變量不會(huì)泄露到全局。單例模式同一個(gè)模塊被多次import也只會(huì)被執(zhí)行一次。靜態(tài)解析import語(yǔ)句必須在模塊頂層且路徑必須是字符串字面量不能是變量。這使得依賴(lài)關(guān)系在代碼執(zhí)行前就確定了便于工具進(jìn)行靜態(tài)分析和“搖樹(shù)優(yōu)化”。延遲執(zhí)行模塊腳本默認(rèn)具有defer的特性即等到HTML解析完才執(zhí)行并且按依賴(lài)順序執(zhí)行。4.2 模塊化帶來(lái)的開(kāi)發(fā)范式轉(zhuǎn)變使用ES Modules后我們的代碼組織方式發(fā)生了根本變化。我們不再需要手動(dòng)管理script標(biāo)簽的順序也不再擔(dān)心全局變量沖突。一個(gè)典型的模塊化項(xiàng)目結(jié)構(gòu)可能如下src/ ├── index.html ├── main.js # 應(yīng)用入口typemodule ├── components/ # UI組件 │ ├── Button.js │ └── Modal.js ├── utils/ # 工具函數(shù) │ ├── api.js │ └── helpers.js ├── services/ # 數(shù)據(jù)服務(wù)層 │ └── userService.js └── constants/ # 常量 └── config.js在index.html中我們只需要引入一個(gè)入口script typemodule src./src/main.js/script而在main.js中我們清晰地聲明所有依賴(lài)import { fetchUser } from ./services/userService.js; import { APP_NAME } from ./constants/config.js; import { PrimaryButton } from ./components/Button.js; // 應(yīng)用初始化邏輯 async function initApp() { const user await fetchUser(1); console.log(Welcome to ${APP_NAME}, ${user.name}); // ... 使用組件等 } initApp();這種組織方式讓代碼的依賴(lài)關(guān)系一目了然極大地提升了可維護(hù)性和可測(cè)試性。4.3 兼容性與構(gòu)建工具雖然ES Modules是現(xiàn)代瀏覽器的原生支持但在生產(chǎn)環(huán)境中我們很少直接讓瀏覽器加載成百上千個(gè)小模塊文件因?yàn)槊總€(gè)文件的HTTP請(qǐng)求都會(huì)帶來(lái)性能開(kāi)銷(xiāo)。此外我們還需要考慮對(duì)舊版本瀏覽器的兼容性。因此在實(shí)際項(xiàng)目中我們通常會(huì)使用構(gòu)建工具如Webpack、Vite、Rollup、Parcel和包管理器如npm、yarn、pnpm。工作流程通常是這樣的我們?cè)趕rc目錄下用ES Modules語(yǔ)法愉快地編寫(xiě)模塊化代碼。構(gòu)建工具如Webpack會(huì)以main.js為入口靜態(tài)分析所有import依賴(lài)將幾十上百個(gè)模塊“打包”Bundle成少數(shù)幾個(gè)甚至一個(gè)優(yōu)化后的.js文件。這個(gè)過(guò)程會(huì)進(jìn)行代碼壓縮、混淆、轉(zhuǎn)換將新的JS語(yǔ)法轉(zhuǎn)成舊語(yǔ)法以兼容老瀏覽器等操作。最終生成到dist或build目錄下的是經(jīng)過(guò)優(yōu)化、兼容性處理、且數(shù)量極少的資源文件。我們的index.html只需要引入這最終的打包文件即可。!-- 開(kāi)發(fā)環(huán)境 -- script typemodule src/src/main.js/script !-- 生產(chǎn)環(huán)境經(jīng)過(guò)構(gòu)建后 -- script srchttps://cdn.example.com/app.8a2bfe.js/script !-- 一個(gè)打包合并后的文件 --所以對(duì)于開(kāi)發(fā)者而言我們?cè)诰幋a時(shí)享受ES Modules帶來(lái)的模塊化好處對(duì)于用戶而言他們下載的是經(jīng)過(guò)高度優(yōu)化的單一文件獲得了最佳的性能體驗(yàn)。這是現(xiàn)代前端工程化的標(biāo)準(zhǔn)實(shí)踐。5. 動(dòng)態(tài)引入按需加載的性能利器隨著單頁(yè)應(yīng)用SPA越來(lái)越復(fù)雜整個(gè)應(yīng)用的JavaScript打包后體積可能非常龐大幾MB甚至更大。如果用戶在首次訪問(wèn)時(shí)就需要下載全部代碼會(huì)導(dǎo)致首屏加載時(shí)間非常長(zhǎng)。很多功能比如后臺(tái)管理頁(yè)面、復(fù)雜的圖表組件用戶可能根本不會(huì)用到這就造成了流量和時(shí)間的浪費(fèi)。動(dòng)態(tài)引入Dynamic Import就是為了解決這個(gè)問(wèn)題而生的。它允許你在代碼運(yùn)行時(shí)根據(jù)需要去異步加載一個(gè)JS模塊。5.1import()函數(shù)語(yǔ)法與行為ES2020正式將動(dòng)態(tài)import()納入標(biāo)準(zhǔn)。它是一個(gè)函數(shù)接收一個(gè)模塊路徑作為參數(shù)返回一個(gè)Promise。// 靜態(tài)導(dǎo)入編譯時(shí)確定 import { heavyComponent } from ./HeavyComponent.js; // 動(dòng)態(tài)導(dǎo)入運(yùn)行時(shí)決定 button.addEventListener(click, async () { try { // import() 返回一個(gè)Promise解析為一個(gè)模塊對(duì)象 const module await import(./HeavyComponent.js); // 使用模塊導(dǎo)出的內(nèi)容 const component module.heavyComponent; component.render(); } catch (error) { console.error(模塊加載失敗:, error); } });關(guān)鍵特性異步加載import()不會(huì)阻塞主線程它發(fā)起一個(gè)異步請(qǐng)求去獲取模塊。返回Promise這使得我們可以用async/await或.then/.catch優(yōu)雅地處理加載成功或失敗的狀態(tài)。按需執(zhí)行只有當(dāng)你調(diào)用import()時(shí)對(duì)應(yīng)的模塊才會(huì)被下載、解析和執(zhí)行。如果用戶從不點(diǎn)擊那個(gè)按鈕HeavyComponent.js就永遠(yuǎn)不會(huì)被加載。5.2 核心應(yīng)用場(chǎng)景代碼分割與路由懶加載動(dòng)態(tài)引入是實(shí)現(xiàn)“代碼分割”Code Splitting的基石。結(jié)合Webpack、Vite等構(gòu)建工具可以自動(dòng)將使用import()動(dòng)態(tài)導(dǎo)入的模塊單獨(dú)打包成一個(gè)文件稱(chēng)為chunk。1. 路由懶加載在Vue Router或React Router中這是提升SPA首屏速度的標(biāo)準(zhǔn)做法。// Vue Router 示例 const routes [ { path: /, component: () import(./views/Home.vue) // 訪問(wèn)/路徑時(shí)才加載 }, { path: /about, component: () import(./views/About.vue) // 訪問(wèn)/about路徑時(shí)才加載 }, { path: /admin, component: () import(./views/admin/Dashboard.vue) // 后臺(tái)頁(yè)面普通用戶不會(huì)訪問(wèn) } ];2. 條件加載大型組件或庫(kù)例如一個(gè)富文本編輯器或3D圖表庫(kù)非常龐大只有特定用戶如內(nèi)容編輯者在特定頁(yè)面才需要。// 僅當(dāng)用戶點(diǎn)擊“編輯”按鈕時(shí)才加載富文本編輯器 editButton.addEventListener(click, async () { if (!window.richEditor) { // 避免重復(fù)加載 const EditorModule await import(wangeditor/editor); window.richEditor EditorModule; // 初始化編輯器... } });3. 加載Polyfill根據(jù)瀏覽器特性檢測(cè)動(dòng)態(tài)加載所需的補(bǔ)丁庫(kù)。if (!window.Promise) { // 如果瀏覽器不支持Promise動(dòng)態(tài)加載polyfill await import(promise-polyfill); }5.3 預(yù)加載與預(yù)獲取更精細(xì)的性能調(diào)控僅僅按需加載有時(shí)還不夠。如果用戶點(diǎn)擊按鈕后才開(kāi)始下載一個(gè)2MB的圖表庫(kù)他仍然需要等待下載完成體驗(yàn)上會(huì)有卡頓。為此瀏覽器提供了link relpreload和link relprefetch指令而Webpack等工具也提供了魔法注釋Magic Comments來(lái)利用這些特性。// Webpack魔法注釋示例 const HeavyComponent () import( /* webpackChunkName: heavy-component */ // 指定打包后的chunk名稱(chēng) /* webpackPrefetch: true */ // 在瀏覽器空閑時(shí)預(yù)獲取為未來(lái)可能的使用做準(zhǔn)備 ./HeavyComponent ); const AdminPanel () import( /* webpackChunkName: admin-panel */ /* webpackPreload: true */ // 以高優(yōu)先級(jí)與父chunk并行加載用于當(dāng)前導(dǎo)航很快需要的資源 ./AdminPanel );Prefetch預(yù)獲取告訴瀏覽器這個(gè)資源將來(lái)可能會(huì)用到。瀏覽器會(huì)在網(wǎng)絡(luò)空閑時(shí)比如頁(yè)面加載完成后默默下載它并存入緩存。當(dāng)用戶真的需要時(shí)可以直接從緩存讀取實(shí)現(xiàn)瞬間加載。適用于那些用戶可能會(huì)進(jìn)行的下一步操作如查看詳情頁(yè)。Preload預(yù)加載告訴瀏覽器這個(gè)資源當(dāng)前頁(yè)面很快就會(huì)用到需要以高優(yōu)先級(jí)盡快加載。它適用于那些對(duì)當(dāng)前路由至關(guān)重要但又被打包到異步chunk中的資源。動(dòng)態(tài)引入和這些優(yōu)化策略將前端性能優(yōu)化從“減少總體積”推進(jìn)到了“按需加載預(yù)判加載”的精細(xì)化管理階段是構(gòu)建高性能Web應(yīng)用不可或缺的技術(shù)。6. 特殊引入方式與歷史遺留問(wèn)題除了上述主流方式在實(shí)際開(kāi)發(fā)中尤其是在維護(hù)老項(xiàng)目或集成第三方代碼時(shí)你可能會(huì)遇到一些特殊的引入方式。了解它們有助于你應(yīng)對(duì)各種復(fù)雜情況。6.1 事件處理器屬性內(nèi)聯(lián)的事件綁定這是一種古老但依然常見(jiàn)于簡(jiǎn)單頁(yè)面或服務(wù)端模板中的方式直接將JS代碼寫(xiě)在HTML元素的事件屬性里。button onclickalert(Clicked!)點(diǎn)擊我/button form onsubmitreturn validateForm().../form img onloadimageLoaded() srcpic.jpg為什么不推薦嚴(yán)重混合了結(jié)構(gòu)、樣式和行為違背了關(guān)注點(diǎn)分離的原則使HTML變得臃腫且難以維護(hù)。作用域詭異寫(xiě)在onclick等屬性里的代碼其作用域鏈非常特殊。它能直接訪問(wèn)元素自身的屬性如this指向當(dāng)前元素也能訪問(wèn)全局作用域但很難訪問(wèn)到其他模塊作用域里的函數(shù)除非你將其暴露到全局。難以調(diào)試和復(fù)用事件邏輯分散在無(wú)數(shù)個(gè)HTML標(biāo)簽中查找和修改極其困難。也無(wú)法享受現(xiàn)代IDE對(duì)JS代碼的智能提示和重構(gòu)功能。實(shí)戰(zhàn)建議在現(xiàn)代開(kāi)發(fā)中絕對(duì)不要使用這種方式。應(yīng)該使用JavaScript在腳本中通過(guò)addEventListener來(lái)統(tǒng)一綁定事件。對(duì)于老項(xiàng)目中的此類(lèi)代碼重構(gòu)的第一步往往就是將這些內(nèi)聯(lián)事件處理器剝離到獨(dú)立的JS文件中。6.2 JavaScript偽協(xié)議與javascript:URL這種方式通常用于a標(biāo)簽的href屬性或者某些早期框架的模板中。a hrefjavascript:void(0) onclickdoSomething()執(zhí)行操作/a !-- 或者 -- a hrefjavascript:doSomething()點(diǎn)擊這里/ajavascript:后面的代碼會(huì)在點(diǎn)擊鏈接時(shí)執(zhí)行。void(0)的作用是讓表達(dá)式返回undefined從而阻止瀏覽器跳轉(zhuǎn)到一個(gè)空白頁(yè)。為什么不推薦可訪問(wèn)性差屏幕閱讀器可能無(wú)法正確識(shí)別這些鏈接的行為。如果用戶禁用JavaScript這些鏈接將完全失效。安全風(fēng)險(xiǎn)如果href的值來(lái)自不可信的輸入如用戶生成內(nèi)容可能導(dǎo)致XSS攻擊。違背語(yǔ)義a標(biāo)簽的本意是導(dǎo)航用于執(zhí)行操作是語(yǔ)義上的誤用?，F(xiàn)代替代方案如果元素需要執(zhí)行操作應(yīng)使用button標(biāo)簽。如果希望一個(gè)元素可點(diǎn)擊且樣式像鏈接可以用CSS將button樣式化為鏈接的樣子或者給a標(biāo)簽設(shè)置rolebutton并阻止其默認(rèn)行為。button classlink-style onclickdoSomething()執(zhí)行操作/button !-- 或 -- a href# rolebutton onclickdoSomething(); return false;執(zhí)行操作/a !-- 更好的做法是完全分離 -- a href# idaction-link執(zhí)行操作/a script document.getElementById(action-link).addEventListener(click, function(e) { e.preventDefault(); // 阻止鏈接默認(rèn)跳轉(zhuǎn) doSomething(); }); /script6.3 動(dòng)態(tài)腳本注入以編程方式加載腳本有時(shí)我們需要根據(jù)特定條件如用戶權(quán)限、瀏覽器類(lèi)型、A/B測(cè)試分組來(lái)決定加載哪個(gè)腳本。這時(shí)就需要用JavaScript動(dòng)態(tài)創(chuàng)建script標(biāo)簽并插入到DOM中。function loadScript(url, callback) { const script document.createElement(script); script.src url; script.type text/javascript; // 對(duì)于模塊可以是 module // 處理加載完成事件 script.onload callback; script.onerror function() { console.error(Failed to load script: ${url}); }; // 將腳本添加到文檔中開(kāi)始加載 document.head.appendChild(script); } // 使用示例 loadScript(https://cdn.example.com/library.js, function() { console.log(庫(kù)加載完畢可以安全使用了); Library.doSomething(); });應(yīng)用場(chǎng)景加載第三方SDK如只在用戶同意后才加載分析或廣告腳本。Polyfill的動(dòng)態(tài)加載基于特性檢測(cè)只給不支持的瀏覽器加載補(bǔ)丁。插件化架構(gòu)主程序運(yùn)行時(shí)根據(jù)配置動(dòng)態(tài)加載不同的功能插件。注意事項(xiàng)動(dòng)態(tài)注入的腳本默認(rèn)是異步加載的其加載和執(zhí)行不會(huì)阻塞頁(yè)面。多個(gè)動(dòng)態(tài)腳本的執(zhí)行順序無(wú)法保證除非你在onload回調(diào)中鏈?zhǔn)秸{(diào)用。如果要加載ES模塊需要設(shè)置script.type module此時(shí)瀏覽器會(huì)遵循模塊的依賴(lài)規(guī)則。理解這些特殊和歷史遺留的方式不僅能幫你維護(hù)老代碼更能讓你明白為什么現(xiàn)代的最佳實(shí)踐是如今這個(gè)樣子——它們都是在解決歷史方案帶來(lái)的種種問(wèn)題中演化而來(lái)的。7. 選擇策略與架構(gòu)思考沒(méi)有銀彈只有權(quán)衡看到這里你可能已經(jīng)有點(diǎn)眼花繚亂了。在實(shí)際項(xiàng)目中我們?cè)撊绾芜x擇我的經(jīng)驗(yàn)是沒(méi)有最好的只有最適合當(dāng)前場(chǎng)景的。選擇引入方式是一個(gè)需要權(quán)衡加載性能、開(kāi)發(fā)體驗(yàn)、代碼維護(hù)性和團(tuán)隊(duì)協(xié)作的架構(gòu)決策。7.1 決策流程圖一張圖幫你做選擇為了更直觀我畫(huà)了一個(gè)簡(jiǎn)單的決策流程圖文字描述版你可以根據(jù)項(xiàng)目階段和需求來(lái)快速定位開(kāi)始 │ ├─ 項(xiàng)目規(guī)模極小僅單個(gè)頁(yè)面或原型 → 使用【內(nèi)聯(lián)腳本建議用IIFE包裹】 │ ├─ 傳統(tǒng)多頁(yè)應(yīng)用或需要快速上線的簡(jiǎn)單項(xiàng)目 → 使用【外部引入 defer】 │ │ │ ├─ 有多個(gè)JS文件且有依賴(lài)關(guān)系 → 手動(dòng)排序script標(biāo)簽或使用簡(jiǎn)易模塊加載器 │ │ │ └─ 需要優(yōu)化首屏 → 將首屏關(guān)鍵JS內(nèi)聯(lián)Critical JS非關(guān)鍵JS用defer異步加載 │ ├─ 現(xiàn)代單頁(yè)應(yīng)用SPA或復(fù)雜Web應(yīng)用 → 使用【ES6 Modules 構(gòu)建工具】 │ │ │ ├─ 追求極致開(kāi)發(fā)體驗(yàn)和速度 → 選擇 Vite 原生ESM開(kāi)發(fā)環(huán)境 │ │ │ ├─ 生態(tài)豐富、配置靈活、需要兼容老瀏覽器 → 選擇 Webpack │ │ │ └─ 應(yīng)用體積龐大需要優(yōu)化加載性能 → 必須實(shí)施【代碼分割動(dòng)態(tài)import】 │ │ │ ├─ 按路由分割 → 路由懶加載 │ │ │ ├─ 按組件分割 → 組件懶加載如彈窗、復(fù)雜圖表 │ │ │ └─ 按需加載第三方庫(kù) → 條件動(dòng)態(tài)導(dǎo)入 │ └─ 需要集成第三方腳本分析、廣告、社交插件 → 使用【外部引入 async】7.2 性能優(yōu)化組合拳在實(shí)際的高性能網(wǎng)站中我們往往會(huì)組合使用多種技術(shù)關(guān)鍵渲染路徑優(yōu)化對(duì)于首屏渲染必須的、極小的JS邏輯比如設(shè)置主題、埋點(diǎn)初始化可以考慮用內(nèi)聯(lián)腳本放在head中確保第一時(shí)間執(zhí)行。但一定要控制體積建議小于3KB。主應(yīng)用代碼使用ES Modules編寫(xiě)通過(guò)構(gòu)建工具打包并用script defer或typemodule引入確保不阻塞渲染且DOM就緒后執(zhí)行。非關(guān)鍵/大型功能使用動(dòng)態(tài)import()進(jìn)行代碼分割實(shí)現(xiàn)按需加載。第三方腳本使用script async引入防止它們阻塞主線程。對(duì)于用戶行為觸發(fā)的如分享按鈕甚至可以結(jié)合動(dòng)態(tài)腳本注入在需要時(shí)再加載。預(yù)加載提示利用link relpreload或Webpack的魔法注釋對(duì)即將用到的關(guān)鍵資源如下一個(gè)路由的chunk進(jìn)行預(yù)加載。7.3 從“怎么引入”到“工程化思維”當(dāng)我們討論JS引入方式時(shí)其背后折射出的其實(shí)是前端工程化水平的演進(jìn)內(nèi)聯(lián)腳本代表了刀耕火種的原始階段簡(jiǎn)單直接但難以維護(hù)。外部引入邁出了分離關(guān)注點(diǎn)的第一步帶來(lái)了緩存和協(xié)作的好處。模塊化引入解決了復(fù)雜應(yīng)用的依賴(lài)管理和作用域污染問(wèn)題是大型項(xiàng)目的基石。動(dòng)態(tài)引入則是在模塊化基礎(chǔ)上對(duì)網(wǎng)絡(luò)性能的極致優(yōu)化體現(xiàn)了以用戶為中心的性能觀。所以下次當(dāng)你寫(xiě)下一個(gè)script標(biāo)簽時(shí)不妨多想一步我選擇的這種方式是否契合項(xiàng)目當(dāng)前的階段是否為未來(lái)的擴(kuò)展和維護(hù)留下了空間是否為用戶提供了最快的加載體驗(yàn)把這些問(wèn)題的答案想清楚你的代碼就已經(jīng)超越了大多數(shù)只關(guān)注功能的實(shí)現(xiàn)。技術(shù)的選擇最終服務(wù)于項(xiàng)目和用戶的目標(biāo)。