В этот день и возраст быть разработчиком и находясь в быстрой среде, мы должны доставлять как можно быстрее.
При попытке доставить быстро, мы в конечном итоге функциональность здания в Оптимизирован способ. Начнем использовать первое решение на переполнении стека, что может не всегда быть наиболее эффективным или правильным решением и может даже быть взломать Отказ
Я перечислял некоторые из неэффективных фрагментов кода и хаки, которые я видел в нескольких кодовых базах и правильный способ решать те. Давайте начнем!
1. Родной способ сброса положения прокрутки окна при навигации между веб-страницами
Сегодня многие современные браузеры имеют тенденцию помнить положение прокрутки при навигации между страницами на веб-сайте, в то время как иногда это может быть очень полезным, но в то же время это может вызвать проблему.
Когда вы хотите сбросить данные о странице или сделать вызов API каждый раз, когда страница загружается, чтобы сохранить обновленную страницу, это может привести к серьезным проблемам.
Поскольку браузер всегда будет прокручивать до предыдущего положения прокрутки, а не сверху, как и ожидалось.
Теперь в нескольких кодовых базах я видел, как это обрабатывается, используя window.scrollto (0,0) на странице крепления. Это немного отстает, так как он работает после того, как произошла первая краска.
Но если мы сможем отключить функциональность браузера, чтобы запомнить положение прокрутки, то нам не нужно добавлять взлом. Вот и все.
if (window.history.scrollRestoration) {
window.history.scrollRestoration = 'manual'; //default is 'auto'
}
2. Легкий и точный способ подтвердить URL без регеляции
Я думаю, что один из самых прослушиваемых вопросов, и самый отвеченный тем, как подтвердить основной URL в JS. И я видел много разных типов Regex, для него сопоставления строк для него.
Но есть более простое решение с использованием нового сетевого конструктора URL.
const validateURL = url => {
try {
new URL(url)
return true
} catch {
return false
}
}
3. Всегда добавьте дроссель или отговорите о слушателях событий, как Scroll или изменить размер
Всякий раз, когда вы слушаете события на странице, важно убедиться, что слушатели событий не перегружены при обработке входящих запросов.
В противном случае они могут быстро стать узким местом и вызвать ненужный удар производительности.
Там, где это часто превращается в проблему, заключается в том, что у вас есть слушатели, которые увольняют события в быстрой последовательности, как для прокрутки на перемещение мыши или события клавиши.
Например, события прокрутки могут выстрелить при таком высоком уровне, важно убедиться, что обработчик событий не делает вычислительно дорогие операции. Потому что, если это будет, это будет все сложнее для того, чтобы браузер не продолжал.
- Дроссельная версия:
const throttle = (fn, wait) => {
let time = Date.now()
return () => {
if ((time + wait - Date.now()) < 0) {
fn()
time = Date.now()
}
}
}
const cbFuncOnScroll = () => {
console.log('scroll')
}
const throttledfunc = throttle(cbFuncOnScroll, 200)
document.addEventListener('scroll', throttledfunc)
- Дебанженная версия:
const debounce = (func, delay) => {
let timeout = ''
return function() {
clearTimeout(timeout)
const context = this
const args = arguments
timeout = setTimeout(() => {
func.apply(context, args)
}, delay || 500)
}
}
const cbFuncOnScroll = () => {
console.log('scroll')
}
const debouncedFunc = debounce(cbFuncOnScroll, 200)
document.addEventListener('scroll', debouncedFunc)
- Бонус: Deboutence с Window ProwelsimationFrame ( Лучший Несомненно
const debounceUsingAnimationFrame = (fn, ...args) => {
// Setup a timer
let timeout
// Return a function to run debounced
return () => {
// Setup the arguments
const context = this
// If there's a timer, cancel it
if (timeout) {
window.cancelAnimationFrame(timeout)
}
// Setup the new requestAnimationFrame()
timeout = window.requestAnimationFrame(() => {
fn.apply(context, args)
})
}
}
const cbFuncOnScroll = () => {
console.log('scroll')
}
const debouncedAnimationFrameFunc =
debounceUsingAnimationFrame(cbFuncOnScroll, 200)
document.addEventListener('scroll', debouncedAnimationFrameFunc)
Protip: document.addeventListener (‘Scroll’, cbfunconscroll, {passive: true}), здесь passive, который устанавливается в true, скажет браузеру, который вы просто хотите сделать свои вещи И вы не собираетесь позвонить PerfectDefault. Вот видео, показывающее улучшение производительности, вызванное этим свойством – https://youtu.be/npm6172j22g
4. Стайлинг кросс-браузера может быть достигнут у CSS
Разработка кросс-браузера является одним из самых важных навыков, которые должен иметь разработчик Frontend, и мы всегда были там, когда нам может потребоваться настроить стиль компонента на другом браузере из-за несовместимости определенных свойств CSS.
Что вы делаете, чтобы добиться этого, наиболее распространенным решением, которое я видел, является через JS, где мы извлекаем пользовательское согласие или платформу и на основании этого, мы применяем стили на компоненте.
Но это правильный и единственный способ сделать это?
Вот мое решение
- Запрос CSS Safari Target CSS
@supports (-webkit-touch-callout: none) {
// add styles here to override for safari
}
- Mozilla Target CSS запрос
@-moz-document url-prefix() {
// add styles here to override for mozilla firefox
}
- IE11 Целевой запрос CSS
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// add styles here to override for IE11
}
Это простой способ переопределить или добавлять стили для определенных браузеров без JS.
5. Ленивый визуализация компонентов с использованием CSS
Мы работали над большими компонентами, которые состоят из нескольких небольших компонентов, среди этих небольших компонентов, а не каждый компонент, фактически видимый внутри Viewport изначально.
Но только видно, когда пользователь прокручивается, но обычно мы загружаем все компоненты и визуализировать их в Viewport.
Здесь хорошее решение JS здесь состоит в том, чтобы использовать InterSeficateBServer API для обработки рендеринга компонента только тогда, когда они в фокусе. Это решение является хорошим, так как наблюдатели работают на другом потоке и не препятствуют производительности на главной ните.
Но что, если я скажу вам, есть лучшее решение, не используя JS, а только CSS.
Вот поставляется Содержание видимости Свойство, которое позволяет пользователю Agent пропустить работу рендеринга элемента, включая макет и покраску, пока не требуется.
Поскольку рендеринг пропускается, если большая часть вашего контента не работает, используя свойство видимости контента, делает начальную загрузку пользователей намного быстрее.
Это также позволяет более быстрым взаимодействиям с содержанием экрана. Довольно аккуратно
.element {
content-visibility: auto;
}
Protip: много подробных объяснений по видимости контента – https://web.dev/content-visibility/
6. Избегайте резервирования кода при добавлении попробуйте улов на побочный эффект API вызовы
Наиболее распространенной задачей, которую мы всегда выполняем при разработке функций, заключается в том, чтобы сделать вызовы API для получения данных для отображения его на странице.
Но Поскольку это побочный эффект, и у нас зависимость от других услуг.
Мы, как правило, всегда оберните наших вызовов API в попытке и отложите оператор, чтобы быть на более безопасной стороне и грациозно обрабатывать ошибки.
Но вы не чувствуете, что добавляет слишком много кода котел для каждого вызова API, который мы делаем?
Вот решение, основанное простое обещание, чтобы избежать чрезмерного использования примерки поймать блок
const sideEffectAPIWrapper = (promise) =>
promise
.then(result => [result, null])
.catch(err => [null, err])
const sampleFunc = async () => {
const [result, error] = await sideEffectAPIWrapper(callAPI())
if (result) {
console.log('success')
return
}
if (error) {
console.log('failure')
return
}
}
Вывод
Все точки, которые я упомянул, – это проблемы, с которыми я столкнулся и увидел в разработке веб-приложений. Я уверен, что вы также могли бы столкнуться с этими точками в ваших кодовых базах.
Один простой способ избежать взлома и резервирования – спросить, что может быть лучший альтернативный способ достижения этой функциональности.
Этот простой вопрос, когда вы спрашиваете себя во время записи или рассмотрения кода, всегда помогут вам принять хорошее решение и избежать будущих проблем о производительности и эффективности кода в вашей кодовой базе.
Это все люди, Adios Amigos
Оригинал: “https://dev.to/faisalpathan/simple-solutions-to-avoid-js-problems-and-hacks-4fcb”