フロントエンドの最適化はこんな感じで最適化できます！ _html/css_WEB-ITnose

2年近くフロントエンドの仕事をしてきたので、仕事で学んだ経験もまとめていきたいと思います。

まず、私の考え方に従ってください。ユーザーが Web ページを開くというアクションは、ブラウザとサーバーという 2 つの主要な要素が関与していると理解できます。

写真に示すように、まずサーバー側について説明します

上の図は、ページ (クライアント) にアクセスするアクションがサーバー側の HTTP であることを示しています。物事を取得しているので、言うのは簡単です、(より適切な比喩を聞いてください)

1: フロントエンドができることは、CDN サービスを使用することだけです。

2 データ対話 (XML TXT よりも何倍も軽い)。数 数 3: 合成画像 CSS JS ファイルの統合など、キャッシュ (Cookie、キャッシュは重要なもので、キャッシュはファイル単位でクライアント内に存在するため、ブラウザの読み込み効率に影響する場合があります) などの数が少ないファイル）

ブラウザとクライアントの関係を見てみましょう。最初に写真を見てみましょう。ブラウザ内のオーバーロード (JavaScript が同時に実行されると、ブラウザは同時に他の操作を実行しないため、ブラウザは実行後もページのレンダリングを続行できます。)、

なので CSS が配置されます頭に配置され、JS が下部に配置されます。

2: リペイント（再描画） リフロー（再フロー） 再描画とは、輪郭色や背景色の変更など、要素の外観は変更されるが、レイアウト（幅と高さ）は変更されない状況です。 リフローとは、DOM の変更が要素の幅と高さに影響を与えることを意味し、これがページのレイアウトに影響を与えることになります。これは、リフローの非効率性の原因でもあります。ウィンドウサイズの変更、テキストサイズの変更、コンテンツの変更など。解決策は、リフローをできる限り回避することです。回避が難しい場合は、要素を固定して絶対的に配置するようにしてください。

3: CSS 効率 ID>クラス>タグ>素晴らしいクラス。これについては多くの説明は必要ありません。

4: DOM 操作。 JS と DOM は 2 つのアイランドとみなすことができます。JS が DOM 要素を操作するたびにブリッジを通過する必要があり、その分ブリッジを通過する回数も多くなり、効率が低くなります。回数を減らしてみてください。さらに、DOM要素を変更します

Used Out Out Out Out Out Out Out Out Out Out Out Out Out Out Out Out Outを使用して使用します。

5: もう一つはクッキーです。誰もがそれを知っています。

まとめると、最適化とはこのようなものだとわかりましたが、私の比喩があまり適切ではないようにいつも感じています。良い比喩があれば、みんなで学び理解できるように教えてください。私の QQ は 523463345 です