##スケルトン画面

最近、プロジェクトで時々スケルトン画面が必要になることがあったので、時間をかけて作ってみました。スケルトンスクリーン計画についての研究です スケルトンスクリーンはこれまでも数多く実践されており、多くの人が独自の解決策を紹介していますが、ここでは私個人の理解に基づいてまとめ、分類し、皆さんに共有したいと思います。

おすすめチュートリアル: 「

ミニ プログラム開発」 「ミニ プログラム ビデオ チュートリアル」

スケルトン画面について(概要)

スケルトン画面は、ページ データがロードされる前にページの一般的な構造をユーザーに表示し、要求されたデータが返された後にページをレンダリングして、必要なデータ コンテンツを補足します。表示される。記事一覧や動的一覧ページなど、比較的定型的な一覧ページによく使われます。

多くのプロジェクトに適用されています。例: Ele.me h5 バージョン、Zhihu、Facebook、その他の Web サイトにアプリケーションがあります。
例として写真を見てみましょう:

2 種類の使用方法

使用方法は導入部で説明されていますが、次のことができます。ポイント:

• は、コンポーネントのライフサイクルと ajax リクエストが返されるタイミングと組み合わせて、スパでのルーティング切り替えの負荷として使用されます。

は、画面レンダリングの最初の最適化として使用されます。

最初の使用タイプ

最初のタイプ使用するには、スケルトン画面を自分で記述する必要があります。成熟していてカスタマイズしやすい 2 つのソリューションをお勧めします。 SVG コンポーネントをスケルトン画面にカスタマイズするためのソリューション

#react-content-loader
vue-content-loader

最初の画面レンダリングとして (自動ソリューション)

このソリューションは、スケルトン画面の実践において Ele.me がまとめたソリューション:

スケルトン画面の dom 構造と CSS は、オフライン生成後に構築されるときに、テンプレートのノードの下に挿入されます。

• #原則関連要素スケルトン画面プラグイン実装原則

• ソリューションのプロジェクト アドレス: page-skeleton-webpack-plugin

• 使用上の注意:

• 1. cssUnitの設定: アダプティブユニットを使用する必要がありますので、ドキュメントに記載されている選択範囲に従って選択してください。 px によって直接生成された比率は不適切になります。

2. Puppeteer は約 80M で、インストール中には不可能になる可能性があります。1 つのダウンロードは成功しました。

原則:

• puppeteer を使用してサーバー上のヘッドレス Chrome を制御し、スケルトン画面を生成する必要がある開発中のページを開きます。ページが読み込まれるまで待ちます。
レンダリングが完了したら、ページ レイアウト スタイルを保持することを前提として、ページ上の要素を削除または追加し、既存の要素をカスケード方式で上書きします。

これにより、ページが変更されなくなります。レイアウトの下で、画像とテキストを非表示にし、それらを覆います。スタイルを変更すると、灰色のブロックとして表示されます。次に、

修正された HTML および CSS スタイルを抽出して、スケルトン画面を作成します。

その他のソリューション

を使用します。 ssr レンダー/プリレンダーと組み合わせて使用します。

スケルトン スクリーン コンポーネントを事前に作成し、ssr レンダー分析を通じて HTML ファイルに挿入します (ただし、自分で記述する必要がある場合を除きます)。プロセスは上記の自動化ソリューションと同様です) 参考記事

• 1 で事前に作成したスケルトン画面コンポーネントは、画像 (svg) に置き換えることも、デザイナーがデザインすることもできます。

• #小さなプログラムのスケルトン画面

プリレンダリングの概念はありませんが、事前に記述することはできます。スケルトン画面コンポーネントを自分で作成してページに配置し、非同期リクエストデータが戻ってくるまで待ち、ページを更新します。

• ## 推奨される関連チュートリアル: 「

  CSS 基本チュートリアル
」 「

PHP をマスターするための入門

」

以上がスケルトンスクリーンとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。