Производительность HTML и JavaScript

Question

У меня есть веб-сайт, который является медленным. Сервер отвечает примерно на 2 - 300 мс при каждом запросе, но для просмотра страницы требуется 1,5 - 2 секунды.

Экспериментируя с отключением javascript и CSS, я решил, что это обработка браузера, которая занимает большую часть времени.

Использование Firebug, я вижу, что событие DOMContentLoaded срабатывает примерно через 0,5-1 секунду после получения данных с сервера, а событие «load» срабатывает через вторую половину секунды.

Используя профайлер Firebug, я вижу, что выполнение javascript занимает около 250 мс.

Итак, мои вопросы:

• Что браузер делать в оставшееся время, когда выполнение Javascript занимает 250 мс, но это занимает второе прежде чем страница готова?
• Что происходит между событиями DOMContentLoaded и load
• Что было бы лучшим подходом для оптимизации производительности клиентской части такой страницы?

Answer 1

Не только загрузка, но и перевод страниц требуют времени.

Для оптимизации производительности вы можете многое сделать, вы можете использовать такие инструменты, как YSlow и PageSpeed, для дальнейшего анализа страницы и определения того, что стоит делать.

Есть также принять взгляд на rules Стив Соудерс изложил в своей книге Высокопроизводительные веб-сайты:

1. делают меньше HTTP запросов
2. Использовать сеть доставки контента
3. Добавить заголовок Expires
4. Компоненты Gzip
5. Положить Стихии в начало
6. Положите скрипты внизу
7. Избегайте CSS выражений
8. Сделать JavaScript и CSS Внешний
9. Сокращение DNS-запросы
10. Минимизировать JavaScript
11. Избегайте Перенаправление
12. Удалить дубликаты Сценарии
13. Настройка ETags
14. сделать AJAX Cacheable

Существует также последующая книга под названием Even Faster Web Sites. Вы также найдете множество советов в книгах, размещенных на его blog.

Другим полезным ресурсом является Yahoo Best Practices for Speeding Up Your Web Site.

Answer 2

Для повышения производительности можно попробовать с помощью кода Minimizer Javascript (смотри, например, здесь: http://geekswithblogs.net/lbugnion/archive/2007/02/23/107120.aspx), во всяком случае Altough полезно, я не думаю, что вы получите значительное улучшение скорости от этого.

Answer 3

Это очень широкий вопрос. Существуют целые книги, посвященные производительности рендеринга на стороне клиента. Но в целом,

• вы хотите сделать как можно меньше http-запросов. объедините все javascript в один файл, все css в один и как можно больше изображений в один (см. spriteme)
• вы хотите сделать эти запросы как можно меньше. minify и gzip ваши скрипты. добавьте заголовок content-expires, заданный в далекую будущую дату для статического содержимого.
• есть общедоступные CDN, например, из google, которые позволяют вам обменивать общие скрипты, такие как библиотека jQuery, на серверы google. Это означает, что у многих посетителей уже будут сохранены эти файлы.
• Выполнение javascript обычно является большим узким местом. вы хотите отложить как можно больше загрузки скрипта. ваш css всегда должен быть включен в ваш заголовок, но многие ваши javascript могут быть включены в нижней части страницы. в этих случаях, страница будет отображаться быстро, Eventhough там будет задержка перед DOMReady выстреливает

Как задержки между DOMReady и события загрузки страницы, это где изображения (и потенциально видео) загружаются, и, возможно, выполняется javascrpit.

Оформить заказ аддонов YSlow для Firebug.

Answer 4

Добавление к предыдущим ответам не включает все файлы Javascript в самом заголовке .... Это просто задержит загрузку DOM. Разделите файлы перед включением и включите их рядом с соответствующим элементом в теле, на котором он будет действовать.

Конечно, вы можете включить в заголовок мини-версию JS-библиотек.

Использование методов Closure для переменной области видимости в javascript ... а также использование минимального количества глобальных переменных имеет значение для inc в предварительном порядке.

И используйте google's closure compiler или что-то похожее на минимизацию js.