В этом документе в основном рассматривается производительность на стороне клиента, производительность на стороне сервера и сеть, а структура контента взята изYahoo Developer Network, включая 35 лучших практик оптимизации производительности переднего плана в 7 категориях, и на этой основе дополнены некоторыми родственными или более распространенными технологиями.
Важным показателем производительности интерфейса является время загрузки страницы, которое зависит не только от пользовательского опыта, но и от рейтинга в поисковых системах.
- Данные Google показывают, что страница с 10 фрагментами данных, которые можно загрузить за 0,4 секунды, превращается в 30 фрагментов данных, которые можно загрузить за 0,9 секунды, а трафик и доход от рекламы падают на 90%.
- После того, как размер файла главной страницы Google Map был уменьшен со 100 КБ до 70-80 КБ, трафик увеличился на 10% в первую неделю и на 25% в следующие три недели.
- Данные Amazon показывают, что увеличение времени загрузки на 100 миллисекунд связано с падением продаж на 1%.
Приведенные выше данные также показывают, что «время загрузки — деньги», а оптимизация внешнего интерфейса в основном направлена на повышение скорости загрузки.
1. Содержание страницы
(1) Уменьшить количество HTTP-запросов
80% времени отклика веб-интерфейса тратится на загрузку изображений, стилей, скриптов и других ресурсов. Самый прямой способ — сократить ресурсы, требуемые страницей, но это нереально. Поэтому основными способами уменьшения количества HTTP-запросов являются:
Слияние файлов JS/CSS. Автоматическое слияние на стороне сервера (CDN), инструмент для слияния файлов на основе Node.js, сокращает количество запросов, помещая все сценарии в один файл.
использоватьCSS SpriteОбъедините фоновые изображения в один файл,
background-imageа такжеbackground-positionдисплей управления
Встроенное изображение(в кодировке Base64). Использование схемы Data URI для встраивания изображений в HTML или CSS или непосредственное встраивание CSS, JS и изображений в HTML увеличит размер файла, а также может привести к проблемам с совместимостью браузеров и другим проблемам с производительностью.
Сокращение количества HTTP-запросов к странице — это отправная точка, важный ориентир для повышения скорости первого посещения вашего сайта.
(2) Уменьшить DNS-запросы
После того, как пользователь вводит URL-адрес, браузеру сначала необходимо запросить IP-адрес сервера, соответствующий доменному имени (имени хоста), что обычно занимает 20-120 миллисекунд. Браузер не может загружать какие-либо данные с сервера, пока DNS-запрос не будет завершен.
Исходя из соображений производительности, все интернет-провайдеры, локальные сети, операционные системы и браузеры имеют соответствующие механизмы кэширования DNS.
- IE кеширует на 30 минут, что можно задать через пункт DnsCacheTimeout в реестре;
- Firefox кеширует на 1 минуту, настраивается через network.dnsCacheExpiration;
Кроме того, уменьшение количества отдельных имен хостов уменьшает количество запросов DNS, уменьшение количества отдельных имен хостов также уменьшает количество компонентов, которые страница может загружать параллельно, отказ от поиска DNS сокращает время отклика, а уменьшение количества параллельных загрузок увеличивает время отклика. Принцип заключается в распределении компонентов по 2–4 именам хостов, что является компромиссом между сокращением запросов DNS и возможностью одновременной загрузки большого количества файлов.
(3) Избегайте перенаправления
HTTP-перенаправление через301/302Реализация кода состояния. Ниже приведен заголовок HTTP с кодом состояния 301.
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
Браузер автоматически перейдет к URL-адресу, указанному в поле «Расположение». Вся информация, необходимая для перенаправления, находится в заголовке HTTP, а тело ответа обычно пусто. Фактически, дополнительные заголовки HTTP, такие как Expires и Cache-Control, также указывают на перенаправление. Есть и другие способы выйти за рамки этого: метатег обновления и JavaScript, но если вам нужно выполнить перенаправление, лучше всего использовать стандартный код состояния HTTP 3xx, в основном для того, чтобы кнопка «Назад» работала.
После того, как клиент получит ответ о перенаправлении от сервера, он снова отправит запрос в соответствии с адресом местоположения в заголовке ответа. Перенаправление повлияет на взаимодействие с пользователем, особенно когда существует несколько перенаправлений, пользователь не будет видеть никакого контента в течение определенного периода времени, а только увидит, что индикатор выполнения браузера продолжает обновляться.
- Самые расточительные перенаправления случаются часто, и их легко упустить из виду: следует добавить конец URL-адреса.
/но не добавлено. Например, посетитеhttp://astrology.yahoo.com/astrologyбудет301перенаправить наhttp://astrology.yahoo.com/astrology/(обратите внимание на / в конце). При использовании Apache это можно решить с помощью Alias, mod_rewrite или DirectorySlash. - Изменение имени домена веб-сайта: CNAME сочетается с псевдонимом или mod_rewrite или аналогичными функциями других серверов для достижения перехода.
(4) Кэшировать запросы Ajax
Наиболее важной оптимизацией является кэширование результата ответа. Если есть HTTP-заголовки Expires или Cache-Control, срок действия которых еще не истек, предыдущий ресурс может быть прочитан из кэша. Браузер должен быть проинформирован о том, должен ли он продолжать отвечать с ранее кэшированным ресурсом или запросить новый. Это можно сделать, добавив временную метку к URL-адресу Ajax ресурса, указывающую, когда пользователь в последний раз модифицировал ресурс. Если ресурс не был изменен с момента последней загрузки, а временная метка осталась прежней, ресурс будет прочитан непосредственно из кеша браузера, что позволит избежать дополнительного кругового обхода HTTP. смотрите подробности服务器-添加Expires或Cache响应头.
(5) Ленивая загрузка
Что абсолютно необходимо при начальной загрузке страницы? Ресурсы, не включенные в ответ, могут загружаться отложенно. Например:
- Данные, стили, сценарии, изображения и т. д., используемые ниже сгиба;
- Контент, который отображается только при взаимодействии пользователя.
Веб-сайты, разработанные в соответствии с концепцией «прогрессивного улучшения»: JavaScript используется для улучшения взаимодействия с пользователем, но он работает без (неподдерживаемого) JavaScript, а JavaScript может загружаться лениво.
Поместите HTML в верхнюю часть сгиба в элементах, которые не отображаются, например, в скрытых.
<textarea>, либо атрибут type не является исполняемым скриптом<script>тег, уменьшите количество элементов DOM, которые изначально отображаются, и улучшите скорость. Когда загружается первый экран или работает пользователь, отображается остальная часть содержимого страницы.
(6) Предварительная загрузка
Нетерпеливая загрузка использует время простоя браузера для запроса ресурсов, которые будут использоваться в будущем, чтобы пользователи могли быстрее реагировать при посещении следующей страницы.
- Безусловная предварительная загрузка: После того, как страница загружена (загружается), другие ресурсы получаются сразу. кgoogle.comНапример, после загрузки главной страницы сразу будет загружено изображение спрайта, которое не обязательно на главной странице, но используется на странице результатов поиска.
- Условная предварительная загрузка: прогнозируйте местонахождение пользователя на основе поведения пользователя и предварительно загружайте соответствующие ресурсы. Например, когда search.yahoo.com начнет печатать, будут загружены дополнительные ресурсы. Адресная строка таких браузеров, как Chrome, имеет аналогичный механизм.
- Предварительная загрузка с «заговором»: новая версия страницы предварительно загружается до того, как новая версия будет запущена. После пересмотра веб-сайта по таким причинам, как кэширование, привычки использования и т. д., обратная связь на старой версии веб-сайта будет более быстрой и плавной. Чтобы облегчить эту проблему, перед выходом новой версии в сеть старая версия может использовать время простоя для загрузки некоторых ресурсов новой версии и кэширования их на клиенте, чтобы новая версия могла загружаться быстрее после официального запуска. .
(7) Уменьшите количество элементов DOM
Сложные страницы не только загружают больше байтов, но и манипуляции с DOM в JavaScript выполняются медленнее. Например, добавление обработчика событий может сильно повлиять на скорость страницы между 500 и 5000 элементами.
Рассмотрите возможность удаления ненужной разметки со следующих точек зрения:
- Вы все еще используете макеты таблиц?
- напиши больше
<div>Только для того, чтобы решить проблемы с макетом? Может быть, есть лучшая, более семантическая разметка. - Функции, которые могут быть достигнуты с помощью псевдоэлементов, нет необходимости добавлять дополнительные элементы, такие как очистка поплавков.
Введите следующий код в консоль браузера, чтобы подсчитать количество элементов DOM на странице:
document.getElementsByTagName('*').length;
Почему бы не использовать макет таблицы?
- больше тегов, увеличен размер файла;
- Не прост в обслуживании и не может адаптироваться к адаптивному дизайну;
- По соображениям производительности алгоритм макета таблицы по умолчанию будет генерировать много перерисовок.
(8) Разделите контент на разные доменные имена
Браузеры обычно ограничивают количество параллельных потоков на домен (обычно 6 или даже меньше).Использование разных доменных имен может максимизировать потоки загрузки, но держите их в пределах 2-4 доменных имен, чтобы избежать потери DNS-запросов.
Например, динамический контент размещается вcsspod.com, статические ресурсы помещаются вstatic.csspod.comначальство. Это также может отключить файлы cookie в домене статического ресурса и уменьшить передачу данных.Подробнее см.Cookie 优化.
(9) Минимизируйте использование фреймов
iframe можно использовать для вставки HTML-документа в родительский документ.Важно понимать, как работают iframe и эффективно их использовать.
<iframe>Преимущества:
- Может использоваться для загрузки медленных сторонних ресурсов, таких как реклама, значки;
- Может использоваться как песочница безопасности;
- Скрипты можно скачивать параллельно.
<iframe>Недостатки:
- Дорого загружать даже с пустыми страницами;
- Заблокировать срабатывание события загрузки страницы;
Родительская страница не будет запускать событие загрузки, пока Iframe не будет полностью загружен. Динамическая установка iframe src через JavaScript в Safari и Chrome может избежать этой проблемы.
- Отсутствие семантики.
(10) Избегайте ошибок 404
HTTP-запросы дорогие, возвращая недействительные ответы (например, не найдено 404) совершенно не нужна, ухудшается опыт пользователей и не предоставлена никакой выгоды. Некоторые веб-сайты Design Cool, информативные 404 страниц, которые помогают улучшить пользовательский опыт, но все еще отходы серверных ресурсов. Что особенно плохо, состоит в том, что внешний скрипт возвращается 404, который не только блокирует другие загрузоки ресурсов, но и браузер попытается анализировать содержимое страницы 404 как JavaScript, потребляя больше ресурсов.
Во-вторых, сервер
(1) Используйте CDN
Физическое расстояние пользователя от сервера также влияет на время отклика. Развертывание контента на нескольких географически разнесенных серверах позволяет пользователям быстрее загружать страницы. Но как именно?
80-90% времени отклика сайта тратится на загрузку ресурсов Сокращение времени загрузки ресурсов — золотое правило оптимизации производительности. По сравнению со сложностью и огромными инвестициями в распределенную архитектуру, статическая сеть доставки контента (CDN) может эффективно повысить скорость загрузки с меньшими инвестициями.
Сеть доставки контента (CDN) — это группа географически рассредоточенных веб-серверов, используемых для более эффективной доставки контента пользователям. Как правило, сервер, выбранный для доставки контента, зависит от расстояния в сети. Например: выберите сервер с наименьшим количеством переходов или самым быстрым временем отклика.
(2) Добавьте заголовок ответа Expires или Cache-Control
- Статическое содержимое: установите заголовок ответа Expires на долгое время в будущем, чтобы реализовать стратегию «бесконечный срок действия»;
- Динамический контент: установите соответствующий заголовок ответа Cache-Control, чтобы позволить браузеру выполнять запрос условно.
Заголовок Cache-Control определен в спецификации HTTP/1.1 и заменяет предыдущие заголовки (например, Expires, Pragma), используемые для определения стратегий кэширования ответов. Все современные браузеры поддерживают Cache-Control, поэтому просто используйте его.
(3) Включить Gzip
Разработчики внешнего интерфейса могут найти способы значительно сократить время, необходимое для передачи HTTP-запросов и ответов по сети. Нет сомнений в том, что скорость полосы пропускания конечного пользователя, поставщика сетевых услуг, расстояние до точки обмена пирами и т. д. находятся вне контроля команды разработчиков. Но есть и другие факторы, которые могут повлиять на время отклика, и сжатие может улучшить время отклика за счет уменьшения размера ответа HTTP.
Сжатие Gzip обычно уменьшает размер ответа на 70 %, а для некоторых файлов, скорее всего, до 90 %, и является более эффективным, чем Deflate. Основные веб-серверы имеют соответствующие модули, и большинство браузеров поддерживают декодирование gzip. Поэтому сжатие должно быть включено для текстовых типов, таких как HTML, CSS, JS, XML, JSON и т. д.
Уведомление!!!Не используйте gzip для изображений и PDF-файлов. Они уже сжаты сами по себе, и использование сжатия gzip не только тратит впустую ресурсы процессора, но и может увеличить размер файла.
Начиная с HTTP/1.1,веб-клиентСуществует заголовок HTTP-запроса Accept-Encoding, который поддерживает сжатие.
Accept-Encoding: gzip, deflate
Если веб-сервер увидит этот заголовок, он сожмет ответ одним из способов, указанных клиентом.веб серверКлиент уведомляется через заголовок ответа Content-Encoding.
Content-Encoding: gzip
(4) организованный Etag
Теги объекта (Etags) - это механизм, на котором используются серверы и браузеры для определения того, являются ли компонента в кэш-памяти в браузере, которые находятся в исходном сервере («объектам», являются компонентами: изображения, скрипты, листы стилей и т. Д.). Добавление Etags может обеспечить механизм проверки сущности, который более гибкий, чем последняя модифицированная дата. Etag - это строка, которая служит уникальным идентификатором для определенной версии компонента. Единственное ограничение формата состоит в том, что строка должна быть заключена в кавычки, а сервер Origin использует Etag в соответствующем заголовке, чтобы указать Etag компонент.
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
Затем, если браузер должен проверить компонент, он использует заголовок запроса If-None-Match для передачи ETag обратно на исходный сервер. Если ETag успешно совпадают, возвращается код состояния 304, который уменьшает тело ответа на 12195 байт. Etag идентифицируется по версии файла, что удобно для сервера, чтобы определить, был ли обновлен запрошенный контент, если нет, он ответит 304, чтобы избежать повторной загрузки.
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
(5) Вывод (сброс) буфера как можно раньше
Когда пользователь запрашивает страницу, серверу обычно требуется 200–500 мс для сборки HTML-страницы. В это время браузер бездействует, ожидая данных. Используя функцию flush() в PHP, вы можете отправить часть подготовленного HTML в браузер, чтобы браузер мог начать извлечение ресурсов раньше, пока сервер все еще занят обработкой оставшихся страниц.
можно рассматривать в</head>После этого выводится буфер.Заголовок HTML вообще проще сгенерировать.Отправьте его первым,чтобы браузер начал его получать.<head>CSS и другие ресурсы, упомянутые здесь.
Example:
<!-- css, js -->
</head>
<?php flush(); ?>
<body>
<!-- content -->
(6) Ajax-запрос с использованием метода GET
Когда браузер выполняет POST-запрос XMLHttpRequest, он делится на два этапа: сначала отправляется заголовок Http, а затем отправляются данные. GET использует только один пакет TCP (заголовок HTTP и данные) для отправки данных, поэтому метод GET предпочтительнее.
Согласно спецификации HTTP, GET используется для получения данных, а POST — для отправки данных на сервер, поэтому более соответствует спецификации использование GET, когда Ajax запрашивает данные.
(7) Избегайте изображения src пуст
Значение атрибута изображения src для пустой строки может отображаться в следующих двух формах:
HTML:
<img src="" />
JavaScript:
var img = new Image();
img.src = "";
Хоть атрибут src и пустая строка, но браузер все равно инициирует HTTP-запрос к серверу:
- IE отправляет запрос в каталог, где находится страница;
- Safari, Chrome, Firefox отправляют запросы на саму страницу;
- Опера ничего не делает.
Не следует недооценивать последствия пустого src, генерирующего запрос:
- Вызвать непредвиденную нагрузку на сервер, особенно при большом PV;
- трата серверных вычислительных ресурсов;
- Может возникнуть ошибка.
Аналогичная проблема возникает с пустым атрибутом href. Когда пользователь нажимает на пустую ссылку, браузер также отправляет HTTP-запрос на сервер, который может быть заблокирован JavaScript из-за поведения пустых ссылок по умолчанию.
3. Файлы cookie
(1) Уменьшить размер файла cookie
Файлы cookie используются для аутентификации, персонализации и многих других целей. Файлы cookie передаются между сервером и браузером через заголовки HTTP, и уменьшение размера файла cookie может снизить его влияние на скорость отклика.
- удалить ненужные файлы cookie;
- Максимально уменьшите размер файлов cookie;
- Обратите внимание на настройку доменного уровня куки, если это не нужно, не затрагивайте поддомен;
- Установите подходящее время истечения.
(2) Статические ресурсы используют доменные имена без файлов cookie.
Как правило, статические ресурсы не нуждаются в использовании файлов cookie, их можно разместить на сервере без файлов cookie с использованием доменного имени второго уровня или специального доменного имени, чтобы уменьшить потери трафика, вызванные передачей файлов cookie, и повысить скорость отклика.
4. CSS
(1) Поместите таблицу стилей в<head>середина
Таблица стилей на<head>Он может заставить страницу постепенно отображаться, отображать визуальную обратную связь как можно скорее и дать пользователю ощущение, что скорость загрузки очень высока.
Это особенно важно для страниц с большим количеством контента, где пользователи могут просматривать контент, который был загружен и обработан первым, а не смотреть на белый экран и ждать.
Если таблица стилей размещена внизу страницы, некоторые браузеры будут отображать страницу после загрузки CSS, чтобы уменьшить перерисовку.Пользователи могут только тупо смотреть на белый экран, и взаимодействие с пользователем крайне плохое. Размещение таблиц стилей в разделе HEAD документа может ускорить загрузку страниц.
(2) Не используйте выражения CSS
Выражения CSS могут выполнять JavaScript в CSS, поддерживается только IE5-IE7, режим стандартов IE8 устарел. Выражения CSS выполняются чаще, чем ожидалось, и они будут выполняться непрерывно при прокрутке страницы и перемещении мыши, что приводит к значительной потере производительности.
(3) использовать<link>заменять@import
В некоторых версиях IE @import ведет себя так, как если бы он был помещен внизу страницы. Так что не используйте его.
(4) Не используйте фильтр
AlphaImageLoader — это проприетарная технология для IE5.5-IE8, как и CSS-выражения, поместите ее в музей. Собственный фильтр IE AlphaImageLoader можно использовать для устранения проблем с полупрозрачными изображениями PNG в версиях до IE7. Этот фильтр блокирует рендеринг, зависает в браузере, увеличивает потребление памяти при загрузке изображения и применяется к элементу, а не к изображению, поэтому возникает куча проблем.
Уведомление! ! ! Дело не в фильтрах CSS3
5. Джаваскрипт
(1) Поместите скрипт внизу страницы
Когда браузер загружает скрипт, он блокирует параллельную загрузку других ресурсов, даже с разных доменных имен. Поэтому скрипт лучше ставить внизу, чтобы улучшить скорость загрузки страницы.
В некоторых особых случаях скрипт нельзя размещать внизу страницы, можно рассмотреть<script>из следующих свойств:
- атрибут отсрочки;
- Новый асинхронный атрибут HTML5.
(2) Использование внешнего JavaScript и CSS
Браузеры могут кэшировать внешние файлы JavaScript и CSS, повторно использовать их на разных страницах и уменьшать размер страницы.
Конечно, на практике также необходимо учитывать степень повторного использования кода. Если это только код, используемый определенной страницей, вы можете встроить его в страницу, чтобы уменьшить количество HTTP-запросов. Кроме того, ресурсы подстраниц могут быть предварительно загружены после загрузки домашней страницы.
(3) Сжатие JavaScript и CSS
Минимизированный код может удалять нефункциональные символы (комментарии, пробелы, пустые строки и т. д.), уменьшать размер файла и повышать скорость загрузки.
Благодаря популярности Node.js в сообществе с открытым исходным кодом появилось множество эффективных и простых в использовании инструментов оптимизации внешнего интерфейса, включая сжатие JavaScript и CSS.GitHub.com/Секретарь, о, о, УГ в…), csso, cssnano и т. д.
Для inline CSS и JavaScript он также может быть сжимается такими инструментами, как HTMLMIN.
Эти проекты имеют Gulp, WebPack другой популярной версии инструмента, поддерживающего здание.
(4) Удалить повторяющиеся сценарии
Дублирующиеся сценарии не только генерируют ненужные HTTP-запросы, но и тратят время и вычислительные ресурсы на повторный анализ и выполнение.
(5) Сокращение манипуляций с DOM
JavaScript манипулирует DOM медленно, особенно при наличии большого количества DOM-узлов.
При использовании следует обратить внимание на:
- Кэшировать элементы, к которым уже обращались;
- Управляйте className вместо многократного чтения и записи стиля;
- Избегайте использования JavaScript для исправления макетов.
(6) Используйте эффективную обработку событий
- Уменьшите количество узлов, которые связывают прослушиватели событий, например, посредством делегирования событий;
- Обрабатывайте события как можно быстрее, вы можете сделать это в DOMContentLoaded, вам не нужно ждать загрузки.
6. Картинки
(1) Оптимизация изображений
Попробуйте преобразовать формат GIF в формат PNG и посмотрите, экономит ли это место. Запустите pngcrush (или другой оптимизатор PNG) для всех изображений PNG.
YDNПеречисленные связанные инструментыОтсутствие удобства использования, рекомендуется обратиться к следующим средствам
TODO:
- окончательная оптимизация PNG;
- Контент, связанный с WebP;
- Содержимое, связанное с SVG.
Окончательная оптимизация PNG
(2) Оптимизировать спрайт CSS
- Организуйте фотографии в спрайт горизонтально, и устраивающие их вертикально увеличить размер изображения;
- Комбинация цветов может быть добавлена вместе в спире, а идеальное состояние ниже 256 цветов, чтобы применить к формату PNG8;
- Не оставляйте большого зазора в середине изображения Духа. Хотя уменьшение зазора не влияет на размер файла, оно может уменьшить потребление памяти пользовательским агентом для распаковки изображения в растровое изображение, которое более удобно для мобильных устройств.
(3) Не масштабируйте изображения в HTML
Не используйте<img>Ширина и высота изображения масштабируются, если используется маленькое изображение, используйте изображение соответствующего размера. Если нужно
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
Тогда само изображение (mycat.jpg) должно иметь размер 100x100 пикселей, а не сжатое изображение размером 500x500 пикселей.
Многие CMS и CDN предоставляют функции обрезки изображений.
Пополнить: Установите ширину и высоту изображения, чтобы браузер не перерисовывал разницу между областью, зарезервированной для изображения, и фактической шириной и высотой в соответствии с «предполагаемой» шириной и высотой.
(4) Используйте маленький и кешируемый файл favicon.ico
Как правило, Favicon.ico хранится в корневом каталоге сайта, независимо от того, установлен он на странице или нет, браузер попытается запросить этот файл.
Поэтому убедитесь, что этот значок:
- существует (избегает 404);
- Как можно меньше, желательно меньше 1К;
- Установите более длительный срок действия.
Для более новых браузеров можно использовать фавиконы в формате PNG.
7. Мобильный терминал
(1) Убедитесь, что размер всех компонентов меньше 25 КБ.
Это ограничение связано с тем, что iPhone не может кэшировать компоненты размером более 25 КБ, обратите внимание, что это относится к несжатому размеру. Вот почему уменьшение масштаба самого контента также важно, поскольку одного gzip может быть недостаточно.
Все компоненты гарантированно не превышают 25K.
(2) Содержимое пакета представляет собой составной документ.
Упакуйте компоненты в составной документ, например электронное письмо с вложениями, и получите несколько компонентов с помощью одного HTTP-запроса (помните: HTTP-запросы стоят дорого). При использовании этого метода сначала проверьте, поддерживает ли его пользовательский агент (iPhone не поддерживает).
Суммировать
Здесь представлены 35 военных уставов Yahoo. Хотя записей много, после классификации можно обнаружить, что основные точки входа в оптимизацию производительности можно рассматривать со следующих аспектов:
- Оптимизация сжатия размера самого ресурса (найти способ уменьшить размер ресурса)
- Весь процесс сетевого запроса (от ввода адресной строки URL-адреса для отправки запроса до возврата каждой ссылки ответного пакета)
- Весь процесс рендеринга браузера (каждая ссылка рендеринга браузера после получения ресурса)
Поэтому, чтобы досконально понять метод оптимизации, вы должны иметь глубокое понимание всего процесса http-запросов и всего процесса рендеринга в браузере.
Оригинальный текст из моего блога:
35 военных правил Yahoo — оптимизация производительности интерфейса