我有一些初始頁面加載不需要的 javascript。我需要根據將在客戶端評估的某些條件來加載它。
$(document).ready(function() {
let someCondition = true; // someCondition is dynamic
if (someCondition) {
var element = document.createElement('script');
element.src = 'https://raw.githubusercontent.com/Useless-Garbage-Institute/useless-garbage/master/index.js';
element.defer = true; // does this make a difference?
element.onload = function() {
// do some library dependent stuff here
document.getElementById("loading").textContent = "Loaded";
};
document.body.appendChild(element);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="loading">Loading...</h1>
如果使用javascript創建的新標簽在檔案準備好后是否具有'defer'屬性,是否會有所不同(就瀏覽器將如何處理腳本標簽而言)?我認為沒有區別,但我怎么能確定呢?
我相信我理解當腳本標記是初始 html 的一部分時延遲腳本的行為(如此處所述)。此外,這個問題不是關于是否element.defer=true
可以使用(這個問題的主題)。
uj5u.com熱心網友回復:
將它們添加到函式和直接添加 CDN 之間存在區別(尤其是在您的情況下)。
我們先看一下上述代碼的代碼執行情況,
- 您首先添加了
jquery
CDN(沒有 defer),以便首先加載。 $(document).ready
將在 jquery 完全加載后觸發一次。- 將創建一個新的腳本標簽并將其插入到 dom 中。
https://raw.githubusercontent.com/Useless-Garbage-Institute/useless-garbage/master/index.js
異步下載。
讓我們看看另一種方法:在代碼中添加 CDN:
- 您的 DOM 將有 2 個腳本標簽。
- 兩者都將根據負載型別并行開始加載(
defer
async
等)。 - 請注意,您不是在等待
dom ready
事件加載第二個腳本。
我建議只在 js 檔案中添加主要的 JS 部分并將其添加到 CDN。其他人可以延遲等待加載。如果您真的需要 a js src
,則不要以第一種方式加載它,因為它會等待完整的頁面加載。
我建議您閱讀并查看web-vitals
和SEO
為此。
element.defer=true
對于您的其他問題,是的,您可以在創建和加載到 DOM 時向元素添加 defer 屬性。
希望這個答案對你有幫助!如果您有任何錯誤或疑問,請隨時發表評論。
uj5u.com熱心網友回復:
不,這沒有任何區別,在defer
“非決議器插入”腳本的情況下,該屬性將被忽略:
<script defer src="data:text/javascript,console.log('inline defer')"></script>
<script>
const script = document.createElement("script");
script.src = "data:text/javascript,console.log('dynamic defer')";
script.defer = true;
document.body.append(script);
</script>
<!-- force delaying of parsing -->
<script src="https://deelay.me/5000/https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
查看瀏覽器的控制臺或注意日志時間戳以查看動態插入的腳本在我們等待獲取行內腳本時確實執行了。
uj5u.com熱心網友回復:
我認為JQuery Arrive 庫將解決您的問題。
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/504657.html