為什麼知名的大流量網站（如網易、新浪等）網頁的 CSS 樣式都是寫在頁面內而不是外部引用？

12-25

羅同學的答案非常完備了。

不過就內嵌 CSS 樣式而言，需要指出的是，雖然最終部署的時候，CSS樣式是內嵌於 html 文件的，但開發的時候卻可以是獨立文件的。

以及，考慮到瀏覽器會緩存已經載入的 css 文件，所以有時候不經考慮內嵌樣式反而會適得其反。

Simplee 的回答是正確的，我來補充一下。

瀏覽器向伺服器發送請求，然後伺服器就會把文件傳回來，包括 html，CSS，JS，圖片等部分。每個單獨的文件都要生成一個 http 請求，而瀏覽器會限制同一域名下同時發送的 http 請求數目（javascript - Max parallel http connections in a browser?）。所以如果同一域名下的文件過多，就必須等前面的載入完了才能載入後面的，影響載入速度。

解決方法有很多，例如用不同域名存儲不同文件，這樣就突破了同一域名的限制。例如知乎存圖片的域名就是 http://zhimg.com。用這個方法存儲 CSS 樣式或者 JS 腳本的俯拾皆是不在話下。

當對性能的要求進一步提升時，就需要減少 http 請求了，把 CSS 和 JS 從單獨的文件中抓出來，直接放到 html 裡面，可以減少 http 請求，對於提升性能效果顯著。當然只有流量大到這種程度的大站才會這麼做，畢竟從開發的角度來說肯定是單獨的文件易於維護。

追加：感謝趙雨函補充，實際上也可以獨立開發而統一部署。但是作為小站，例如個人博客之類的，不一定要這麼做。

除了 CSS 或者 JS 以外其實圖片也能這麼干。例如維基百科左邊側欄的分割線，在 CSS 裡面是這麼寫的：

#mw-panel.collapsible-nav .portal { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAAABCAMAAAA7MLYKAAAAS1BMVEXb29vy8vLv7+/c3NzZ2dni4uLr6+vt7e3s7Ozw8PDn5+fj4+Ph4eHd3d3f39/o6Ojl5eXp6enx8fHa2trg4ODq6urk5OTz8/PY2NjolWftAAAAO0lEQVR4XrXAhwGAMAgEQB5I71X3n9QpPHqAGZidt2e02G8yedciQkv1/YPqIpFSdzbp9tjGsd4xhwl8yuMKHhkJhm8AAAAASUVORK5CYII=") no-repeat scroll left top transparent }

中間這段跟亂碼一樣的東西就是把一張圖片重新編碼了之後插在這裡的。

瀏覽器是從上到下逐步載入頁面的，將css樣式放在當前頁面中，可以讓頁面在極端網路環境中能表現良好，也是為了減少請求數，減輕伺服器壓力。淺顯的大致是這些原因

還有一個原因，防止靜態文件伺服器掛了，導致整個網頁沒法看。

還有一個原因是，JS一般接受用戶動作而操作CSS樣式，例如element.style.margin="10px"時，會將新的樣式寫入到內聯樣式裡面而不是外部樣式表中以便overide其他樣式，而大站交互的地方很多，所以自然也有很多的是內聯樣式