03.使用外部JavaScript和CSS

內部JS和CSS的測試範例

外部JS和CSS的測試範例

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

Page Views

1. 若使用者瀏覽網頁的次數較少,在這種情況下,外部JS和CSS文件很有可能被瀏覽器的緩存中移除。
2. 若使用者在瀏覽多個頁面的情況下,瀏覽器除了將外部JS和CSS文件放在緩存中之外,並且會隨著查看次數的多寡增加緩存。

Empty Cache vs. Primed Cache



Component Reuse

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

Typical Results in the Field

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

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

Home Pages

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

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

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

Component Reuse - 重覆使用率較低。


The Best of Both Worlds

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

Post-Onload Download





Dynamic Inlining




Comments