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 デプロイの詳細なプロセス

推薦する

Vueはログイン時に画像認証コードを実装します

この記事では、Vueログイン用画像認証コードの具体的なコードを例として紹介します。具体的な内容は以下...

スクロールラグの問題を解決するためのオーバーフロースクロールの詳細な説明

序文div またはモジュールに overflow: scroll 属性を使用すると、iOS フォンで...

MySQL のデータ統計に関するヒント

よく使用されるデータベースである MySQL では、多くの操作が必要です。デジタル操作には非常に便利...

MySQL 5.7.22 バイナリパッケージのインストールとインストール不要版 Windows 設定方法

次のコードは、MySQL 5.7.22 バイナリ パッケージのインストール方法を紹介しています。具体...

CSS 背景と境界タグの例の詳細な説明

1. CSS背景タグ1.背景色を設定するbackground-ground-color プロパティは...

ウェブページにプレーヤーを埋め込む埋め込み要素の自動開始が false 無効

最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...

CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...

バランスの取れたデジタルスクロール効果を実現するJavaScript

目次1. 実施の背景2. 実装のアイデア3. 実施プロセス1. 実施の背景先週、ユーザーがタスクを完...

Docker を使用してコンテナ内のルート パスワードを変更する方法

1. dockerfileを作成するときにsshパスワードを設定するには、次のコマンドを使用します。...

MySQL のユーザー権限を照会する方法の概要

MySQLユーザー権限を表示する2つの方法を紹介します1. MySQL grantsコマンドを使用す...

ファイル共有サーバーを構築するための samba + OPENldap の詳細な説明

ここでは、samba (ファイル共有サービス) v4.9.1 + OPENldap (バックエンド ...

Docker Alibaba Cloud RocketMQ 4.5.1 のデプロイプロセスの詳細な説明

検索ミラー docker 検索 rocketmq画像バージョンを表示他の画像を表示したい場合は、画像...

CSS 前景と背景の自動カラーマッチング技術の紹介 (デモ)

1. カラーマッチング効果のプレビュー下の GIF に示すように、ボタンの背景色が徐々に薄くなると...

Vue で video.js を使用して m3u8 形式のビデオを再生する方法

目次1. インストール2. videojsの紹介3. コンポーネントでのテストと使用1. 基本的な自...

JavaScript Alert関数の実行順序の詳細な説明

目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...