フロントエンドのパフォーマンス分析と改善計画の紹介
Web ページのパフォーマンスを評価する方法は?
まず第一に、私たちが考えることができるのは、十分に速く、数秒で開くということです
が、実際には別のポイントがあります.それは安定性です.
ウェブサイトの安定性は？
たとえば、ページを操作していると、長時間使用するとフリーズしたり、クラッシュしたりすることがありますが、これは安定性の低いパフォーマンスです。
つまり、ページが十分に速く開かれ、操作中の応答が十分に速く、フリーズせずに長時間安定して実行できる場合、ページのパフォーマンスは正常であると見なす必要があります。
ページの「堅牢性」
1993 年、ヤコブ・ニールソンは次のように提案しました。
- 100ミリ秒未満の読み込み速度がかっこいい
- ユーザーの思考が中断されないためには、おそらく1秒が限界でしょう。ユーザーには遅延が発生しますが、許容範囲です
- 約10秒がユーザーの注意の限界です。ほとんどのユーザーは 10 秒後にサイトを離れます
もちろん、これはインターネットのページを指します
が、cエンドまたはbエンドのページの場合、顧客はそれらを使用する必要があります. 数秒で開くことはめったにありません, 基本的に2〜3秒, なぜ?
その理由は、多くの場合、開発ではパフォーマンスがまったく考慮されておらず、ビジネス コードだけが時間の中に埋もれているためです
。
この時点で、多くのフロントエンド担当者は、古典的なインタビューの質問を思い浮かべるでしょう: ページのパフォーマンスを向上させる方法は何ですか?
そして答えます：
- http リクエストを減らす
- 画像圧縮、スプライト
- js、css圧縮
- gzip を有効にする
- DNS キャッシング戦略を使用する
- cdnキャッシュを使用する（他の人と共有すると、あなたと私は幸せになります）
- 遅延読み込み
...
いくつかのフロントエンド パフォーマンス テスト ツールが見つかりました
Chrome に付属の LightHous
Pingdom ウェブサイト速度テスト
オンライン平凡なツール
アドレス: https://tools.pingdom.com/
ウェブページテスト
オンラインでもあり、より強力な機能と複数のモードを選択できます。
アドレス: https://www.webpagetest.org/
GTmetrix
いくつかの提案を行います
オンラインアドレス: https://gtmetrix.com/
Keycdn ツール
各リソースの読み込み時間と HTTP ヘッダーについて詳しく説明します
オンライン アドレス: https://tools.keycdn.com/speed
GiftOfSpeed
通常
オンラインアドレス：https://www.giftofspeed.com/
ページロシティ
競合他社のページと比較できると言われていますが、実際には役に立ちません
オンラインアドレス：https://pagelocity.com/
ロードタイム テスター ジュース
速度しか測れません、ダメです
オンラインアドレス：https://performance.sucuri.net/
クレイジーフレア
Web サイトの DNS、セキュリティ、パフォーマンス、ネットワーク、および SEO の問題をテストするために使用されます。
オンラインアドレス：https://gf.dev/
ドットコムモニター
ちなみに、画面の互換性をテストできます
. オンラインアドレス: https://www.dotcom-tools.com/website-speed-test
デアブースト
さまざまなブラウザーでのパフォーマンスを比較します
オンライン アドレス: https://www.dareboost.com/en
パフォーマンス分析ツールとは何ですか?
実際、私はツールを使用して、業界が懸念しているページ パフォーマンスの特定の指標について説明したいと思います。
- 開口速度
- ページング ファイルのサイズ
- リクエスト速度
- ブロッキング時間
- リクエスト数量
- DNS解決時間
- その他の機能強化
LightHouse とは別に、他のオンライン ツールはポジショニングの問題にいくらか役立ちますが、基本的に単一ページのアプリケーションであるため、特に有用ではありません。
あまり注意しないでください。唯一の機能は、一部の顧客が同意した場合にテスト レポートとして使用できることです。
個人的には、F12キーを押してネットワークを表示し、並べ替えてファイル サイズを確認し、読み込み時間を確認して、自分で分析することをお勧めします。
ネットワーク利用時に注意すべき指標
- ロードされているものの数、ロードする必要のないもの、および大きすぎるファイルを確認します
- ファイルの読み込み時間は、実際にはネットワークとサーバーの帯域幅の影響を受けます. 一般に、時間はインターフェイスに依存します.
- 応答ヘッダーは、キャッシュの構成と、有効期限の設定が適切かどうかを調べます。
- 上の画像はgzipを開けません
- インターフェイスは結合または分割できます. 一部のインターフェイスは個々のデータに対してのみ遅いです. バックエンドに個別に分解するように依頼できます. 通常, インターフェイスは非常に高速である必要があります. ビジネスと通信するインターフェイスをマージしてみてください. http リクエストを実際に減らすインターフェイスのマージを含む
- ファイルが大きすぎるため、webpack 分析に移動できません
- キャッシュ戦略については、これらの 2 つの記事を参照してください
- https://blog.csdn.net/qq_38217940/article/details/125360427
- https://blog.csdn.net/qq_38217940/article/details/125349105
webpack の webpack-bundle-analyzer を使用して、パッケージ化されたファイルを分析します
使用方法 npm https://www.npmjs.com/package/webpack-bundle-analyzer
js を分割する方法を参照してください。
1. ルートの遅延読み込みを使用する
import( /* webpackChunkName: "login" */ '@/layout')
2. コンポーネント (動的コンポーネント) の遅延読み込み
<template>
<div class="full-container container-wrap">
<component v-bind:is="currentComponent" @change-page="changePage">
</component>
</div>
</template>
<script>
const Home = ()=>import(/* webpackChunkName: "organize-conpenents-home" */ "./components/home");
export default {
data() {
return {
currentComponent: Home,
currentComponentName: 'Home',
};
},
}
3.js の動的読み込み
// 懒加载js
var loadScript = async (url) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
const head = document.getElementsByTagName('head')[0];
head.appendChild(script);
});
};
4. vueのプリロードをオフにする（ローディングとキャッシングを見るときはオフにする必要があります。オフにしないとすべてのプリロードが判定に影響します）
プリロードはこんな感じです（プリフェッチ属性）
<link href=./css/app.02a07d15.css rel=prefetch>
閉じる方法
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch');
// 移除 preload 插件
config.plugins.delete('preload');
},
5. Webpack は js
webpackChunkName をマージし、同じものを書き込みます
import( /* webpackChunkName: "login" */ '@/login')
import( /* webpackChunkName: "login" */ '@/layout')
webpack の speed-measure-webpack-plugin を使用して、パッケージング速度を確認します
使用方法 npm を参照 https://www.npmjs.com/package/speed-measure-webpack-plugin
パッケージング速度を改善するには? （計画について話すだけで、Baiduは計画に従って）
- 代わりに vite を使用します (実際には、webpack を使用して同様の効果を構成することもできます。さらに、vite は主に開発エクスペリエンスを向上させ、サブコントラクトは自分で構成する必要があります)
- 入力パラメータに従って、オンデマンドでパッケージ化されます. page=login が渡された場合、ログインルートのみが実行されます. マルチページ構成を参照できます.
- キャッシュの使用はキャッシュローダーですが、これには落とし穴があり、変更されたページが更新されないことがあります
- エントリを指定すると、webpack のエントリ検索時間が非常に長くなります
- 不要なローダーを削除します.たとえば、ローカルで実行するためにbabelなしでes5に変換できます.ブラウザ自体は、バージョンが高い場合、es6をサポートします.
- 静的ファイルはパッケージングに参加せず、静的ファイルのコピー操作があります.数百メガバイトの静的ファイルをコピーするのに数秒かかる場合がありますが、コマンドラインの実行ははるかに高速です. ローカルで起動する場合は、パッケージングに参加しないように設定することもできますが、少し複雑な devSever の静的ファイルのポイントを変更する必要があります。
- eslint をオフにして、vscode プラグインで形式を確認してください。美化形式は実際にはかなり良いです。全員が統一されている限り
- 従来の HappyPack のようなマルチプロセス ビルド
画像処理
CDN
Alibaba Cloud https://www.aliyun.com/?utm_content=se_1011952919など、レンタルするクラウド サーバー メーカーを探す必要がある
圧縮
- https://tinypng.com/ を使用してオンラインで画像を圧縮します
- 必要に応じて webpack の url-loader を変更します。デフォルトでは、5k に変更できる場合、10k 未満を base64 に変換します。
module: {
rules: [
{
test: /\.(jpeg|jpg|png|svg|gif)$/,
use: {
loader: 'url-loader', // 默认使用的是es6模块
options: {
// 配置
esModule: false, // 使用common.js规范
outputPath: 'images', // 输出的文件目录
name: 'images/[contenthash:4].[ext]',
limit: 20*1024 // 小于20k转为base64
}
}
}
]
}
- background-image は注意して使用し、すぐに表示する必要があるものだけを記述してください。読み込みがブロックされるためです。最悪なのは、base64 に変換されて js にパッケージ化されることです。ポジショニング + zindex を使用して大きな画像を背景として設定でき、img タグは非同期で読み込まれます (ps: この記事は低バージョンのブラウザー向けであり、高バージョンの background-image も非同期です)
- 表示可能領域外の画像の遅延読み込み
ページの「安定性」
ページがフリーズしてクラッシュする原因は何ですか?
多くの人がZhangkouに来ます：メモリリーク。表面的なメモリ リークは、ページがフリーズする原因の 1 つにすぎません。ページがフリーズする理由には次のようなものがあります
。
- DOM ノードが多すぎる
- 頻繁なページのリフロー (多くの dom ノードがある場合、多くの要素を持つ大画面のページ要素など、リフローによってフリーズが発生します)
- ページモニターが多すぎて、時間内に閉じないとモニターがCPUを占有してしまうので、使っていない場合はクリーンアップする
- ページ タイマーとリクエストが多すぎると、js の計算が頻繁に発生する
- メモリ リークですが、実際には、メモリ リークは強制的にリサイクルされます。実際には、影響はそれほど大きくありません。実際には、フリーズの原因は、ガベージが時間内に収集されないことです。たとえば、多すぎます。窓にぶら下がっているもの、窓の上の物はゴミではありません（使わなくても）
- 100,000 レベルを超えるデータ計算では、パフォーマンスの低いコンピューターが何十万台もあると、ページがクラッシュします。
- winodw には大量のデータが保存されています. 実際には, JSON.parse や JSON.stringify を含む以前のものに追いつくための 1 つの理由です. 大きなオブジェクトもクラッシュしますが, 一部のブラウザー バージョンではエラーが報告されます.
上記に基づいて、パフォーマンスの低下を回避するためのいくつかの方法を簡単に言うことができます
- 要素で使用するスタイルを減らし、クラスまたは他のセレクターを使用してみてください
- アニメーションは位置を使用してリフローを回避します
- 無駄な幅と高さを与えることができますが、すべてをフレックスに適応させないでください
- css の 3 層を超えないようにしてください。リフローするときに css を解析してレンダリング ツリーを生成するためです。
- アニメーションが多い場合は GPU を使用して高速化します. 変換を使用する場合は Z 軸を使用すると GPU がオンになります. たとえば, translate は tranlate3d を使用でき, translate は CPU を使用し, tranlate3d は GPU を使用します.
- DOM ノードが多すぎます。キャンバスを使用して実装することを検討するか、非表示の DOM を削除してみてください。
- モニターはペアで表示され、vue の beforeDestroy のように on が off の場合
- ウィンドウ上のものを使い切ると、null を割り当ててクリアします
- 大量の計算がバックエンドに渡されます。それ以外の場合は、Web ワーカーに配置されます。
- 同じことがタイマーにも当てはまります。セットがある場合は、クリアを使用する必要があります
パフォーマンスを使用してページの変化を観察する
- ノード曲線は、ページの DOM の変化を調べます. 成長し続けるとスタックし、DOM は時間内にリサイクルされません.
- listeners リスナーは Nodes と同じ方法で分析されます
- ヒート カーブ、3 回連続で上昇し、すぐに急降下、3 回連続で発生した場合はメモリ リークと判断できます (Ruan Yifeng のブログを参照)
- 他の指標は比較的詳細であり、理解するには練習する必要があるため、ここでは詳しく説明しません
メモリを使用してページ メモリの使用状況を観察する
これは便利です, ページがクラッシュし, しばらくするとフリーズします. 基本的に, ページにはDOMやリスナーなどの多くのものが保存されています. いくつかの大きなオブジェクトは時間内にクリーンアップされません. これは最も一般的なものです.理由. たとえば、大きなjsonファイルが最も深刻です
. Winodw, 100Mのjsonはウィンドウの最外層に直接保存されており、直接クラッシュする可能性があります.
補足や継続更新にあると思います
詳細な遅延読み込み戦略、アンパック戦略などは後で書きます。