Длинная форма с использованием jquery Validate вызывает медленное предупреждение сценария IE

Question

Я использовал плагин проверки jquery http://bassistance.de/jquery-plugins/jquery-plugin-validation/. Он работал успешно, хотя теперь у меня есть форма с таблицей, содержащей около 100 строк, каждая с полем ввода

http://jsfiddle.net/X8tsR/

Это приводит к появлению в IE предупреждения "скрипт на этой странице заставляет Internet Explorer работать медленно".

Мне интересно, есть ли проблема с моей реализацией или этопросто неразумно ожидать, что этот скрипт проверки будет работать на таком большом количестве контента?

Answer 1

Страницы являются однопоточными, поэтому наличие долго работающего скрипта приведет к блокировке страницы. Браузеры, такие как Internet Explorer, используют один поток для всего браузера, что означает, что весь браузер перестанет отвечать на запросы. В качестве решения браузеры остановят код, который кажется слишком длинным, и спросят пользователя, хотят ли они, чтобы скрипт продолжал работать.

В старых версиях Internet Explorer нет особенно быстрых движков javascript, поэтому повторение 100 входных данных и их проверка займет много времени и, возможно, дольше с такими вещами, как .each (). Хотя технически код будет выполняться, это займет много времени. Возможно, вы сможете сделать что-то для оптимизации своего кода, но я думаю, что простое решение состоит в том, чтобы подключить прослушиватель событий к каждому из входных данных и проверять их, когда пользователь вводит значения. Это будет иметь двойное преимущество: пользователю не нужно будет прокручивать длинную форму и находить недопустимые поля, и это позволит браузеру проверять только один блок за раз.

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

Answer 2

Ответ Thim сделает свое дело, вот небольшая модифицированная версия этого. По сути, замена метода elements из плагина jquery validate приведенным ниже кодом, несомненно, улучшит синхронизацию, если у вас слишком много полей для проверки.

elements: function() {            
        var ret = [];
        var form = $(this.currentForm);
        for (var inputName in this.settings.rules) {                
            var inputs = form.find("input[name='" + inputName + "'], select[name='" + inputName + "'], textarea[name='" + inputName + "']");
            if (inputs.length > 0) {                    
                ret.push(inputs[0]);
            }
        }   
        /*You can comment below code if you're adding required rules explicitly*/           
        var _required = form.find(".required");         
        for (var i = 0; i < _required.length ; i++)
            ret.push(_required[i]);

        /*if you don't do this, you may encounter an error*/    
        return $(ret).map(function () {
            return this;
        });         
    }

Answer 3

У нас недавно была похожая проблема со страницей, содержащей более 600 флажков. Мы нашли решение переопределить функцию «elements» в jquery validate. Эти методы (как мы понимаем это), кажется, отвечают за обнаружение всех входных данных формы. Этот список входов затем используется для вызова метода valid () для каждого имени входа . Учитывая огромное количество флажков, это вызывает огромные накладные расходы (каждый ввод приводит к созданию объекта jquery).

Метод элементов был переопределён следующим образом:

var ret=[];
var form=$(this.currentForm);
for(var inputName in this.settings.rules){
    var inputs=form.find("[name='"+inputName+"']");
    if(inputs.length>0){
        console.log("Found input name: "+inputName);
        ret.push(inputs[0]);
    }
 }
 return ret;

В нашем случае мы перешли от нескольких 100 мс с исходным методом элементов к ~ 10 мс с Firefox.

Примечание Проверка JQuery версии 1.11.1