webew
Войти » Регистрация
 
JavaScript
HTML
MySQL/MariaDB :: оптимизация
Протоколы :: HTTP

Аудит производительности webew.ru командой Cancanit.com

29 марта 2012, 16:48
Автор: rgbeast
Команда проекта Cancanit.com провела аудит производительности webew.ru. Думаю нашим читателям будет интересно познакомиться с отчетом: PDF. Мы уже исправили несколько мелких недочетов, а остальные рекомендуемые изменения планируем внести в ближайшее время.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское

1234ru

Непростой вопрос - использование спрайтов.
Теоретически всю css-графику можно загнать в спрайты. Но работать с этим при верстке будет неудобно.
Вопрос, где тут остановиться, предстоит решить.
То, что не убивает нас, делает нас инвалидами.
29.03.2012, 17:20
Ответить
NO USERPIC

rgbeast

Какие могут быть проблемы со спрайтами? Например, может ли так получиться, что при нажатии Ctrl + вылезет не предназначенная часть изображения? И какая замена тегу img?
29.03.2012, 17:30
Ответить

1234ru

Цитата:
может ли так получиться, что при нажатии Ctrl + вылезет не предназначенная часть изображения? И какая замена тегу img?

Спрайт к img не относится. Это для css-свойства background-image.
Думаю, что при нажатии Ctrl + ехать не должно, т.к. фоновое изображение наверняка будет ресайзиться вместе со всем остальным.
То, что не убивает нас, делает нас инвалидами.
29.03.2012, 17:43
Ответить
NO USERPIC

rgbeast

У нас часть верстки - это img. Для того, чтобы использовать спрайт придется это на что-то заменять. Есть ли простой эксвивалент img через спрайт?
29.03.2012, 17:48
Ответить

1234ru

Нужно тогда делать картинки в верстке не тегами <img>, а css-свойством background-image.
То, что не убивает нас, делает нас инвалидами.
29.03.2012, 18:00
Ответить
NO USERPIC

rgbeast

Я принцип понял, но меня интересует конечный ответ. Какой код станет заменой <img src="elka.jpg"> ?
29.03.2012, 18:04
Ответить

1234ru

Что-то такое:
<span id="elka"></span>

CSS:
#elka {
    background-image: url("elka.jpg");
    background-repeat: no-repeat;
    background-position: 0px 0px;
       /* это в случае
        одиночного изображения;
        в случае спрайта (т.е. когда несколько картинок
        слеплены вместе) придется высчитывать,
        какой у фонового изображения должен быть отступ,
        чтобы попало именно на нужный участок;
        т.к. сам спрайт, очевидно, больше,
        чем элемент, отступы будут отрицательными */

    width: Npx;  
    height: Mpx;
        /* обязательно прописываем размеры,
        равные размерам elka.jpg;
        блок пустой, поэтому если размеры
        явно не прописать - он схлопнется */

       
    display: inline-block;
        /* обязательно block или inline-block,
        иначе не послушается указания размеров */

}

То, что не убивает нас, делает нас инвалидами.
29.03.2012, 18:28
Ответить

1234ru

Кстати, как Keep-Alive работает?
То, что не убивает нас, делает нас инвалидами.
29.03.2012, 17:25
Ответить
NO USERPIC

rgbeast

Это часть протокола HTTP. В стандартной схеме клиент (браузер) открывает HTTP-соединение, посылает запрос GET ..., получает ответ и соединение закрывается. Далее для загрузки картинок и др. снова открывает соединение, GET, ответ, соединение закрывается.
Если клиент передает с запросом заголовок Connection: Keep-Alive, то сервер имеет право вернуть документ, но не закрыть соединение и тогда клиент cможет отправить новый запрос GET, не открывая нового соединения. В итоге экономится число http-соединений, расходы на fork httpd и др.

Наглядний пример Keep-Alive из жизни будет что-то вроде такого. В магазине покупатель (C) и продавец (S):
C: - мне пожалуйста бутылку водки
S: - пожалуста, с вас 189 рублей
C: передает деньги, берет бутылку
C: - подождите меня пожалуйста секундочку (Keep-Alive)
C: достает стопочку, наливает, выпивает
C: - и пожалуйста еще огурчики
S: - пожалуйста, с вас 76 рублей

За счет Keep-Alive, покупатель не прерывает общение с продавцом, а очередь ждет. Если бы не было такой опции, пришлось бы снова вставать в очередь за огурцами, что увеличит общее время обслуживания.
29.03.2012, 17:40
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: