頁面引用CSS和Javascript時，內聯和外置的區別

CSS 全稱階層式樣式表 (Cascading Style Sheets)，在實際應用中，一般有以下三種級聯方式。

1. 外聯式
外聯式樣式表中，CSS 代碼作為檔案單獨存放，如以 style.css 檔案包含所有樣式。在 HTML 中的外部級聯採用 <link> 標記或者 @import 語句來引入。範例程式碼如下：

<link rel="stylesheet" href="style.css" type="text/css" /> //link 連結@import url("style.css"); //@import 匯入

 

<link> 和 @import 的異同可參考此文：CSS 外部參考中 link 與 @import 的區別。

2. 內聯式
門戶網站的 CSS 代碼通常採用嵌入式，即通常所說的內聯方式 (Inline Style)，其使用 <style> 標記將樣式定義為內部塊對象。範例程式碼如下：

<style type="text/css"><!--body{font-family:Arial,Helvetica,sans-serif;}--></style>

 

內聯 CSS 可以有效減少 HTTP 要求，提升頁面效能，緩解伺服器壓力。由於瀏覽器載入完 CSS 才能渲染頁面，因此能防止 CSS 檔案無法讀取而造成頁面裸奔的現象。

3. 嵌入式
最初級的 CSS 寫法即把代碼直接添加於所修飾的標記元素。範例程式碼如下：

<div style="font-family:Arial,Helvetica,sans-serif;">芒果</div>

 

這樣做雖然更為直觀，但很大程度上加大了頁面體積，不符合結構與表現分離的設計思想。

總體而言，外聯和內聯各有優點，可綜合實際情況選擇適合的級聯方式。

 總結一下：外聯優點：css在同一個檔案中，當頁面需要修改的時候只需要修改一個檔案即可，方便維護。

                     缺點：HTTP請求多，瀏覽器要載入完CSS才能渲染頁面，因此影響頁面的效能。

               內建優點：內聯 CSS 可以有效減少 HTTP 要求，提升頁面效能，緩解伺服器壓力。由於瀏覽器載入完 CSS 才能渲染頁面，因此能防止 CSS 檔案無法讀取而造成

                             頁面裸奔的現象。

                     缺點：每次修改css的時候需要修改多個頁面

 

 

Javascrip內聯和外置的區別其實也差不多

JavaScript檔案外部載入的好處

• 統一定義JavaScript代碼，方便查看，方便維護。
• 使代碼更安全，可以壓縮，加密單個JavaScript檔案。
• 瀏覽器可以緩衝JavaScript檔案，減少寬頻使用（當多個頁面同時使用一個JavaScript檔案的時候，通常只需下載一次）。

 

JavaScript檔案外部載入的注意事項

• 不要把JavaScript分為多個檔案，多個檔案會增加伺服器的負擔，增加伺服器的HTTP請求。
• 一個JavaScript檔案也會增大HTTP請求。

 

使用外部JavaScript和CSS
      很多效能規則都是關於如何處理外部檔案的。但是，在你採取這些措施前你可能會問到一個更基本的問題：JavaScript和CSS是應該放在外部檔案中呢還是把它們放在頁面本身之內呢？
      在實際應用中使用外部檔案可以提高頁面速度，因為JavaScript和CSS檔案都能在瀏覽器中產生緩衝。內建在HTML文檔中的JavaScript 和CSS則會在每次請求中隨HTML文檔重新下載。這雖然減少了HTTP請求的次數，卻增加了HTML文檔的大小。從另一方面來說，如果外部檔案中的 JavaScript和CSS被瀏覽器緩衝，在沒有增加HTTP請求次數的同時可以減少HTML文檔的大小。
      關鍵問題是，外部JavaScript和CSS檔案快取的頻率和請求HTML文檔的次數有關。雖然有一定的難度，但是仍然有一些指標可以一測量它。如果一個會話中使用者會瀏覽你網站中的多個頁面，並且這些頁面中會重複使用相同的指令碼和樣式表，緩衝外部檔案就會帶來更大的益處。
      許多網站沒有功能建立這些指標。對於這些網站來說，最好的堅決方法就是把JavaScript和CSS作為外部檔案引用。比較適合使用內建代碼的例外就是網站的首頁，如Yahoo!首頁和My Yahoo!。首頁在一次會話中擁有較少（可能只有一次）的瀏覽量，你可以發現內建JavaScript和CSS對於終端使用者來說會加快響應時 間。
      對於擁有較大瀏覽量的首頁來說，有一種技術可以平衡內建代碼帶來的HTTP請求減少與通過使用外部檔案進行緩衝帶來的好處。其中一個就是在首頁中內建 JavaScript和CSS，但是在頁面下載完成後動態下載外部檔案，在子頁面中使用到這些檔案時，它們已經緩衝到瀏覽器了。