01 Что такое дебаунс и дроссель и для чего они нужны?
Отказаться
Как следует из названия, debounce предотвращает дрожание и не принимает одно событие несколько раз. Печатание на клавиатуре — это операция по устранению дребезга, с которой вы будете сталкиваться каждый день.
Легко понять концепцию, когда у вас есть контекст. Позвольте мне рассказать вам о некоторых случаях дебаунса:
- Кнопки входа и отправки текстовых сообщений быстро нажимаются пользователями, поэтому отправляется несколько запросов, и требуется устранение отказов.
- При изменении размера окна браузера количество событий изменения размера слишком велико, что приводит к слишком большому количеству вычислений. Вам нужно отказаться от дребезга, чтобы избежать множественных вычислений.
- Текстовый редактор сохраняет в режиме реального времени и сохраняет через одну секунду без каких-либо изменений.
Код устранения дребезга показан ниже, видно, что основное внимание при отмене дребезга уделяется очистке clearTimeout(timer)
function debounce (f, wait) {
let timer
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => {
f(...args)
}, wait)
}
}
Дроссель
Дроссель управляет частотой событий, например, раз в секунду или раз в минуту. Это похоже на Rate Limit, управляемое сервером и шлюзом.
- События прокрутки, которые вычисляют информацию о местоположении каждую секунду и т. д.
- События воспроизведения в браузере и информация о ходе выполнения рассчитываются каждую секунду и т. д.
- Поле ввода выполняет поиск в режиме реального времени и отправляет запрос на отображение выпадающего списка, а также отправляет запрос каждую секунду (его также можно использовать для устранения дребезга)
Код дроссельной заслонки показан ниже, видно, что ключ дроссельной заслонки запирается timer=timeout
function throttle (f, wait) {
let timer
return (...args) => {
if (timer) { return }
timer = setTimeout(() => {
f(...args)
timer = null
}, wait)
}
}
Заключение
- Debounce: чтобы предотвратить дрожание, триггер события будет сброшен в течение единицы времени, чтобы избежать случайного запуска события несколько раз. Реализация сосредоточена на очистке
clearTimeout. Debounce может быть примером ожидания лифта, ему нужно подождать некоторое время, пока входит один человек. - Дросселирование: для управления потоком событие может запускаться только один раз в единицу времени, что аналогично ограничению скорости на стороне сервера. Реализация фокусируется на блокировке и разблокировке
timer=timeout; timer=null. Дроссель может быть примером проезда через светофор, а можно проехать замес на каждый зеленый свет.
02 Как получить уникальный идентификатор браузера в интерфейсе
Из-за разных параметров рендеринга и алгоритмов сглаживания при отрисовке холста на разных системных видеокартах CRC проверка отрисовываемых данных изображения также отличается.
function getCanvasFp () {
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.font = '14px Arial'
ctx.fillStyle = '#ccc'
ctx.fillText('hello, shanyue', 2, 2)
return canvas.toDataURL('image/jpeg')
}
Таким образом, из холста можно получить уникальный идентификатор, который учитывает информацию об отпечатке браузера.
- Получить
base64строку URL-адреса данных изображения через холст - Выполните вычисление дайджеста MD5 для строки
bas464, чтобы получить информацию об отпечатке пальца.
Тем не менее, есть зрелые решения для этой потребности. Если вы используете его в производственной среде, вы можете использовать приведенную ниже библиотеку.
Он получает информацию об отпечатках пальцев браузера на основе следующей информации, и эта информация становится компонентом
canvaswebglUserAgentAudioContext
requestIdleCallback(function () {
Fingerprint2.get((components) => {
const values = components.map((component) => component.value)
const fp = Fingerprint2.x64hash128(values.join(''), 31)
})
})
fingerprintjs2 имеют разные классификации компонентов
browser-independent component: некоторые компоненты могут получать одинаковое значение в разных браузерах на одном и том же устройстве, а некоторые независимые браузеры могут получать разные значения.stable component: значение некоторых компонентов не изменится после обновления, которое называется стабильным компонентом.
Мы можем выбрать соответствующие компоненты в соответствии с бизнесом
const options = {
excludes: {userAgent: true, language: true}
}
Заключение
Информация об отпечатках пальцев браузера может быть получена в соответствии с холстом
- Получить
base64строку URL-адреса данных изображения через холст - Выполните вычисление дайджеста MD5 для строки
bas464, чтобы получить информацию об отпечатке пальца.
Если он используется в производственной среде, fingerprintjs2 можно использовать для соответствующего компонента в соответствии с бизнес-требованиями, например, может ли одно устройство быть кросс-браузерным.
03 Как получить IP клиента в серверном приложении
Если есть заголовок x-forwarded-for request, возьмите первый IP-адрес, в противном случае возьмите remoteAddr сокета, установившего соединение.
И x-forwarded-for в основном стал стандартным HTTP-заголовком на основе прокси. Формат следующий. Видно, что первый IP-адрес представляет его реальный IP-адрес. Вы можете обратиться к MDN X-Forwarded-For
X-Forwarded-For: 203.0.113.195, 70.41.3.18, 150.172.238.178 X-Forwarded-For: <client>, <proxy1>, <proxy2>
Вот как коа получает IP
get ips() {
const proxy = this.app.proxy;
const val = this.get(this.app.proxyIpHeader);
let ips = proxy && val
? val.split(/\s*,\s*/)
: [];
if (this.app.maxIpsCount > 0) {
ips = ips.slice(-this.app.maxIpsCount);
}
return ips;
},
get ip() {
if (!this[IP]) {
this[IP] = this.ips[0] || this.socket.remoteAddress || '';
}
return this[IP];
},
04 Как заменить одну подстроку другой подстрокой в js
Подробное описание: Suppose there is a string `hello.hello.hello.` that needs to be replaced with `AAA`, that is, replace `hello.` with `A`
Если необходимо заменить всю строку, вы можете использовать String.prototype.replace(re, replacer), где вам нужно открыть глобальный флаг для регулярного выражения.
const s = 'foo foo foo' s.replce(/foo/g, 'bar')
Более того, можно ли использовать регулярные выражения для замены подстрок?
Ответ: Нет, так как при использовании подстрок для построения регулярных выражений могут быть специальные символы, что может вызвать проблемы, как показано ниже.
// expect: 'AhelloX hello3 '
> 'hello. helloX hello3 '.replace(new RegExp('hello. ', 'g'), 'A')
< "AAA"
Вы можете заменить подстроки в javascript, как показано ниже: str.split(‘foo’).join(‘bar’)
> 'hello. hello. hello. '.split('hello. ').join('A')
< "AAA"
Какой умный (тупой) замечательный (топорный) способ!!! TC39 наверное тоже понял проблему, поэтому придумал новый API, в ESNext
String.prototype.replaceAll()
'aabbcc'.replaceAll('b', '.');
// 'aa..cc'
Заключение
Два решения
str.split('foo').join('bar')str.replaceAll('foo', 'bar')
05 Как получить память процесса и следить за ней
Подробное описание: When writing scripts, sometimes OOM occurs when the memory is too large, so how do we know the memory of a process? Also how to monitor it
Память, занятая процессом, может быть получена через ps
$ ps -O rss -p 3506 PID RSS S TTY TIME COMMAND 3506 6984 S pts/1 00:00:00 vim
Если вы хотите следить за памятью, вы должны использовать команду pidstat, которая всесильна в процессе
## -r show memory info ## -p for pid ## 1: print once aminute $ pidstat -r -p 3506 1 Linux 3.10.0-957.21.3.el7.x86_64 (shanyue) 11/04/19 _x86_64_ (2 CPU) 20:47:35 UID PID minflt/s majflt/s VSZ RSS %MEM Command 20:47:36 0 3506 0.00 0.00 139940 6984 0.18 vim 20:47:37 0 3506 0.00 0.00 139940 6984 0.18 vim 20:47:38 0 3506 0.00 0.00 139940 6984 0.18 vim 20:47:39 0 3506 0.00 0.00 139940 6984 0.18 vim 20:47:40 0 3506 0.00 0.00 139940 6984 0.18 vim 20:47:41 0 3506 0.00 0.00 139940 6984 0.18 vim
pidstat — это инструмент для повышения производительности Linux под sysstat, но как в Mac отслеживать изменения памяти? Конечно, можно использовать всемогущий top/htop
$ htop -p 31796
Заключение
Три решения
pidstat -rhtop/top -pps -O rss -p
Окончательно
Спасибо, что прочитали. С нетерпениемс нетерпением жду ваших подписчиков и новых статей высокого качества.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
