over 2 years ago

請列出五條 Yahoo Frontend Best Performance 最佳實務

Put Stylesheets at the Top(CSS)/Put Scripts at the Bottom(Javascript)

把CSS放置於網頁上方/把Javascript放置於網站下方,Script文件所造成的效能問題在於,下載Script時會阻斷其他並行的檔案下載,而直到Script文件下載完畢前,都不會下載網頁中的其他物件。

原理在於CSS要先出來,才能美化網頁,通常是放在head優先下載,JavaScript 幾乎都是等 HTML 跑完再執行,所以挪到後面再下載。

Minimize HTTP Requests (Content)

藉由減少HTTP請求數量來調校網站的執行效能是個不錯的開始,Combined files方法是透過將所有Script整合成一份Script,達到減少HTTP請求數量的目的,如網站中所有需要的CSS都彙整成一份CSS檔案,HTTP就可以減少為一次,減少Response時間,但當每個網頁所需要的CSS或Script不同時,就會增加實作上的難度。

假設我們網頁上有 10 隻 CSS。每下載一個檔案,都會需要「發出下載請求」,即會有 10 倍「發出下載請求的時間」,不如打包成一隻 CSS 下載。比較省時。

Use a Content Delivery Network(Server)

content delivery network (CDN) 是透過分散各地儲存相同內容的web server更有效率傳送相關內容到用戶端,通常都依據用戶端所在計算選用對應的web server來發送內容,例如選用透過較少的network hops或是具最快response time的web server。
CDN加速:

如果我們的機器在美國,在台灣開網站靜態網站會下載很慢,因為我們要從美國下載檔案到台灣,應該台灣這邊要有副本可以直接下載。

Split Components Across Domains

當使用者瀏覽網站時,一個頁面上的檔案有很多需要被下載,HTTP Potocol對同一個 host : artstore.com 同時下載數量有限,可以切成不同的網域加速下載。

config.action_controller.asset_host = “http://assets%d.artstore.com"
assets01.artstore.com 
assets02.artstore.com 
assets03.artstore.com 

Gzip Components(server)

一般而言,傳送HTTP請求到取得回應所花費的時間可由前端上做大幅度的改善,當然其他因素如:使用者的網路頻寬速度、網際網路服務商等等也會造成影響,但這些都不在開發團隊的管轄,但還有其他變數,像是壓縮(Compression)可縮小HTTP請求的檔案大小進一步減少Response time。

從HTTP/1.1開始,在HTTP請求中加入Accept-Encoding header可使Client端可支援壓縮,指令如下:
Accept-Encoding: gzip, deflate

當Server端接收到含有此header的請求,就會使用Client端指定的方式中選定一個執行壓縮,而Server端則在回應加入一行Content-Encoding header 指令:
Content-Encoding: gzip

Gzip是目前最常見與最具效率的壓縮方式,一般而言可減少約70%左右的response檔案大小,現今聲稱90%網路中透過瀏覽器傳送的請求與回應都支援Gzip。

Server根據檔案類型決定是否做Gzip,大多數網站對HTML文件做Gzip,包含scripts, stylesheet或是其他text response像是XML, JSON,而對image與PDF則不做Gzip,因為這些檔案本身已經做過壓縮。

盡可能對可執行Gzip的文件實作Gzip是一種簡單降低page weight與提升使用者體驗的方式。

← Rails即戰力課程第三週筆記 Rails即戰力課程第二週筆記 →