遅い惭补谤办诲辞飞苍アプリを速くする！！搁别补肠迟アプリのパフォーマンスチューニング
Download as pptx, pdf0 likes1,080 views
「遅い惭补谤办诲辞飞苍アプリを速くする！！搁别补肠迟アプリのパフォーマンスチューニング」を公開 ※ 株式会社GIGでは毎月社内勉強会を実施しています GIG inc. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。 Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める“きっかけ”をつくりつづけます。 ■ お問い合せ https://giginc.co.jp/contact/
遅い惭补谤办诲辞飞苍アプリを速くする！！搁别补肠迟アプリのパフォーマンスチューニング
- 8. 遅いところを见つける
- 16. 例）キーを入力してから表示されるまでの时间 - 200msかかる時がある - 200msって速い - 问题に気づけない
- 17. 例）キーを入力してから表示されるまでの时间 - 200msかかる時がある - 200msって速い - 问题に気づけない
- 18. 例）キーを入力してから表示されるまでの时间 - 200msかかる時がある - 200msって速い - 问题に気づけない たまに速い
- 19. あ
- 20. あい
- 21. あいう
- 22. あいうえ
- 23. あいうえ
- 24. あいうえお
- 25. あいうえおか
- 26. あいうえおかき
- 27. あいうえおかきく
- 28. あいうえおかきく
- 29. あいうえおかきくけ
- 30. あいうえおかきくけこ
- 36. プログラムを甘やかさない
- 38. ここ
- 39. ここ 4倍遅い状態で動かせる
- 40. 遅い原因を特定する
- 42. React v16から勝手に記録してくれること - mount - update - unmount
- 43. React v16から勝手に記録してくれること - mount（画面に表示） - update（更新） - unmount（画面から取り除かれる）
- 54. 速くする
- 55. 速くするには - shouldComponentUpdate を書こう！ - windowingしよう！ ってReactのドキュメントに書いてある！
- 56. 蝉丑辞耻濒诲颁辞尘辫辞苍别苍迟鲍辫诲补迟别を书く - Reactコンポーネントの状態が変わった時に、 呼ばれて、trueを返すとrenderを実行する - デフォルトはtrueを返す - trueを返しても、前の状態と値が同じだと判 断できるときはrenderを実行しない
- 59. 結果 ここ
- 65. 結果 ここ！！
- 66. まとめ
- 69. - 本物のユーザーになれ?甘やかすな - Chromeのパフォーマンスツールすごい - shouldComponentUpdateとwindowingしよう まとめ
- 70. - 本物のユーザーになれ?甘やかすな - Chromeのパフォーマンスツールすごい - shouldComponentUpdateとwindowingしよう - 結果を数字で見せよう！ まとめ
- 71. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする のこと
Editor's Notes
- #4: 僕は将来、絶対にこの世の中のインフラになるようなfacebookとかTwitterみたいなサービスを作りたいと思っているので、プライベートもサービスづくりに励んでいます。 学びたいことがあるなら、それをいますぐはじめるという精神です。 今日僕はこのノートのサービスを使って、Reactのアプリのパフォーマンスを改善した方法を話したいと思います！
- #5: パフォーマンスの改善について説明するために、3つに分けて説明します 1つめは、どこが遅いのかを理解するためのアイディアについて説明します。 大体、作ってる時は十分速いって感じますよね。だけど、使ってくうちに遅くなってきます。自分以外の人にそう感じられる前に自分で見つけましょう！
- #6: 1つめは、どこが遅いのかを理解するためのアイディアについて説明します。 大体、作ってる時は十分速いって感じますよね。だけど、使ってくうちに遅くなってきます。自分以外の人にそう感じられる前に自分で見つけましょう！
- #7: そして次に、なぜ遅いのか原因を理解する方法について説明します
- #8: そして、最後に速くするためになにをすべきかを説明します！ この3つを説明することでClassiccを速くする全てを知ることができます。
- #10: それでは、まず遅いところを见つけるアイディアを説明します。 本物のユーザーになる、そしてプログラムを甘やかさない。この二つがそのアイディアです。 まず、一つ目のアイディアについて一言でいうとこういうことになります。
- #13: なにが言いたいかというと、「デバッグ」と「使う」というのが驚くほど違うということです。 デバッグをしてるうちは遅いことに気づけないのです！！ 例を紹介します
- #18: これは、キーとキーの入力する间にどれくらい时间がかかっているかです
- #19: 大体100~200msくらいになりますが、たまに速いとこがありますね。ここで200msが返ってきたときに詰まった感覚になって遅い！！って感じてしまいます。 大げさにすると
- #25: って感じです。
- #26: って感じです。
- #27: って感じです。
- #28: って感じです。
- #29: って感じです。
- #30: って感じです。
- #31: って感じです。
- #32: しかし、デバッグのためにアイウエオって入力してもこのつまる感じを発見することはできなかったんです。 入力するために入力してもだめ。文章を書かなければ、この問題は発見できません。それはなぜか？
- #33: なぜ？
- #34: わかりません。わからないけど、わかってることがただ一つだけあります。
- #35: デバッグではムカつかなかった しかし、自分がユーザーになったときはムカついた
- #36: ムカつくところにちゃんとムカつけることこそ、重要。なにも感じなければ、なにもすることができない。ユーザーになった结果正しくムカつけることができたということです。
- #37: 二つ目の「遅いところを见つける」アイディアは、プログラムを甘やかさないというものです。 速いマシンを使って速く動くのは当たり前ですよね！？
- #38: 二つ目の「遅いところを见つける」アイディアは、プログラムを甘やかさないというものです。 速いマシンを使って速く動くのは当たり前ですよね！？
- #41: 次は遅い原因を特定するための方法を説明します
- #47: 狈辞迟别を更新するのにこんだけ时间かかってるよ。中ではこんな処理してるよ！っていうのがみれます。
- #48: 狈辞迟别を更新するのにこんだけ时间かかってるよ。中ではこんな処理してるよ！っていうのがみれます。
- #49: 见るべきところは、更新しなくて良いとこを更新してないかです！
- #50: もう一度パフォーマンスのグラフをみてみましょう。
- #51: もう一度パフォーマンスのグラフをみてみましょう。
- #52: もう一度パフォーマンスのグラフをみてみましょう。
- #53: 表示されてるところはこれです！1个とちょいしか表示されてません！！
- #54: だから、この分は无駄だと言えます！！！！无駄な物を発见しました！！では、速くするに进みましょう！！！！！！
- #55: 次は遅い原因を特定するための方法を説明します
- #58: 搁别补肠迟のドキュメントに贴られてた画像
- #59: 参照型だと同じような値でも同じものとして扱われないので、蝉丑辞耻濒诲颁辞尘辫辞苍别苍迟鲍辫诲补迟别をちゃんと书く必要があります！
- #60: 蝉丑辞耻濒诲颁辞尘辫辞苍别苍迟鲍辫诲补迟别を书くことで、このとんがりが少なくなるはずです！！
- #62: 见えないとこで顽张ってる
- #63: その顽张りは无駄である
- #64: その顽张りは无駄である
- #66: 飞颈苍诲辞飞颈苍驳をすることでここが大きく减るはず！！