Skip to Main Content
Web 效能優化日誌 Volume 2
book

Web 效能優化日誌 Volume 2

by Stoyan Stefanov
July 2013
Intermediate to advanced content levelIntermediate to advanced
240 pages
4h 11m
Chinese
GoTop Information, Inc.
Content preview from Web 效能優化日誌 Volume 2
我時常會被問到,前端最佳化的最好方法不就是把所有的東西置於行內(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
第三章
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

建構Android應用程式--使用HTML、CSS和JavaScript 第二版

建構Android應用程式--使用HTML、CSS和JavaScript 第二版

Jonathan Stark, Brian Jepson
高性能Spark

高性能Spark

Holden Karau, Rachel Warren
Python机器学习案例精解

Python机器学习案例精解

Posts & Telecom Press, Yuxi (Hayden) Liu

Publisher Resources

ISBN: 9789862768587