Yunqi番号情報：[ もっと業界ニュースのためにクリック ]
あなたが来る、待っているあなたは、クラウド上で異業種最初の手の情報を見つけることができます！
ゲームのI心の愛は、私は自分自身にいくつかのビデオゲームを作るために熱望していました。数ヶ月前、私は現実に、そして世界的なゲームコンテスト（グローバルゲームジャム）に参加するのは初めてのため、この夢を始めました。私のチームと私はシングルページのWebアプリケーションのエンドの形で、Vue.jsは「ZeroDaysLeft」と呼ばれるゲームを構築します。ゲームは、我々はこのトピックに関するいくつかの有用な議論をしたい、考慮に地球環境に事業活動の影響を取る環境保護のテーマです。使用Vue.jsは、ゲームがあまりありませんします。私のチームは後半の1日だったし、その後私たちは指推測ゲームに道を使いたいというフレームワークを選択し、我々はすぐにコードを完了し、ゲームのバージョンは週末の最後に実行することができます。ローカルテストすべてがうまくいっているとき。当然のことながら、私たちは、ゲーム作品を書き出すために私たちの最初の時間を誇りに思っています、そして世界とそれを共有したいです。
しかし、問題が発生 - 我々は良いアプリを構築し、クエリのフィールドを起動したときに、メモリフットプリントがテーブルをバースト。正しく実行するために、マシンは、Intel i7プロセッサー・プログラムに基づく強力なシステムがクラッシュしますにおいても、どんなに何立ち往生動かを変更しますほとんど不可能です。ゲーム大会の制限時間が戻って現実に私たちを入れて、我々はそう、少なくとも私たちは完全なゲームがあなたのデバイス上で実行することができますすることができ、生産パフォーマンスの問題を棚上げすることを決めました。「完了」プロジェクトのほとんどのように、次の日、私たちは彼らの心にそれを置きます。
しかし、私は手放すことができませんでした。それはいつも私を気にしています。問題はVue.jsそれでありますか？Netlifyこれは？またはコードの私達のトリック理由？私は見つけることがあります。
パフォーマンス低下の原因を調査
私は簡単なテスト灯台最初に使用しました。幸い、Firefoxはブラウザプラグインを提供することを目的とします。ここで私が得る結果があります。
デジタル非常に良いの89％。実際には、多くの人気サイトに比べて、このパフォーマンスは非常によく。この試験は、初めて速度及び指標コンテンツとしての潜在的な問題、意味のある描画工程、等の数を同定しました 理論的には、これらの問題を解決することは、さらにスコアを上げるが、必ずしも深刻に直面するアプリケーションのパフォーマンス問題を解決することはありません。
当社のゲームは、画像や音声物的資源のいくつかを持っていますが、両方のゲームがそこで立ち往生得ることはできません。私たちは再び過剰最適化これらの資源のは、最適化されていますが、これは単純に役に立つことがあります。
このテストでは、私たちは、パフォーマンス上の問題の本当の原因を特定することができない場合があります。私が考えるようになったので、このアイデアが出てくる理由はないだろう「？これは権利問題Vueの、ではありません」、それがアップチェックしない場合は愚かです。私は、結果を空白にして展開されているコンソールのサイトをチェックアウト。しかし、それは多くの場合、生産に表示されていないことを警告しました。私は地元に同じ操作を行った場合、杭Vueのは私が驚い警告しています。
ほとんどの開発者と同じように、私は、彼らは単なる警告であることを、コンソールの警告についてはあまり気にしませんでした、とエラーが反映されない場合があり、私は通常、別の場所に集中するようにします。おそらく、警告、私は生産上の問題を解決できることを、私はさらなる研究に各問題を決定し、それらを修正します。
すべてのこれらの警告は、コンポーネントが書き換えの多くを必要とするかもしれないので、Cards.vue I作成したというオプションコンポーネントを表示するには、からです。
私はこれらの警告を解決するために慰めることにしました。
> [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
found in
---> <Cards> at src/components/Cards.vueVue.jsので、我々はより直感的なフレームワークを使用することができ、例えば、V-のために、配列はすぐにリストとして表示することができ、命令の多くを持っています。効果的に再レンダリングコンポーネントへの鍵：あなたはそれを使用すると、我々は必要です。しかし、我々はこれは、このように、このエラーが生じ、非本来の値であり、キーオブジェクトとして使用されます。私はそれが文字列であるので、新しいキーとして使用index.descriptionすることを決めた、との再描画時に値が変化する方が良いかもしれません。
> [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.
found in
---> <Cards> at src/components/Cards.vue：間違いを修正するための文字列（index.description）への主な変更は、我々はこのエラー重複キーを解決することができます。それが私たちの前のキーだったのでそう、そして、我々はレンダリングされたオブジェクトに渡すときに同等の文字列（すなわち、[オブジェクトのオブジェクト]）に変換し、DOMの文字列型を書くことができます各オブジェクトは、（異なる値を有することを除いて）対象オブジェクト]に変換され、したがって、警告重複キーが存在することになります。今キーはオブジェクトではありません、警告が消えますので、効率が改善されます。
> [Vue warn]: You may have an infinite update loop in a component render function.
found in
---> <Cards> at src/components/Cards.vueこれは、この警告が最も重要であると思われる、非常に漠然とした警告です：無限ループ手段メモリ消費こと。このメッセージは、問題が出かもしれないものを教えていませんが、それは関連のレンダリング機能でコンポーネントに問題があることを意味するものではありません。我々はこのように継続的な更新をトリガ、コードが比較的トリッキーで書き、計算能力の多くを取るので、おそらくそれはそんなにので、ブラウザやデバイスがクラッシュすること、です。
これはエラーになり得るような私の最初の考えは、プロパティインスペクタのアセンブリ内反応であるので、この警告は、Cards.vueをチェックするために、少なくともを教えてくれる。再レンダリングするトリガーを変更した後の反応プロパティ。
私たちは、index.descriptionでindex.daysと表示データです。しかし、我々は我々がCARDINFO配列からインデックスを取得し、これらのデータは変更されません。
私たちは、選択するプレーヤーのための表示オプションの後、最初の4つの要素、ランダムな順序で配列要素にこのコードを使用します。ユーザーは、ゲームの状態に影響を与えることに加えて、どのように行動を求める効果（）関数を呼び出すためのオプションをクリックするだけでなく、試作品にステッチを使用することは、最初の4つの要素を削除する場合CARDINFO。
このフレームワークは、仮想のVueのDOMを使用して、このようなデータ属性の値が変更され、再レンダリングをトリガするたびのようなCARDINFO、との反応性をお過ごしください。私たちのアプリケーションでは、我々はそれを直接変更するには、ソート（）のプロトタイプを使用して、再注文の要素を削除します。これらのすべては警告を引き起こし、「無制限」の再レンダリングがトリガされます。
私は、論理的なデータのフィルタリングを変更し、CARDINFOの反応の性質を変更するために何度も停止することを決めました。私はそれがCARDINFOは、名前のリストのコピーを作成し、）（lodash.shuffleをインストールし、計算された属性shuffledListを定義します。私は、ランダムな並べ替え操作を適用し、「凍結」結果を返し、その後、4枚のカードを表示開いて分割します。我々はリターンに私たちをできるようになる、）（Object.freezeを使用ので、再レンダリングが完全にすべての操作を停止し、不変オブジェクト。
これまでのところ、問題が解決されています。
ピットの枠組みの中に落ちました
私は最初のパフォーマンス低下の原因を調査するだけでなく、感じるようになったとき、正直なところ、私は間違いなく問題を解決するために多くの資源を最適化したいです。最後に、結果は多くの抽象化フレームワークを使用した場合、我々は非常に注意する必要があり、ことを示唆している - これは、Vueの中で特にそうである場合にのみ、いくつかの命令を使用する必要があり、彼らは間違いなく自分の価格を持っているので、使用は、間違ってはいけません。
また、私は、アプリケーションがフレームワークとパフォーマンスの問題ので不要であるその中で彼が行っている他の仕事、について考えてしまいました。最近のほとんどのフロントエンドフレームは、我々はそれが簡単にWebアプリケーションのために作ることができるように、抽象化をたくさん持っています。しかし、私たちは心の中でこれらのものを使用すると、潜在的なパフォーマンスの問題につながる可能性がある点を負担する必要があります。
私はこれらの命令を使用する場合、完全に可能性が彼らのアプリケーションもたらすのパフォーマンスに影響を与えると考えられていない前に、私が使用した命令の一部を探求することを決めたので、私はよく、Vue.jsを使用しています。その光景の私のラインに3つの非常に人気のある命令があります。
- V-IF和V-ショー
これらの命令は、条件付きの要素をレンダリングするために使用されるが、使用量が非常に異なっているので、それらの背後にあるメカニズムは、非常に異なっています。V-場合、最初はコンポーネントのレンダリングが、条件が真のレンダリングコンポーネントの場合のみではありません。あなたが繰り返しアセンブリ可視性を切り替えると、再レンダリングし続けることが、この手段。あなたが複数のコンポーネントの可視性を変更したい場合は、この機能を使用しないでください。これは、あなたのパフォーマンスに影響を及ぼします。
V-ショーは良い代替品です。関係なく、あなたのコンポーネントをレンダリングしますCSSを有効にするが、唯一の条件は、コンポーネントが表示されているかどうかを判断するために、真または偽であるかどうかに応じての。それはあなたがそれらを実際に画面に表示される必要がある時間を延期する非必須コンポーネントをレンダリングされませんので、このアプローチは、その欠点を持っています。あなたの最初のレンダリングがそれほど複雑ではありません場合は、それは非常に適切です。
- V-用
この命令は、通常、アレイからリストをレンダリングするために使用されます。これは、リストは、データ・ソースのアレイであり、アイテムは、配列要素の反復にエイリアスされたリスト内のアイテムの形で、特別な構文を有します。デフォルトでは、Vueのは、ソース・データ・アレイ上ウォッチャーを追加、変更するたびにそれが再レンダリングがトリガされます。この定数の再レンダリングアプリケーションのパフォーマンスが悪影響を受ける可能性があります。あなたがオブジェクトを視覚化したい場合は、Object.freeze（）は、パフォーマンスを大幅に向上させることができます良い解決策です。しかし、あなたがコンポーネントまたは編集対象データを更新することができなくなりますことを心に留めておくようにしてください。
私の次の質問は、サーバー上のアプリケーションのパフォーマンスを追跡する方法であるように、この研究の過程で、私は、アプリケーションパフォーマンスのユーザー体験に影響を与えるために、より直接的な方法で確認することが可能灯台、実現しました。
我々は、彼らがベストプラクティスに従うと仮定すると、直感に依存しすぎていない、それは開発者は、彼らが何をしているか知っていることを前提としないのですか？いずれにせよ、この経験は、単一ページのアプリケーションのパフォーマンスは異なる見解を持っていた私に教えてくれました。あなたはGitHubの上で、これらのプロジェクトのリポジトリを表示するだけでなく、Twitterで歓迎と挨拶することができます。
毎日共有するための技術的な専門家を持っている[製品のオンラインクラスのYunqi番号]！
コース住所：https://yqh.aliyun.com/zhiboもちろん、最新の開発の後れを取らないために、顔に専門家の顔をして、コミュニティに参加しましょう！
[Yunqi番号オンライン教室コミュニティ] https://c.tb.cn/F3.Z8gvnK
あなたはこのコミュニティがコンテンツを盗作したことが判明した場合、電子メールを送ってください：レポートに[email protected]、および関連する証拠、一度検証を提供し、このコミュニティは、直ちに侵害コンテンツを削除します。
オリジナルリンク
この記事Yunqiコミュニティのオリジナルコンテンツが許可なく複製することはできません。
