IE 環境での css-vars-ponyfill の使用に関する詳細な説明 (nextjs ビルド)

IE 環境での css-vars-ponyfill の使用に関する詳細な説明 (nextjs ビルド)

css-vars-ポニーフィル

CSS 変数を使用して Web ページのスキニングを実現すると、互換性の問題が発生する可能性があります。

IE、QQ、Baiduブラウザなどの互換性問題を解決するために、css-vars-ponyfillが導入されました。しかし、IEブラウザでは、css-vars-ponyfillはnextjsでのパフォーマンスが低下します。主な欠陥は、ページがサーバー側でレンダリングされるため、ユーザーがインターフェイスを見た後、動的なテーマカラーやその他のスタイルをすばやくレンダリングできず、遷移時間があり(css-vars-ponyfillはクライアント側のみをサポート)、明らかな色の置き換えプロセスが発生し、ユーザーエクスペリエンスが低下します。ソース コードを読むと、cssVars はブラウザー コンテンツが読み込まれるまで待機してからトリガーされる必要があることがわかります。そうしないと、dom のデータ コンテンツ イベントをリッスンし続けることになり、エクスペリエンス上の問題が発生します。

解決

1. 解析速度

document.readyState !== 'loading'の制約条件を直接削除することで、ブラウザはそれを解析し、css-vars-ponyfill の導入方法を変更することができます (以前の導入方法は、nextjs の mainjs にモジュールを導入し、cssVars() を直接呼び出すことでした。この方法では、ponyfill スクリプトを呼び出す前に、他の無関係なチャンクが解析されます。css 変数をより速く解析するには、挿入位置を手動で選択する必要があります)。変更された css-vars-ponyfill は、css 変数の場所を見つけ (nextjs はヘッダー内のさまざまなコンポーネントの下にスタイルをパッケージ化します)、変更された ponyfill を呼び出し用のスタイルに挿入します。この手順は、サーバー上でレンダリングされる_document.tsxファイルで変更されます。

2. 分析の安定性

ファイルの解析場所を手動で変更し、ソースコードの条件トリガーメカニズムに関連する変更を加えることで、ホームページのカラーレンダリング速度がある程度向上しました。しかし、まだ問題があります。つまり、ルートジャンプインターフェースを通じて新しいスタイルチャンクが挿入されると、効果的な CSS 変数解析が実行できません (MutationObserver をオンにするために cssVars オプションを設定しようとしました)。

したがって、解決策は、IE などのブラウザー内のすべてのルートを a タグを介してリダイレクトし、css-ponyfill の再解析と実行をトリガーできるように UA を決定することです。

エクスポート関数ブラウザ() {
  定数 UA = window.navigator.userAgent
  if (UA.includes("qqbrowser")) は "qqbrowser" を返します
  if (UA.includes("baidu")) は "baidu" を返します
  if (UA.includes("Opera")) は "Opera" を返します
  if (UA.includes("Edge")) は "Edge" を返します
  (UA.includes("MSIE") || (UA.includes("Trident") && UA.includes("rv:11.0")) の場合
    「IE」を返す
  if (UA.includes("Firefox")) は "Firefox" を返します
  if (UA.includes("Chrome")) は "Chrome" を返します
  if (UA.includes("Safari")) は "Safari" を返します
}
タイプ CommonLinkProps = {
    子: ReactElement
    href?: 文字列
    ターゲット?: 文字列
    アウターリンク?: ブール値
    スタイル: 不明
}
デフォルトの関数 CustomLink(props: CommonLinkProps) をエクスポートします。
  const { children, href, target, as, outerLink, styles = emptyStyles } = props
  const [isIE, setIE] = useState<boolean>(false)
  const cloneEl = (c: ReactElement、props?: any) =>
    React.cloneElement(c, { href: ?? href, target, ...props }) の複製
  使用効果(() => {
    if (["IE", "qqbrowser", "baidu"].includes(browser())) {
      IEをtrueに設定する
    }
  }, [])
  関数renderLink() {
    (Children.only(children).type === "a")の場合{
      const ノード = cloneEl(ReactElement の子)
      戻りノード
    } それ以外 {
      fn: () => void | null = null とします
      if (アウターリンク) {
        関数 = () => {
          window.open(?? href として)
        }
      } それ以外 {
        関数 = () => {
          window.location.href = ??href として
        }
      }
      const node = cloneEl(children as ReactElement, {
        クリック時: () => {
          関数()
        },
      })
      戻りノード
    }
  }

  戻る (
    <>
      {!href ? (
        子供たち
      ) : isIE ? (
        レンダリングリンク()
      ) : (
        <リンク {...props}>{children}</リンク>
      )}
      <style jsx>{スタイル}</style>
    </>
  )
}

ここで、 children の型は、スロットで通常サポートされているReactNodeではなく、 ReactElementです。これは主に、文字列を直接挿入する状況を考慮したくないためです。文字列を直接挿入すると、問題の複雑さが増します。したがって、型レベルで直接制限します。フラグメントは考慮されず、有効なフラグメントタイプが見つからないため、ReactNode で省略できません。フラグメントが最初のレイヤーに挿入されると、nextjs 内のリンクが正常にジャンプできません。フラグメントに有効なイベントをバインドできないことが原因である可能性があります。現在、フラグメント (16.13.1) はキー属性のみをサポートしています。後で最適化されることを期待しています。

要約する

IE 環境 (nextjs ビルド) での css-vars-ponyfill の使用に関する記事はこれで終了です。より関連性の高い css-vars-ponyfill の使用コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  JS 内の Json 文字列 + Cookie + ローカルストレージ

>>:  Docker での FastAPI デプロイの詳細なプロセス

推薦する

JavaScript シングルスレッドと非同期の詳細

目次1. タスクキュー2. 混乱を招く問題を説明する1. setTimeout(f1,0)とは何です...

JavaScript キャンバスは影付きのグラフィックとテキストを実装します

キャンバスを使用して、参照用の影付きのグラフィックとテキストを作成します。具体的な内容は次のとおりで...

WeChatミニプログラムページとコンポーネント間の情報伝達と機能呼び出し

今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。ページからコンポーネントにデー...

jQuery プロジェクトで重複送信を防ぐ方法

新しいプロジェクトでは、axios によって重複した送信を防ぐことができますが、古いプロジェクト (...

Linux CentOS 7.4 で mysql5.7.20 のパスワードを変更する方法

MySQL がバージョン 5.7 にアップグレードされた後、セキュリティが大幅に向上しました。しかし...

HTML チュートリアル: よく使われる HTML タグのコレクション (5)

関連記事:初心者が学ぶ HTML タグ (4)導入された HTML タグは、必ずしも XHTML 仕...

MySQL で複数の主キーが定義されているエラーの解決方法

主キーを作成するには 2 つの方法があります。 テーブルテーブル名を作成( フィールド名タイプ、 フ...

CSS3 での 2D および 3D 変換の実装

CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...

Linux redis-Sentinel 設定の詳細

ダウンロードダウンロードアドレス: https://redis.io/download /usr/l...

lnmp を使用して MySQL データベースのルート パスワードをリセットする 2 つの方法

最初の方法: Junge のワンクリック スクリプトを使用して、LNMP 環境で MYSQL データ...

js 実行コンテキストとスコープの概要

目次序文文章1. JavaScriptコードの実行プロセスに関連する概念2. 実行コンテキストと実行...

winx64 での mysql5.7.19 の基本的なインストール プロセス (詳細)

1. ダウンロード参考: https://www.jb51.net/softs/451120.ht...

Vue+ElementUI はページング関数を実装します - mysql データ

目次1. 問題2. 解決策2.1 ページングコンポーネント2.2 データベースデータを取得する関数:...

MYSQL メタデータ ロック (MDL ロック) MDL ロックの問題分析

1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...

MySQLとRedisでセカンダリキャッシュを実装する方法の詳細な説明

Redis の紹介Redis は完全にオープンソースで無料であり、BSD プロトコルに準拠しており、...