nolimits4web / dom7

Minimalistic JavaScript library for DOM manipulation, with a jQuery-compatible API
http://framework7.io/docs/dom7.html
MIT License
162 stars 45 forks source link

Optimized qsa function #60

Open ilyaChuk2004 opened 1 year ago

ilyaChuk2004 commented 1 year ago

querySelector('.#id) в 3 раза медленнее, чем getElementById('id')[0]. querySelector('.class') в 5 раз медленнее, чем getElementsByClassName('class')[0]. querySelectorAll('.class') в 160 раз медленнее, чем getElementsByClassName('class'). querySelector('tag') в 230 раз медленнее, чем чем getElementsByTagName('tag')[0]. querySelectorAll('tag') в 300 раз медленнее, чем чем getElementsByTagName('tag').

Как вам идея переписать постоянно использующуюся функцию $ с использованием getElement....? Вот как я у себя это реализовал

function qs(selector, el, m) {
    el ??= document
    switch (selector[0]) {
        case '@':
            return typeof m == 'number' ? el.querySelectorAll(selector.slice(1)) : el.querySelector(selector.slice(1))
        case '.':
            return typeof m == 'number' ? el.getElementsByClassName(selector.slice(1)) : el.getElementsByClassName(selector.slice(1))[0]
        case '#':
            return el.getElementById(selector.slice(1))
        default:
            return typeof m == 'number' ? el.getElementsByTagName(selector) : el.getElementsByTagName(selector)[0]
    }
}

Да, бывает, без querySelector не обойтись. Но некоторые случаи, как получение по id и tagName, идеально бы реализовать через getElementBy..