整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本指南中，我們將介紹：
.reduce() 函數是什么？
創建我們的 .reduce() 函數版本
計算電子商務購物車的商品總數和價格
為餐廳菜單創建一組獨特的類別
從數組中刪除重復的對象
用 .reduce() 替換 .filter().map()
按鍵分組對象（類似于 SQL GROUP BY 或 C# 的 .GroupBy()）
乍一看似乎很混亂
如果您曾經為理解 .reduce() 函數而苦苦掙扎，那么您并不孤單。 要真正了解它的工作原理并自信地使用它，需要多花幾次功夫。
大多數例子都使用一個簡單的數字或字符串數組，但現實是我們通常使用很少涉及的復雜對象。
但在我們跳進去之前。
以下是如何從這些內容中獲得更多信息。
打開您的代碼編輯器并親自嘗試示例
修改它（更改值，向數組添加或從數組中刪除元素等）
如果您發現自己迷失在其中一個示例中，請使用筆和紙或在您的代碼編輯器上追蹤變量的值。
讓我們開始吧！
.reduce() 函數是什么？
它是一種對數組的每個元素執行回調函數的方法。
計算的返回值傳遞給下一個元素。
在第一次迭代中，沒有“上一次計算的返回值”，如果傳入，可以用一個初始值代替。
否則，數組的第一個元素被用作初始值，迭代從下一個元素開始。
簡單的說，就是一個變量和一個循環。
變量保存新值
循環遍歷數組，因此我們可以從每個元素中獲取我們想要的內容
這個：
實現與此相同：
幾乎每次需要使用變量和循環時，都可以用 reduce 函數替換它。
由于沒有比實際嘗試更好的學習方法，讓我們構建我們的 .reduce() 方法版本，以便我們真正理解它。
構建我們自己的 .reduce()
讓我們通過解決一個簡單的問題來做到這一點：
我們有一個數字數組，我們想要所有數字的總和。
就像上面的變量和循環的例子一樣。
我們需要三樣東西：
數組
保存總值 total 的變量（通常稱為累加器）
遍歷數組的循環
假設你想把它變成一個函數，這樣你就可以很容易地使用它，你會怎么做？
也許沿著這些路線：
我們將數組作為參數傳遞給我們的函數
我們最后返回總數。
這看起來不錯，但是如果我們想要設置變量總計初始值的選項怎么辦？
我們可以將選項添加為另一個參數并將總計設置為它的值。
像這樣：
但是這個函數還有2個問題。
我們無法在循環內添加要執行的不同邏輯（它只會將當前元素添加到 sum 變量）
它僅適用于簡單數組（其中每個項目都是值類型，而不是對象）
我會告訴你我的意思。
這次讓我們創建一個對象數組
讓我們調用傳入對象數組的 myReducer 函數
它不起作用，因為我們要添加的值在對象內部而不是對象本身。
我們必須以 total += arr[i].number 的形式訪問它
但是這個函數沒有考慮到這一點。
但是，如果我們添加一個回調函數作為第二個參數，我們可以：
對數組的每個元素執行回調函數
創建我們需要的任何自定義邏輯
讓我們修改我們的 myReducer 函數。
讓我們用對象數組再次測試它。
首先，聲明回調函數并調用傳入它的 myReduce。
請注意，我們根據 total 的值添加了 if 和 else 條件，這是我們的 initialValue 選項。
如果未給出初始值
它不會在第一次迭代時執行回調
沒有什么要補充的，initialValue 是未定義的。
只需將 total 設置為當前元素的值
如果給出初始值
它在所有迭代中執行回調
這幾乎就是原始 Array.prototype.reduce() 所做的。
主要區別在于不需要將數組作為參數傳遞，因為原始 .reduce() 綁定到 Array.prototype，因此數組始終是調用 .reduce() 的數組。
計算電子商務購物車的總項目數和價格
假設你有一個像這樣的數組：
您需要將此數組縮減為這樣的對象 { totalItems: 0, totalPrice: 0 } 以便我們可以在結帳頁面上顯示正確的信息。
這是我們可以做到的：
為餐廳菜單創建一組獨特的類別
給定這個數組：
我們需要將其縮減為一系列獨特的類別，例如 ['Appetizer','Entree','Main']
這是我們可以做到的：
從數組中刪除重復的對象
與上面的示例類似，但這次我們需要返回僅使用唯一對象過濾的相同對象數組。
這是具有重復對象的數組：
注意：你必須有一個類似于 id 的屬性，它對每個對象都是唯一的
這就是我們如何創建另一個僅包含唯一元素的數組：
將 .filter().map() 替換為 .reduce()
過濾數組然后修改過濾后數組的元素是很常見的。
我們將使用上面菜單類別的相同數組
但是這次我們想得到一個數組，其中只有類別為“Entree”的項目的 itemName
我們可以使用 .filter() 數組，然后使用 .map() 來完成它
或者我們可以用 .reduce() 來做
使用 .reduce() 的優點是您只迭代數組一次。
按鍵分組對象（類似于 SQL GROUP BY 或 C# 的 .GroupBy()）
這是我最喜歡的。 這是一個非常方便的函數，可能會在下一次更新時包含在 JavaScript 的數組方法中（目前處于第 3 階段以供批準）
這個 groupBy 函數也可以用作解決更復雜問題的中間步驟。
我們將再次使用菜單類別數組：
這是我們的 groupBy 函數：
如果我們添加將密鑰作為函數傳遞的選項，它會變得更加方便。
只需替換這一行：
有了這個：
這樣我們就可以調用它并傳遞一個返回鍵的函數，而不是自己編寫字符串，避免拼寫錯誤。
結論
在這篇文章中，我們了解到：
什么是 .reduce() 函數
如何創建我們的 .reduce() 函數版本
計算電子商務購物車的總項目數和價格
為餐廳菜單創建一組獨特的類別
從數組中刪除重復的對象
將 .filter().map() 替換為 .reduce()
如何按鍵對對象進行分組（類似于 SQL GROUP BY 或 C# 的 .GroupBy()）
謝謝閱讀！
/下栽のke：quangneng.com/321/
JavaScript高級玩法的詳細介紹
JavaScript是一種非常靈活且強大的腳本語言，廣泛應用于網頁開發、移動端開發、后端開發等多個領域。對于想要提升JavaScript編程能力的開發者來說，掌握一些高級玩法是非常必要的。以下是一些JavaScript的高級玩法：
JavaScript中的函數不僅能夠執行特定任務，還具有許多高級特性。例如，函數可以接受參數，也可以返回值；函數可以嵌套在其他函數中，形成高階函數；函數還可以作為一等公民存在，可以被賦值給變量，也可以作為函數的參數傳遞。
JavaScript中的所有對象都有一個內部屬性[[Prototype]]，這個屬性指向它的原型對象。通過__proto__屬性或者Object.getPrototypeOf()方法，可以訪問一個對象的原型。JavaScript中的繼承是通過原型鏈實現的，子類的原型可以通過__proto__屬性或者constructor.prototype屬性指向父類的實例。
JavaScript中的異步編程非常復雜，但非常重要。常見的異步編程方式有回調函數、Promise、async/await等。掌握這些異步編程方式，可以幫助開發者更好地處理復雜的異步邏輯。
設計模式是一套被廣泛接受的面向對象的設計原則，用于解決特定問題的最佳實踐。在JavaScript中，常用的設計模式有單例模式、工廠模式、觀察者模式、裝飾器模式等。掌握這些設計模式，可以幫助開發者寫出更加優雅、高效的代碼。
JavaScript程序的性能優化是一項非常重要的任務。通過合理的算法設計、代碼組織、資源管理等方式，可以顯著提高JavaScript程序的運行效率。
JavaScript的函數具有以下一些高級特性：
箭頭函數：箭頭函數是ES6引入的一種新的函數語法。它們更簡潔，并且在處理多個返回值時更方便。箭頭函數的語法如下：
(parameters) => { // code to be executed}
高階函數：高階函數是接受一個或多個函數作為參數，并返回一個新的函數的函數。它們在組合和抽象中非常有用。例如，map()、filter() 和 reduce() 等函數都是高階函數的例子。
閉包：閉包是一種特殊的函數結構，它允許一個函數在其定義范圍之外訪問其父作用域的變量和函數。例如，你可以創建一個函數，該函數在其定義范圍內定義一個局部變量，然后返回一個內部函數，該內部函數可以訪問并修改這個局部變量。
函數表達式：除了函數聲明外，JavaScript還支持函數表達式。函數表達式可以將函數賦值給變量，從而提供更大的靈活性。
函數柯里化：函數柯里化是一種特殊的技術，它將函數轉化為一系列嵌套函數的形式。每個嵌套函數都只接受部分參數，并返回一個新的函數，等待接收剩余的參數。
函數的遞歸調用：函數可以調用自身，這種技術稱為函數的遞歸調用。函數的遞歸調用在很多情況下都非常有用，例如計算斐波那契數列、遍歷樹形結構的數據等。
以上就是JavaScript的一些高級玩法，希望對你有所幫助。如果你想深入了解這些話題，可以閱讀一些相關的書籍和教程，如《JavaScript高級教程》、《JavaScript權威指南》等。同時，多做一些實踐項目，也是提升JavaScript編程能力的好方法。
習目標：了解JavaScript是如何與HTML結合來創建動態網頁，網頁中嵌入JavaScript的不同方式，JavaScript的內容類型及其與<script>的關系
<script>是由Netscape創造出來，后來加到HTML規范中的。
<script>有8個屬性：
1、async:表示立即開始下載腳本，但不能阻止其他頁面動作，比如下載資源或者等待其他腳本加載。只對外部腳本文件有效。
2、charset：使用src屬性指定代碼字符集。這個屬性很少用，因為大多數瀏覽器不在乎它的值。
3、crossorigin；配置資源請求的CORS（跨源資源共享）設置。默認情況下不使用CORS。crossorigin = “anonymous”配置文件請求不用設置憑據標志。crossorigin = ”use-credentials“設置憑據標志，意味著出站請求會包含憑據。
4、defer:表示腳本可以延遲到文檔全部解析和顯示后再執行。新版本中只能用于外部腳本。
5、integrity:允許比對接收到的資源和指定的加密簽名以驗證子資源完整性（SRI，Subresource integrity），如果驗證簽名不匹配則腳本不會執行。這個屬性可以用于確保內容分發網絡（CDN，Content Delivery Network）不會提供惡意內容。
6、language：此屬性已被廢止。
7、src:表示包含外部要執行的代碼的外部文件。
8、type:代替language，表示代碼塊中腳本語言的內容類型（也稱為MIME類型），按照慣例這個值始終都是”text/JavaScript“，盡管”text/JavaScript“和”text/ecmascript“都已經廢棄。JavaScript文件的MIME類型通常是”application/x-javascript“,不過給type屬性這個值的話可能會導致腳本被忽略。在非IE的瀏覽器中有效的值還有”application/JavaScript“和”application/ecmascript"。如果這個值是module，則代碼會被當成是ES6模塊，而且只有這時候代碼中才能出現import和export關鍵字。
使用<script>的方式有內聯和外嵌兩種，只要把code寫入<script>code</script>中就好，code中要是包含字符串“<script>”,只要加上轉義字符“\”即可。
如果要外嵌JavaScript代碼只要使用src屬性來鏈接外部文件即可如：
<script src=“example.js”></script>
XHTML 文檔中，可以忽略結束標簽寫成<script src=“example.js”/>即可，但是這在HTML中不能使用。
過去把JavaScript和CSS一起寫在head中，但是這意味著必須下載所有code并解析和解釋完成后才開始渲染頁面，對于JavaScript很多的頁面會導致頁面渲染速度過慢，為解決這個問題，JavaScript一般寫在body元素的頁面內容的最后邊，如下
<html>
<head></head>
<body>
message
<script>code<\script>
<\body>
</html>
在外聯JavaScript時可以使用defer屬性來推遲腳本的運行。可以寫成：
<html>
<head>
<script defer src = "example.js">code<\script>
</head>
<body>
message
<\body>
</html>
async屬性從腳本處理方式上與defer類似，但是不同的是標記async的腳本并不能保證腳本按照他們的出現順序執行，比如：
<html>
<head>
<script sync src = "example1.js">code<\script>
<script sync src = "example2.js">code<\script>
</head>
<body>
message
<\body>
</html>
不能保證example1比example2先執行。
除了<script>以外還可以用其他方式加載腳本。因為JavaScript可以使用DOM API，所以通過向DOM中動態地加入script元素同樣可以加載指定腳本。只要創建一個script元素并將其添加到DOM即可。
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);
當然，在把 HTMLElement 元素添加到 DOM 且執行到這段代碼之前不會發送請求。默認情況下，以這種方式創建的<script>元素是以異步方式加載的，相當于添加了 async 屬性。不過這樣做可能會有問題，因為所有瀏覽器都支持 createElement()方法，但不是所有瀏覽器都支持 async 屬性。因此，如果要統一動態腳本的加載行為，可以明確將其設置為同步加載：
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
以這種方式獲取的資源對瀏覽器預加載器是不可見的。這會嚴重影響它們在資源獲取隊列中的優先級。根據應用程序的工作方式以及怎么使用，這種方式可能會嚴重影響性能。要想讓預加載器知道這些動態請求文件的存在，可以在文檔頭部顯式聲明它們：
<link rel="preload" href="gibberish.js">
可擴展超文本標記語言（XHTML，Extensible HyperText Markup Language）是將 HTML 作為 XML的應用重新包裝的結果。與 HTML 不同，在 XHTML 中使用 JavaScript 必須指定 type 屬性且值為text/javascript，HTML 中則可以沒有這個屬性。XHTML 雖然已經退出歷史舞臺，但實踐中偶爾可能也會遇到遺留代碼，為此本節稍作介紹。在 XHTML 中編寫代碼的規則比 HTML 中嚴格，這會影響使用<script>元素嵌入 JavaScript 代碼。下面的代碼塊雖然在 HTML 中有效，但在 XHML 中是無效的。
<script type="text/javascript">
function compare(a, b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
</script>
在 HTML 中，解析<script>元素會應用特殊規則。XHTML 中則沒有這些規則。這意味著 a < b語句中的小于號（<）會被解釋成一個標簽的開始，并且由于作為標簽開始的小于號后面不能有空格，這會導致語法錯誤。避免 XHTML 中這種語法錯誤的方法有兩種。第一種是把所有小于號（<）都替換成對應的 HTML實體形式（<）。結果代碼就是這樣的：
<script type="text/javascript">
function compare(a, b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
</script>
這樣代碼就可以在 XHTML 頁面中運行了。不過，缺點是會影響閱讀。好在還有另一種方法。第二種方法是把所有代碼都包含到一個 CDATA 塊中。在 XHTML（及 XML）中，CDATA 塊表示文檔中可以包含任意文本的區塊，其內容不作為標簽來解析，因此可以在其中包含任意字符，包括小于號，并且不會引發語法錯誤。使用 CDATA 的格式如下：
<script type="text/javascript"><![CDATA[
function compare(a, b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
]]></script>
在兼容 XHTML 的瀏覽器中，這樣能解決問題。但在不支持 CDATA 塊的非 XHTML 兼容瀏覽器中則不行。為此，CDATA 標記必須使用 JavaScript 注釋來抵消：
<script type="text/javascript">
//<![CDATA[
function compare(a, b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
//]]>
</script>
這種格式適用于所有現代瀏覽器。雖然有點黑科技的味道，但它可以通過 XHTML 驗證，而且對XHTML 之前的瀏覽器也能優雅地降級。
自 1995 年 Netscape 2 發布以來，所有瀏覽器都將 JavaScript 作為默認的編程語言。type 屬性使用一個 MIME 類型字符串來標識<script>的內容，但 MIME 類型并沒有跨瀏覽器標準化。即使瀏覽器默認使用 JavaScript，在某些情況下某個無效或無法識別的 MIME 類型也可能導致瀏覽器跳過（不執行）相關代碼。因此，除非你使用 XHTML 或<script>標簽要求或包含非 JavaScript 代碼，最佳做法是不指定 type 屬性。在最初采用 script 元素時，它標志著開始走向與傳統 HTML 解析不同的流程。對這個元素需要應用特殊的解析規則，而這在不支持 JavaScript 的瀏覽器（特別是 Mosaic）中會導致問題。不支持的瀏覽器會把<script>元素的內容輸出到頁面上，從而破壞頁面的外觀。Netscape 聯合 Mosaic 拿出了一個解決方案，對不支持 JavaScript 的瀏覽器隱藏嵌入的 JavaScript 代碼。最終方案是把腳本代碼包含在一個 HTML 注釋中，像這樣：
<script><!--
function sayHi(){
console.log("Hi!");
}
//--></script>
使用這種格式，Mosaic 等瀏覽器就可以忽略<script>標簽中的內容，而支持 JavaScript 的瀏覽器則必須識別這種模式，將其中的內容作為 JavaScript 來解析。雖然這種格式仍然可以被所有瀏覽器識別和解析，但已經不再必要，而且不應該再使用了。在XHTML 模式下，這種格式也會導致腳本被忽略，因為代碼處于有效的 XML 注釋當中。
雖然可以直接在 HTML 文件中嵌入 JavaScript 代碼，但通常認為最佳實踐是盡可能將 JavaScript 代碼放在外部文件中。不過這個最佳實踐并不是明確的強制性規則。推薦使用外部文件的理由如下。
? 可維護性。JavaScript 代碼如果分散到很多 HTML 頁面，會導致維護困難。而用一個目錄保存所有 JavaScript 文件，則更容易維護，這樣開發者就可以獨立于使用它們的 HTML 頁面來編輯代碼。
? 緩存。瀏覽器會根據特定的設置緩存所有外部鏈接的 JavaScript 文件，這意味著如果兩個頁面都用到同一個文件，則該文件只需下載一次。這最終意味著頁面加載更快。
? 適應未來。通過把 JavaScript 放到外部文件中，就不必考慮用 XHTML 或前面提到的注釋黑科技。包含外部 JavaScript 文件的語法在 HTML 和 XHTML 中是一樣的。在配置瀏覽器請求外部文件時，要重點考慮的一點是它們會占用多少帶寬。在 SPDY/HTTP2 中，預請求的消耗已顯著降低，以輕量、獨立 JavaScript 組件形式向客戶端送達腳本更具優勢。比如，第一個頁面包含如下腳本：
<script src="mainA.js"></script>
<script src="component1.js"></script>
<script src="component2.js"></script>
<script src="component3.js"></script>
...
后續頁面可能包含如下腳本：
<script src="mainB.js"></script>
<script src="component3.js"></script>
<script src="component4.js"></script>
<script src="component5.js"></script>
...
在初次請求時，如果瀏覽器支持 SPDY/HTTP2，就可以從同一個地方取得一批文件，并將它們逐個放到瀏覽器緩存中。從瀏覽器角度看，通過 SPDY/HTTP2 獲取所有這些獨立的資源與獲取一個大JavaScript 文件的延遲差不多。在第二個頁面請求時，由于你已經把應用程序切割成了輕量可緩存的文件，第二個頁面也依賴的某些組件此時已經存在于瀏覽器緩存中了。當然，這里假設瀏覽器支持 SPDY/HTTP2，只有比較新的瀏覽器才滿足。如果你還想支持那些比較老的瀏覽器，可能還是用一個大文件更合適。
IE5.5 發明了文檔模式的概念，即可以使用 doctype 切換文檔模式。最初的文檔模式有兩種：混雜模式（quirks mode）和標準模式（standards mode）。前者讓 IE 像 IE5 一樣（支持一些非標準的特性），后者讓 IE 具有兼容標準的行為。雖然這兩種模式的主要區別只體現在通過 CSS 渲染的內容方面，但對JavaScript 也有一些關聯影響，或稱為副作用。本書會經常提到這些副作用。
IE 初次支持文檔模式切換以后，其他瀏覽器也跟著實現了。隨著瀏覽器的普遍實現，又出現了第三種文檔模式：準標準模式（almost standards mode）。這種模式下的瀏覽器支持很多標準的特性，但是沒有標準規定得那么嚴格。主要區別在于如何對待圖片元素周圍的空白（在表格中使用圖片時最明顯）。
混雜模式在所有瀏覽器中都以省略文檔開頭的 doctype 聲明作為開關。這種約定并不合理，因為混雜模式在不同瀏覽器中的差異非常大，不使用黑科技基本上就沒有瀏覽器一致性可言。標準模式通過下列幾種文檔類型聲明開啟：
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5 -->
<!DOCTYPE html>
準標準模式通過過渡性文檔類型（Transitional）和框架集文檔類型（Frameset）來觸發：
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
準標準模式與標準模式非常接近，很少需要區分。人們在說到“標準模式”時，可能指其中任何一個。而對文檔模式的檢測（本書后面會討論）也不會區分它們。本書后面所說的標準模式，指的就是除混雜模式以外的模式。
針對早期瀏覽器不支持 JavaScript 的問題，需要一個頁面優雅降級的處理方案。最終，<noscript>元素出現，被用于給不支持 JavaScript 的瀏覽器提供替代內容。雖然如今的瀏覽器已經 100%支持JavaScript，但對于禁用 JavaScript 的瀏覽器來說，這個元素仍然有它的用處。<noscript>元素可以包含任何可以出現在<body>中的 HTML 元素，<script>除外。在下列兩種情況下，瀏覽器將顯示包含在<noscript>中的內容：
? 瀏覽器不支持腳本；
? 瀏覽器對腳本的支持被關閉。任何一個條件被滿足，包含在<noscript>中的內容就會被渲染。否則，瀏覽器不會渲染<noscript>中的內容。
下面是一個例子：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script defer="defer" src="example1.js"></script>
<script defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>This page requires a JavaScript-enabled browser.</p>
</noscript>
</body>
</html>
這個例子是在腳本不可用時讓瀏覽器顯示一段話。如果瀏覽器支持腳本，則用戶永遠不會看到它。
JavaScript 是通過<script>元素插入到 HTML 頁面中的。這個元素可用于把 JavaScript 代碼嵌入到HTML 頁面中，跟其他標記混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重點可以總結如下。
? 要包含外部 JavaScript 文件，必須將 src 屬性設置為要包含文件的 URL。文件可以跟網頁在同一臺服務器上，也可以位于完全不同的域。
? 所有<script>元素會依照它們在網頁中出現的次序被解釋。在不使用 defer 和 async 屬性的情況下，包含在<script>元素中的代碼必須嚴格按次序解釋。
? 對不推遲執行的腳本，瀏覽器必須解釋完位于<script>元素中的代碼，然后才能繼續渲染頁面的剩余部分。為此，通常應該把<script>元素放到頁面末尾，介于主內容之后及</body>標簽之前。
? 可以使用 defer 屬性把腳本推遲到文檔渲染完畢后再執行。推遲的腳本原則上按照它們被列出的次序執行。
? 可以使用 async 屬性表示腳本不需要等待其他腳本，同時也不阻塞文檔渲染，即異步加載。異步腳本不能保證按照它們在頁面中出現的次序執行。
? 通過使用<noscript>元素，可以指定在瀏覽器不支持腳本時顯示的內容。如果瀏覽器支持并啟用腳本，則<noscript>元素中的任何內容都不會被渲染。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
