淺談 Gzip

Transcript

1. 
 PIXstyleMe 會議室∘2017.06.16
 afu @ 研發中⼼心前端組
 @afutseng 淺談 Gzip #BDLHSPVOE
   JNBHF
   $SFEJU
   IUUQTXXXWFDUFF[ZDPNWFDUPSBSUTFXFSQJQFQBUUFSOT
2. Agenda • 動機 • Gzip 簡介 • 資料壓縮概念念 • 圖解 LZ 演算法 (GZIP 之基礎) • Web 領域的資料壓縮實踐 • Gzip 實驗：HTML 屬性順序與 JSON 形式
3. 動機 為什什麼要談 Gzip
4. 
   ᤈతඪҊᰈવ࿈
 جຊޭ౎ᔒ၏޷ʂʁ
5. 複習什什麼是 Gzip
6. Gzip since 1992 • 檔案壓縮程式的簡稱 • gzip 檔案格式 (副檔名 .gz) • 基於 DEFLATE 演算法 • LZ77 + 霍夫曼編碼 (Huffman coding) • 無損資料壓縮
7. 為何需要壓縮？
8. 為何⽽而壓 • 想得到更更⼩小的檔案 • 想減少傳輸時間，儘早遞送給裝置/平台 • 圖片/影片/⾳音樂 • 想省空間⽅方便便收納儲存 • 1G 的⽂文字檔 log 可以壓到 100M 以下
9. 資料壓縮概念念
10. 資料壓縮概念念 • 資料是由連續的符號/字⺟母組成，通常必存在某 種關連性 • 找出原始資料裡的冗餘 (redundancy) • 進⾏行行編碼 (encoding) 以減少冗餘
11. 無失真壓縮 • ⼜又稱無損壓縮 / 可逆壓縮 • 資料重建結果和壓縮前完全相同 • ⼀一般⽤用於⽂文字檔、執⾏行行檔 • 圖片 - BMP, GIF, PNG, TIFF • ⾳音訊 - WAV, APE
12. 失真壓縮 • ⼜又稱有損壓縮、破壞性資料壓縮 • 解壓的資料會與原始資料不同但是非常接近。 • 犧牲品質減少資料量量，通常⽤用於多媒體資料 • JPEG, MP3, MPEG4
13. 重複單字越多， 壓縮率越佳。 －英⽂文歌詞圖解－
14. $SFEJU
    l"SF
    1PQ
    -ZSJDT
    (FUUJOH
    .PSF
    3FQFUJUJWF z
    
    IUUQTQVEEJOHDPPMTPOHSFQFUJUJPO
15. 近⼀一甲⼦子15,000⾸首
 英⽂文流⾏行行⾳音樂歌詞壓縮率分布 $SFEJU
    l"SF
    1PQ
    -ZSJDT
    (FUUJOH
    .PSF
    3FQFUJUJWF z
    
    IUUQTQVEEJOHDPPMTPOHSFQFUJUJPO
16. 近⼀一甲⼦子15,000⾸首
 英⽂文流⾏行行⾳音樂前⼗十名歌詞壓縮率 $SFEJU
    l"SF
    1PQ
    -ZSJDT
    (FUUJOH
    .PSF
    3FQFUJUJWF z
    
    IUUQTQVEEJOHDPPMTPOHSFQFUJUJPO
17. Around The World 歌詞實測 • Around the world, around the world 
 Around the world, around the world 
 Around the world, around the world 
 Around the world, around the world • 空⾏行行 • 以上重複 18 組 = 2557 Bytes (2.5 KB) • gzip --stdout input.txt > output.txt.gz • gzip 壓縮後⼤大⼩小: 101 Bytes • 壓縮率 = 1 - (101/2557) = 96.05%
18. Web 領域的資料壓縮實踐
19. Browser/Server 壓縮⽅方案協議
 (RFC 2616) • ⼀一、瀏覽器發送 Request 時，夾帶 Header 告訴伺 服器可解讀的編碼種類 • Accept-Encoding:gzip, deflate, sdch • sdch - 由 Google 提出，僅限於 Chrome 瀏覽 Google 網站 時使⽤用 • br (Brotli) - 2015 提出的壓縮演算法，壓縮率比 Gzip/deflate 優 ~20%。
 Firefox 44+ & Chrome 49+ 開始⽀支援
20. Browser/Server 壓縮⽅方案協議
 (RFC 2616) • ⼆二、伺服器回應 Request 時告訴瀏覽器傳輸的 編碼種類 • Content-Encoding: gzip • 若若伺服器未啟⽤用/未安裝壓縮模組，則不壓 縮，不回傳此 Header
21. 實踐原則 • 壓縮是使⽤用更更少的位元對資訊進⾏行行編碼的過程 • 消除不必要的資料總是會產⽣生最好的結果 • 有多種不同的壓縮演算法可⽤用 (現況以 Gzip 佔 ⼤大宗) • 需要各種實作組合技來來達成最佳壓縮比例例
22. Minification (迷你化) • 移除多餘的空⽩白、Tab、換⾏行行字元 • 移除註解 • 合併重複的 CSS Selector • Tooling • UglifyJS, UglifyCSS, Babili (babel-minify), Webpack
23. 使⽤用 Gzip 壓縮⽂文字資源 • Gzip 對⽂文字資料壓縮率最佳 • HTML/CSS/JS
 JSON (串串接 API 請檢查有無遺漏) • 所有現代瀏覽器皆⽀支援 (IE6 會有 bug) • 若若使⽤用 CDN 要留留意有無啟⽤用設定
24. Gzip 實驗: 
 HTML 屬性標籤順序
25. HTML 屬性順序不固定
 100 組 <input> <input id="f1" class="field" name="f1" type="text"> <input class="field" id="f2" type="text" name="f2"> <input id="f3" class="field" name="f3" type="text"> <input name="f4" type="text" class="field" id="f4"> <input type="text" id="f5" class="field" name=“f5"> … <input id="f102" class="field" name="f102" type="text"> PSJHJO
    
    #ZUFT
    
    ,# ([JQ
    
    #ZUFT
    
    ,# ᔒ༗၏
    NJOJGZ
26. HTML 屬性順序固定 100 組 <input> <input class="field" id="f1" type="text" name="f1"> <input class="field" id="f2" type="text" name="f2"> <input class="field" id="f3" type="text" name="f3"> <input class="field" id="f4" type="text" name="f4"> <input class="field" id="f5" type="text" name="f5"> … <input class="field" id="f102" type="text" name="f102"> PSJHJO
    
    #ZUFT
    
    ,# ([JQ
    
    #ZUFT
    
    ,# ᔒ༗၏
    NJOJGZ
27. 壓縮率：~3.98% 1807 => 1735 Bytes
28. 由此可⾒見見
 HTML 屬性順序
 納入 Coding Standard 
 是有幫助的
29. IUUQDPEFHVJEFDP
31. Gzip 實驗: 
 JSON 形式異異動
32. API 通常吐出的 JSON 形式 [ { "name": "ad6cc49dbb", "user_id": "59434f8dc0250", "country": "UK" }, { "name": "2d9ea3f974", "user_id": "59434f8dc04a5", "country": "USA" }, ...... ] 3PXCBTFE
33. API 通常吐出的 JSON 形式 [ { "name": "ad6cc49dbb", "user_id": "59434f8dc0250", "country": "UK" }, { "name": "2d9ea3f974", "user_id": "59434f8dc04a5", "country": "USA" }, ...... ] { "name": [ "ad6cc49dbb", "2d9ea3f974" ], "user_id": [ "59434f8dc0250", "59434f8dc04a5" ], "country": [ "UK", "USA" ] } 3PXCBTFE $PMVNOCBTFE
34. API 通常吐出的 JSON 形式 100 筆列列導向資料 原始⼤大⼩小: 10409 Bytes (~10 KB) Minify: 6409 Bytes (6.3 KB) Minify+Gzip: 1221 Bytes (1.2 KB) 3PXCBTFE
35. API 通常吐出的 JSON 形式 100 筆欄欄導向資料 原始⼤大⼩小: 6278 Bytes (6.1 KB) Minify: 3524 Bytes (3.4 KB) Minify+Gzip: 1164 Bytes (1.1 KB) $PMVNOCBTFE
36. API 通常吐出的 JSON 形式 1000 筆列列導向資料 原始⼤大⼩小: 104065 Bytes (~102 KB) Minify: 63891 Bytes (~62 KB) Minify+Gzip: 11475 Bytes (~11 KB) 3PXCBTFE
37. API 通常吐出的 JSON 形式 1000 筆欄欄導向資料 原始⼤大⼩小: 62108 Bytes (~61 KB) Minify: 34989 Bytes (~34 KB) Minify+Gzip: 10754 Bytes (~11 KB) $PMVNOCBTFE
38. 差異異：~6.28% 11475 => 10754 Bytes
39. References  1. 資料壓縮, http://www.csie.ntnu.edu.tw/~violet/cs92/ datacompression.htm 2. GZIP is not enough! | Google, https://www.youtube.com/ watch?v=whGwm0Lky2s 3. How GZIP compression works | JSConf EU 2014, https:// www.youtube.com/watch?v=wLx5OGxOYUc 4. File Compression (Zipping): How does it work?, https:// www.youtube.com/watch?v=kHkUR6sI_xw 5. https://en.wikipedia.org/wiki/Gzip
40. 感謝聆聽 @afutseng