まず、手ブレ補正機能とスロットルの概念が導入されました
スロットル機能：一度実行され、唯一の実行サイクル後に第2の機能を実行するセットよりも大きくなるました。機能のみを有効にするために最初にトリガされるように指定された時間内に、パフォーマンスの観点を最適化するための頻繁なトリガ機能があり、バックは有効になりません。
なぜそれがスロットルの機能を使用できますか？
たとえば、私たちは今、上から下に建物の中に話をたくさん持っているページを持って、我々は、ページが動的に滞在するためにどの階で現在のページを計算するために、ページの各フロアの高さで現在のスクロール位置を比較するときに、ページのスクロールイベントをスクロール聞く必要がありますしかし、スクロールイベントのトリガ周波数が高すぎる、10msのは、特にCPUを食べて、このような高い周波数を計算するために数回をトリガーする、携帯電話の性能が十分でない場合は、ページ全体が特別なカトンを滑ることがあります。そして、明らかに、我々は現在の周波数の計算は一度計算100msのは十分でしょうについては、我々はスロットルの床プラス100ミリ秒を計算する機能を使用することができ、この時間は、スロットルの機能を実行し、このような高い床を必要としない計算します。計算された増加は、性能がページに改善されている、周波数が前の数ミリメートルよりも数倍低く算出され、100ミリ秒の機能を実行するCPU負荷の低減を絞ります。
デモ：
function getCurrentFloor () {
// 楼层计算代码
}
// 获得节流后的计算函数
getCurrentFloor = throttle(getCurrentFloor, 100) // 文章末附节流代码
dom.addListenerEvent('scroll', getCurrentFloor, false)
复制代码手ぶれ補正機能：頻繁に指定された時間内にトリガに必要な機能だけを有効にする最後の時間を聞かせて、フロントは有効になりません。画像安定化効果のショー：
デモ：
function doSearch () {
// 搜索操作
}
doSearch = debounce(doSearch，500) // 返回一个500ms只会执行最后一次调用的doSearch函数
let searchInput = document.querySelector('.search-input')
searchInput.addEventListener('input'， doSearch， false)
复制代码スロットルとdeounceを達成
Performance.js
class Performance {
static instance
constructor () {
return Performance.instance || (Performance.instance = this)
}
// 节流函数
throttle (fn, time = 50) {
let nowTime
let lastTime
return function (...args) {
nowTime = +(new Date())
if (!lastTime || nowTime - lastTime >= time) {
fn.call(this, ...args)
lastTime = nowTime
}
}
}
// 防抖函数
debounce (fn, time = 50) {
let timer
return function (...args) {
if (timer) {
clearTimeout(timer)
timer = null
}
timer = setTimeout(fn.bind(this, ...args), time)
}
}
}
let instance = new Performance()
let { throttle, debounce } = instance
export { Performance, throttle, debounce }
复制代码これらは、クラスライブラリJH-utilのプロパティのパフォーマンスのモジュールであります
JH-utilのライブラリ付属のgithubのは、接続されています：
不十分でも展示会を喜ば場合、ライブラリはゆっくりと、それらを改善しています
ます。https：//juejin.im/post/5d079790f265da1bca51dba5で再現