Каковы некоторые методы для улучшения отзывчивости пользовательского интерфейса?

Question

В приведенном ниже примере кто-нибудь может сказать мне, как заставить "медленный ответ при нажатии" отвечать быстрее без изменения appendContent ()? Мне интересно, есть ли способ разместить дешевые операции перед более дорогими, и убедиться, что дешевые операции действительно выполняются быстро.

<div id="draw">slow response when clicked</div>

<div style="overflow: auto; height: 300px; border:solid 1px grey" id="content"></div>

<script language="javascript">

    var clickLink = document.getElementById("draw");
    var contentDiv = document.getElementById("content")

    function appendContent(){
        contentDiv.innerHTML =  contentDiv.innerHTML + "hello ";
    }

    clickLink.onclick = function(){
        clickLink.style.color = "red";
        for (var i = 0; i < 1500; i++){     
            appendContent();    
        }
    };
</script>

Answer 1

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

Answer 2

Механизм обратной связи должен отличаться на время ожидания пользователя. Менее 0,1 секунды и пользователь не заметит.

От 1 до 10 секунд вы можете просто отобразить символ, такой как анимированный GIF-файл, который указывает, что ваше приложение обрабатывает. Смотри http://www.ajaxload.info/ Я использую div с идентификатором «processing» и стилизую его с помощью прядильщика и использую следующий код jquery для отображения и скрытия его до и после процесса.

function showProcessing(){
    $("#processing").fadeIn("fast");
}

function hideProcessing(){
    $("#processing").fadeOut("fast");
}

По истечении 10 секунд было бы идеально предоставить оценку времени обработки.

См. Обзор времени отклика для определения источника этих чисел.

Следующий код немедленно меняет цвет ссылки на красный и вызывает метод добавления через доли секунды. По сути, это позволяет браузеру выполнить отдельный поток, прежде чем зацикливаться. Время ожидания может потребоваться изменить в зависимости от браузера. Проверьте Threading в JavaScript 1.7 от Neil Mix, если вам нужно отказаться от контроля более общим способом.

    function startAppend(){
      for     (var i = 0; i < 1500; i++){             
              appendContent();        
      }
    }

    clickLink.onclick = function(){
            clickLink.style.color = "red";
            setTimeout('startAppend()', 10)                
    };

Answer 3

Попробуйте это: добавьте div, содержащий вашу загрузочную графику по умолчанию, но установите CSS для отображения: нет. Затем, когда нажата кнопка div # draw, настройте отображение загружаемой графики на блок, а затем выполните рисование. Когда рисунок закончен, верните дисплей на нет.

Answer 4

В библиотеке пользовательского интерфейса Yahoo есть много хорошего кода и элементов управления, которые уже используют такие технологии, как AJAX, для улучшения восприятия вашего веб-приложения.

Использование библиотеки, такой как Yahoo !, сделает добавление этой функции в ваше приложение намного быстрее и менее подвержено ошибкам.

http://developer.yahoo.com/yui/

Answer 5

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