$30 off During Our Annual Pro Sale. View Details »

パフォーマンスはなぜ重要なのか? - 目先の UX(?) にとらわれないクライアントサイド開発の本質

パフォーマンスはなぜ重要なのか? - 目先の UX(?) にとらわれないクライアントサイド開発の本質

名古屋マークアップ勉強会 The Final https://758markup.doorkeeper.jp/events/57811 で使用したスライドです。本編20分。

Ayumu Sato

April 22, 2017
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

Transcript

  1. ػؿؓ٦وٝأכז׈ꅾ銲זךַ
    せ〢㾊و٦ؙ،حف⹈䓼⠓5IF'JOBM㛇锃闌怴
    !BIPNV"ZVNV4BUP
    湡⯓ך69
    חה׵׻׸זְؙٓ؎،ٝز؟؎سꟚ涪ך劤颵

    View Slide

  2. ֶכ״ֲ׀ְׂתׅ
    !BIPNVדׅ

    View Slide

  3. ‣ ⡟谏娄ׁהֲ֮ײ׬
    ‣ せ〢㾊ה幪靼׾䖂䗁⚥ך8FCر؍كٗحػ٦
    ‣ 剑鵚ךꟼ䗰כXFCQFSGהBZה➂✲罋铬
    ‣ $ZCFS"HFOU *ODת׋כ"CFNB57 *OD
    䪮遭劤鿇8FC*OJUJBUJWF$FOUFS⚺㹫ًر؍،窟䭍䪮遭䨌殛㹓
    !BIPNV

    View Slide

  4. ‣ ػؿؓ٦وٝأךꅾ銲䚍
    ‣ ػؿؓ٦وٝأך㛇劤涸זչ罋ִ倯ծ䯝ִ倯պ
    ‣ ػؿؓ٦وٝأהؙٓ؎،ٝز橆㞮ךչ㢳圫䚍պ
    ‣ ؙٓ؎،ٝز؟؎سꟚ涪חֶֽ׷չㅷ颵պךꅾ銲䚍
    ،آؑٝت

    View Slide

  5. ؙٔٝ׾ةحف׃׋䖓
    ⡦猱תד罣ִ׵׸׷

    View Slide

  6. أؙٗ٦ָٕꅾְ؟؎ز
    ׄ׏ֻ׶鋅גְ׵׸׷

    View Slide

  7. ‣ ؟٦غ٦ך䘔瘶׾鹼䒀ׇׁג 渣פך䕦갟׾庠׷㹋꿀
    ‣ 猱ך鹼䒀ˋך幾渣
    ‣ 猱ך鹼䒀ˋך幾渣
    ‣ 猱ך鹼䒀ˋך幾渣
    㣐䩛嗚稊ؒٝآٝה䎢デ 渣ך✲⢽
    IUUQTDPOGFSFODFTPSFJMMZDPNWFMPDJUZWFMPDJUZQVCMJDTDIFEVMFEFUBJM

    View Slide

  8. ‣ ؔٝٓ؎ٝ㺔➰ꆃفٓحزؿؓ٦يך何⥜
    ‣ 8FCل٦آך邌爙׾넝鸞⻉
    ‣ 㺔➰ך؝ٝغ٦آّٖٝ٦زָぢ♳
    ‣ 剑穄涸ח筨겘⭙碛سٕך㺔➰׾栻䖤
    䎃،ًٔؕ㣐窟걄鼅ך✲⢽
    IUUQLZMFSVTIOFUCMPHNFFUUIFPCBNBDBNQBJHOTNJMMJPOGVOESBJTJOHQMBUGPSN

    View Slide

  9. ‣ .P[JMMBח״׷'JSFGPYךتؐٝٗ٦سٍؗٝل٦ٝ
    ‣ ٓٝر؍ؚٝل٦آך邌爙׾猱넝鸞⻉
    ‣ تؐٝٗ٦سך؝ٝغ٦آّٖٝ٦زָぢ♳
    ‣ ؝ًٝز奋ד"EEZ0TNBOJָ㋠㏋㡰׏גג疭ִ׷
    اؿزؐؑ،تؐٝٗ٦سך✲⢽
    IUUQTCMPHNP[JMMBPSHNFUSJDTSFGPYQBHFMPBETQFFE&QBSUJJ

    View Slide

  10. ػؿؓ٦وٝأך
    㛇劤涸זչ罋ִ倯ծ䯝ִ倯պ

    View Slide

  11. 鐰⣣鯥כ㣐ֹֻⴓֽגא
    ٓٝة؎ي
    ل٦آٗ٦س

    View Slide

  12. ‣ شؽ؜٦ءّٝךꟚ㨣ַ׵ل٦آָ邌爙ׁ׸׷תדך鸞䏝
    ؙٔذ؍ٕٖؕٝتؚٔٝػأך剑黝⻉
    ꂁ⥋ٔا٦أ 歗⫷זו
    ך侧הؿ؋؎ٕ؟؎ؤך剑黝⻉
    )5.-鵤⽱ ͑؟٦غ؟؎سⳢ椚
    ך넝鸞⻉FUD
    ل٦آٗ٦س

    View Slide

  13. IUUQTXXXZPVUVCFDPNXBUDI W0R):FM/"V+L

    View Slide

  14. View Slide

  15. View Slide

  16. ‣ ل٦آָ邌爙ׁ׸׋֮הך6*ך䘔瘶鸞䏝
    '14 猱֮׋׶ך歗꬗ך刿倜㔐侧
    ך剑㣐⻉PS⿾䘔ך넝鸞⻉
    ؚٓؿ؍حؙ涸זٖٝتؚٔٝ頾蚚ך鯪ꆀ⻉
    歗꬗刿倜׾ׁת׋־׷أؙٔفزⳢ椚ךꤐ⿠FUD
    ٓٝة؎ي

    View Slide

  17. IUUQTXXXZPVUVCFDPNXBUDI WQ)'RO1-;

    View Slide

  18. View Slide

  19. ‣ 何㊣ׅ׷הֹכ㔓卓ꟼ⤘׾姻然ח䯝ִ׷ֿהָ剑׮ꅾ銲
    ‣ Ꟛ涪儗ךكأزفؙٓذ؍أך琎׫ꅾי׮㣐✲דכ֮׷ָ˘
    ‣ さְ鎉衝כչ傍ֺׅ׷剑黝⻉כ长䝤ך呎彁պ
    ‣ 葿ղז鎘庠٥锃叨ך倯岀׾鋙ִ׷ֿהכ溪㹋ח鵚בֻ鎮箺
    ػؿؓ٦وٝأ׾䯝ִ׷׋׭ך鎘庠٥锃叨

    View Slide

  20. 6*ךٖأهٝأ
    NT
    ،صً٦ءّٝG
    NT NT

    ،؎سٕ⚥ךⳢ椚
    NT
    ل٦آٗ٦س
    NT
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFSBJM
    ו׸ֻ׵ְז׵黝ⴖז䘔瘶鸞䏝ה鎉ִ׷ךַ

    View Slide

  21. ‣ 铩׮鹼ְ׮ך׾⡲׹ֲהכ䙼׏גְזְכ׆׌ָ˘
    ‣ 椚䟝涸ז勴⟝׃ַ鋅גְזְ
    ‣ 鸞ֻׅ׷倯岀ָ׻ַ׵זְծ儗꟦ָזְ
    ‣ ׉׮׉׮ꟼ䗰ָ搀ְ馯㄂
    ז׈8FCل٦آכ鹼ֻז׷ךַ

    View Slide

  22. ؙٓ؎،ٝز橆㞮ך㢳圫䚍ָ
    欥ֻ鋅׵׸ג׃ת׏גְ׷

    View Slide

  23. ػؿؓ٦وٝأה
    ؙٓ؎،ٝز橆㞮ךչ㢳圫䚍պ

    View Slide

  24. ‣ رغ؎أⳢ椚䚍腉ծأؙٔ٦ٝ؟؎ؤծ乼⡲倯岀
    ‣ ـٓؐؠծ04㹋遤䚍腉ծِ٦ؠ٦ָ鷄⸇׃׋䭁䓸堣腉
    ‣ طحزٙ٦ؙؔؿ؍أծ荈㸓ծⰕ遚8Jծٌغ؎ٕ
    ‣ ِ٦ؠ٦䎃룳װ⦐➂䊴ח״׷钠濼暴䚍ך䊴殯
    ؙٓ؎،ٝز橆㞮ך㢌侧 ק׿ך♧鿇

    View Slide


  25. $MJFOU $POOFDUJPO /FUXPSL 4FSWFS
    䱸竲ךٖ؎ذٝء٦ 堣㐻꟦ךؔ٦غ٦قحس
    ألحؙח״׷Ⳣ椚鹼䒀 ر٦ةك٦أזוך鹼䒀

    View Slide

  26. $16ךأٗحزؚٔٝⳢ椚䚍腉ךؒىُٖ٦ز
    طحزٙ٦ؙךأٗحزؚٔٝ䌒㚖䚍腉ךؒىُٖ٦ز

    View Slide

  27. ֮׵ײ׷㢳圫䚍ך⚥ח
    ˑ鹼ְ˒ˑ⢪ִזְ˒ָ悵׬

    View Slide

  28. ˒⢪ִזְ˒כِ٦ؠ٦⡤꿀ה׃ג
    ؟٦غ٦ꥺ㹱הずֻׄ׵ְ帾ⵟז㉏겗

    View Slide

  29. ؙٓ؎،ٝز؟؎سꟚ涪חֶֽ׷
    չㅷ颵պךꅾ銲䚍

    View Slide

  30. 湡䭷ׅץֹؽآطأ؞٦ٕ
    銲実ׁ׸׷فٗتؙزך鋅׋湡ծ堣腉
    فٗتؙزה׃ג⢪ְ׮ךחז׷ㅷ颵

    View Slide

  31. 湡⯓ך69



    View Slide




  32. ؕح؝ְְ ؙاꅾְ
    椚䟝 植㹋

    View Slide

  33. 歗劍涸ז6* 罋䣁♶駈ד⢪ְב׵ְ
    椚䟝 植㹋




    ˟Ꟛ涪罏ָ)1׾⵴׏ג⡦הַ׃״ֲה׃׋ֽו⡦ה׮ז׵זַ׏׋

    View Slide

  34. ➂➂➂➂➂➂➂
    խ剑넝ך69խ
    :?:?:?:?:?:


    ˖ ل٦آְָאתד׮Ꟛַזְ
    ˖ Ꟛְ׋ֽוأؙٗ٦ָٕꅾֺׅ׷
    ˖ ؗ٦ن٦سד乼⡲דֹזְ
    ˖ וָֿ乼⡲דֹ׷ךַⴓַ׵זְ
    ˖ ז׿ַ׮ֲװ׌

    View Slide

  35. 湡䭷ׅץֹؽآطأ؞٦ٕ
    銲実ׁ׸׷فٗتؙزך鋅׋湡ծ堣腉
    فٗتؙزה׃ג⢪ְ׮ךחז׷ㅷ颵
    ػؿؓ٦وٝأ
    ،ؙإءؽٔذ؍
    إُؗٔذ؍
    ِ٦ؠؽٔذ؍FUD
    3FTQPOTJWF8FC%FTJHO
    鋅׋湡ծ堣腉ךؙٗأـٓؐؠ

    View Slide

  36. ‣ ؙٓ؎،ٝز橆㞮ך㢳圫䚍׾⼧ⴓח罋䣁׃גㅷ颵׾넝׭׷
    ‣ 堣⠓䴦㣟׾幾׵׃ծفٗتؙزך⣣⦼׾剑㣐⻉ׅ׷
    搀ꣲח*&㼎䘔׃״ֲהְֲ䠐㄂דכזְ
    ׮׍׹׿椚䟝כؕح؝葺ֻג⢪ְװֻׅג鸞ְֿה✨
    ؙٓ؎،ٝز؟؎سꟚ涪ך劤颵涸ז䕵ⶴ

    View Slide

  37. תה׭

    View Slide

  38. ‣ ػؿؓ٦وٝأה،ؙإءؽٔذ؍הإُؗٔذ؍כ⡦״׶׮㼣ְ
    ‣ 㢳圫ז橆㞮דفٗتؙزך⣣⦼׾䬐⥂ׅ׷ךָ䧮ղך劤颵
    ‣ 湡⯓ך69
    ״׶չ׍ׯ׿ה⢪ִ׷պהְֲ⡤꿀ָת׆ꅾ銲
    ‣ ⳿晛ׁ׸׋׵顠׏גֻ׌ְׁ
    鎉ְ׋ַ׏׋ֿה

    View Slide

  39. ‣ 倜׃ְ䪮遭װٓ؎ـٓٔכ״׶⸬桦涸ז倯岀ך〳腉䚍
    ‣ 湡涸׌ָֽ㣐✲זךדכזְ
    ‣ 湡涸פך荈׵ך➬✲ך⣣⦼ ㅷ颵
    ׾剑㣐⻉ׅ׷ֿה׮㣐✲
    ‣ ׉ך捀ך䩛媮׮ת׋ず圫ח㣐✲זךדسٝسٝװ׹ֲ
    倜׃ְ䪮遭׮ㅷ颵׾넝׭ֲ׷

    View Slide

  40. 5IBOLZPV❤
    IUUQBIPNV
    !BIPNV
    HJUIVCDPNBIPNV

    View Slide