[VUE] VU2プロジェクトの写真とビデオの読み込みが遅い/最初の画面で白い画面が読み込まれる問題を解決

開発 2023-07-18 17:39:27 訪問数: null

1 問題の説明

フロントエンドプロジェクトでは、写真やビデオの読み込みが遅い、最初の画面で白い画面が読み込まれるなどの問題が発生することがあります。

以前に VU3 プロジェクトでソリューションを書きましたが、

Vue2 プロジェクトのソリューションについて話しましょう。メソッドの考え方は似ていますが、コード例にはいくつかの小さな違いがあります。

2 理由分析

通常、次のことが原因で発生します。

  1. 不適切な画像またはビデオ形式: ロスレス圧縮形式など、画像またはビデオ形式が適切に選択されていない場合、ファイル サイズが大きすぎる可能性があり、読み込み速度に影響します。

  2. 大量の写真やビデオが同時にページに読み込まれるため、リクエストが多すぎてネットワーク伝送速度が制限され、ページの読み込み速度に影響します。

  3. ページ上の写真やビデオは、圧縮されていない、CDN によって高速化されていないなど、最適化されていません。

  4. ページのHTML、CSS、JavaScript コードが最適化されていない(パッケージ化に Webpack を使用していない、コード分割テクノロジを使用していないなど) ため、ページの読み込み時間が長すぎます。

  5. ページ上の画像とビデオは遅延読み込みテクノロジを使用していないため、一度にページに読み込まれるリソースが多すぎて、ページの読み込みが遅くなります。

  6. ネットワークの遅延、帯域幅の制限など、ネットワークの状態が悪いと、画像やビデオの読み込みが遅くなる可能性があります。

  7. サーバーの応答時間が長すぎる: サーバーの応答時間が長すぎると、ページがリソースを要求する時間が遅くなり、ページの読み込み速度に影響します。

  8. 不安定なサードパーティ ライブラリが使用されている: 不安定なサードパーティ ライブラリまたはコンポーネントを使用すると、ページの読み込み速度が遅くなる可能性があります。

  9. 不適切なブラウザ キャッシュ ポリシー: ブラウザ キャッシュ ポリシーが適切に設定されていない場合、ブラウザが繰り返しリソースを要求し、ページの読み込み速度に影響を与える可能性があります。

  10. 厳格なネットワーク セキュリティ ポリシー: ネットワーク セキュリティ ポリシーが比較的厳格な場合、ブラウザがリソースを要求するときにいくつかの制限に遭遇する可能性があり、ページの読み込み速度に影響を与える可能性があります。

したがって、Vue2 プロジェクトを開発するときは、ページの読み込み速度を向上させ、読み込みの遅さや白さなどの問題を回避するために、画像やビデオの最適化、リクエスト数の削減、遅延読み込みテクノロジの使用、コードの最適化などに注意を払う必要があります。最初の画面で画面をロードします。

3つの解決策

写真やビデオの読み込みが遅く、最初の画面に白い画面が表示される問題は、通常、次の側面から解決できます。

  1. 写真とビデオの最適化
  2. 遅延読み込み
  3. スケルトン画面
  4. コードの最適化

3.1 写真とビデオの最適化

画像圧縮や動画圧縮などの技術によりファイルサイズを小さくし、読み込み速度を向上させることができます。同時に、CDN アクセラレーションを使用してリソースの読み込みを高速化することもできます。

始める方法は次のとおりです。

  1. 写真やビデオを圧縮する
  2. 適切な画像またはビデオ形式を選択してください
  3. 画像またはビデオ CDN で高速化する
  4. 遅延読み込みテクニックを使用する

3.1.1 写真またはビデオの圧縮

画像またはビデオ圧縮ツールを使用して、ファイル サイズを適切なサイズに圧縮できます。写真の場合は、オンライン画像圧縮ツールまたは Photoshop などの画像編集ソフトウェアを使用して圧縮でき、ビデオの場合は、HandBrake などのビデオ圧縮ソフトウェアを使用して圧縮できます。

圧縮ツールの推奨事項

以下に、一般的に使用されるオンライン画像圧縮ツールをいくつか示します。

TinyPNG は、画質に影響を与えることなく PNG および JPEG 画像を適切なサイズに圧縮できる無料のオンライン画像圧縮ツールです。

Compressor.io は、JPEG、PNG、SVG、GIF などの形式で画像を圧縮できる無料のオンライン画像圧縮ツールです。画質を損なうことなく、画像をより小さいサイズに圧縮します。

Kraken は、JPEG、PNG、GIF などの形式で画像を最小のファイル サイズに圧縮できるオンラインの画像最適化および圧縮サービスです。Kraken は、プロジェクトに簡単に統合できる API インターフェイスも提供します。

ImageOptim は、JPEG、PNG、GIF などの形式で画像を自動的に圧縮し、画像からメタデータや不要な情報を自動的に削除してファイル サイズを削減する、無料の画像最適化ツールです。

3.1.2 適切な画像またはビデオ形式を選択する

適切な画像またはビデオ形式を選択すると、ファイル サイズを小さくすることもできます。たとえば、写真の場合は JPEG または WebP 形式を選択でき、ビデオの場合は H.264 または H.265 形式を選択できます。

3.1.3 画像またはビデオ CDN を使用して高速化する

画像またはビデオ CDN アクセラレーションを使用して、画像またはビデオ リソースを世界中の CDN ノードに配布することで、リソースの送信速度が向上し、ページの読み込み速度が向上します。

実行計画

画像またはビデオの CDN アクセラレーションを使用すると、Web サイトのアクセス速度とユーザー エクスペリエンスが大幅に向上します。いくつかの実装方法を紹介します

1 URLを手動で置き換えます 

この方法は簡単ですが、各 URL を手動で置き換える必要があり、URL が変更された場合には置き換える必要があります。

<img src="https://cdn.example.com/images/logo.png">
<video src="https://cdn.example.com/videos/teaser.mp4"></video>
2 Webpackプラグインの使用

Webpack では、URL を自動的に置き換えるプラグインがいくつかあります。たとえば、 url-loader 指定したサイズより小さい画像を Base64 エンコードに変換し、指定したサイズより大きい画像を出力ディレクトリにコピーして、CDN 上の URL に置き換えることができます。html-webpack-plugin HTML ファイル内のローカル リソースを CDN 上の URL に置き換えることができます。

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'images/[name].[hash:8].[ext]',
                  publicPath: 'https://cdn.example.com/'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
        options: {
          sources: {
            list: [
              {
                attribute: 'src',
                type: 'src',
                tag: 'img'
              },
              {
                attribute: 'src',
                type: 'src',
                tag: 'video'
              }
            ],
            urlFilter: (attribute, value, resourcePath) => {
              // 只处理本地资源
              return !/^(https?:)?\/\//i.test(value);
            }
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css'
    })
  ]
  // ...
};

この例では、

`url-loader` と `html-loader` が使用され、`publicPath` 属性が `fallback` オプションに設定されて CDN 上の URL を指定します。

`html-loader` では、`sources` オプションを使用して、置換する必要があるローカル リソースを指定します。`HtmlWebpackPlugin` と `MiniCssExtractPlugin` は、HTML および CSS ファイルを生成するために使用されます。

3 サードパーティライブラリの使用

一部のサードパーティ ライブラリは、URL の自動置換に役立ちます。たとえば、  vue-loader Vue コンポーネントの画像とビデオの URL を CDN の URL に置き換えることができます。vue-lazyload 画像は遅延ロードでき、URL は自動的に置き換えられます。

// main.js
import Vue from 'vue';
import App from './App.vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'https://cdn.example.com/images/error.png',
  loading: 'https://cdn.example.com/images/loading.gif',
  attempt: 1,
  observer: true,
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  },
  filter: {
    progressive: (listener, options) => {
      // 过滤器，用于处理渐进式图片
      const isCDN = /^https?:\/\/cdn\.example\.com\//i.test(listener.src);
      if (isCDN) {
        options.adapter(listener, options);
      } else {
        listener.el.setAttribute('data-src', listener.src);
      }
    }
  }
});

new Vue({
  render: h => h(App)
}).$mount('#app');
```

在这个示例中，我们使用了 `vue-lazyload`，并设置了一些选项来指定 CDN 上的 URL。在过滤器中，我们使用了正则表达式来判断图片是否在 CDN 上，并根据需要将图片 URL 替换为 `data-src` 属性，以便 `vue-lazyload` 可以正确地处理。

上記 3 つの方法はいずれも CDN を使用して画像やビデオを高速化するために使用でき、プロジェクトの特定の条件に応じて具体的な実装方法を選択して組み合わせることができます。

3.1.4 遅延読み込みテクノロジーの使用

遅延読み込みテクノロジーを使用すると、ユーザーがアクセスする必要があるまで写真やビデオの読み込みを遅らせることができます。これにより、ページが一度に多すぎるリソースを要求することが減り、ページの読み込み速度が向上します。

実行計画

Vue 2 プロジェクトでは、遅延読み込みテクノロジを使用してコンポーネントの読み込みを遅らせ、最初の画面の読み込み時間を短縮し、ページのパフォーマンスを向上させることができます。Vue 2 遅延読み込みテクノロジの使用方法は次のとおりです。

Vue Router による遅延読み込み

Vue Router は、コンポーネントを遅延ロードし、必要に応じてコンポーネントを動的にロードする簡単な方法を提供します。ルーティング設定で component: () => import('@/views/Home.vue') フォームを使用するだけで、コンポーネントを遅延ロードできます Home.vue 。

「」

この例では、`import()` メソッドを使用して、`Home.vue` コンポーネントと `About.vue` コンポーネントを動的に読み込みます。

// router.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue')
    }
  ]
});
Webpack による遅延読み込み

Webpack では、 require.ensure() または import() メソッドを使用して遅延読み込みを実現できます。require.ensure() モジュールは必要に応じて非同期的にロードでき、import() メソッドは ES6 モジュールを非同期的にロードできます。

「」

この例では、`import()` メソッドを使用して、`About.vue` コンポーネントを非同期的に読み込み、読み込み後にレンダリングします。
 

// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

// 异步加载 About 组件
const loadAbout = () => {
  return import(/* webpackChunkName: "about" */ './About.vue');
};

// 异步加载 About 组件并渲染
loadAbout().then(About => {
  new Vue({
    el: '#about',
    render: h => h(About)
  });
});

上記の 2 つの方法は、Vue 2 の遅延読み込みテクノロジを実現することができ、プロジェクトの特定の条件に応じて、具体的な実装方法を選択して組み合わせることができます。遅延読み込みによりコードの複雑さが増すため、実際の状況に応じて考慮する必要があることに注意してください。

 

3.2 遅延読み込み

遅延読み込みテクノロジーを使用すると、ユーザーがアクセスする必要があるまで写真やビデオの読み込みを遅らせることができるため、一度にページに読み込まれる過剰なリソースが削減され、最初の画面の読み込み速度が向上します。

遅延読み込みテクノロジーを使用して画像とビデオの遅延読み込みを実装する方法は次のとおりです。

使用 Intersection Observer API

使用 Intersection Observer API

Intersection Observer API は、指定された要素がビューポートに入ったかどうかを監視して、コールバック関数をトリガーできる新しいブラウザ API です。

画像またはビデオの読み込み操作は、画像またはビデオ要素がビューポートに入ったかどうかを監視することによってトリガーできます。

使用例 

以下は、Intersection Observer API を使用して画像の遅延読み込みを実装する Vue 2 サンプル コードです。

<template>
  <div>
    <div class="image-container" v-for="image in images" :key="image.id">
      <img v-if="image.show" :src="image.src" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        {
          id: 1,
          src: "https://example.com/image1.jpg",
          show: false
        },
        {
          id: 2,
          src: "https://example.com/image2.jpg",
          show: false
        },
        {
          id: 3,
          src: "https://example.com/image3.jpg",
          show: false
        },
        {
          id: 4,
          src: "https://example.com/image4.jpg",
          show: false
        }
      ]
    };
  },
  mounted() {
    // 创建 Intersection Observer 实例
    const observer = new IntersectionObserver(entries => {
      // 遍历 IntersectionObserverEntry 数组
      entries.forEach(entry => {
        // 如果元素出现在视口中
        if (entry.isIntersecting) {
          // 将图片的 show 属性设置为 true，触发图片加载
          const image = this.images.find(img => img.id === Number(entry.target.dataset.id));
          if (image) {
            image.show = true;
          }
          // 停止观察该元素，节省性能
          observer.unobserve(entry.target);
        }
      });
    });

    // 观察所有图片容器元素
    const imageContainers = document.querySelectorAll('.image-container');
    imageContainers.forEach(container => {
      observer.observe(container);
    });
  }
};
</script>

<style>
  .image-container {
    height: 300px;
    margin-bottom: 20px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
</style>

この例では、Intersection Observer API を使用して各イメージ コンテナー要素を監視し、それらがビューポートに表示されたら、対応するイメージの show プロパティを true に設定してイメージの読み込みをトリガーします。

同時に、パフォーマンスを節約するために、ビューポート内にすでに存在する要素の観察も停止します。

サードパーティのライブラリを使用する

Intersection Observer API の使用に加えて、いくつかのサードパーティ ライブラリを使用して画像やビデオの遅延読み込みを実装することもできます。

LazyLoad、Lozad.js、LazyLoad-xt など。これらのライブラリは、遅延読み込み効果をより速く実現でき、遅延読み込みのトリガー条件やアニメーション効果など、より多くの構成オプションを提供します。具体的な使用方法については公式ドキュメントを参照してください。

使用例

もちろん、これは LazyLoad ライブラリを使用して画像の遅延読み込みを実装する Vue 3 の例です。

LazyLoad ライブラリをインストールしてインポートする

以下は、LazyLoad ライブラリを使用して画像の遅延読み込みを実装する Vue 2 サンプル コードです。

まず、LazyLoad ライブラリをインストールしてインポートする必要があります。

npm install vanilla-lazyload --save

import LazyLoad from 'vanilla-lazyload';
LazyLoad インスタンスを作成する 

コンポーネントのマウントされたフック関数で、LazyLoad インスタンスを作成し、構成オブジェクトを渡します。

<template>
  <div>
    <div class="image-container" v-for="image in images" :key="image.id">
      <img :data-src="image.src" />
    </div>
  </div>
</template>

<script>
import LazyLoad from 'vanilla-lazyload';

export default {
  data() {
    return {
      images: [
        {
          id: 1,
          src: "https://example.com/image1.jpg",
        },
        {
          id: 2,
          src: "https://example.com/image2.jpg",
        },
        {
          id: 3,
          src: "https://example.com/image3.jpg",
        },
        {
          id: 4,
          src: "https://example.com/image4.jpg",
        }
      ]
    };
  },
  mounted() {
    // 创建 LazyLoad 实例
    const lazyLoadInstance = new LazyLoad({
      threshold: 0,
      // 指定要进行懒加载的元素
      elements_selector: "img[data-src]"
    });
  }
};
</script>

<style>
  .image-container {
    height: 300px;
    margin-bottom: 20px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
</style>

この例では、LazyLoad ライブラリを使用して画像の遅延読み込みを実装します。

  1. まず、各イメージの実際のアドレスを  属性data-src ではなくカスタム プロパティ に保存します。src
  2. 次に、コンポーネントのマウントされたフック関数で、LazyLoad インスタンスを作成し、構成オブジェクトを渡します。ここで、属性は threshold 要素と表示領域の間の距離を指定し、elements_selector 属性は遅延ロードされる要素を指定します。
  3. src 最後に、画像の属性を template 内の属性に 置き換えますdata-src 。これにより、画像が表示領域に入ると、LazyLoad ライブラリが data-src 属性の値を src 属性に自動的に割り当て、画像の読み込みをトリガーします。

3.3 スケルトン画面

スケルトン スクリーンは、ページ読み込み中にアンロードされたコンテンツの代わりに単純な灰色のフレームを表示できるページ読み込み最適化テクノロジです。スケルトン画面はユーザー エクスペリエンスを向上させ、ページの読み込みが速くなったとユーザーに感じてもらい、ユーザーの不安を軽減することもできます。

Vue 2 では、vue-skeleton-webpack-plugin、vue-content-loader、vue-loading-skeleton など、一部のサードパーティ ライブラリを使用してスケルトン画面効果を実現できます。

3.3.1 Vue 2 で vue-content-loader を使用してスケルトン画面効果を実現するにはどうすればよいですか?

vue-content-loader スケルトン画面効果を実現するための Vue.js コンポーネント ライブラリです。事前定義されたさまざまな SVG 形状が提供されており、スケルトン画面テンプレートを迅速に生成し、色、サイズ、アニメーションなどをカスタマイズできます。

Vue 2 で vue-content-loader スケルトン スクリーン エフェクトを実装する手順は次のとおりです。

以下は、vue-content-loader を使用して Vue 2 でスケルトン画面効果を実現する手順です。

1. vue-content-loader ライブラリをインストールします

npm install vue-content-loader --save

2. vue-content-loader ライブラリをコンポーネントにインポートします

import ContentLoader from 'vue-content-loader';

テンプレートで ContentLoader コンポーネントを使用します。

この例では、ContentLoader コンポーネントがルート要素として使用され、幅と高さのプロパティが設定されます。ContentLoader コンポーネントの子要素は SVG 四角形要素で、その x、y、rx、ry、width、height プロパティはすべて必要に応じて設定されます。

必要に応じて子要素を追加して、より複雑なスケルトン画面効果を実現できます。たとえば、線形グラデーション、放射状グラデーション、アニメーションなどの機能を使用して、スケルトン画面をより鮮やかに見せることができます。

<template>
  <div>
    <ContentLoader :width="400" :height="300">
      <rect x="0" y="0" rx="5" ry="5" :width="400" :height="300" />
    </ContentLoader>
  </div>
</template>

ContentLoader コンポーネントのプロパティを動的に設定する

必要に応じて、コンポーネント内で props を定義して、ContentLoader コンポーネントのプロパティを動的に設定できます。例えば：

この例では、2 つのプロパティの幅と高さが定義されており、それぞれ ContentLoader コンポーネントの幅と高さを設定します。

コンポーネントの使用時にこれらのプロパティが渡されない場合は、デフォルト値の 400 と 300 が使用されます。

<template>
  <div>
    <ContentLoader :width="width" :height="height">
      <rect x="0" y="0" rx="5" ry="5" :width="width" :height="height" />
    </ContentLoader>
  </div>
</template>

<script>
import ContentLoader from 'vue-content-loader';

export default {
  components: {
    ContentLoader
  },
  props: {
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 300
    }
  }
};
</script>

以上が Vue 2 で vue-content-loader を使用してスケルトン画面効果を実現する手順です。vue-content-loader を使用すると、スケルトン画面効果をすばやく簡単に作成して、ユーザー エクスペリエンスを向上できます。

3.3.2 vue-skeleton-webpack-pluginを使用したスケルトン画面の実装例

vue-skeleton-webpack-plugin これは、パッケージ化プロセス中にスケルトン画面テンプレートを生成し、それを HTML ファイルに自動的に挿入するのに役立つ Webpack プラグインです。

以下は vue-skeleton-webpack-plugin スケルトン画面の使用例です。

以下は、vue-skeleton-webpack-plugin を使用して Vue 2 でスケルトン画面を実装する例です。

1. vue-skeleton-webpack-plugin をインストールします

npm install vue-skeleton-webpack-plugin --save-dev

2. vue-skeleton-webpack-plugin を webpack 設定ファイルに追加します

const VueSkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new VueSkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: './src/entry-skeleton.js'
        }
      },
      router: {
        mode: 'history',
        routes: [
          { path: '/', skeletonId: 'home' },
          { path: '/about', skeletonId: 'about' }
        ]
      },
      minimize: true,
      quiet: true
    })
  ]
  // ...
};

この例では、VueSkeletonWebpackPlugin のインスタンスが作成され、いくつかの構成オブジェクトが渡されます。

の、

  • `webpackConfig` 属性はエントリ ファイルを `./src/entry-skeleton.js` として指定します。
  • `router`属性は、ルートとスケルトン画面に対応するスケルトン画面IDを指定します。
  • 「minimize」プロパティはコード圧縮を有効にします。
  • 「quiet」属性はログ記録を抑制します。

3.entry-skeleton.js ファイルを作成します

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App, { props: { isSkeleton: true } })
}).$mount('#app');

この例では、Vue インスタンスが作成され、「isSkeleton」属性が App コンポーネントに渡されて、コンポーネント内でスケルトン画面モードであるかどうかが判断されます。

4. コンポーネント内でスケルトン部分コンポーネントを使用する

<template>
  <div>
    <skeleton id="home">
      <div class="home-page">
        <!-- 这里是首页的真实内容 -->
      </div>
    </skeleton>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  components: {
    skeleton: () => import('vue-skeleton-webpack-plugin/lib/client/skeleton')
  },
  props: {
    isSkeleton: Boolean
  }
};
</script>

この例では、

`import('vue-skeleton-webpack-plugin/lib/client/skeleton')` を使用してスケルトン部分コンポーネントをインポートし、それをテンプレートで使用して実際のコンテンツをラップします。

スケルトン画面モードかどうかを決定するための「isSkeleton」属性も定義されています。

スケルトン ローカル コンポーネントの導入は関数として記述する必要があることに注意してください。これは、スケルトン画面モードでは、スケルトン コンポーネントが通常のコードにパッケージ化されず、実行時に vue-skeleton-webpack-plugin によって動的に挿入されるためです。

3.4 コードの最適化 

コードを最適化するときは、パフォーマンス、可読性、保守性など、複数の側面を包括的に考慮する必要があります。

以下に、一般的なコード最適化方法とその結果生じる問題をいくつか示します。

  1. 遅延読み込み/オンデマンド読み込み
  2. キャッシュメカニズム
  3. コードの圧縮とマージ
  4. その他の最適化方法

3.4.1 遅延ロード/オンデマンドロード

遅延読み込み/オンデマンド読み込みとは、初期読み込み時間とネットワーク リクエストの数を削減し、ページのパフォーマンスを向上させるために、必要になるまでページまたはモジュールの読み込みを延期することを指します。ただし、遅延読み込み/オンデマンド読み込みを使用すると、次の問題が発生する可能性があります。

  • 最初の読み込み時、ユーザーはページのコンテンツを表示するまでに長く待たなければならない場合があります。
  • オンデマンドで読み込まれるモジュールが多すぎると、過剰なネットワーク リクエストが発生し、ページの読み込みが遅くなる可能性があります。
  • 遅延/オンデマンドで読み込まれるコードは複雑さを増し、コードの可読性と保守性を低下させる可能性があります。

3.4.2 キャッシュのメカニズム

キャッシュ メカニズムとは、ネットワーク リクエストの数を減らし、ページのパフォーマンスを向上させるために、クライアント上の一部の静的リソース (画像、CSS、JS など) をキャッシュすることを指します。ただし、キャッシュ メカニズムを使用すると、次の問題が発生する可能性があります。

  • キャッシュ時間が長すぎると、最新のコンテンツが表示されない可能性があります。
  • キャッシュ時間が短すぎると、ユーザーがリソースを頻繁に再要求し、ページのパフォーマンスが低下する可能性があります。
  • キャッシュ メカニズムはサーバーとクライアントにさらなる負担を課し、サーバーとクライアントのオーバーヘッドを増加させる可能性があります。

3.4.3 コードの圧縮と統合

コードの圧縮とマージとは、ファイル サイズを削減し、ページのパフォーマンスを向上させるために、複数の JS または CSS ファイルを 1 つのファイルに圧縮し、スペースやコメントなどの無関係な文字を削除することを指します。ただし、コードの縮小とマージを使用すると、次の問題が発生する可能性があります。

  • 圧縮および結合されたファイルが大きすぎる場合、ファイルのダウンロード時間が長くなり、ページのパフォーマンスに影響を与える可能性があります。
  • コードの圧縮とマージにより、複雑さが増し、コードの可読性と保守性が低下する可能性があります。
  • 圧縮および結合されたファイルの柔軟性が十分でない場合、さまざまなページをカスタマイズおよび最適化できなくなる可能性があります。

3.4.4 その他の最適化方法

上記の方法に加えて、より効率的なアルゴリズムやデータ構造の使用、再描画とリフローの削減、画像のサイズと形式の最適化など、他のコード最適化方法もいくつかあります。これらの最適化手法の効果や問題点も異なるため、状況に応じて選択し、評価する必要があります。

要約すると、コードの最適化では、パフォーマンスの追求だけでなく、コードの品質とユーザー エクスペリエンスのバランスを確保するために、コードの可読性や保守性など、複数の側面を包括的に考慮する必要があります。

3.4.5 例

以下は、Vue 2 プロジェクトで最初の画面ロード時のブランクを解決する比較例です。

最適化前のサンプルコード:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/static/js/vendor.js"></script>
    <script src="/static/js/app.js"></script>
  </body>
</html>

JavaScript

コピー

// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

この例では、最適化措置を講じず、Vue アプリを #app 要素に直接レンダリングしました。この方法では、ページを表示する前にブラウザが vendor.js 2 つの app.js ファイルをダウンロードして解析する必要があるため、ページが最初に読み込まれるときに空白のページが表示されます。

最適化されたサンプルコード:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Vue App</title>
    <script>
      window.__INITIAL_STATE__ = {}
    </script>
    <script src="/static/js/vendor.js" defer></script>
    <script src="/static/js/app.js" defer></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>


// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

この例では、次の最適化が使用されます。

  • vendor.js 両方の app.js ファイル のプロパティdefer を に 設定し true、ダウンロードによってページのレンダリングがブロックされないことを示します。
  • ラベルに head 空のラベルを追加し 、 の初期値script として設定します 。window.__INITIAL_STATE__この変数は、後続の非同期リクエストで使用して、ページ読み込み中のブランクを回避できます。
  •  ページの読み込み中に空白を避けるために#app 要素を タグ内に配置します 。body

これらの最適化により、ページの読み込み時間を大幅に短縮し、ページ読み込み中のギャップを回避できます。

3.5 ページの読み込み速度を向上させるためにブラウザのキャッシュ ポリシーを設定するにはどうすればよいですか?

ブラウザーのキャッシュ ポリシーを設定すると、ブラウザーによる繰り返しのリソース要求が減り、ページの読み込み速度が向上します。これは、HTTP 応答ヘッダーにキャッシュ ポリシーを設定することで実現できます。

キャッシュ ポリシーを設定する一般的な方法をいくつか示します。

  1. 強力なキャッシュを設定する
  2. ネゴシエーションキャッシュを設定する

3.5.1 強力なキャッシュを設定する

強力なキャッシュとは、ブラウザーがサーバーにリクエストを送信せずに、一定期間内にローカル キャッシュからリソースを直接取得することを意味します。次のように「Expires」または「Cache-Control」応答ヘッダーを設定することで、強力なキャッシュ時間を設定できます。

  • 有効期限: 有効期限を設定します。例: 「有効期限: 2023 年 10 月 21 日水曜日 07:28:00 GMT」
  • キャッシュ制御: 「キャッシュ制御: max-age=3600」などのキャッシュ ポリシーを設定します。これは、リソースが 3600 秒以内に有効であることを意味します。

3.5.2 ネゴシエーションキャッシュの設定

ネゴシエーション キャッシュとは、有効期限が切れた後にブラウザがサーバーにリクエストを送信し、サーバーがリソースの ETag または Last-Modified 情報に従ってリソースが変更されたかどうかを判断することを意味します。リソースが変更されていない場合、サーバーは 304 ステータス コードを返し、ブラウザにローカル キャッシュを直接使用できることを伝えます。ネゴシエーション キャッシュは、次のように「Last-Modified」および「ETag」応答ヘッダーを設定することで設定できます。

  • Last-Modified: リソースの最終変更時刻を示します。例: 「Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT」
  • ETag: 「ETag: W/1234567890」など、リソースの一意の識別子を示します。

なお、キャッシュポリシーを設定する際は、キャッシュ時間が長すぎるとリソースの更新が遅れたり、キャッシュ時間が短すぎるとページの読み込み速度に影響が出る可能性があるため、状況に応じて設定する必要があります。実際の状況に応じて調整することをお勧めします。

​

おすすめ

転載: blog.csdn.net/weixin_44171297/article/details/131761857
おすすめ
Open Source Daily | Chrome に組み込まれている Gemini の重要性は、中国の AI 追求に関する 5 つの大きな誤解ではありません。ECharts の創設者は魚を育てるために「海に行った」が、何もありません。驚き
中国のAIチームが「米国のために準備を進めている」という噂にマイクロソフトが反応
ランキング
配列内の重複要素を検索し、繰り返し回数の最小値から最大値までの順に並べ替えます es6
【C++学習記】Ten、C++デザインパターン - 抽象ファクトリーパターン
知人：素人の言語ランタイム（A）に
ist „collision.relativeVelocity.magnitude“ in Unity
Linuxダイナミックリンク（3）のPLTとGOTについて話す-パブリックGOTエントリ
leetcode。図L.207カリキュラム-Java
羅区[] P3518 [POI2011] SEJ、金庫
MySQL にクエリを実行するときに使用するインデックスを指定します
現在のユーザー環境変数とシステムのWin10ベースのビュー
十二の仕事 - あなたの誕生日
アーカイブ
もっと
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)

コードワールド

© 2018 codetd.com