首頁(yè) 猿問(wèn) 加載和執(zhí)行腳本的順序

加載和執(zhí)行腳本的順序

JavaScript

函數(shù)式編程 2019-06-06 13:41:16

加載和執(zhí)行腳本的順序在html頁(yè)面中包含JavaScript的方式有很多種。我知道以下選項(xiàng)：內(nèi)聯(lián)代碼或從外部URI加載包括在<head>或<body>標(biāo)簽中[1,2]沒(méi)有，defer或async屬性(只有外部腳本)包含在靜態(tài)源中或由其他腳本動(dòng)態(tài)添加(在不同的解析狀態(tài)下，使用不同的方法)不包括硬盤(pán)中的瀏覽器腳本，javascript：URI和onEvent-屬性[3]，已經(jīng)有16個(gè)選項(xiàng)可以讓JS執(zhí)行，我相信我忘了一些東西。我不太關(guān)心快速(并行)加載，我對(duì)執(zhí)行順序更感興趣(這可能取決于加載順序和文件順序). 有沒(méi)有好的(跨瀏覽器)包括所有案件的推薦信？例如：網(wǎng)址：http：/www.websiteOptimization.com只處理其中的6個(gè)，并且測(cè)試大部分是舊的瀏覽器。由于我擔(dān)心沒(méi)有，這里是我的具體問(wèn)題：我有一些(外部)頭腳本用于初始化和腳本加載。然后，我有兩個(gè)靜態(tài)的，內(nèi)聯(lián)的腳本在身體的末尾。第一種方法允許腳本加載器將另一個(gè)腳本元素(引用外部js)動(dòng)態(tài)地追加到主體中。第二個(gè)靜態(tài)內(nèi)聯(lián)腳本希望使用添加的外部腳本中的js。它能否依賴另一個(gè)已被執(zhí)行(以及為什么：-)？

查看完整描述

3 回答

呼啦一陣風(fēng)

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超6個(gè)贊

瀏覽器將按照找到腳本的順序執(zhí)行它們。如果調(diào)用外部腳本，它將阻塞頁(yè)面，直到加載和執(zhí)行腳本為止。

為了檢驗(yàn)這一事實(shí)：

// file: test.phpsleep(10);die("alert('Done!');");// HTML file:<script type="text/javascript" src="test.php"></script>

動(dòng)態(tài)添加的腳本在附加到文檔后立即執(zhí)行。

為了檢驗(yàn)這一事實(shí)：

<!DOCTYPE HTML><html><head>
    <title>Test</title></head><body>
    <script type="text/javascript">
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.src = "link.js"; // file contains alert("hello!");
        document.body.appendChild(s);
        alert("appended");
    </script>
    <script type="text/javascript">
        alert("final");
    </script></body></html>

警報(bào)的順序是“附加”->“你好！”->“最終”

如果在腳本中嘗試訪問(wèn)尚未到達(dá)的元素(例如：<script>do something with #blah</script><div id="blah"></div>)那么您將得到一個(gè)錯(cuò)誤。

總的來(lái)說(shuō)，是的，您可以包括外部腳本，然后訪問(wèn)它們的函數(shù)和變量，但前提是退出當(dāng)前腳本。<script>標(biāo)記并啟動(dòng)一個(gè)新的。

反對(duì) 回復(fù) 2019-06-06