把CSS和JavaScript放在文件或主HTML中？

雖然總是建議將JavaScript和CSS代碼放入適當的文件中（如.js和.css），但大多數主要網站（如Amazon，facebook等）都將JavaScript和CSS代碼的重要部分直接放在主要HTML頁面。把CSS和JavaScript放在文件或主HTML中？

哪裏是最好的選擇？

來源

2011-09-17 Googlebot

這是一個有趣的觀察。我想知道是否因爲大部分時間都花費在建立HTTP連接上？如果開銷足夠大，您可能希望儘可能多地打包到實際有效負載中。 –

是的，有趣的問題（雖然也許更適合網站管理員。）？ –

許多人會不同意，但是它沒有什麼區別。我總是把我寫入html頁面的css和js。當我可以輕鬆閱讀這些內容時，更改它更爲方便。 –

http://developer.yahoo.com/performance/rules.html#external

雅虎（儘管他們有很多內聯樣式和腳本），建議使他們的外部。我相信谷歌頁面速度曾經（或仍然）做同樣的。

讓他們分開是非常合乎邏輯的事情。將CSS和JS分開保存到HTML中有很多好處。像邏輯代碼管理，緩存這些頁面，較低的頁面大小（你會寧願200MB請求一個400KB的緩存資源，或者從每個頁面下載數據需要4000毫秒的延遲），SEO選項（少廢話谷歌翻閱時，腳本/風格外），更容易來縮小外部腳本（在線工具等），可以從不同的服務器同步加載它們....

這應該是任何網站的首要目標。組成整個網站的所有樣式應該位於一個文件中（或每個頁面的文件，然後在更新時合併並縮小），對於JavaScript也是如此。

在現實世界中（沒有爲自己做一個項目，爲需要結果的客戶或利益相關者做一個項目），唯一一次加載另一個javascript資源或另一個樣式表是不合理的使用內聯樣式/ javascript）是否存在某種類型的每個用戶，每個會話或每個時間段的動態信息，這些信息無法以其他任何方式完成。例如：當我的網站有促銷活動時，我們將一個腳本標籤轉儲到一個小的JSON信息對象。因爲我們不縮小和合並多個文件，所以將它包含在頁面中更有意義。當然，還有其他的方式可以做到這一點，但這樣做的成本是20美元，而另一種方式可能要花費100美元以上。

也許亞馬遜/ Facebook的/谷歌等用這麼多的內嵌代碼是那麼他們的服務器不徵稅這麼多。我不太確定在一次請求一個1MB文件或請求10個100KB文件（假設1MB/10 = 100KB）的基準測試之間的比較，但速度會更快嗎？潛在的1MB文件，但較小的請求可以同步加載，這意味着這10個請求中的每一個都可能來自單獨的服務器/域，從而減少總體加載時間。此外，谷歌的主頁，例如似乎轉儲小部件的JSON數組信息，大概是因爲它編譯所有來自各種來源的信息，縮小它，緩存它，然後放入頁面，然後JavaScript函數構建佈局（客戶端處理能力而不是服務器端）。

來源

2011-09-17 10:48:22 Benno

「動態信息」不好。動態生成js是邪惡的。你做錯了。將數據存儲在HTML中或通過REST公開。 – Raynos

嗯，一個JavaScript倒計時函數如何獲取倒計時的日期，而不會將其倒轉到頁面然後？ – Benno

爲什麼它會倒計時？即使這樣放在HTML中。我個人將它放在一個CSS3動畫 – Raynos

一個有趣的調查可能是它們是否包含各種.css文件，而不管你看到的樣式塊如何。也許它是開銷或可能是方便。

我發現雖然使用不同風格的界面開發人員（和內容部署人員），但在最後期限和「完成工作」方面，便利/權限經常贏得勝利。在一個大規模的項目中，可能會涉及到諸如「不，我們沒有觸及我們的樣式表」的因素，或者如果沒有使用http請求的樣式表，那麼便利性已經贏得了與良好實踐的對抗。

來源

2011-09-17 10:35:56 danjah

將.js放在多個文件中，然後打包，縮小和gzip到一個文件中。

將您的HTML保存爲多個單獨的文件。

將.css放在多個文件中，然後打包，縮小和gzip到一個文件中。

然後，您只需發送一個css文件和一個js文件到客戶端進行緩存。

您不要將它們與您的HTML內聯。

如果內嵌他們，那麼任何改變CSS 或 HTML 或 JS勢力用戶重新下載所有三個。

主要網站在其文件中有js & cs的主要原因是因爲主要網站代碼腐爛。大公司並不支持標準和最佳實踐，他們只是在它發揮作用之前將其破解，然後說「爲什麼要在我們的網站上浪費金錢，它起作用了嗎？」。

不要看實時網站的例子，因爲互聯網上所有例子中有99％顯示不好的做法。

也爲了上帝的愛，請分開關注。你應該永遠不會在HTML頁面中使用內嵌JavaScript或內聯CSS。

來源

2011-09-17 10:37:51 Raynos

你說的沒錯，這是一個善與惡的例子 - +布魯斯，你發現了邪惡，@Raynos，你在推動這件事。 – danjah

如果您的css和javascript代碼是全局用法，那麼最好將它們放入適當的文件中。否則，如果代碼僅用於某個頁面（如主頁），則直接將它們放入html中是可以接受的，並且對維護很有幫助。

來源

2011-09-17 10:43:50 xdazz

「有利於維護」。因爲什麼時候很難進行維修保養。 – Raynos

有一個平衡點可供選擇，如果一個頁面總是在變化，每次你必須改變js/css並且再次將它們gzip。如果用戶已經緩存了主js/css，則不需要重新加載js/css。 – xdazz

我們的團隊保持獨立。像這樣的所有資源進入一個名爲_Content的文件夾。

CSS進入_Content/css/xxx.js

JS進入_Content/js/lib/xxx.js（對於所有的庫包）

自定義頁面事件和功能得到從頁面調用，但放到一個主JS文件_Content/js/Main.js

圖片將進入_Content/images/xxx.x的相同位置

這就是我們如何佈置它，因爲它保留了HTML標記，因爲它應該是標記。

來源

2011-09-17 10:55:32 JakeJ

我認爲將CSS和js放入主html會使頁面加載速度更快。

來源

2012-05-08 14:22:57

雖然很難在快速的Internet連接中進行測量。 –

把CSS和JavaScript放在文件或主HTML中？

回答

相關問題