XMLHttp請求與“ html標記”資源加載

Question

我目前正在構建自己的SPA框架。 我很好奇，某些事情在后台是如何工作的。

假設我要從服務器動態導入腳本。

我當前使用的方法是在頭上包含一個腳本標簽，並將“ async”屬性設置為true。 這樣的事情。

 for (let requiredScript of requiredScripts){ var $head = document.getElementsByTagName('head')[0]; var $script = document.createElement('script'); $script.src = requiredScript; $script.async = true; $script.onload = function(){ callback(); } $head.appendChild($script); } 

如何在瀏覽器中正常工作？ 我讀到瀏覽器會為head標記中的每個腳本生成一個新線程，並且在加載時會執行它們。 （我也可以使用defer屬性，但這並不重要）。

這（如果它能按我預期的那樣工作）是很棒的。 語法很丑陋，但是可以用。 有一個小缺點：我無法為這些請求顯式設置標頭。 例如，我想向限制資源的每個請求中添加一個JWT令牌，但我不能這樣做，並且必須使用Ajax調用。 但這不是這個問題的一部分。

因此，加載資源的第二種方法（還有第三種方法是ES6導入，但我暫時不使用它）是通過AJAX調用加載資源。 但是從XMLHttp請求的性質來看，我只得到一個字符串，或者也許是JSON，但沒有腳本，因此我不得不調用eval（），它既緩慢又不安全。

但是，讓我們開始思考這個問題。 腳本標簽中的資源調用到底是什么？ 它與xmlhttp請求（或ajax調用）有何不同？ 解析html文件並使用script標簽評估行時，瀏覽器到底會做什么？ 我可以將JavaScript文件作為二進制文件導入，並使瀏覽器執行該文件嗎？ （比eval（）更快，更安全的選項）。 我想完全控制和理解我正在做的事情，但我感到非常困惑，無法在此主題上找到正確的答案。

每個解釋（甚至是有用的鏈接）都將不勝感激。

Answer 1

腳本標簽中的資源調用到底是什么？

<script>標記只是告訴瀏覽器對script標記中的URL進行http GET，然后將結果文本發送到Javascript解釋器進行解析和運行。 您可以在瀏覽器調試器中觀看“網絡”選項卡，以查看其正在執行的確切http GET操作。

它與xmlhttp請求（或ajax調用）有何不同？

兩者中的初始請求都是http GET，因此完全沒有區別。 xmlhttp請求受相同來源的安全保護。 <script>標記不受同源保護，因此它可以從任何地方加載腳本。

解析html文件並使用script標簽評估行時，瀏覽器到底會做什么？

我認為這已在上面進行了描述（一個http GET，然后將結果傳遞給JS解析器）。

我可以將JavaScript文件作為二進制文件導入，並使瀏覽器執行該文件嗎？ （比eval（）更快，更安全的選項）

不，不是。 首先，JS文件不是二進制文件，而是文本文件。 尚未針對預解析/編譯的二進制Javascript采用並廣泛實施的標准。 您可以閱讀有關Emscripten和Asm.js的文章，以了解在這方面所做的一些工作，盡管Emscripten確實將其他語言代碼轉換為JS。

當您說“比eval()更安全”時，您必須描述您要避免的問題。 加載腳本標簽或使用Ajax加載腳本，然后在其上調用eval()都將在全局上下文中評估腳本，並具有廣泛的功能來處理您的頁面。

您可以使用XMLHttpRequest檢索腳本文本來自己控制加載和執行（如果不是跨域請求），然后可以通過將文本插入到腳本標記中或調用eval()來解析和執行它在上面。 除非您想在執行之前以某種方式修改或驗證腳本，否則親自手動加載它確實沒有任何好處。