Your SlideShare is downloading. ×
Web со скоростью клика - openwebcamp kiev 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web со скоростью клика - openwebcamp kiev 2010

1,250
views

Published on

Обзор эфективных методов разгона сайтов. Детали оптимизации скорости загрузки, особенности рендеринга

Обзор эфективных методов разгона сайтов. Детали оптимизации скорости загрузки, особенности рендеринга

Published in: Technology, Design

2 Comments
1 Like
Statistics
Notes
  • http://vitex.in.ua/owc2010/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Дополнительный текст и список рекомендуемых источников тут: vitex.in.ua/owc2010/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,250
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
2
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web со скоростью клика Виталий Рыбалка
  • 2. Оптимизация времени загрузки Делать меньше HTTP запросов к серверу CSS файлы подключаем в head Скрипты загружаем перед </body> Убираем inline код Переносим файлы CSS JavaScript графику на cookie-free домен
  • 3. Оптимизация времени загрузки Избегаем CSS Expressions Ставим Expires заголовки GZIP для HTML CSS JavaScript файлов Уменьшаем кол-во используемых DNS имен Сжимаем HTML CSS JavaScript Избегаем редиректов
  • 4.  
  • 5. Критерии Time-to-text DOM-loaded Полная загрузка
  • 6. Инструменты Cuzillion Google Chrome: Chrome Developer Tools Firefox: Firebug/Net Yahoo! YSlow Page speed Inline Code Finder AOL Pagetest
  • 7. DOM HTML head body HTML div H1 UL HTML title LI DIV display:none
  • 8. Content tree Content tree body div H1 UL HTML LI text text
  • 9. Отрисовка Вычесленные стили JS Контент CSS Построение фрейма Layout Paint
  • 10. Применение селекторов body div div # block div .item div .item body p p p
  • 18. Примеры CSS
  • 19. Reflow и Javascript Reflow происходит паками (зависит от браузера) Вызов информации о позиционировании блока провоцирует немедленный reflow Изменение DOM приводит к reflow: плохо - obj.style.left = '...';obj.style.top = '...'; лучше – obj.style.cssText='...' Перед изменениями в DOM – скрываем элемент display:none
  • 20.  
  • 21.  
  • 22. Javascript события
  • 23. Инструменты Dyna Trace Ajax Google Speed Tracer
  • 24. JS Анимация Каждый кадр анимации – reflow Цель – локализовать область reflow Ставим position:absolute|fixed для блока с анимацией – получаем reflow только этого блока + repaint родителя
  • 25. http://vitex.in.ua/owc2010/ twitter: @vitexua e-mail: vitaly@vitex.in.ua