Base64 VLQ概要

Transcript

1. Base64 VLQ概要 @rChaser53
2. 概要 ・sourcemapのmappingsで用いられている ・相対的に位置や情報を示すことで情報を圧縮している ・少ない文字数で-2 ~ 2 -1の値まで表現できる 32 32
3. 使用箇所 TypeScript出力のsourcemap 可読性のため改行している
4. 使用箇所
5. AAGA,OAAO,CAAC...
6. AAGA,OAAO,CAAC... 正直これだけではよく分からない まずは数字に変換する必要がある
7. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789+/ 使用する文字はBase64で使用する文字 「A」=0、 「/」=63とし 「/」に向かい1ずつ数字が大きくなる Gなら6、aなら26になる
8. 011011 b = 27 これを6bitの2進数に変換する
9. 011011 Continuous Bit Value Bit Sign Bit b = 27 bitには役割が存在する
10. 1の場合、次の文字のValue Bitを左に5bitシフトし この文字列のValue Bitとの和を取る(後述) 011011 Continuous Bit Value Bit Sign Bit b = 27
11. この4桁の数値で基本となる数値の値を算出する 011011 Continuous Bit Value Bit Sign Bit b = 27
12. 1の場合、マイナスになる 0の場合、プラスになる 011011 Continuous Bit Value Bit Sign Bit b = 27
13. 011011 Continuous Bit: 0 => 演算不要! Value Bit: 1101 => 13 Sign Bit: 1 => -1 b = 27 結果 -13
14. i = 34 =100010 次 iG G = 6 =000110
15. 100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0 i = 34 000110 G = 6 Value Bit: 0011
16. 100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0 i = 34 次の文字のValue Bit(0011)を左に5bitシフトし 000110 G = 6 Value Bit: 0011 0011 << 5 => 1100000
17. 100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0 i = 34 この文字列のValue Bit(0001)との和を取る 1100000 + 0001 = 1100001 => 97 G = 6 Value Bit: 0011 000110
18. 100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0 i = 34 Sign Bitは0のため符号は「+」のまま 従ってiG = 97 G = 6 Value Bit: 0011 000110
19. つまり先ほどの文字列は AAGA,OAAO,CAAC...
20. こうなる AAGA,OAAO,CAAC... 0030,7007,1001...
21. ・カンマ区切りでセクションを構成する ・1文字１文字に意味がある ・初期位置は列、行、index全て0 ・以降は相対的な情報を示す ・；は改行を意味する ・必要となる情報によって 　セクションのサイズは変動する(1 or 4, 5) (AAGA,OAAO,CAAC…) 0030,7007,1001...
22. 5文字のケースを元に説明する 各文字は以下の情報を示している 1.変換後の列番号 2.変換前のファイル名のindex (sourcemapのsectionsのindex) 3.変換前のファイルの行番号 4.変換前のファイルの列番号 5.変換後の単語のindex (sourcemapのnamesのindex) 使用箇所 1文字の場合は ここまで 4文字の場合は ここまで
23. sources: ["../src/sourcemapTest.ts"] names: [], mappings: "AACA,IAAM,SAAS,...” 1.変換後の列番号 0 => 0 2.変換前のファイル名のindex 0 => 0 (sourcemapのsectionsのindex) 3.変換前のファイルの行番号 0 => 1 4.変換前のファイルの列番号 0 => 0 5.変換後の単語のindex 0 => 0 (sourcemapのnamesのindex) 例えば以下のようなsourcemapの構成だったら… AACA = 0010
24. sources: ["../src/sourcemapTest.ts"] names: [], mappings: "AACA,IAAM,SAAS,...” 1.変換後の列番号 0 => 4 2.変換前のファイル名のindex 0 => 0 (sourcemapのsectionsのindex) 3.変換前のファイルの行番号 1 => 1 4.変換前のファイルの列番号 0 => 6 5.変換後の単語のindex 0 => 0 (sourcemapのnamesのindex) 例えば以下のようなsourcemapの構成だったら… IAAM = 4006
25. sources: ["../src/sourcemapTest.ts"] names: [], mappings: "AACA,IAAM,SAAS,...” 1.変換後の列番号 4 => 13 2.変換前のファイル名のindex 0 => 0 (sourcemapのsectionsのindex) 3.変換前のファイルの行番号 1 => 1 4.変換前のファイルの列番号 6 => 15 5.変換後の単語のindex 0 => 0 (sourcemapのnamesのindex) 例えば以下のようなsourcemapの構成だったら… SAAS = 9009
26. ちなみに何を変換したか? sources: ["../src/sourcemapTest.ts"] names: [], mappings: "AACA,IAAM,SAAS,...” var tempValue = 123; type TempType = number; const tempValue: TempType = 123; JavaScript TypeScript sourcemap
27. Base64 VLQ参考リンク ・MS社の人の独自研究 　規則性が知りたければここ 　フォーマットの変遷の考察が本当に面白い ・BASE64のcoder/decoder 　圧縮や難読化がされてないのでソースが楽に読める 　説明がわからんコードを見せろという方はここ ・変換前後のsourcemap対応図が非常にわかりやすい
28. ご静聴ありがとうございました