爲什麼我應該把外部資源放在html頭部？

我真的很想知道爲什麼有人說「放在頁面的頭部外resorces」，如：爲什麼我應該把外部資源放在html頭部？

<head> 
    <script type="text/javascript" src="settings/myJavascript.js"></script>   
    <title>Title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link type="text/css" rel="stylesheet" href="settings/style.css" title="Style" media="all" /> 
</head>

，難道不比對這些資源的增加，只有當它需要這些資源的頁面？例如，當使用PHP進行編程時，如果我有一個頁面需要一些CSS，而不是其他不需要它的頁面，那麼在頁面中使用link type或script src會更加智能，而不會將所有內容都加載到頂部，isn'它呢？

我在論壇/社區上看到很多關於把所有人都置於腦海中的建議......你能說什麼？

來源

2011-03-27 markzzz

這裏有兩件事，我不確定你在問什麼。

說他們應該在<head>可以意味着，而不是在文件的其他地方。有些人確實將CSS鏈接放在身體中，即使他們不允許在那裏，而且在體內允許使用<script>，但將它放在頭部幾乎總是一個更好的主意（以及那些不是這樣的情況）應該是顯而易見的，儘管通常可以重寫爲更好地從頭開始工作，但與其他服務相關的剪貼腳本除外，例如，亞馬遜會爲您提供一個腳本，將其放入您的網頁中爲了讓你變得簡單，而不是要求你重新編寫代碼）。

至於它是否只應在那些需要它們的頁面上，這裏就有一個平衡點。首先，讓我們說一個CSS樣式表的聲明的90％用於站點中的所有頁面（這本身就是一個深思熟慮的樣式的標誌）。我們可以將其他10％的文件放在單獨的文件中，僅用於某些頁面，實際上更可能是1％的2％，另一個文件中的3％，另一個文件中的5％或其他類似文件。但是，由於每個URI訪問在實際下載的流的帶寬之上都有自己的開銷，所以我們可能會失去更多的收益。

添加緩存的效果，並將其保存在一個文件中是明顯的贏家。

另一方面，比如說一個站點中有一組資源對別人有着非常不同的樣式需求。在這種情況下，單獨的CSS可能會比第一個CSS大或比它大，因此將它作爲一個單獨的文件在必要時使用是更有意義的（也可以使級聯中的重載更好，例如，如果「main」樣式表給出了藍色背景，那麼第二個可以給出紅色背景，並且我們僅僅通過該樣式表是否存在來指示我們需要哪個樣式表，而不必在整個相關HTML頁面中設置不同的類）。

這同樣適用於JavaScript，幾乎很少使用的函數應該仍然在「常用」JavaScript文件中，但是隻能在一個頁面中使用的大量函數幾乎肯定只能在該函數中加載頁。也就是說，我們可能會選擇在相對較輕的頁面中包含第二個js，這個頁面可能會在相對較重的頁面之前被使用，只是爲了利用緩存。後者我會考慮對整個網站進行更多的優化，而不是關注那個頁面的設計（作爲單個頁面來看，第二個js顯然很浪費）。

編輯：

最後，它只是簡單的一個獨立的文件處理所有這些項目，並在一些額外的下載垃圾可以通過減少維護是合理的。

來源

2011-03-27 15:28:45

如果您的頁面只包含PHP，則不需要外部資源。（=沒有頭，沒有類型說明，沒有<html>標籤）

如果它確實包含次要或主要的HTML（或任何其他標記），極力建議使用外部資源。

來源

2011-03-27 14:36:55

對於您的JavaScript，最好的做法是將所有<script>標記放在頁面底部，然後放在</body>標記之前。通過這樣做，你可以確保當你的JavaScript開始加載時你所有的頁面都被加載了，所以它不會減慢你的頁面並讓你的訪問者離開。

對於CSS，我只在我的所有頁面中只有一個CSS時，通常會將我的<link>標記放在<head>上。但是如果你對某些頁面有特定的CSS文件，你可以使用與JavaScript相同的技術。

來源

2011-03-27 14:42:03 TrexXx

使用外部資源（即使它們包含當前頁面上未使用的指令）的原因是要利用HTTP和瀏覽器緩存。該資源僅在首次請求時才發送給瀏覽器一次。這對於移動設備尤其重要，因爲在使用有限帶寬時，通過HTTP發送額外資源時存在大量開銷。

你應該把external JavaScript last in the page body，而不是HTML頭。

來源

2011-03-27 14:42:05

雖然有缺點。如果頁面的圖像很重，那麼外部JS可能會大大延遲，並且總體效果可能比舊瀏覽器的順序加載的延遲更具破壞性，包括以難以計算的奇妙級聯方式發生的實際錯誤出。它確實有你說的優點，但它並非沒有陷阱。 – 2011-03-27 15:46:15

實際上，head中的第一個標記應該是Content-Type元標記。原因是一些較舊的瀏覽器有時會忽略瀏覽器發送的Content-Type，如果他們沒有及早看到Content-Type（使用指定的編碼），可能會決定使用不同的編碼。這些瀏覽器通常只接受它作爲第一個參數。

除此之外，head中的訂單並不重要。當然，其他腳本也包含在其他腳本之前也加載較早，但這只是關於加載順序。由於瀏覽器能夠同時加載多個文件，因此稍後開始加載的腳本可能會在稍後加載的腳本之後完成。

將所有內容放在標題中的原因很簡單，首先加載標題，並且在顯示任何內容之前處理標題。因此，任何庫或顯示頁面時可能需要的內容在此之前都應該可用，因此應該放在標題中。所有其他script標籤只有在瀏覽器在呈現頁面時纔會執行。

來源

2011-03-27 14:42:38 poke

如果您對服務器沒有太多控制權，則只需要放置Content-Type元。如果你想指定字符編碼而不是瀏覽器和服務器的默認值，你只想使用元。服務器頭或元標記中的內容類型處理沒有區別。至少，不是在過去10年左右發佈的任何瀏覽器中？ – 2011-03-27 15:01:20

@deemoowoor，Content-Type meta（更應如此，XML聲明應該使用XHTML）在保存文件時會保留編碼。雖然我同意你的一般觀點，但是瀏覽器要麼沒有出錯，要麼在錯誤出現的時候出錯了，那是服務器做錯了事情（通常還是）。雖然它需要成爲第一個標籤是一個神話，部分是由於過度簡化（有些時候它確實有幫助，而且從來沒有實際錯誤，爲什麼不呢？），還有一部分是AFAICT，因爲人們經常相信Joel on Software是絕對可靠的，他曾這麼說過。 – 2011-03-27 15:34:32

HTML head在所有其他情況之前被處理，即使整個頁面只是部分下載（假定頁面從頭到尾依次加載，即，不是隨機的，例如通過BitTorrent）。它不僅適用於外部資源，還適用於與當前頁面內容無關的所有內容。

互聯網有時可能會變得緩慢而遲緩，用戶代理（瀏覽器）可以在各種平臺上運行，包括非常有限的平臺。如果互聯網連接延遲較長（例如，它是衛星鏈路），則完成往返請求需要相當長的時間。所以你希望客戶能夠同時請求所有這些外部項目。瀏覽器可以更快地決定是否請求資源，效果會更好 - 這有助於快速下載頁面，以及所有樣式表，JavaScript代碼和其他內容。

而且還有一個緩存問題。通常假定頁面的head中聲明的內容在所有請求中都是不可變的，所以緩存很好，只需要儘可能少的請求即可。這也大大加快了速度。

來源

2011-03-27 14:50:54

我也看到了將所有外部資源包含到您的頁面的建議。這樣做的邏輯是，一旦資源被緩存，它將加速其餘頁面的用戶體驗。另一方面，你會在不需要它的頁面上獲得不必要的腳本/樣式，甚至有時會造成傷害，因爲你會得到你可能不期望的行爲。

我的建議是，除非您的樣式/腳本是小（總< 100KB），你應該只包括他們在您需要的頁面。另外，CSS文件應該位於頁面頂部（因此瀏覽器知道如何渲染頁面），而JS文件應該位於頁面底部（這取決於您的設置，有時您可能不會能夠在底部加載它，因爲你的頁面依賴於JS存在於頂部）。

來源

2011-03-27 14:51:03 JohnP

爲什麼我應該把外部資源放在html頭部？

回答

相關問題