Webページのスタッターを監視するには、FPSから始める必要があります。
FPSはビデオまたはゲームの概念、つまりビデオまたはゲームの流暢さを表す1秒あたりのフレーム数に由来します。
フロントエンド開発の分野におけるWebページのFPSとは何ですか？
WebページのFPSとは何ですか？
Webページのコンテンツは常に変化しており、WebページのFPSは、ブラウザーがこれらの変更をレンダリングするときのフレームレートのみです。フレームレートが高いほど、Webページはユーザーに滑らかに感じられます。
Chromeでは、デベロッパーツールを使用してウェブページのFPSを表示できます。
Webページは必ずしも必要ではないことに注意してください。ツールが認識するのは、各更新がFPS値であるということです。
最適なフレームレートは60です。つまり、16.5ミリ秒ごとにレンダリングされます。
ChromeやFirfoxなどのパフォーマンスツールを使用して、ブラウザのフレームレートを表示することもできます。
緑のヒストグラムは、ページが再描画されるときのフレームレートを表し、フレームは各フレームのレンダリングにかかる時間です。
ウェブページにFPSを与える別の方法
FPS拡張機能はChromeの拡張機能で、現在のWebページのFPS値、つまりページがスタックしているかどうかを表示できます。
このツールは、ブラウザー自体とは異なる方法でページFPSを取得します。ブラウザーのネイティブAPI（開発中）を使用しません。この種のツールには、ブラウザーのrequestAnimationFrame API（setInterval polyfillを使用できます）を通じて達成される独自のアプローチがあります。
コードは似ています：
var lastTime = performance.now();
var frame = 0;
var lastFameTime = performance.now();
var loop = function(time) {
var now = performance.now();
var fs = (now - lastFameTime);
lastFameTime = now;
var fps = Math.round(1000/fs);
frame++;
if (now > 1000 + lastTime) {
var fps = Math.round( ( frame * 1000 ) / ( now - lastTime ) );
frame = 0;
lastTime = now;
};
window.requestAnimationFrame(loop);
}
淘宝網のフロントエンドのチームからの抜粋「：FPSテストワイヤレスパフォーマンスの最適化」。
一般的な説明は、requestAnimationFrame APIを使用して一部のJSコードを定期的に実行するため、ブラウザーが動かなくなった場合、レンダリング頻度は十分に保証されないということです。1秒のフレームは60フレームに到達できず、ブラウザーのレンダリングフレームレートを間接的に反映する可能性があります。requestAnimationFrame APIの詳細については、MDNのドキュメントを参照してください。
ウェブページを監視するには？
なぜ最初に監視するのですか？たとえば、全国のライブブロードキャストでは、ユーザーがビデオを見たときの経験に注意を払う必要があります。Webページやプレーヤーがフリーズすると、ユーザーが夢中になります。したがって、最適化をガイドするために監視する必要があります。
最後に、この記事のトピックに戻り、スタックしたWebページを監視する方法は？
全国的なライブブロードキャストメソッドを例にとると、FPS拡張機能と同様のメソッドを使用して、WebページのFPS値が1秒あたり1回計算され、データのリストが取得されます。
…6、8、11、29、60、58、46、57、57、57、44、59、51、54、0、31、58、56、41、52、51、17、22、34、51 、48、26、26、49、59、59、59、59、52、52、0、45、58、60、59、60、21…
次に、共通ログチャネルを通じて分析するためにビッグデータプラットフォームに報告します。
それでは、WebページがFPSでスタックしていることを確認するにはどうすればよいですか？吃音に関する私たちの観察によれば、20未満の連続する3つのFPSは、吃音と見なすことができます。
function isBlocking(fpsList, below, last) {
var count = 0
for(var i = 0; i < fpsList.length; i++) {
if (fpsList[i] && fpsList[i] < below) {
count++;
} else {
count = 0
}
if (count >= last) {
return true
}
}
return false
}
もちろん、これは単なる経験ですが、相対的な基準として使用できます。
このようにして、Webページのストールの統計を取得しました。
次に、Catonの問題のデータサポートを使用してWebページを最適化できます。
サービスの推奨
