ホームページ  >  記事  >  ウェブフロントエンド  >  GitHub は、目に見える AJAX リクエストを使用せずに、どのようにしてシームレスなページと URL の遷移を実現するのでしょうか?

GitHub は、目に見える AJAX リクエストを使用せずに、どのようにしてシームレスなページと URL の遷移を実現するのでしょうか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-24 08:37:09246ブラウズ

How Does GitHub Achieve Seamless Page and URL Transitions Without Visible AJAX Requests?

AJAX を使用せずに、GitHub はどのようにしてページと URL をシームレスに変更しますか?

https://github.com などの GitHub プロジェクト内を移動するとき/insoshi/insoshi、フォルダーをクリックするとサブディレクトリのアニメーションと URL の変更がトリガーされ、錯覚を与えます。 AJAX の使用について。ただし、この驚くほどスムーズな移行は、目に見える AJAX リクエストなしで行われます。

純粋な CSS/JS ですか?それとも高度な最適化ですか?

最初は、その効果は次のようなものであると推測されるかもしれません。洗練された CSS または JavaScript トランジションを通じて実現されます。しかし、詳しく調べると、実際には AJAX ベースの機能であることがわかります。

AJAX Magic Revealed

Firefox で FIREBUG ブラウザ拡張機能を使用すると、AJAX リクエストが行われることを観察できます。 GitHub ディレクトリを移動するときに作成されます。これらのリクエストは更新されたディレクトリ リストを取得し、ページにシームレスにレンダリングされます。

トランジション エフェクトの内訳

トランジション エフェクト自体はスライド アニメーションです。フォルダーをクリックすると、ページがスライドして開き、スムーズな URL 更新とともにサブディレクトリが表示されます。同様のトランジション効果は Web 上で広く使用されており、多数の例がオンラインで入手できます。

つまり、賢いキャッシュやパフォーマンス最適化のトリックのように見えるかもしれませんが、GitHub 上のシームレスなナビゲーションは AJAX を利用して強化されています。シンプルかつ効果的なスライドトランジションエフェクトを備えています。

以上がGitHub は、目に見える AJAX リクエストを使用せずに、どのようにしてシームレスなページと URL の遷移を実現するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。