ページの初期ロードポイントのさまざまな問題と解決策

この文章を書く理由

特定のUIコンポーネントを作成する過程で、共通のページの初期ロードの問題は簡単な話題ではないと感じ、忘れられない方法を試みました.それらが正しいとは言い切れませんが、いくつかの解決策をまとめました.

Transition Issue

ステータス値を使用してページを変更する必要があり、これらの変更がtransitionと密接に関連している場合、transitionはtransitionを明確にキャンセルしない限り、ホットな問題です.

公平な解決策

/* 트랜지션 취소 */
.notransition {
  transition: none !important;
}

これは、transitionが明示的に削除され、ある時点で再びtransitionが解放された問題点であるため、transition: none !important;の属性値を持つ.notransitionクラスとDOMContentLoadedイベントを利用して、DOMロード完了時にtransitionが強制的にキャンセルされ、DOMがソースにロードされてから発生した問題である.問題は、時点をloadイベントに分割してtransitionを再び励起することによって解決される.

SetInterval Issue

setIntervalタイミング関数は、初期段階で正しく認識されなかったため、delayの値を有する2番目の引数である.

公平な解決策

  movementTime(); // call immediatly
  setInterval(movementTime, 1000);

そこで,setInervalタイマ関数のコールバック関数を呼び出すことで,この問題を解決した.

FOIT(Flash Of Incorrect Theme) Issue

FOITとは？

レンダリングにトピックを適用すると、既存のトピックが変更され、点滅します.

リファレンス映像

FOITを使用する理由

ページが再ロードされると、JSはlocalStorageから選択したコンテンツを取得して適用しますが、JavaScriptは通常CSSの後に実行されるため、「Flash Of不正なトピック」(FOIT)が表示されます.

に質問

ペアリングとプログラミングの過程で、ユーザが記憶しているダークモード値とシステムを同時にチェックする素子を作成するには、LocalStorageとmatchedMedia()の方法でオペレーティングシステムレベルのダークモードを検出する必要があるが、LocalStorageを使用すると、この問題を解決することは難しい.
私たちが紹介したソリューションの中にはPHPでCookieを使用してサーバ側で解決したものもありますが、JSで解決することは選択されていません.

公平な解決策

公平に議論された結果、DOMが生成され、FOITが管理されるDark modeが追加されたので、レンダリングポイントを理解し、問題を解決するために、classが完全に生成される前に管理されていたDOMファイルをjsドキュメントのHTMLの上部、bodyラベルのscriptツリーに適用し、問題を解決する必要がある.はい.

提案されたソリューション

上記のように解決したが、srcタグの位置まで問題が解決するのは正解ではないと思うので、タペルと講師にアドバイスを求めて、別の方法で問題を解決し、scriptが有効になるまでレンダリング遅延(レンダリング時点を操作するのではなく)で問題を解決しなければならないことを知り、使用できない問題を解決しました.

CSS Font Issue

に質問

これは、レイアウトの計算時に比較的遅い다크 모드のロードに起因し、CSSのロード時にfontの値に調整されたオルガンは、heightの値に間欠的に反する.

公平な解決策

最初にアコーディオンを開いた状態でレンダリングする場合、heightイベントを通常のように使用するのではなく、すべてのCSSリソースを受信した後に発生したDOMCotentLoadedイベントを使用して、loadの競合を解決します.
コメントサイト