在
制作網(wǎng)站的所有元素中，腳本可能是最通用的。然而，與它們的多功能性齊頭并進(jìn)的是腳本對網(wǎng)站性能產(chǎn)生巨大影響的潛力，使它們成為任何優(yōu)化策略的關(guān)鍵部分。它們通常也是黑客可以用來攻擊站點(diǎn)的弱點(diǎn)，這就是為什么我們必須定期分析和定期優(yōu)化我們的腳本以確保我們的站點(diǎn)保持安全和快速。
通常，在他們的網(wǎng)站上實(shí)現(xiàn)新功能時，用戶將使用其他開發(fā)人員設(shè)計的預(yù)構(gòu)建代碼片段，而不是自己編寫代碼。這有雙重好處；沒有經(jīng)驗(yàn)的開發(fā)人員能夠利用更高級的功能，這些功能對他們來說很難單獨(dú)編碼，即使有經(jīng)驗(yàn)的用戶也可以通過使用預(yù)先編寫的代碼段來節(jié)省時間。
但是，隨著瀏覽器的更新和改進(jìn)，它們通常會添加對以前只能通過腳本實(shí)現(xiàn)的功能的支持。未能使我們的內(nèi)容適應(yīng)這些創(chuàng)新可能會阻止我們的網(wǎng)站充分發(fā)揮其潛力，因此跟上瀏覽器更新中引入的新特性和功能以保持我們的網(wǎng)站平穩(wěn)有效地運(yùn)行非常重要。以下是三個相對較新的瀏覽器功能可以更有效地解決問題的示例：
示例 1：圖像的延遲加載
直到幾年前，如果我們想要延遲加載圖像（即只在用戶滾動到圖像時加載圖像，而不是在初始頁面加載時加載圖像，讓用戶更快地看到頁面內(nèi)容），一個非常常見的解決方案是用 data-src 屬性替換圖像中的 src 屬性，然后通過瀏覽器窗口的 onscroll 事件跟蹤用戶在網(wǎng)站中的滾動。
示例 2：滾動頁面時激活項目
多年來，我們從 onscroll 事件中獲得了很多進(jìn)展；除了用于延遲加載圖像外，它還經(jīng)常用于在給定網(wǎng)頁的某些點(diǎn)觸發(fā)事件。例如，我們可能希望在用戶從頁面頂部滾動時出現(xiàn)一個粘性菜單。目前，更強(qiáng)大的解決方案是IntersectionObserver API；有了這個，我們可以在相對于頁面元素或元素組的可見性的特定時刻觸發(fā)事件。這使其成為粘性菜單、滾動期間觸發(fā)的動畫或僅用于分析、跟蹤用戶是否查看給定項目的理想解決方案。
示例 3：跟蹤網(wǎng)站更改
將我們的網(wǎng)站腳本與其他外部腳本鏈接起來可能是一個相當(dāng)大的挑戰(zhàn)；如果我們的腳本沒有使用方便的 API 或引發(fā)任何類型的事件，那么我們就無法監(jiān)控更改。這可以通過循環(huán)執(zhí)行腳本來克服，這些腳本將驗(yàn)證頁面上的腳本是否有任何重要的更改，但最好使用MutationObserver API，它允許我們跟蹤在不同級別的特定元素中發(fā)生的更改- 無論是 HTML 結(jié)構(gòu)、文本還是屬性。
與 CSS 和 HTML 一樣，縮小和壓縮 JavaScript 代碼以節(jié)省帶寬并減少網(wǎng)站加載時需要運(yùn)行的查詢數(shù)量始終是一個好主意。 在 JS 代碼的情況下，縮小腳本的工具比 CSS 代碼具有更大的范圍，因?yàn)橥ǔＳ懈唵蔚姆椒▉砗喕_本構(gòu)造，盡管如果您希望稍后檢查腳本，這當(dāng)然會使它們的可讀性降低. 另外，我們應(yīng)該特別注意我們的腳本加載的順序；低效的加載順序可能導(dǎo)致用戶不必要的加載延遲和整體更差的用戶體驗(yàn)。
作為一般規(guī)則，我們應(yīng)該避免將腳本嵌入到我們的 HTML 代碼中，尤其是當(dāng)它們引用其他庫時，因?yàn)闉榱耸褂眠@些庫，必須在<head>我們網(wǎng)站的部分加載它們，這反過來會導(dǎo)致嚴(yán)重的頁面渲染時間延遲。如果您發(fā)現(xiàn)自己絕對必須依賴內(nèi)聯(lián) JS 代碼，請嘗試使用沒有任何附加依賴項的簡單、普通的 JS 代碼來減少所需的引用數(shù)量。
