這個屬性向瀏覽器發出信號,表明可以執行腳本而不會阻止其他資源的加載。但是,需要注意的是,如果非同步加載,具有依賴項的腳本仍然可能會導致問題。
在提供的範例中,使用名為 importScripts() 的自訂函數來載入多個非同步腳本和樣式表。然而,程式碼缺乏回呼機制來確保在頁面變得可互動之前所有資源都已載入。
JQuery 的$.getScript() 方法提供了一個簡潔的方法加載腳本的方式異步:
$.getScript(\\'js/jquery-ui-1.8.16.custom.min.js\\', successCallback);
此方法自動處理載入的腳本並提供可選的回呼函數。
function loadScript(src) { return new Promise(function (resolve, reject) { var s; s = document.createElement(\\'script\\'); s.src = src; s.onload = resolve; s.onerror = reject; document.head.appendChild(s); });}
function loadScript(src) { 傳回新的 Promise(函數 (解決, 拒絕) { var s; s = document.createElement('腳本'); s.src = src; s.onload = 解; s.onerror = 拒絕; document.head.appendChild(s); });}此函數允許處理成功和失敗的載入場景。 注意事項確保以正確的順序載入腳本和樣式表以避免意外行為非常重要。此外,非同步載入資源不應該是優化頁面效能的主要方法。也應該考慮縮小、壓縮和減少請求數量等技術。
","image":"http://www.luping.net/uploads/20241029/173016397667203508e981d.jpg","datePublished":"2024-11-08T15:50:45+08:00","dateModified":"2024-11-08T15:50:45+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}許多 Web 應用程式依賴載入多個腳本和 CSS 檔案來提供增強的功能。但是,同步載入會顯著減慢頁面渲染速度。為了解決這個問題,有幾種非同步載入這些資源的方法。
一種方法是在腳本標籤中使用 async 屬性:
這個屬性向瀏覽器發出信號,表明可以執行腳本而不會阻止其他資源的加載。但是,需要注意的是,如果非同步加載,具有依賴項的腳本仍然可能會導致問題。
在提供的範例中,使用名為 importScripts() 的自訂函數來載入多個非同步腳本和樣式表。然而,程式碼缺乏回呼機制來確保在頁面變得可互動之前所有資源都已載入。
JQuery 的$.getScript() 方法提供了一個簡潔的方法加載腳本的方式異步:
$.getScript('js/jquery-ui-1.8.16.custom.min.js', successCallback);
此方法自動處理載入的腳本並提供可選的回呼函數。
function loadScript(src) {
return new Promise(function (resolve, reject) {
var s;
s = document.createElement('script');
s.src = src;
s.onload = resolve;
s.onerror = reject;
document.head.appendChild(s);
});
}
function loadScript(src) {
傳回新的 Promise(函數 (解決, 拒絕) {
var s;
s = document.createElement('腳本');
s.src = src;
s.onload = 解;
s.onerror = 拒絕;
document.head.appendChild(s);
});
}此函數允許處理成功和失敗的載入場景。 注意事項確保以正確的順序載入腳本和樣式表以避免意外行為非常重要。此外,非同步載入資源不應該是優化頁面效能的主要方法。也應該考慮縮小、壓縮和減少請求數量等技術。
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3