Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web高速化のススメ

 Web高速化のススメ

ゆるWeb勉強会 with Monaca UG in Sapporoの発表資料です。

https://monacaug.connpass.com/event/130871/

Atsushi Nakatsugawa

May 30, 2019
Tweet

More Decks by Atsushi Nakatsugawa

Other Decks in Technology

Transcript

  1. PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint

    fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp
  2. PAGE # MOONGIFT / 50 DAY 2019/02/14 旅行先にて Gwifiは1日500MBまで 切れると128kbps制限

    追加購入したい サイトめっちゃ遅い… JavaScript動かない jQueryの読み込みでエラー出てる 8
  3. PAGE # MOONGIFT / 50 DAY 2019/02/14 高速化? 11 *

    サーバ増強! ネットワーク回線強化! DOM改善 ネットワーク改善 プログラム改善
  4. PAGE # MOONGIFT / 50 DAY 2019/02/14 仮想DOMを使いましょう •React/Vue.js/Riotなど •DOMを更新すべきかどうかはフレームワー

    クに任せる •UI情報をJavaScriptにあらかじめ持たせる ことで、データ通信量を大幅に減らせる 14
  5. PAGE # MOONGIFT / 50 DAY 2019/02/14 DOMの幅/高さを指定する •画像の高さがずれた時のDOM再計算が重い •テキストも可変にせず、溢れた時の処理を入れる

    •iframeを使うと再計算処理が走らないので高速化する
 ↑実際やると結構地獄なので注意
 https://vimeo.com/55486684 15
  6. PAGE # MOONGIFT / 50 DAY 2019/02/14 UI/UX •アニメーションはCSS3でGPUを使う
 でも実装するのは大変

    •ライブラリ、フレームワークを採用する •Onsen UI/ionic/Framework7など
 モバイル向けはデスクトップブラウザをサポートしていない ことがあるので注意 16
  7. PAGE # MOONGIFT / 12 DAY 2019/05/15 CACHE API •

    Service Worker内で動作するキャッシュシステム • URLをキー、レスポンスをバリューにしたKVS • 有効期限などがないのでWorkboxと組み合わせると吉 20 リクエスト リクエスト Service Worker Webブラウザ レスポンス レスポンス サーバ キャッシュなし
  8. PAGE # MOONGIFT / 12 DAY 2019/05/15 CACHE API •

    Service Worker内で動作するキャッシュシステム • URLをキー、レスポンスをバリューにしたKVS • 有効期限などがないのでWorkboxと組み合わせると吉 21 リクエスト Service Worker Webブラウザ レスポンス サーバ キャッシュあり
  9. PAGE # MOONGIFT / 12 DAY 2019/05/15 キャッシュパターン 22 ΦϯϥΠϯ

    ΦϑϥΠϯ උߟ Ωϟογϡ ͋Γ ͳ͠ ͋Γ ͳ͠ ΩϟογϡϑΝʔετ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ جຊ ωοτϫʔΫϑΝʔετ ωοτϫʔΫ ωοτϫʔΫ Ωϟογϡ Τϥʔ ։ൃ࣌ʹ͓קΊ ΩϟογϡΦϯϦʔ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ ωοτϫʔΫΦϯϦʔ ωοτϫʔΫ ωοτϫʔΫ ωοτϫʔΫ Τϥʔ ։ൃ࣌ʹ͓קΊ ฏߦ ߋ৽ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ ΦϯϥΠϯͳΒΩϟογϡߋ৽ via Workbox
  10. PAGE # MOONGIFT / 50 DAY 2019/02/14 速度比較(フィボナッチ) 27 JAVASCRIPT

    WASM 20 2 1 30 69 4 40 6,733 423 42 17,356 1,061 44 46,195 2,839
  11. PAGE # MOONGIFT / 50 DAY 2019/02/14 対応言語 •C/C++ •Rust

    •C# •Java 29 •Go •AssemblyScript •Kotlin/Native •その他LLVM対応言語
  12. PAGE # MOONGIFT / 50 DAY 2019/02/14 まとめ •DOM描画が遅い →

    仮想DOMを使おう •ネットワークが遅い → CACHE APIを使おう •JavaScriptが遅い… → WebAssemblyを使おう 33
  13. PAGE # MOONGIFT / 50 DAY 2019/02/14 + Thanks! @goofmint

    fb.me/goofmint ご感想お待ちします!