雅虎前端優化原則(Yahoo)

QinRo發表於2019-02-13

1. 減少HTTP請求次數

為了縮短使用者響應的時間

  • css sprites方法可以組合頁面中的圖片到單個檔案中能夠,並使用css的background-image和background-position屬性來實現所需的部分圖片
  • Inline images使用data:URLschema在頁面中內嵌圖片,者將增大HTML檔案的大小,組合inline images到使用者的(快取)樣式表,既能減少HTML請求,又能避免加大HTML檔案大小。
  • Combine files 通過組合多個指令碼檔案到單一檔案來減少http請求,樣式表也可採用類似的方法處理,這個方法雖然簡單,但當頁面之間指令碼和樣式報表變化很大時,該方式將遇到很大的挑戰。如果做到的話,將能加快響應的時間

2.使用CDN(Content Delivery Network, 內容分發網路)

使用者離web serve的遠近對響應時間也有很大的影響,從使用者角度上看,把內容部署到多個地理位置分散的伺服器上,將有效提高頁面裝載速度
CDN是地理上分佈的web serve的集合,使用者更高效的釋出內容,通常基於網路忘記來選擇給具體使用者服務的web serve

在Yahoo ,把靜態內容分佈到CDN減少了使用者影響時間20%或更多,切換到CDN的程式碼修改工作是容易的,但能達到提高網站的速度

3.增加Expires Header

首次訪問網頁時,不得不面臨著多次的http請求,但通過使用Expires header,可以在客戶端快取這些元素,者在後續訪問中避免了不必要的http請求,Expire header最常用於影像檔案,但它也可用於指令碼檔案、樣式表等
瀏覽器(和代理)使用快取來減少http請求的次數和大小,使得網頁加速裝載,web server通過Expires header告訴客戶端一個元素可以快取的時間長度

4. 壓縮頁面元素

通過壓縮HTTP響應內容可減少頁面響應時間,從HTTP/1.1開始,web客戶端在HTTP請求中通過Accept-Encoding頭來表明支援的壓縮型別,如:Accept-Encoding: gzip,deflate。   如果Web server檢查到Accept-Encoding頭,它會使用客戶端支援的方法來壓縮HTTP響應,會設定Content-Encoding頭,如:Content-Encoding: gzip。   Gzip是目前最流行及有效的壓縮方法,其他的方式如deflate,但它效果較差,也不夠流行。通過Gzip,內容一般可減少70%;如果是Apache,在1.3版本下需使用mod_gzip模組,而在2.x版本下,則需使用mod_deflate。 Web server根據檔案型別來決定是否壓縮,大部分網站對HTML檔案進行壓縮,但對指令碼檔案和樣式表進行壓縮也是值得的,實際上,對包括XML和JSON在內的任務文字資訊進行壓縮都是值得的,影像檔案和PDF檔案不應該被壓縮,因為它們本來就是壓縮格式儲存的,對它們進行壓縮,不但浪費CPU,而且還可能增加檔案的大小。

5. 把樣式表放在頭上

有利於使用者體驗,提高介面的載入速度

HTML規範明確要求樣式表被定義在head中,因此,為避免空白螢幕或閃爍問題,最好的辦法是遵循HTML規範,把樣式表放在head中

6. 把指令碼檔案放在底部

一是能順序顯示,二是可達到最大的並行下載。 瀏覽器會阻塞顯示知道樣式表下載完畢,因此需要把樣式表放在head中,而對於指令碼來說,指令碼後面內容的順序顯示將被阻塞,因此把指令碼儘量放在底部意味著更多內容能被快速顯示。 指令碼引起的第二個問題是它阻塞並行下載數量,HTTP/1.1規範建議瀏覽器每個主機的並行下載數不超過2個,因此如果把影像檔案分佈到多臺機器的話,可以達到超過2個的並行下載,但是當指令碼檔案下載時,瀏覽器不會啟動其他的並行下載,甚至其他主機的下載也不啟動。 一個備選方法是使用延遲指令碼(deferred script),DEFER屬性表明指令碼未包含document.write,指示瀏覽器刻繼續顯示,不幸的是,Firefox不支援DEFER屬性,在IE中,指令碼可能被延遲執行,但不一定得到需要的長時間延遲。 從另外角度來說,如果指令碼能被延遲執行,那它就可以被放在底部了。

7. 避免css表示式

css表示式的問題是其執行次數超過大部分人的期望,不僅頁面顯示和resize時計算表示式,而且當頁面滾屏,甚至當滑鼠在頁面上移動時,都會重新計算表示式。 一種減少css表示式執行次數的方法是一次性表示式,即當第一次執行時就以明確的數值代替表示式,如果必須動態設定的話,可使用時間處理函式代替,如果必須使用css表示式的話,請記住他們可能被執行上千次,從而影響頁面效能

8. 把JavaScript和css放到外部檔案中

另外一方面,使用外部檔案,會被瀏覽器快取,則頁面大小會減小,同時又不增加HTTP請求次數。   因此,一般來說,外部檔案是更可行的方式,唯一的例外是內嵌方式對主頁更有效,如Yahoo!和My Yahoo!都使用內嵌方式,一般來說,在一個session中,主頁訪問此時較少,因此內嵌方式可以取得更快的使用者響應時間

9. 減少DNS查詢次數

DNS用於對映主機名和IP地址,一般一次解析需要20~120毫秒,為達到更高的效能,DNS解析通常被多級別地快取,如由ISP或區域網維護的caching server,本地機器作業系統的快取(如windows上的DNS Client Service),瀏覽器,IE的預設DNS快取時間為30分鐘,Firefox的預設緩衝時間是1分鐘。   減少主機名可減少DNS查詢的次數,但可能造成並行下載數的減少,避免DNS查詢可減少響應時間,而減少並行下載數可能增加響應時間,一個可行的折中是把內容分佈到至少2個,最多4個不同的主機名上。

10. 最小化JavaScript程式碼

最小化JavaScript程式碼指在JS程式碼中刪除不必要的字元,從而降低下載時間,兩個流行的工具是#JSMin和YUI Compressor。   混淆是最小化於原始碼的備選方式,象最小化一樣,它通過刪除註釋和空格來減少原始碼大小,同時它還可以對程式碼進行混淆處理,作為混淆的一部分,函式名和變數名被替換成短的字串,這使得程式碼更緊湊,同時也更難讀,使得難於被反向工程,Dojo Compressor (ShrinkSafe)是最常見的混淆工具。

11. 避免重定向

瀏覽器自動重定向請求到Location指定的URL上,重定向的主要問題是降低了使用者體驗。   一種最耗費資源、經常發生而很容易被忽視的重定向是URL的最後缺少/,如訪問http://www.csxiaoyao.com/blog將被重定向到http://www.csxiaoyao.com/blog/,在Apache下,可以通過Alias,mod_rewrite或DirectorySlash等方式來解決該問題。

12. 刪除重複的指令碼檔案

在一個頁面中包含重複的JS指令碼檔案會影響效能,即它會建立不必要的HTTP請求和額外的JS執行。   不必要的HTTP請求發生在IE下,而Firefox不會產生多餘的HTTP請求,額外的JS執行,不管在IE下,還是在Firefox下,都會發生。   一個避免重複的指令碼檔案的方式是使用模板系統來建立指令碼管理模組,除了防止重複的指令碼檔案外,該模組還可以實現依賴性檢查和增加版本號到指令碼檔名中,從而實現超長的過期時間。

13. 配置ETags

Etag(Entity tags)實體標籤,這個tag和你在網上經常看到的標籤雲那種tag有點區別,這個Etag不是給使用者用的,而是給瀏覽器快取用的。   Etag是伺服器告訴瀏覽器快取,快取中的內容是否已經發生變化的一種機制,通過Etag,瀏覽器就可以知道現在的快取中的內容是不是最新的,需不需要重新從伺服器上重新下載,這和“Last-Modified”的概念有點類似,很遺憾作為網頁開發人員對此無能為力,他依然是網站伺服器人員的工作範疇。   ETags是用於確定瀏覽器快取中元素是否與Web server中的元素相匹配的機制,它是比last-modified date更靈活的元素驗證機制。

14. 快取Ajax

提高Ajax的效能最重要的方式是是的其response可快取

相關文章