Tweet
Tweet

Slide 1

Slide 1 text

ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ໳ JAM plus #1 
 Masashi Hirano (@shisama)

Slide 2

Slide 2 text

{ "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }

Slide 3

Slide 3 text

λʔήοτ • ૣ͍WebΛఏڙ͍ͨ͠ਓ • αʔόઃఆͨ͘͠ͳ͍ ָ͍ͨ͠ϑϩϯτΤϯ υΤϯδχΞͷօ༷

Slide 4

Slide 4 text

ࠓ೔࿩͞ͳ͍͜ͱ • HTTP/1.1΍HTTP/2ͷৄࡉ • αʔόͷ࿩

Slide 5

Slide 5 text

HTTP/1.1ͷ໰୊఺ • 1ͭͷϦΫΤετ͕׬ྃ͢Δ·Ͱ࣍ͷϦΫΤετ͸ߦ͑ͳ͍ • ଟॏԽ͢Δ͜ͱͰ1υϝΠϯ΁ͷෳ਺઀ଓՄೳ • ಉ࣌઀ଓ਺͸ݶΒΕ͍ͯΔ • Chromeͷ৔߹6ͭ·Ͱ͔͠ಉ࣌઀ଓͰ͖ͳ͍ https://codezine.jp/article/detail/8663

Slide 6

Slide 6 text

HTTP/1.1ͷ໰୊఺ • HTTPύΠϓϥΠϯ • લճͷϦΫΤετΛ଴ͨͣʹ࣍ͷϦΫΤετΛૹ৴Մೳ • αʔόʔ͸ϦΫΤετͷॱ൪௨ΓʹϨεϙϯεΛฦ͞ͳ͚Ε͹ͳΒͳ͍ • ઌ಄ͷϦΫΤετʹ͕͔͔࣌ؒͬͨ৔߹ɺޙଓͷϨεϙϯε͸ϒϩοΫ ͞ΕΔ https://codezine.jp/article/detail/8663

Slide 7

Slide 7 text

HTTP/1.1ͷ໰୊఺ • ߴ଎ͳWeb͕ٻΊΒΕΔݱ୅ • ϦΫΤετ਺ΛݮΒ͍ͨ͠ • CSSεϓϥΠτɺJSϑΝΠϧͷόϯυϧͳͲͰ ରԠ͍ͯ͠Δ͕ਏ͍ • όϯυϧͨ͠ϑΝΠϧͷେ͖͕͞໰୊ʹͳΔ͜ ͱ΋

Slide 8

Slide 8 text

HTTP/2

Slide 9

Slide 9 text

HTTP/2ͱ͸ • HTTP/1.1ͷϨΠςϯγΛղܾ͢ΔͨΊͷ৽͠ ͍ϓϩτίϧ • HTTP/1.1͔Β16೥ͿΓͷΞοϓσʔτ • 2015೥ʹ͸RFCԽࡁΈ(RFC7540) • ΄΅͢΂ͯͷϒϥ΢β͕ରԠ(IE11΋!)

Slide 10

Slide 10 text

HTTP/2ͷओͳػೳ • ετϦʔϜͷଟॏԽ • ετϦʔϜͷ༏ઌ౓ • ϑϩʔ੍ޚ • ϔομѹॖ(HPACK) • αʔόϓογϡ

Slide 11

Slide 11 text

HTTP/2ͷओͳػೳ • ετϦʔϜͷଟॏԽ • ετϦʔϜͷ༏ઌ౓ • ϑϩʔ੍ޚ • ϔομѹॖ(HPACK) • αʔόϓογϡ

Slide 12

Slide 12 text

αʔόϓογϡͱ͸ • Ϧιʔεऔಘʹ1RTT(ϦΫΤετ+Ϩεϙϯε)Λඞཁͱ͠ͳ͍ • ࠷ॳͷϦΫΤετΛड͚औͬͨαʔό͕࣍ͷϦΫΤετΛ༧ ଌͯ͠ΫϥΠΞϯτʹpush͢Δ )5.-ͷϦΫΤετʹର ͯ͠$44ͱը૾Λಉ࣌ʹ ഑৴͍ͯ͠Δ https://giuseppeciotta.net/getting-to-know-http20-with-the-mosaic-demo.html

Slide 13

Slide 13 text

αʔόΛ৮Βͳ͚Ε͹͍͚ͳ͍ͷͰ͠ΐɾɾɾ

Slide 14

Slide 14 text

ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ໳ Masashi Hirano (@shisama)

Slide 15

Slide 15 text

ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ໳ Masashi Hirano (@shisama) αʔόͷ࿩͸͠·ͤΜʂʂ

Slide 16

Slide 16 text

Netlify

Slide 17

Slide 17 text

Netlifyͱ͸ • ߴػೳϗεςΟϯάαʔϏε • ϏϧυɾσϓϩΠɾϗεςΟϯάΛ͢΂ͯߦ͑Δ • GitHubʹ͋ΔϦϙδτϦΛͦͷ··ϗεςΟϯ άͰ͖Δɻpush͢ΔͨͼʹࣗಈσϓϩΠ • HTTPSɺHTTP/2͕ແྉͰ؆୯ʹ࢖͑Δ

Slide 18

Slide 18 text

https://www.netlify.com/blog/2017/07/18/http/2-server-push-on-netlify/

Slide 19

Slide 19 text

NetlifyͰαʔόϓογϡ • σϓϩΠ͢ΔσΟϨΫτϦʹ_headersͱ͍͏ ϑΝΠϧΛஔ͚ͩ͘ • _headersʹͲͷϦιʔεΛpush͢Δͷ͔ॻ͘

Slide 20

Slide 20 text

NetlifyͰαʔόϓογϡ . !"" public # !"" _headers # !"" my-app.js # !"" index.html # %"" style.css %"" src !"" my-app.js !"" index.html %"" style.css QVCMJDΛσϓϩΠ͢Δ৔߹ɺ QVCMJD௚Լʹ@IFBEFSTΛஔ͘

Slide 21

Slide 21 text

_headersϑΝΠϧ /server-push-path Link: ; rel=preload; as=script Link: ; rel=preload; as=style ϦΫΤετͷύε -JOLQVTI͍ͨ͠ϦιʔεͷύεSFMQSFMPBEBTϦιʔεͷछྨ

Slide 22

Slide 22 text

Ϩεϙϯεϔομʔ ϦΫΤετͨ͠IUNMͷϨεϙϯεϔομʔ ʹMJOL͕௥Ճ͞ΕΔ

Slide 23

Slide 23 text

HTTP1.1ͱHTTP/2 ൺֱ $ISPNFͷ৔߹ɺ)551ͩͱ 1SPUPDPM͕IʹͳΔ

Slide 24

Slide 24 text

HTTP1.1ͱHTTP/2 ൺֱ *OJUJBUPS͕1VTI0UIFSʹͳ͍ͬͯͯαʔ όϓογϡ͞Ε͍ͯΔ͜ͱ͕Θ͔Δ

Slide 25

Slide 25 text

αʔόϓογϡ͕ෆཁʹͳͬͨΒ /server-push-path Link: ; rel=preload; as=script nopush Link: ; rel=preload; as=style OPQVTIΛ෇͚Δ

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

firebaseͱ͸ • GoogleͷϞόΠϧϓϥοτϑΥʔϜ • Realtime DatabaseɺCloud Functionɺ Crashlytics etc • ϗεςΟϯάαʔϏε΋͋Δ • ແྉͰHTTPS΍HTTP/2͕࢖͑Δ

Slide 28

Slide 28 text

firebaseͰαʔόϓογϡ . !"" firebase.json !"" public # !"" img1.png # !"" index.html # %"" style.css %"" src !"" img1.png !"" index.html %"" style.css pSFCBTFKTPOΛஔ͘

Slide 29

Slide 29 text

firebase.json { "hosting": { "public": "public", "headers": [ { "source": "/", "headers": [{ "key": "Link", "value": ";rel=preload;as=script, style.css>;rel=preload;as=style" }] } ] } }

Slide 30

Slide 30 text

·ͱΊ • HTTP/2αʔόϓογϡͰϦΫΤετ਺ΛݮΒ ͠ϖʔδϩʔυΛߴ଎Խ • ߴػೳϗεςΟϯάαʔϏεΛ࢖͏͜ͱͰ HTTP/2΍αʔόϓογϡ͸؆୯ʹ࢖͑Δ

Slide 31

Slide 31 text

એ఻

Slide 32

Slide 32 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠