トランジションパフォーマンスを表示 – Codepen

先日、私はなぜいくつかのナビゲーションがあるのか​​について神秘化されました 遷移を表示します 私のために働いていませんでした。それは単なるデモであったので、それは大したことではありませんでした。このAPIはクロムのみであり、とにかく進歩的な強化です。しかし、私はその理由を学びました！

私が今それを理解している方法は、ナビゲーションビューの移行です（これらは起こる種類です 間 リンクをクリックして新しいページを読み込む）デフォルトでパフォーマンスを妨げないでください。私は彼らが可能になる可能性があるという誤解の下にありました。

たとえば、ホームページにプレビューブログ投稿「カード」がたくさんあるとしましょう。

Then the actual blog post page has HTML like:




  
  
Lorem ipsum dolar...
  ...
マッチングに注意してください view-transition-name。あなたがサポートするブラウザ（私が書いているようにクロムだけ）を使用していて、あなたがあなたのCSSでこの小さな呪文を行った場合：
@view-transition {
  navigation: auto;
}
今、あなたはそれを見るでしょう 

 card magically and gracefully transform into that 

 ビューのパワートランジション（CSSで完全に制御できます）。 

まあ、多分。
そのビューの動作を見るために（救済するだけでなく、派手なアニメーションがない場合はページの移行だけではありません）、新しい/着信ページはする必要があります 完全にレンダリング 一致する要素 view-transition-name 「最初のペイント」では（ここでは用語が間違っている可能性がありますが、確かではありません）。 
これがパフォーマンスのものが登場する場所です。私はブラウザがするだろうという誤解の下にありました 待って 一致する要素があるかどうかを把握します view-transition-names新しい/着信ページで、ビューの遷移が確実に発生するようにします。しかし、それは待たないでしょう！ページは常に/迅速にページをロードします。もしそうなら、一致する完全に塗装された要素があります view-transition-name、それを行います、もしそうでない場合、またはそれがまだ1つのレンダリングを見つけたり終了していない場合、それは保釈されます。 
それは良いことだと思いますか？ 
これ以上のパフォーマンスフットガンは必要ありません。これはすべて、レンダリングブロッカーになるのが簡単なようです。 
私に 小さなテストページのこと、私はビューの移行が50％の時間で起こるのを見ていました（今では、私がテストすると、5％の時間のように感じられます）。それは私には理にかなっています。私はここで画像をレンダリングしていましたが、たぶん彼らはその最初のペイントを時々、またはほとんどの時間さえ作っていないので、ビュー遷移は保釈されます。 
しかし、誰が50％以下の時間を実行する見解的な移行に取り組みたいのでしょうか？それはただ…奇妙ですか？ 
答えはレンダリングブロッキングにあるようです。レンダリングブロッキングは悪いように聞こえますが、それはちょっとそうですが、私たちはそれにかなり定期的にさまざまなものを頼っています。 JavaScript-Frameworkサイトをクライアント側にレンダリングしている場合は、本質的にブロックしています。一度にファッショナブルだった不定期のフラッシュテキストを避けるために、ブロックをレンダリングする場合があります。あらゆる種類のコンテンツのシフトを避けるためにブロックをレンダリングする場合があります。 
これで、ビュートランジションのためにブロックをレンダリングする可能性があります。なぜなら、ビュートランジションを機能させる必要があるからです。 答え、今のところ、  のように：

これはIDベースなので、レンダリングブロッキング要素として動作する要素にIDを配置する必要があります。少し面倒ですが、わかりました。ある時点で属性を持って要素自体でこれを行うことができるかもしれないと聞いたことがあります。 
これが答えであることを伝えたいと思います。もしあなたがそれを正しく行えば、あなたは毎回動作するナビゲーションビューの移行を持っていますが、私はそれを試してみましたが、それは私にとってはうまくいかなかったようです。私は何か間違ったことをしていると思いますので、それが何であるかを学ぶなら、そのデモを修正します。 

このレンダリングブロッキングのものについてもっと興味があるなら、ハリー・ロバーツには良いものがあります なぜそうするの？ 役職。これは、私のポケットに穴を燃やすパフォーマンス関連のリンクをいくつか紹介します。