最適化：
アンチシェイクやスロットリングも同様です：
アンチシェイクもスロットリングも、特定の機能を短時間に大量にトリガーすることで発生する**性能問題**を解決するためのもので、**トリガー頻度が高すぎるために応答速度が追いつかず、遅延、誤死、遅延現象が発生するようなものです
アンチシェイク：
アプリケーションのシナリオ
ユーザーが入力ボックスに文字列を連続して入力した後、入力が終了した後、最後のクエリajaxリクエストに進みます；
ウィンドウのリサイズ、スクロールイベント、ブラウザウィンドウのリサイズ、スクロールが常に対応するイベントをトリガーします。）
その名の通り、ユーザーの手が震えたり、乱暴にクリックしたりするのを防ぐために、最後の1回だけが実行されます。
最適化前のコード：
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("resize",debounce(handle,1000));
最適化されたコード：（こうすることで、イベントのトリガーが遅れず、ブレ防止効果もあります。
onscroll，click，input リサイズなど、スタビライズが必要なシナリオは他にもたくさんあります。）
function debounce(fn,wait){
2 var timer = null;
3 return function(){
4 if(timer === null){
5 timer = setTimeout(()=>{
6 fn()
7 clearTimeout(timer)
8 timer = null
9 },wait)
}
13
14 function handle(){
15 console.log(Math.random());
window.addEventListener("click",debounce(handle,1000))
スロットリング：
イベントがトリガーされる頻度に関係なく、実際のイベントハンドラは指定された時間内に必ず1回実行されることが保証されています。
アプリケーションのシナリオ
マウスが連続的にイベントをトリガーするのは、単位時間に1回だけです；
無限ロードのシナリオでは、ユーザがページのスクロールを止めたときにデータを要求するのではなく、ユーザがページをスクロールしている間、時々ajaxリクエストを送信する必要があります；
スクロールイベントをリッスンします。例えば、一番下までスライドすると自動的にもっとロードされるかどうか、これを決定するためにスロットルを使用します；
function throttle(fn,delay){
2 let valid = true
3 return function() {
4 if(!valid){
5 //休憩時間 顧客がいない
6 return false
7 }
8 // 作業時間、関数を実行し、その間にステータスビットをinvalidに設定する。
9 valid = false
10 setTimeout(() => {
11 fn()
12 valid = true;
13 }, delay)
/* なお、スロットル機能は上記の実装に限定されるものではない。,
17 たとえば、setTimeoutを使用する代わりに、ステータスビットをタイムスタンプに置き換えて、タイムスタンプの差分から間隔が指定された時間より大きいかどうかを判断することができる。
18 また、setTimeoutが返すフラグを判定条件として利用することもできる。つまり、現在のタイマーが存在するかどうかを判定し、存在すれば冷却中であることを判定し、fn実行後にタイマーを削除してアクティブにすれば、原理は同じである。
19 */
20
21 function showTop () {
22 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
23 コンソール.log('スクロールバーの位置：' + scrollTop);
24 }
25 window.onscroll = throttle(showTop,1000)
イメージの遅延読み込みの原則：
説明
レイジーローディング "は、それを単刀直入に言うと、ページをロードするなどのロードの遅延であり、このページは非常に長く、ブラウザの視覚領域に長いロードすることはできませんし、遅延ロードは、コンテンツの視覚領域をロードする優先順位であり、そのような領域内のロードへのアクセスなどの視覚領域の他の部分。
目的
1.すべてのロードされた単語は、すべてのイメージリソースを要求するページを入力するたびに、その後、イメージがロードされる可能性がある場合は、ユーザーエクスペリエンスに影響を与える長い行ってきました！
2.ユーザーのトラフィックを浪費し、一部のユーザーは、すべてを表示したくない、すべてのロードされたトラフィックの多くを消費します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<img src="Go.png" data-src="./lifecycle.jpeg" alt="">
<script>
let num = document.getElementsByTagName('img').length;
let img = document.getElementsByTagName("img");
let n = 0; //イメージが読み込まれた場所を保存して、毎回最初のイメージからたどるのを避ける。
lazyload(); //ページがロードされたが、リージョン内のイメージがロードされた。
window.onscroll = lazyload;
function lazyload() { //ページスクロールイベントをリスニングする
let seeHeight = document.documentElement.clientHeight; //可視領域の高さ
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //上部からのスクロールバーの高さ
for (let i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "Go.png") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>
</body>
</html>
HTTPリクエストを減らし、HTTPキャッシュを賢く設定しましょう：
リソースの統合と圧縮：
可能な限り、外部スクリプト、スタイル、複数の1つにマージします。また、CSS、Javascript、イメージは、適切なツールを使用して圧縮することができ、圧縮はしばしば多くのスペースを節約することができます。
CSS Sprites
CSSイメージをマージすることで、リクエスト数を減らすもう一つの素晴らしい方法です。
CDN アクセラレーションを使用します：
CDNのキャッシュは一般的に静的なリソースで、イメージ、ファイル、CSS、スクリプト、静的なWebページなどですが、これらのファイルは非常に頻繁にアクセスされるため、CDNのキャッシュはWebページを開く速度を大幅に向上させることができます。
JSの前にCSSを導入
- jsコードのダウンロードはブロッキングダウンロードであり、他のコードと並行してダウンロードや解析を行うことはできません。
- ページがロードされるときは、上から下、左から右の順番でロードされます。jsが前面に配置されている場合、jsは即座に実行され、後続のリソースのダウンロードと実行がブロックされます。外部スクリプトの読み込みに時間がかかりすぎると、ページは長い間反応しなくなり、ブラウザは「死んだふり」の状態を表示します。
- head内のjsとcssが読み込まれるまで、ページは描画を開始する前に待機する必要がありますが、jsがbodyの最後に配置されている場合、待機する必要がないため、リソースのブロッキングを避けることができ、同時に静的ページを素早く表示させることができます。
- いくつかのjsの実行は、以前のスタイルに依存しています。
- jsは一般的に機能を処理するので、事前に読み込む必要はありません。ユーザーに実際に体験してもらう前に、まず見た目と操作感を伝えましょう。
ブラウザの再描画とリフロー：
リフローは必ずリペイントを引き起こしますが、リペイントは必ずしもリフローを引き起こしません。
再塗装：
ページ上の要素のスタイルが変更されてもドキュメントフロー内の位置に影響がない場合、ブラウザは要素に新しいスタイルを割り当てて再描画します。
逆流：
レンダリングツリー内の一部またはすべての要素のサイズ、構造、特定の属性が変更された場合に、ブラウザがドキュメントの一部またはすべてを再レンダリングするプロセスをリフローと呼びます。
逆流を引き起こすような操作
* ページの最初のレンダリング
* ブラウザのウィンドウサイズの変更
* 要素のサイズや位置の変更 要素の内容の変更
* 要素のフォントサイズ変更
* 可視DOM要素の追加と削除
* CSS擬似クラスを有効にする
* 特定のプロパティを照会したり、特定のメソッドを呼び出したりする
* よく使用され、リフローを引き起こす可能性のあるプロパティとメソッド
clientWidthSPAのコンポーネントには、clientHeight、clientTop、clientLeft、offsetWidth、offsetHeight、offsetTop、offsetLeftscrollWidth、scrollHeight、scrollTop、scrollLeftscrollWidth、scrollHeight、scrollLeftscrollWidth、scrollLeftscrollWidth、scrollLeftscrollTopがある、scrollLeftscrollIntoView、getComputedStyle()、
getBoundingClientRect()以下は、SPAをサーバー側とブラウザ側でレンダリングする場合の例である。
JSパフォーマンスの最適化：
ドム操作を減らす、jsでは、ページに追加されるイベントハンドラの数は、ページ全体の実行パフォーマンスに直接関係します。この問題の理由は多岐にわたります。まず第一に、関数はメモリを占有するオブジェクトです。メモリ内のオブジェクトが多ければ多いほど、パフォーマンスは低下します。
//html
<ul id="myLinks">
<li id="goSomeWhere">Go somewhere</li>
<li id="sayHi">Say hi</hi>
</ul>
//イベントハンドリングJSコードを追加する
let item1 = document.getElementById("goSomeWhere");
let item2 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event){
console.log("goSomeWhere")
}
EventUtil.addHandler(item2, "click", function(event){
console.log("sayHi");
}
//クリックイベントを組み合わせることで改善される。
let list = document.getElementById("myLinks")
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
let target = EventUtil.getTarget(event);
switch(target.id){
case "goSomeWhere":
console.log("goSomeWhere");
break;
case "sayHi":
console.log("sayHi");
break;
}
}
JSパフォーマンスの最適化：
現在のスコープ外の変数にアクセスすると時間がかかるため、グローバル変数にアクセスすると、スコープチェインをたどる必要があるため、ローカル変数にアクセスするよりも常に遅くなります。スコープチェインにかかる時間を短縮できれば、スクリプト全体のパフォーマンスが向上します。
SPAの紹介, SEO, SSR:
- SPA正式名称はシングル・ページ・アプリケーション：
すなわち、シングルページアプリケーションは、従来のWebサイトでは、異なるページ間の切り替えは、サーバーから直接全く新しいページをロードすることですが、SPAモデルでは、ユーザーと対話するページの一部の動的書き換えを介して、過度のデータ交換を避けながら、応答速度は当然比較的高く、一般的なSPAフレームワークは、リアクトビューangluarです。ページのコードをブラウザに送信し、ブラウザでDOMを生成し、操作します。
長所：
ページ間の切り替えは非常に高速で、ある程度まで、バックエンドサーバーの圧力を低減し、バックエンドの手順は、APIを提供する必要がありますだけで、最終的にクライアントを気にしないように、Webインターフェイスや携帯電話などです。
欠点：
ユーザーが最初に読み込むとき、ページをレンダリングする前にSPAフレームワークとアプリケーションコードをダウンロードする必要があるため、最初の画面を開くのに時間がかかります。SEOには不向き
- 検索エンジン最適化SEO：
SEOは、検索エンジンのランキング法の概要を通じて、合理的な最適化のためのウェブサイトは、検索エンジンのランキングであなたのウェブサイトを改善するために、独自の顧客をもたらすために検索エンジンを使用するようにです。最適化：
このキーワードは現在のページのタイトルに表示されます；
このキーワードは現在のページのキーワードと説明文に表示されます；
キーワードは現在のページのコンテンツに複数回出現し、最初の出現時に太字で表示されます；
キーワードは他のページのアンカーテキストに表示されます。
- SSR Server-Side Rendering
例
よく使われるSSRフレームワークはReactのNextとVue.jsのNuxtです。SPAはSEOに不向きで、検索エンジンの非同期データへの対応も十分ではないため、アプリケーションが最初にデイジーチャートの読み込みを表示し、その後Ajaxを通してコンテンツを取得する場合、クローラーはページのコンテンツをクロールする前に非同期が完了するのを待つことはありません。SPAアプリケーションはサーバ上でパッケージ化され、そこでHTMLがレンダリングされてブラウザに送られます。
長所：
レスポンスタイムが速くなり、すべてのJSのダウンロードが終了するのを待つ必要がなくなり、ブラウザはより完全なページを表示できるようになります。検索エンジンのクローラーが重要なデータにクロールできるようにしながら、SEOの重要な情報をバックグラウンドで直接HTMLにレンダリングできます。
欠点：
静的なファイルを提供するだけのサーバにくらべて、SSRで使われるレンダリングプログラムは、当然ながらCPUやメモリのリソースを多く消費します。ウィンドウやドキュメント、アラートなど、よく使われるブラウザのAPIが正しく動作しない場合があり、使う場合は動作環境を判断する必要があります。ブラウザとサーバの両方が関係するため、開発やデバッグに手間がかかります。SPAの一部のコンポーネントのライフサイクルの管理が複雑になります。サーバ側のレンダリング結果とブラウザ側の結果が一致しない要因があるかもしれません。ブラウザとサーバーの両方が関係するため、SPA の一部のコンポーネントのライフサイクルの管理が複雑になります。サーバー側のレンダリング結果とブラウザ側の結果が一致しない要因があるかもしれません。
