簡體 English 中英

在 html 中包含 javascript 而不是鏈接到外部文件有什么缺點嗎？

[英]Is there a downside to including javascript in html instead of linking to an external file?

原文 2020-09-05 17:05:28 5 2 javascript/ html/ sockets

我正在考慮加快我正在開發的網站的速度。 我知道套接字連接很昂貴，所以我在想......在實際的 html/php 源代碼中包含 css 和 javascript 代碼而不是鏈接到它有什么缺點嗎？

似乎我可以簡單地將所有代碼放在 html 源代碼中而不是對各種文件進行 10 次調用，而不是對外部文件進行任何套接字調用？

我知道我可以將所有內容放入 1 個 javascript 文件並調用它，但這仍然會創建一個套接字調用。

我意識到這可能不會有太大的不同，可能只是一個思考練習，但是僅僅內聯代碼有什么真正的缺點嗎？

2 個解決方案

不同的資源（即 HTML、CSS、JS、圖像……）不一定需要新的套接字連接。 在 HTTP/1.1 中，同一個連接通常用於多個資源（但只能在彼此之后），而在 HTTP/2 中，多個資源可以通過同一個 TCP 連接並行加載。 因此，與其嘗試通過將 HTML、JS、CSS 組合到單個文件中來優化交付，不如使用 HTTP/2 來優化傳輸。

除此之外，腳本、CSS 和圖像等資源通常在 HTML 頁面之間共享。 在這種情況下，一次又一次地提供相同的腳本等只會是浪費。 相反，適當的緩存可以重用頁面之間的共享資源。

最后，內聯腳本被認為是一個安全問題 - 只需查找Cross Site Scripting 。 將腳本與內容分開允許使用嚴格的內容安全策略來防止此類攻擊。

這取決於不同的情況。 例如（您的 js 文件的大小）。

如果你的 js 文件很大並且有很多代碼，那么你應該考慮鏈接，因為有很多優點 -
(i) 它可以由瀏覽器本地緩存，以便用戶下次訪問時，您的網站加載速度更快。
如果您的 js 文件非常小，請考慮將其嵌入到 HTML 中，因為它也有很多優勢 -
(i) 您的服務器上的請求會減少。
(ii) 如果你想動態分配一些變量，你應該在 HTML 中嵌入 js，因為它不能用鏈接的 js 文件完成。