управление скоростью реакции сайта

составляющие скорости

• время загрузки данных
• время инициализации новой страницы
• время реакции элементов на странице

инициализация

• отрисовка html/css
• инициализация скриптов

отрисовка html/css

• простые страницы быстрее
• expressions
• многое зависит от браузера, оптимизируют производители
• javascript подключается после основного контента

проблемы подключения js

• потенциальный document.write
• defer="defer"

подключение js после контента

• загрузка js не завершилась/прервана
• progressive enhancement

инициализация

• отрисовка html/css
• инициализация скриптов

вредные советы

• обрабатывайте побольше элементов
• существенно меняйте страницу, много reflow (web-app)
• создавайте dom-объекты про запас, даже если они не будут использованы

подключение обработчиков

• обработка многих элементов
• jQuery/behavior.js: красиво, но медленно
• скорость поиска элементов

скорость поиска элементов

• xpath
• id
• tag name
• name

глобальные обработчики

• event bubbling
• нет необходимости искать
• один обработчик
• динамически созданные элементы
• нагрузка на процессор смещается с инициализации страницы к действиям пользователя
• минимум действий

потенциал роста

• jQuery/behavior на глобальных обработчиках

время реакции элементов

• click
• hover

ускорение click

• click vs. mousedown: моментальная реакция, невозможность отмены решения
• индикатор загрузки
• время для отрисовки
• addEventListener vs. onclick

время реакции элементов

• click
• hover

случайный mouseover/mouseout

• реакция на случайный hover отвлекает
• точность действий человека невелика
• выпадающие меню и случайный mouseout

выпадающие меню

Новый Открыть… Последние > Выход Презентация Отчёт-март ПРЕВЕД!!! Документ (1)

что делать?

• плавное появление
• увеличить времени реакции
• срабатывать только при необходимости

пример «медленного hover»

• Element.delayedHover()
• Function.getDelayedHandlers()

Element.delayedHover()

Element.Methods.delayedHover = 
    function(element, handler, delay) {
        element = $(element);
        
        var delayed = 
            handler.getDelayedHandlers(delay);
    
        element.observe('mouseover', 
             delayed.handlers.over);
            
        element.observe('mouseout', 
             delayed.handlers.out);
        
        return delayed;
    }

Function.getDelayedHandlers()

var over = function() { 
    if (timeouts.out) {
        clearTimeout(timeouts.out);
        timeouts.out = null;
    }
    timeouts.over = setTimeout(
        function () { __function(true); }, overDelay) 
};
var out = function() { 
    if (timeouts.over) {
        clearTimeout(timeouts.over);
        timeouts.over = null;
    }
    timeouts.out = setTimeout(
        function () { __function(false); }, outDelay) 
};

пример использования

var tooltip = $('helpTooltip'); 

function showTooltip (hover) { 
    if (hover) {
        tooltip.show();
    } else {
        tooltip.hide();
    } 
}

$('helpButton').delayedHover(
    showTooltip, 
    {over: 200, out: 100}
);