Производительность jQuery (пустой запрос) - PullRequest
Новая
       14

Производительность jQuery (пустой запрос)

0 голосов
/ 30 ноября 2011

В старых проектах я загружал все пользовательский код jquery в один документ. Уже в одном файле на каждой странице (прост в обслуживании, но много ненужных селекторов на странице) Я начал думать (а), что это грязное программирование, и (б) это, должно быть, плохая производительность, поэтому я начал проводить некоторые исследования.

Я в основном хотел один файл js, но хотел загружать / обслуживать только те запросы / селекторы / функции, которые были необходимы для этой страницы.

Я встречал 2 варианта:

  1. http://www.artzstudio.com/2009/04/jquery-performance-rules/#eliminate-query-waste

(вызов скрипта внизу страницы над закрывающим тегом тела 

mylib.article.init();

global.js 

var mylib =
{
    article_page :
    {
        init : function()
        {
            // Article page specific jQuery functions.
        }
    },
    traffic_light :
    {
        init : function()
        {
            // Traffic light specific jQuery functions.
        }
    }
}

2. http://jonraasch.com/blog/5-performance-tuning-tricks-for-jquery

Предположим, что в некоторых частях сайта мы хотим свернуть элементы боковой навигации при загрузке страницы: 

$(document).ready(function() {
    $('#sideNav LI:not(#current)').hide();
});

Несмотря на то, что некоторые страницы не имеют боковой навигации, это не приведет к ошибке в любом браузере, но давайте все же убедимся, что функция скрытия выполняется только тогда, когда это необходимо: 

$(document).ready(function() {
    var sideNavPages = ['catalog', 'order', 'contact'];

    if ( jQuery.inArray(thisPage, sideNavPages) != -1 ) {
        $('#sideNav LI:not(#current)').hide();
    }
});

Какой из 2 выше лучше? Есть ли третий, еще лучший вариант?

Хорошо бы знать, что думают люди.

Adi.

Ответы [ 2 ]

1 голос
/ 30 ноября 2011

Если у вас нет лота кода jQuery, вы не заметите разницу в производительности; DOM оптимизирован для поиска элементов, и поэтому является относительно тривиальной операцией (хотя манипулирование DOM - это одна из самых медленных операций JavaScript, которые вы можете сделать.

Однако, если вы определили необходимость в этом, я рекомендую подход № 1. Один умный способ организовать это - организовать JS, например: 

var handlers = {
    id1: function () {
        $(document).ready(function () {

        });
    },

    id2: function () {
        $(document).ready(function () {

        });
    }
}

и затем вы можете вызвать ваш обработчик, например; 

var id = $('body').attr('id');
if (id && typeof obj[id] == "function") {
    obj[id]();
}
0 голосов
/ 30 ноября 2011

Из двух я предпочитаю первый. С другой стороны, я бы посоветовал вам подумать о своем желании иметь только один файл JS. Если вы разделили код для каждого типа страниц, а затем включили только ту, которая нужна, вы не только удовлетворили бы свое требование, но и сократили общий размер страницы.

В любом случае. Все это является вторичным по отношению к другой мысли, которая:

«Мы должны забыть о малой эффективности, скажем, в 97% случаев: преждевременная оптимизация - корень всего зла»

- Дональд Кнут

Дональд Кнут очень мудрый человек. Если вы не чувствуете, что количество используемых вами селекторов вызывает заметную проблему, возможно, вам не нужно добавлять сложность в ваш код.

...