フロントエンドのパフォーマンスの最適化は、各フロントエンドのために不可欠なスキルである、独自のWebサイトを作るために自分のコードを最適化し、ユーザーの待ち時間を減らし、オープンより迅速にアクセスすることができ、今日はいくつかの観点から、フロントエンドのパフォーマンスの最適化ソリューションについて話され、
インタビュアーをお願いし、地図の下に参照してくださいは、多くの場合、何が起こったのか、ページの負荷にURLを入力してから完成するのでしょうか？
2. DNS経由でブラウザ。このURL解析IP
3のIPアドレスとTCPコネクションを確立し、HTTPリクエスト送信
4.サーバーが要求を受信し、ファイルを読み、ライブラリをチェックし、優れたリターンHTTPレスポンスステッチ
5.ブラウザは、最初の画面のHTMLを受けて、レンダリングを開始、
6。 HTML構文解析ビットDOM
7.解析するCSS-ツリーがあるCSS
+ CSS 8.domレンダリングツリーの生成グラフィック
9.スクリプトがJSファイルにロードされた
10実行ファイルのjsを
クライアント側のキャッシュのブラウザのキャッシュ
メモリキャッシュを必要とせずに、ディスクキャッシュ;
要求認証がたEtag、最終-Modified304が必要。
H5新しいのlocalStorage、のsessionStorage。
キャッシングのより合理的な使用が大幅にフロントエンドのパフォーマンスを向上させることができます。
、バージョン番号の<script SRC = "/ a.js？追加2. _V = 1.6"> などJQ、VUE公共図書館、内容が変更されていないがリロード
3.指紋押捺ではなく、新しいファイル<スクリプトSRC =「/ a.js？発生時間= abcd12saを」> CDNのキャッシュがクリアされますが、新しいファイルを生成し、（その最初にHTML、JS）の問題があるだろうことはできません
最終4最高の食材ドキュメント<スクリプトSRC =「/ a.abcd12sa.js」の誕生 > HTML WebPACKのビルドにパッケージ最初のjsに、
1.マージ===>ファイルとNの増加との間に挿入されたアップリンク要求しない場合 - 1つの遅延ネットワーク、より影響を受けたパケット損失は、プロキシサーバを介して切断することができます
2.合併===>環境設定は、レンダリング時間が長くなる画面場合、失敗のファイルキャッシュの大エリア
3.公共図書館の合併、異なるページの合併
4.ファイルのマージのためのオンラインサイト、達成nodejsを使用して、マージファイル
2.expires：月、2020年3月16日午前九時50分27秒GMT
3.last修飾：木、2018年2月15日午後02時17分52秒GMT
メモリキャッシュ
そのような共通のデータJSとして、短命キャッシュメモリは、ブラウザにも独自の戦略、BASE64の写真、静的リソースの少量を持っています
サービスワーカーキャッシュ
、それはブラウザのウィンドウから外れるは、Javascriptの独立したスレッドメインスレッドで舞台裏で働いて、オフラインキャッシュ、およびその他のネットワークのプロキシを許可します
画像の最適化
2.png
HTTP要求なし状態が、する必要がクッキーではないので、クライアントの状態を維持します
クッキー生成モード：のSet-Cookie HTTPレスポンスヘッダに、クッキーはdocument.cookieによって読み取ることができるJS
用途：インタラクティブなブラウザ側とサーバー側のため、クライアントは、独自のデータを格納します
有効期限：有効期限が切れ
ストレージの制限：4キロバイトのサイズについてブラウザの店として、あなたが期限切れに有効期限を設定する必要があります
クッキーの記憶容量はのlocalStorageを交換されます
HttpOnlyのJSを読み書きすることは許されません
以下、関連するドメイン名でクッキー---損失を流れCDN。ソリューション：主要駅から分離するためのCDNドメイン名とドメイン名
塗り替え逆流
スロットルがどのくらいのたびに一度実行//機能
CONSTスロットル=（FUNC、ウェイト= 100）=> {
関数は100ミリ秒で何回呼び出し、//ませ事項
lastTime = 0をしましょう。
リターン（... argsを）=> {
聞かせて今=新しいDate（）。getTime（）
もし（今 - lastTime>待機）{
func.apply（this.args）
lastTimeは今=
}
}
}
私は1を=しましょう。
window.addEventListener（ 'スクロール'、スロットル（（）=> {
//遅延ロードイメージを使用します
console.log（I）
I + = 1
}、350））
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/*
校验用户是不是重复，用户输入完，向后端发送请求
如果用户每次输入，都发生请求，造成请求过多
用户停止输入字符串350毫秒，在发出
*/
const
debounce = (func,wait = 350) =>{
let
timer =0;
return
(...args)=>{
if
(timer) {
clearInterval(timer)
}
timer = setTimeout(() => {
func.apply(
this
,args)
}, wait);
}
}
let
i =1;
window.addEventListener(
'scroll'
,debounce(()=>{
// 验证
console.log(i)
i+=1
},350))
|
レイジーロード
大幅にいくつかのより多くの写真、長いWebページ、ユーザー負荷のページ表示領域のたびにページを開いた場合は、ページの負荷を開くたびにすべてのWebコンテンツは、ページの読み込み速度は、影響を受けることがバインドされている場合のみ、コンテンツ、意志のために表示領域にWebブラウザに画像が、画像をロードするためにサーバーを要求しますとき、Webブラウジング速度を向上するだけでなく、サーバーの負荷を軽減、我々は、画像の遅延ロードを実装するためにlazyload.jsを使用することができます。
//すべての画像を取得します
constのIMG = document.getElementsByTagName（ 'IMG'）
//表示領域の高さを取得します。
constのviewHeight = window.innerHeight || document.documentElement.clientHeight;
// NUMは、その絵に現在の表示を計算するために開始されてから最初のチェック場合の漏れを避けるために毎回使用されています
NUM = 0ましょう。
関数lazyload（）{
以下のために（iはNUM =せ; I <img.length; iが++）{
//しかし、高さと面積マイナス表示領域の上端からトップ要素の高さ
距離= viewHeightみよう - 。IMG [I] .getBoundingClientRect（）トップ
// 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
if(distance >=0) {
// 给元素写入真实的src，展示图片
img[i].src = img[i].getAttribute('data-src')
// 前i张图片已经加载完毕，，下次从第i+1张开始检查是否露出
num = i+1
}
}
}
// 监听scroll
window.addEventListener('scroll',lazyload,false)
performance.getEntriesByType('navigation') 性能检测
通过在浏览器控制台输入这个命令，就可以检测到网页加载数据，检测网页加载性能
npm install -g lighthouse
安装完之后运行，也是找的github网址，运行成功之后，会弹出一个生成的html页面。
生成一个html文件，找到然后直接打开就行
浏览器渲染
