
我時常會被問到,前端最佳化的最好方法不就是把所有的東西置於行內(inline),全部
放在一起嗎?所有東西置於行內代表把所有的指令稿(scripts)、樣式(styles)以及圖像
(images)全部內嵌放到 HTML 中,把它們作為一個大整體提供出去。
這個問題就是把最佳實務(best practice)用過頭的好例子。沒有錯,減少 HTTP 請求
(HTTP requests)是有價值的最佳實務做法,而把所有東西都置於行內也的確是降低請求
次數的終極方法(理論上減少到只剩下一個),不過這並非加快你網站速度最好的辦法。
雖然減少請求次數是良好的實務做法,但是所要考量的並不僅有這一項因素。如果你把所
有的東西都置於行內,你確實完成了「降低請求次數」這個目標,但是你也因此忽略了許
多其他因素。以下是為何你不應該把所有東西置於行內的確切原因。
沒有瀏覽器快取
把所有東西置於行內最明顯的問題在於失去了快取(caching)的機會。如果 HTML 持有
所有的資源,而 HTML 本身無法快取,那麼每一次都需要重新下載資源。這表示對新網
站的第一次頁面載入,速度可能會快一點,不過後續頁面或重新訪問時,就會體驗到較慢
的頁面載入速度。
舉例來說,讓我們看一看對 New York Times 首頁的重複訪問實驗(表 3-1,圖 3-1)。透
過快取,原本站台載入的速度為 2.7 秒,如果我們把 JavaScript 置於那個頁面的行內,重
為何將所有東西
置於行內並非最佳解
Guy Podjarny
第三章