內部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 |
B06.高負載之SNS技術研討 >