🥜 前情提要

在上一回中，我們介紹了工具單元測試，這次來討論有什麼優化方案可以優化前端下載速度。

通訊模組:

首先所有人要上網，一定會使用通訊模組，常見的有OSI 7層模型

而7層太複雜，所以有人把它簡化，改成TCP/IP 四層。所以任何人要上網就必須使用TCP/IP四層，那這邊來介紹是哪四層。

當你輸入網址後會經過什麼動作？

透過應用層，DNS解析後你會獲得IP
透用應用層，也就是Chrome自動拼裝網路封包
透過協議層，也就是瀏覽器選擇幫你拼裝HTTP的封包
透過IP層，瀏覽器在封包上寫好要傳到哪裡(類似收件人)
透過實體層，瀏覽器把這封包傳到網卡，網卡透過無/有線網路傳到對方那。

而上述過程中就是一個基本網路封包的組成，而在這過程中我們可以進行優化。

應用層

這一層主要就是應用程式的所在地，Win10、Html、Chrome、Safari ..etc
所以封包最終會進入到應用層，而應用層就是你的軟體，所以這邊可以進行

圖片有損壓縮

利用人眼缺陷原理進行壓縮，在數位圖片中，當你要顯示一張圖你可以看成：將這張圖切割成數個正方形格子，而每個格子都有各自的顏色，而這些格子就是畫素，就像是拼圖遊戲，你必須將很多五顏六色拼圖碎片拚再一起，我們人眼才能是別這個「圖」

在上圖中我們可以我們將拱橋放大再放大，可以知道它是由一堆各種綠色和白色的格子組成，而一個數位圖片的畫質我們可以用多少個畫素來表示，越多畫素，畫面越精緻，畫素格子越小，解析度也越高。

而TinyPng該網站提供了壓縮圖片的服務，主要是將相近的24個畫素改用8個畫素來表達，並且移除不必要的數據(作者、拍攝時間、聯絡方式等等)，所以是有損壓縮，而值得一提的是，市面上將PNG24轉成PNG8的工具不少，但是Tiny的演算法可以讓使用者在畫質和容量進行平衡。

選擇更小的編碼格式

其實前端的各種資源很有多種編碼方式，不是萬年不變的png和mp3，以下推薦的編碼格式都是比較新的格式並且擁有不俗的品質和壓縮比。

全版圖片：JPEG 2000，請注意並不是單純的JPEG，副檔名為 .jp2，目前僅 Safari支援
透明圖片：WebP，除了Safari其他主流瀏覽器皆支援
音訊檔案：AAC，這是非常優秀的編碼格式，就連AppleMusic也都採用該方案。

注意！上述的編碼格式都是比較新的編碼技術，所以不見得所有瀏覽器都支援，但起碼主流瀏覽器都支援，並且也支援許久，但還是要根據自身客群決定。

HTTP Header的壓縮方案

基本上網頁使用的協定都是Http協定，而Http協定規定了你要有個叫做Header的東西，用於描述封包的資訊。

而Header中定義很多資訊，其中在「請求的Header」中有一個叫做Accept-Encoding

這是告訴接收到這封包的人，我支援這些解壓縮方案，你等下回應給我的封包可以透過這些方案壓縮。
而Server收到這請求可以從中選一個壓縮方案，這邊推薦使用br全名也就是Brotli，這是比Zip、GZip …etc 更猛的壓縮方案。可以讓資源便更小。
當Server選擇了br，於是在「回應的Header」中有一個叫做Content-Encoding

用於告訴Client(也就是瀏覽器)，你可以採用該方案解壓縮就能拿到正確資源。