外部JS和CSS的測試範例

在測試後的情況下，內部要比外部範例還要快30%~50%，主要原因是因為外部範例需要承擔多個HTTP請求所帶來的負擔。僅管如此，實際專案上為什麼外部方式還是會產生比較快的頁面，是因為JavaScript和CSS文件會被瀏覽器緩存起來，這樣就不會增加HTTP請求的數量。關鍵因素在於，HTML文件請求數量、外部JavaScript和CSS文件被緩存的頻率。這些因素僅管難以量化，但透過以下方式進行衡量。

1. 若使用者瀏覽網頁的次數較少，在這種情況下，外部JS和CSS文件很有可能被瀏覽器的緩存中移除。

2. 若使用者在瀏覽多個頁面的情況下，瀏覽器除了將外部JS和CSS文件放在緩存中之外，並且會隨著查看次數的多寡增加緩存。

如果每個頁面都使用了相同的JS和CSS，這時，使用外部文件可以提高這些Component的重用率。這種情況下使用外部文件會更加具有優勢。

可緩存的外部JS和CSS的測試範例

經測試之後，可以得知外部文件被瀏覽器緩存之後，並帶有較長久的Expired的外部文件是比較快的。

使用內部JS和CSS最好的方式是運用在首頁(Home Page)。以上述幾種角度來評估：

Page Views - 首頁擁有較高的瀏覽次數，具體來說，瀏覽器一打開，首頁就被進行訪問。

Empty Cache vs. Primed Cache - 出於安全的原因，多數使用者會選擇在關閉瀏覽器之前清空緩存。下一次打開瀏覽器時，產生出來的則是一個到首頁的Empty cache page view。

Component Reuse - 重覆使用率較低。

即便所有因素都偏向於將JavaScript和CSS都偏向於內部文件，但若添加到頁面當中還是會感覺效能低的情況，而且也無法利用瀏覽器緩存。此時，將介紹如何運用內部文件的優勢，同時也能緩存外部文件。