01. Минимизируйте HTTP-запросы. Сократите HTTP-запросы.
Изображение, CSS, скрипт, Flash и т. д. увеличат количество HTTP-запросов. Уменьшение количества этих элементов может сократить время ответа. Если возможно, записывайте несколько JS и CSS в один файл; также не рекомендуется записывать изображения непосредственно на страницу. Вам следует записать их в CSS, использовать CSS Sprite для сборки небольших изображений, а затем использовать фон для поиска позиции. используйте «Карту изображений» (Размещая разные URL-адреса на одном изображении, этот метод может уменьшить количество запросов изображений. После тестирования время получения карты изображений на 56 % быстрее, чем время получения каждого отдельного изображения. Карта изображений Существует два способа: один — «карта изображения на стороне сервера», а другой — «карта изображения на стороне клиента». Реализация на стороне сервера заключается в передаче координат XY, нажатых пользователем, на сервер, а затем на сервер. боковые карты соответствующих операций. Используйте теги MAP на переднем плане. Метод карты изображения значительно усложняет обслуживание программирования).
02. Используйте сеть доставки контента с использованием технологии CDN.
«Сеть доставки контента». Его цель — опубликовать содержимое веб-сайта на ближайшей к пользователю «границе» сети путем добавления нового уровня сетевой архитектуры к существующему Интернету.
Особенности CDN:
1. Ускорение локального кэша – повышает скорость доступа к корпоративным сайтам (особенно сайтам, содержащим большое количество картинок и статических страниц), а также значительно повышает стабильность сайтов вышеуказанного характера.
2. Услуга зеркалирования – устраняет влияние узких мест при межсетевом соединении между различными операторами, реализует ускорение межоператорской сети и гарантирует, что пользователи в разных сетях могут получать хорошее качество доступа.
3. Удаленное ускорение. Пользователи удаленного доступа разумно и автоматически выбирают сервер кэша на основе технологии балансировки нагрузки DNS и выбирают самый быстрый сервер кэша для ускорения удаленного доступа.
4. Оптимизация пропускной способности. Автоматически создавайте удаленный сервер зеркального кэша для сервера и считывайте данные с сервера кэша при доступе к нему удаленных пользователей, уменьшая пропускную способность удаленного доступа, распределяя сетевой трафик и снижая нагрузку на веб-сервер исходного сайта. , и т. д.
5. Кластерная защита от атак. Широко распределенные узлы CDN и интеллектуальный механизм резервирования между узлами могут эффективно предотвращать хакерские вторжения и снижать влияние различных DDOS-атак на веб-сайт, обеспечивая при этом хорошее качество обслуживания.
03. Добавьте заголовок Expires или Cache-Control, чтобы установить «срок действия файла заголовка» или «статический кеш».
Браузеры используют кеширование, чтобы уменьшить количество HTTP-запросов и ускорить загрузку страниц. Если в заголовок страницы добавлен длительный срок действия, браузер всегда будет кэшировать элементы на странице. Однако если что-то на странице изменится, имя необходимо изменить, иначе клиент не будет активно обновляться.
(1) Концепция
Cache-control используется для управления HTTP-кешем (может не быть частично реализовано в HTTP/1.0, реализован только Pragma: no-cache)
Формат: Cache-Control: директива кэша
Директива кэша может быть следующей:
Используется при запросе:
"без кэша" |
"без магазина" |
«max-age» «=» дельта-секунды
"max-stale" [ "=" дельта-секунды]
«мин-свежий» «=» дельта-секунды
"без преобразования" |
"только если кэшировано" |
"расширение кэша" |
Используется в ответ:
"общественный" |
| "частное" [ "=" <"> имя поля <"> ]
"без кэша" [ "=" <"> имя поля <"> ]
"без магазина" |
"без преобразования" |
"необходимо провести повторную проверку" |
"перепроверка прокси" |
«max-age» «=» дельта-секунды
«s-maxage» «=» дельта-секунды
"расширение кэша" |
Частичное описание:
Разделяется в зависимости от того, можно ли его кэшировать.
Public указывает, что ответ может быть кэширован любым кэшем.
Частный означает, что все или часть ответного сообщения для одного пользователя не может быть обработана общим кэшем. Это позволяет серверу описывать только частичный ответ пользователя, который недействителен для запросов других пользователей.
no-cache указывает, что сообщение запроса или ответа не может быть кэшировано (HTTP/1.0 заменен на no-cache Pragma)
На основе того, что можно кэшировать
no-store используется для предотвращения непреднамеренного раскрытия важной информации. Отправка его в сообщении запроса приведет к использованию кэширования как в запросе, так и в ответном сообщении.
На основе тайм-аута кэша
max-age указывает, что клиент может получать ответы со временем жизни не более указанного времени в секундах.
min-fresh указывает, что клиент может получать ответы со временем ответа меньшим, чем текущее время плюс указанное время.
max-stale указывает, что клиент может получать ответные сообщения по истечении периода ожидания. Если указано значение максимального количества устаревших сообщений, клиент может
Получает ответные сообщения, находящиеся в пределах указанного периода ожидания.
Expires представляет время существования, позволяя клиенту не проверять (отправлять запрос) до этого времени, что эквивалентно максимальному возрасту.
Эффект. Но если они существуют одновременно, они будут переопределены максимальным возрастом Cache-Control.
Формат: Expires = "Истекает" ":" HTTP-дата
Например: Срок действия истекает: четверг, 1 декабря 1994 г., 16:00:00 по Гринвичу (должен быть в формате GMT).
(2) Применение
Установите срок действия и управление кешем через HTTP META:
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv=”Истекает” content=”Пн, 20 июля 2009 г. 23:00:00 GMT” />
Вышеуказанные настройки являются лишь примерами, и любую из них можно использовать на практике. Если написано так, оно будет действительным только для веб-страницы, не будет использоваться для изображений или других запросов на веб-странице и не будет выполнять никакого кэширования. Более того, от клиента поступает больше запросов. Хотя он проверяет только статус «Последнее изменение», увеличение количества запросов должно повлиять на скорость просмотра.
Если вы хотите добавить кеш в файл, вы можете использовать модуль apache mod_expire ( http://httpd.apache.org/docs/2.2/mod/mod_expires.html ), который записывается как
<IfModule mod_expires.c>
ИстекаетАктивен Вкл.
ExpiresDefault «доступ плюс 1 день»
</ЕслиМодуль>
Я помню, что для ExpiresActive установлено значение «Вкл.». Я сначала не включил его. Кажется, YSlow не может найти механизм кэширования, несмотря ни на что. Если добавлено таким образом, оно будет включено по умолчанию. Если вы хотите настроить таргетинг на отдельные типы MIME, вы можете:
ExpiresByType image/gif «доступ плюс 5 часов 3 минуты»
Кроме того, когда вы нажимаете «Обновить» в браузере, все запросы, отправленные клиентом, имеют значение max-age=0, что указывает на операцию проверки. Отправьте запрос на сервер для проверки кеша, а затем обновите кеш. получите 304 Not Modified, что означает отсутствие изменений.
04. Компоненты Gzip Сжатие Gzip
Формат Gzip — очень распространенная технология сжатия. Почти все браузеры имеют возможность распаковывать формат Gzip, а степень сжатия, которую он может сжимать, очень велика, общая степень сжатия составляет 85%. Сжатие или нет, вы можете проверить здесь.
05. Поместите таблицы стилей вверху. Поместите CSS вверху.
Используйте тег LINK, чтобы поместить таблицу стилей в ЗАГОЛОВОК документа, чтобы зрители могли увидеть полный стиль веб-сайта как можно раньше.
HTML-страницы визуализируются шаг за шагом. Когда пользователи открывают страницу, нам необходимо учитывать пользовательский опыт — скорость открытия веб-страницы. Первым требованием для отображения страницы является HTML, а HTML состоит из DIV один за другим, а CSS является основой всего.
06. Поместите скрипты внизу. Поместите JS внизу.
После рендеринга веб-сайта вы можете настроить функции. Конечно, эти JS не должны влиять на производительность контента во время процесса загрузки.
Поскольку страница отображается постепенно, содержимое ниже сценария будет заблокировано. Рендеринг страницы не продолжится, пока скрипт не завершит загрузку. Правильное размещение
(1) В худшем случае: поместите скрипт вверху. Он заблокирует последующий рендеринг контента и последующую загрузку компонентов.
(2) Лучший сценарий: поместите сценарий внизу. Не препятствует рендерингу страницы.
07. Избегайте выражений CSS. Избегайте выражений CSS.
Выражения CSS ужасны. Эта вещь, которая поддерживается только IE, требует очень большого количества вычислений при выполнении. Она будет пересчитываться каждый раз, когда вы перемещаете мышь, но иногда это необходимо использовать для совместимости с браузером.
08. Сделайте JavaScript и CSS внешними
Ранее мы говорили о кэшировании. Для некоторых наиболее распространенных JS и CSS мы можем использовать внешние ссылки, например, ссылки на файлы JQuery из Google.
09. Уменьшите количество запросов DNS. Уменьшите количество запросов DNS.
Уменьшите количество ресурсов, вызывающих веб-сайт извне.
Интернет находит серверы по IP-адресу. У DNS также есть накладные расходы. В обычных обстоятельствах время, необходимое браузеру для поиска IP-адреса данного хоста, составляет 20–120 мс. Чтобы сократить время, затрачиваемое на процесс поиска DNS, необходимо использовать некоторые из следующих методов:
(1) DNS-кэш
Поиск DNS можно кэшировать для повышения производительности. На компьютере пользователя после разрешения имени хоста соответствующая информация DNS будет храниться в кэше DNS операционной системы, что может сократить время, необходимое для последующего использования. Некоторые другие браузеры также имеют соответствующие функции кэширования DNS. Но количество кэшированных DNS ограничено. Обычно операционная система учитывает значение TTL, а браузер игнорирует это значение и устанавливает свое время.
(2) ТТЛ
Кэширование DNS требует некоторого потребления ресурсов системы, и IP-адрес сервера не обязательно остается неизменным. Сервер может указать, как долго запись может кэшироваться, а DNS-запись, возвращаемая поиском, содержит значение времени жизни (TTL), которое указывает, как долго клиент может кэшировать запись. Обычно его можно установить на 1 день.
10. Минимизируйте JavaScript и CSS. Уменьшите размер JS и CSS.
Есть навыки написания JS и CSS. Используйте минимальное количество кода для достижения той же функции, уменьшайте пробелы, улучшайте логику, используйте сокращения и т. д. Конечно, есть много инструментов, которые могут помочь вам в этом.
11. Избегайте перенаправлений
При повторном написании ссылки, хотя между «http://xxx.com» и «http://xxx.com/» есть только одно окончательное различие «/», результаты будут другими. Серверу нужно потратить время на это. преобразовать первый редирект во второй, а затем перейти. Вам нужно обратить на это внимание. Для решения этой проблемы вы также можете использовать Alias или mod_rewrite или DirectorySlash.
Кроме того, перенаправление включает в себя: подключение различных веб-сайтов; отслеживание посещений веб-сайтов и улучшение URL-адресов;
12. Удаление повторяющихся сценариев. Удаление повторяющихся сценариев.
Браузер не распознает и не проигнорирует код, который вызывается повторно, а вычислит его заново, что, конечно, является огромной тратой.
13. Настройка ETags Настройка ETags
Я не знаю, что произошло, но я удалил его в htaccess.
14. Сделайте Ajax-кэшируемый кеш Ajax
Ajax отвечает в режиме реального времени, прежде чем браузер получит новые данные, старые данные кэшируются, что может повысить эффективность.
15. Ранняя очистка буфера. Освободите буфер как можно раньше.
Когда пользователь делает запрос страницы, серверу необходимо потратить от 200 до 500 миллисекунд, чтобы собрать HTML, записать его между заголовком и телом и освободить буфер. Таким образом, сначала может быть отправлен заголовок файла, а затем. содержимое файла можно отправить для повышения эффективности.
16. Используйте GET для запросов AJAX. Используйте GET для запросов AJAX.
Метод Get взаимодействует с сервером только один раз (отправка данных), тогда как метод Post требует двух взаимодействий (отправка заголовков, а затем данных).
17. Компоненты после загрузки. Отложенная загрузка компонентов.
Сначала загрузите необходимые компоненты для инициализации страницы, а затем загрузите другие. Конкретным методом реализации может быть «скрытый IFRAME» или JavaScript. «YUI Image Loader» — хороший пример.
18. Предварительная загрузка компонентов Предварительная загрузка компонентов
Загрузка вещей, которые могут быть использованы позже, не конфликтует с отложенной загрузкой. Ее цель — обеспечить более быстрый ответ на последующие запросы. См. Приложение CSS-спрайтов на главной странице Google.
19. Уменьшите количество элементов DOM. Уменьшите количество элементов DOM.
Сложная структура страницы приводит к увеличению времени загрузки и ответа, что приводит к замедлению рендеринга страницы. Более разумное и эффективное использование тегов для структурирования страниц является необходимым условием хорошего внешнего интерфейса.
20. Разделение компонентов по доменам
Основная цель — улучшить возможность параллельной загрузки компонентов страницы, но будьте осторожны и не используйте слишком много доменных имен. Более 2-4 доменных имен приведут к напрасной трате DNS-поиска, упомянутого выше. IE может одновременно иметь только два запроса на один и тот же домен. Реализации могут использовать сети CDN или другие распределенные вычислительные сети.
21. Минимизируйте количество iframe. Уменьшите количество iframe.
IFrame — табу для SEO, и IFrame необходимо использовать более эффективно.
Преимущества IFrame: хорошо подходит для загрузки медленного стороннего контента, такого как реклама, изолированная программная среда безопасности, сценарии параллельной загрузки.
Недостатки IFrame: даже если он пуст, он будет потреблять много ресурсов и препятствовать загрузке страницы, что не является семантическим.
22. Нет 404. Не появляются на странице 404.
Страницы 404 появляются на самом сайте (а не в результатах поиска). Бессмысленные страницы 404 влияют на работу пользователя и потребляют ресурсы сервера.
23. Уменьшите размер файла cookie. Уменьшите размер файла cookie.
Обмен файлами cookie между сервером и браузером осуществляется через заголовки файлов, что позволяет максимально уменьшить размер файла cookie и установить разумный срок действия, что может значительно повысить эффективность.
24. Используйте домены без файлов cookie для компонентов. Используйте доменные имена без файлов cookie для компонентов.
Чтение файлов cookie для статических компонентов — бесполезная трата. Это хороший способ использовать другое доменное имя без файлов cookie для хранения статических компонентов, или вы можете хранить в файлах cookie только имя домена с www.
25. Минимизируйте доступ к DOM. Уменьшите количество обращений к DOM.
JS очень медленно обращается к DOM, поэтому старайтесь не использовать JS для настройки макета страницы.
26. Разработка интеллектуальных обработчиков событий. Разработка гибких обработчиков событий.
Если в обработчик событий добавлено слишком много элементов в дереве DOM, эффективность ответа определенно будет низкой. В инструменте обработки событий YUI есть метод onAvailable, который поможет вам гибко настроить обработчик событий DOM.
27. Выберите <link> вместо @import. Используйте <link> вместо @import.
Использование @import в IE аналогично использованию <link> внизу страницы.
28. Избегайте фильтров. Избегайте использования фильтров.
Если вам нужна альфа-прозрачность, не используйте AlphaImageLoader. Это неэффективно и применимо только к IE6 и ниже. Используйте изображения PNG8. Если вам необходимо его использовать, добавьте _filter, чтобы не влиять на пользователей IE7+.
29. Оптимизация изображений Оптимизация изображений
Преобразование GIF в PNG8 — хороший способ уменьшить размер, и существует множество способов обработки изображений JPG и PNG для достижения результатов оптимизации.
30. Оптимизируйте CSS-спрайты. Оптимизируйте CSS-спрайты.
Расположение изображений в CSS-спрайтах вертикально и максимально компактно, а также максимально компактное расположение изображений схожих цветов вместе уменьшит размер самого изображения и увеличит скорость отображения изображения страницы.
31. Не масштабируйте изображения в HTML. Не масштабируйте изображения в HTML.
Используйте изображение настолько большого размера, насколько хотите, не ленитесь.
32. Сделайте favicon.ico маленьким и кэшируемым. Уменьшите размер favicon.ico и кешируйте его.
Браузерное ICO сайта не следует часто менять, поэтому кешируйте его в течение длительного времени, и лучше всего контролировать его ниже 1 КБ.
33. Сохраняйте компоненты размером менее 25 КБ.
iPhone не может кэшировать компоненты размером более 25 КБ, и это до сжатия.
34. Упакуйте компоненты в составной документ. Упакуйте компоненты в составной документ.
Как и при добавлении вложения в электронное письмо, достаточно HTTP-запроса, но этот метод должен поддерживаться вашим прокси-сервером, который iPhone не поддерживает.
Встроенные изображения:
Используйте «данные: схема URL», чтобы встроить данные изображения в реальную страницу. Обычно мы видим следующие режимы: http, ftp, mailto и другие. Фактически режим data:URL был предложен еще в 1995 году. Это означает, что небольшие фрагменты данных напрямую интегрируются в URL-адрес ссылки. Шаблон следующий: data: [<mediatype>][;base64],<data>
Первый параметр указывает формат файла, например image/gif.
К сожалению, IE в настоящее время не поддерживает этот режим. Кроме того, размер данных также ограничен.
Заявление: Содержимое взято из Интернета и основано на 34 статьях Yahoo.