Javascript和CSS，內部HTML與外部文件中的對比

包含外部JavaScript和CSS文件幷包括HTML文件內的所有JavaScript和CSS文件（甚至是jQuery核心！）在<style>...</style>和<script>...</script>之間的標記除了緩存？（我想要做的是本地的HTML文件的東西，所以緩存無所謂）Javascript和CSS，內部HTML與外部文件中的對比

來源

2012-08-04 Mahdi Ghiasi

除了將您的代碼變成怪物以外，沒有任何好處。 – Blender 2012-08-04 23:03:18

至少對我來說核心方面是可讀性和代碼管理。外部樣式表和JavaScript更容易維護，並且可以在功能之後拆分。然後再一次，你可以過分... – Kiruse 2012-08-04 23:06:51

不同的是，你的瀏覽器不使這些額外的請求，併爲你所指出的，不能從單獨緩存它們頁。

從功能的角度來看，沒有，有一旦這些資源已被加載沒有什麼區別。

來源

2012-08-04 23:03:10 Brad

所以你說，沒有任何性能差異，等等吧？ – 2012-08-04 23:06:19

@MahdiGhiasi，一旦加載，沒有。 – Brad 2012-08-04 23:08:35

「一次裝入」是什麼意思？如果我在html中包含腳本，或者更短，裝入時間會更長嗎？ – 2012-08-04 23:09:38

的原因，大多數的時候，我們看到了CSS和JavaScript的外部路徑，因爲它們被保存在一個CDN或某種類型的緩存服務器現在在雲上日子

很好的例子是，當你包括jQuery的谷歌

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

在這裏我們看到，谷歌託管對我們來說，我們並不需要擔心修的等

所以，如果你想保持他們在本地，那麼你將不得不保持它

來源

2012-08-04 23:07:13 HatSoft

正如我所說，我想在我的*本地計算機*網頁上做些事情。不是互聯網。所以我不能使用谷歌的CDN ... – 2012-08-04 23:08:46

@MahdiGhiasi在這種情況下，你可以保留它在本地，但將有手動更新，當他們是一個新版本發佈等 – HatSoft 2012-08-04 23:11:34

代碼加載後沒有任何區別。當然，它不會像你指出的那樣被緩存，但是因爲你只需要在本地做某件事情，所以它確實不是那麼重要。

在記憶將是你必須確保依賴鏈不斷裂，因爲瀏覽器將同時加載腳本的事情。

編輯：當然，你的主頁似乎需要較長的時間來加載，因爲它必須下載<body>開始之前，所有額外的內容加載。您可以通過移動您的JS在底部（靠近頁腳）來避免這種情況。

來源

2012-08-04 23:10:25

當你的CSS沒有加載時，你的頁面首先顯得很糟糕，然後在應用CSS樣式之後它就會穩定下來，因此現在你必須在頁面頂部聲明你的CSS樣式，然後等待所有要處理的東西瀏覽器，然後開始渲染你的頁面，或者讓你的第一頁緩慢加載，並且在你的頁面加載速度更快時，你的頁面會加載得更快，因爲現在緩存的風格是

和類似的腳本代碼，現在你需要等待你的代碼在頁面上呈現，然後等待你在$（document）.ready（）中綁定的執行。我希望你知道$（document）.ready現在將被延遲，因爲沒有緩存。

來源

2012-08-04 23:13:24 Baz1nga

沒有與此巨大的性能問題。您的load和DOMContentLoaded會以較慢的速度啓動。當瀏覽器解析代碼的最後一行

load會火。因此，瀏覽器將顯示等待循環，直到所有資源加載並解析。瀏覽器同步加載多個資源。通過在HTML中包含JS和CSS代碼，您將失去性能提升。

來源

2012-08-04 23:15:28 Mohsen

當我在當地做這件事很重要嗎？ – 2012-08-04 23:16:19

執行這兩個操作並比較開發工具中的資源加載時序圖。 – Mohsen 2012-08-04 23:17:31

我覺得200-300千字節的文件不是這麼大的文件！ – 2012-08-04 23:18:36

在客戶端沒有差別，除了你會少做要求，因此加載速度更快。另一方面，你不會緩存，但你也不能在幾個頁面中分享JavaScript的風格。

如果你確信CSS和JavaScript只會用在這個頁面中，那麼inline就是好的IMO。

來源

2012-08-04 23:16:32 molyss

如果您只在一個頁面上使用腳本和css，包括它們在html中將是最快的方式，因爲瀏覽器只需要發出一個請求。如果你在更多的頁面上使用它們，你應該讓它們成爲外部的，這樣瀏覽器就可以抓取它們，只需要下載一次。正如所提到的@hatSoft一樣，使用來自谷歌的jquery甚至更好，因爲瀏覽器非常喜歡讓它們在第一次訪問時引用它們的其他人的緩存中。在真實生活中，您只能在一個頁面上使用腳本和css，因此使它們成爲外部對於性能來說通常是最好的，並且對於維護來說是最重要的。 Personaly我總是保持HTML，js和css嚴格分開！

來源

2012-08-04 23:18:33 Pevara

Javascript和CSS，內部HTML與外部文件中的對比

回答

相關問題