Сколько ресурсов браузер может одновременно загружать с одного домена
Я думаю ни для кого не секрет, что скорость загрузки страницы влияет на множество факторов. Если кто-то не в курсе, то вкратце скажу следующее, что скорость загрузки влияет не только на то, дождется ли посетитель, когда загрузится Ваш сайт, но и на SEO оптимизацию. Ведь на сегодняшний день уже многие поисковые системы при ранжировании сайтов, начали учитывать скорость загрузки страницы. Поэтому чем быстрее будет грузиться Ваш сайт, тем больше посетителей Вы можете получить с поисковых систем, а, следовательно, и больше денег на этом заработать.
Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.
Но как уменьшить количество запросов к серверу не затрагивая внешний вид страницы?
2. Помещайте CSS файлы в начале страницы
Помещая подключение к css файлам в хедере страницы мы получаем постепенный рендеринг страницы, т.е. страница будет загружаться постепенно — сначала заголовок, потом лого наверху, навигация и т.д. – а это в свою очередь служит отличным индикатором загрузки страницы для пользователя и улучшает общее впечатление от сайта.
Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.
3. Помещайте javascript в конец страницы
Помещая javascript-файлы вниз страницы мы позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов. Если же Ваш сайт идет в ногу со временем и содержит все возможные интерактивные «примочки», то этих javascript-файлов может быть несколько и весить они могут несколько сотен килобайт, поэтому перед загрузкой страницы заставлять пользователя ждать пока загрузятся все Ваши javascipt-файлы губительно.
4. Минимизируйте css и javascript
Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания
6. Используйте кэш браузера
7. Используйте CDN для загрузки популярных JavaScript библиотек
Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.
CDN (Content Delivery Network) — это множество веб-серверов, разнесенных географически для достижения максимальной скорости отдачи контента клиенту. Сервер, который непосредственно будет отдавать контент пользователю, выбирается на основании некоторых показателей. Например, выбирается сервер с наименьшим числом промежуточных хопов до него либо с наименьшим временем отклика. Кроме того браузер кэширует javascript-файлы, и если Вы посещали сайты на котором используется такой метод, то эта библиотека уже есть в кэше Вашего браузера, и он не будет загружать её снова.
Одним из таких CDN – является Google Libraries. Это CDN для популярных open-source JavaScript библиотек. Загрузка популярных javascript фреймверков с Google Libraries позволяет увеличить скорость загрузки страницы и снизит траффик на ваш сервер.
О том как загружать jQuery с репозитория Google я писал вот в этой заметке «Увеличиваем скорость загрузки страницы загружая jQuery с репозитория Google».
8. Оптимизируйте ваши изображения
- GIF – идеально подходят для изображений с несколькими цветами, например логотип.
- JPEG – отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии.
- PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
9. Не масштабируйте изображения
Не изменяйте размер изображения при помощи атрибутов width и height тега , либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.
10. Используйте Gzip- сжатие
Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.
Accept-Encoding: gzip, deflate
Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.
Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.
Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле .htaccess прописать следующие строки кода:
Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:
Но опять таки, данный код работает не на всех серверах, поэтому лучше обратиться в службу поддержки Вашего хостинг-провайдера и уточнить этот вопрос.
Ну вот собственно и все, что я хотел рассказать. В данной статье я постарался перечислить все основные способы клиентской оптимизации для увеличения скорости загрузки веб-страницы. Кроме клиентской оптимизации существует еще и серверная оптимизация. Но это уже тема для отдельной статьи.
Если что-то упустил или у Вас есть, что добавить – пишите свое мнение в комментариях ниже к этому посту. Спасибо за внимание!
Максимальное количество одновременных подключений для браузеров для запроса одного и того же доменного имени
Когда мы просматриваем интернет, важным фактором, влияющим на скорость просмотра, является количество одновременно работающих браузеров. Число параллелизма простое и популярное, то есть количество одновременной работы веб-страницы в браузере.
Если одновременно существует только два одновременных подключения, то при открытии веб-страница может зависеть только от этих двух потоков. Если содержимое спереди медленно открывается, это напрямую повлияет на открытие следующего содержимого. Однако если одновременных подключений будет больше, это значительно повысит скорость загрузки веб-страницы. Для получения дополнительной информации, пожалуйста, проверьте наши предыдущие статьи:Количество одновременных подключений для проверки скорости загрузки браузера, Количество одновременных подключений в браузере не настолько велико, насколько это возможно.
В следующей таблице приведены сведения о максимальном количестве одновременных подключений в зависимости от версии IE, запущенной на хосте, скорости соединения хоста и поддерживаемых версий протокола сервера.
Internet Explorer 8+ обеспечиваетwindow. maxConnectionsPerServerОбъект, сервер может использовать этот объект для определения количества доступных подключений на клиентском компьютере.
Многие люди говорят:
Фактическая ситуация (Китай):
Многие клиентские программы могут изменять максимальное количество подключений к компьютеру, например: Thunder, Storm Video и так далее.
Мы поделились с вами раньшеКак изменить количество одновременных подключений в Internet ExplorerЕсли вы используете IE7 и ниже, вы можете попытаться изменить количество подключений до 6, что поможет ускорить открытие сайта.
Максимальное количество одновременных запросов на одно и то же доменное имя в браузере
Когда мы просматриваем Интернет, важным фактором, влияющим на скорость просмотра, является количество одновременно работающих браузеров. Количество параллелизма - это просто количество одновременных заданий, когда браузер является веб-страницей.
Если одновременно есть только 2 одновременных подключения, тогда веб-страница может полагаться только на эти 2 потока при открытии.Если на переднем плане есть медленное открытие контента, это напрямую повлияет на открытие следующего контента. Но если одновременно будет больше одновременных подключений, это значительно улучшит скорость загрузки страницы. Подробности читайте в нашей предыдущей статье:Тест количества одновременных подключений на скорость загрузки браузера. Количество одновременных подключений в браузере не так велико.
В следующей таблице приведено максимальное количество одновременных подключений в зависимости от версии браузера IE, работающего на хосте, скорости подключения хоста и поддерживаемой версии протокола сервера.
Фактически, браузеры действительно используют параллельные соединения, но они ограничивают общее количество параллельных соединений небольшим числом (обычно четырьмя). Сервер может закрыть слишком много соединений от определенных клиентов.
Opera 9.63, 10.00альфа
3,Firefox Максимальное количество одновременных подключений браузера
Введите «about: config» в адресную строку Firefox, затем найдите и измените следующие два элемента конфигурации:
4, IE Максимальное количество одновременных подключений браузера
Используйте команду «Редактор реестра», чтобы открыть редактор реестра и найти:
[HKEY_CURRRENT_USER \ Software \ Microsoft \ Windows \ CurrentVersion \ Internet Settings], вы можете увидеть MaxConnectionsPerServer с участием MaxConnectionsPer1_0Server
Для IE 9
[HKEY_CURRRENT_USER \ Software \ Policies \ Microsoft \ Internet Exploer \ Main \ FeatureControl, вы можете видеть FEATURE_MAXCONNECTIONSPER1_0SERVER с участием FEATURE_MAXCONNECTIONSPERSERVER
В то же время учтите, что не все запросы на соединение будут отправляться на сервер was, а некоторые соединения предназначены только для получения статических ресурсов на веб-сервере, поэтому количество пулов потоков на сервере было (Thread pools :50 ) Будет намного меньше, чем значение maxclients на сервере IHS, например 400).
Как показано на рисунке 7, диспетчер пула соединений
Диспетчер пула соединений распределяет запрошенные соединения в соответствии со своей конфигурацией. Если все соединения в пуле соединений заняты, последующие запросы будут блокироваться до тех пор, пока соединение не будет возвращено в пул соединений.
8, принцип пула потоков:
Принцип пула потоков очень прост, аналогичен концепции буфера в операционной системе, его поток выглядит следующим образом:
Пул потоков создает определенное количество потоков и помещает их в очередь ожидания до прибытия задачи. Все эти потоки находятся в спящем состоянии, то есть все они запущены, не потребляют ресурсы ЦП, а занимают лишь небольшой объем памяти. Когда у клиента появляется новый запрос, он пробуждает спящий поток в пуле потоков и позволяет ему обрабатывать запрос клиента. Когда запрос обрабатывается, поток снова спит.
Пул потоков может сэкономить много системных ресурсов, так что больше времени процессора и памяти можно использовать для обработки реальных коммерческих приложений вместо частого создания и уничтожения потоков.
Каждому потоку требуется около 1 МБ памяти. Чем больше потоков вы открываете, тем больше памяти он потребляет.
Когда использовать пул потоков:
1. Время обработки одной задачи относительно невелико.
2. Количество обрабатываемых задач велико.
9, пул соединений с базой данных:
Решение проблемы пула соединений с базой данных - установить достаточное количество соединений с базой данных при запуске приложения. , И скажем, что эти соединения образуют пул соединений (проще говоря: поместите множество полуфабрикатов объектов соединения с базой данных в "пул" ) приложение динамически обращается, использует и освобождает соединение в пуле. Для большего количества одновременных запросов, чем количество подключений в пуле подключений , Должен быть поставлен в очередь в очереди запросов. И приложение может быть основано на использовании соединения в пуле , Динамически увеличивайте или уменьшайте количество подключений в пуле. Чтобы
Технология пула соединений повторно использует как можно больше ресурсов, потребляющих память , Это значительно экономит память, повышает эффективность обслуживания сервера и может поддерживать больше услуг для клиентов. Использование пула соединений значительно повысит эффективность программы. В то же время мы можем отслеживать количество соединений с базой данных через собственный механизм управления. , Использование и т. Д.
1) Минимальное количество соединений - это соединение с базой данных, которое пул соединений всегда поддерживал, поэтому, если приложение не использует большую часть соединения с базой данных, много ресурсов соединения с базой данных будет потрачено впустую;
2) Максимальное количество подключений - это максимальное количество подключений, на которое может подать заявку пул подключений. Если запрос на подключение к базе данных превышает это число, последующие запросы подключения к базе данных будут добавлены в очередь ожидания. , Что повлияет на последующие операции с базой данных.
Подключение к базе данных - критический, ограниченный и дорогой ресурс , Это особенно заметно в многопользовательских веб-приложениях. 。 Объект подключения к базе данных соответствует физическому подключению к базе данных. , Каждая операция открывает физическое соединение и закрывает соединение после использования, что приводит к снижению производительности системы.
10. Производительность WebSphere Application Server
Излишне упрощенная модель построения серверных приложений заключается в создании нового объекта службы каждый раз, когда поступает запрос, а затем обслуживании запроса в новом объекте службы. Но когда имеется большое количество запросов на одновременный доступ, сервер продолжает создавать и уничтожать Объекты дорогие.
В объектно-ориентированном программировании создание и уничтожение объектов - пустая трата ресурсов, поскольку для создания объекта требуется доступ к ресурсам памяти или большему количеству ресурсов. Это особенно верно в Java, где виртуальная машина пытается отслеживать каждый объект, чтобы его можно было собрать мусором после уничтожения объекта. Следовательно, одним из способов повышения эффективности программы является минимизация количества создания и уничтожения объектов. Использование существующих объектов для обслуживания является причиной использования технологии «объединенных ресурсов».
На рисунке 1 показан поток запросов приложения, требующего внутренней обработки, и показана взаимосвязь между пулами потоков при обработке пользовательских запросов. Чтобы
Веб-контейнер
Веб-контейнер отвечает за создание пулов потоков на уровне сервера приложений. Большая часть обработки на этом уровне включает сервлет, JSP, EJB, создание динамических страниц и внутреннюю обработку доставки. Веб-контейнер - это конфигурация пула потоков второго уровня, которую необходимо настроить.
Контейнер ORB Контейнер ORB отвечает за создание пула потоков на уровне объекта. Большая часть обработки, которая здесь происходит, включает в себя обработку клиентов, не работающих в Интернете. Контейнер ORB - это третий уровень конфигурации пула потоков, который необходимо настроить.
источник данных
Уровень источника данных отвечает за создание потоков подключения, к которым осуществляется доступ из базы данных или «традиционной» системы. Эти потоки представляют собой конфигурацию четвертого уровня, которую необходимо разрешить.
Фактическая ситуация (китай):
Многие клиентские программы могут изменять максимальное количество подключений к компьютеру, например Thunder, Baofeng Yingyin и т. Д.
Мы поделились с вами раньшеКак изменить количество одновременных подключений в браузере IE, Если вы используете IE7 и более ранние версии, вы можете попробовать изменить количество подключений до 6, что поможет увеличить скорость открытия веб-сайта.
например:
Каскадная диаграмма полностью отличается от IE6, ее характеристики:
Firefox3.6
Это почти то же самое, что и IE8:
Firefox4 beta12
Я не знаю, из-за другой концепции дизайна или из-за того, что бета-версия не позаботилась об этом, вместо этого произошла деградация Firefox4. Отличие от Firefox3.6 в основном отражается в обработке типов ресурсов. Firefox4 больше не определяет приоритеты загрузки скриптов и ссылок. Внешние ресурсы, определенные тегами, загружаются в том порядке, в котором они появляются в структуре HTML.
Chrome8
Встроенные инструменты Chrome не могут четко указать время начала каждого запроса, поэтому используется каскадная диаграмма Fiddler. Как видно из рисунка, Chrome также относительно индивидуален, и его характеристики:
Opera11
Сначала пожаловаться, Dragonfly не прост в использовании . Загрузка ресурсов Opera также весьма своеобразна, и трудно увидеть шаблон, только общее резюме:
Это все еще относительно оптимистично. Загрузка занимает несколько секунд. По логике, картинки не большие, и они должны быть в пределах 1 секунды. Конечно, это как-то связано с полосой пропускания пользователя, но, по моим наблюдениям, загружается партиями.
Итак, я проверил информацию и узнал.
Во-вторых, позвольте мне взглянуть на то, как с этим справляются крупные компании электронной коммерции.
Например, для этого изображения вы можете скопировать и открыть эту ссылку и изменить Img13 предыдущего доменного имени второго уровня на img11, img12, img13 и т. Д. И обнаружили, что все они могут быть открыты, и, как правило, это один и тот же IP. , Img1, img2 и т. Д. Не открываются. Это проблема политики. Это просто каштан.
В-третьих, поговорим о браузере Firefox
в Firefox Введите в адресную строку: about:config
Значение старой версии 30, моей версии 256, что указывает на наличие улучшений.
Вы можете написать демо, чтобы протестировать его, написать небольшой цикл и затем посетить то же доменное имя (рекомендуется Ajax Путь), а затем за кулисами sleep Через некоторое время вы можете увидеть эффект. Кто-то раньше проводил тестирование младшей версии и пришел к выводу.
IE8 имеет ограничение в 10 одновременных подключений;
Firefox с участием chrome Количество одновременных подключений 6. Возможны отличия между версиями. Это необходимо учитывать как веб-мастеру или как полноценному продукту.
2. Эта группа доменных имен указывает на один и тот же источник, или конечный источник один.
3. При загрузке изображения (статического файла) достаточно случайным образом вернуть одно из доменных имен в этой группе, чтобы имя домена доступа изображения не отображалось только как доменное имя.
Оптимизация веб-производительности: использование предварительной загрузки и предварительной выборки и приоритет в Chrome .
Резюме: Общие сведения о предварительной загрузке и предварительной выборке.
FundebugАвторские права на перепечатку с разрешения принадлежат первоначальному автору.
Это шестая статья об оптимизации веб-производительности. Щелкните, чтобы просмотреть предыдущую статью ниже:
Сегодня мы углубимся в сетевой стек Chrome, чтобы прояснить примитивы веб-загрузки (такие как < link rel= preload >& ) Принцип работы, чтобы вы могли использовать их более эффективно.
Как упоминалось в других статьях,preload Является декларативным fetch , Вы можете заставить браузер не блокировать document изonload Запросите ресурсы в случае события.
Prefetch Сообщите браузеру, что этот ресурс может понадобиться в будущем, но браузер определяет, когда загружать этот ресурс.
Перед предварительной загрузкой (perload) сетевой запрос начинается отсюда, после предварительной загрузки он перемещается слева направо при разборе
Некоторые случаи использования предварительной нагрузки (perload)
В деталяхПредварительная нагрузка (на загрузку) Прежде, давайте взглянем на использованиеПредварительная нагрузка (на загрузку) Случай.
Слева: использовать предварительную нагрузку, справа: не использовать предварительную нагрузку
Используйте для загрузки шрифтов
Treebo, один из крупнейших гостиничных сайтов в Индии, экспериментирует со своей настольной версией в сети 3G, используя верхнее изображение и основной файл пакета Webpack. preload После этого задержки рисования и интерактивности на первом экране были уменьшены на 1с.
Точно так же, после использования предварительной загрузки для файлов основного пакета своего собственного прогрессивного веб-приложения, Flipkart экономит много времени в основном потоке перед анализом маршрутизации (в мобильных телефонах с низкой производительностью в сетях 3G).
Вверху: не загружено с предварительной загрузкой, ниже: загружено с предварительной загрузкой
За предварительная выборка , Он широко используется, и мы до сих пор используем его в Google Предварительная выборка Некоторые ключевые ресурсы, которые могут ускорить отображение страниц результатов поиска.
Preload Это очень полезно на больших веб-сайтах, вы можете узнать больше об этом позже в этой статье. Перед этим давайте посмотрим, как сетевой стек на самом деле обрабатываетПредварительная загрузка (предварительная выборка) и предварительная выборка (предварительная выборка)。
Когда использовать и?
Подсказка: preload Загрузка ресурсов обычно требуется для текущей страницы, prefetch Как правило, ресурсы, которые могут использоваться другими страницами.
preload Он сообщает браузеру заранее запрашивать ресурсы (ключевые сценарии, шрифты, основные изображения и т. Д.), Необходимые для текущей страницы.
В preload с участием prefetch Между тем у нас есть решение проблемы основных ресурсов, необходимых для текущей страницы или страницы, на которую нужно перейти.
И поведение кеширования
Как приоритет предварительной загрузки и предварительной выборки обрабатывается в сетевом стеке Chrome?
Ниже приведен приоритет загрузки различных ресурсов в Chrome 46 и выше ядра Blink. Авторские права принадлежат автору.
Preload использует атрибут «as» или «type» для обозначения приоритета их запроса ресурсов (например, preload использует атрибут as = «style» для получения наивысшего приоритета). Без атрибута «as» он будет рассматриваться как асинхронный запрос. «Ранний» означает запрос до всех изображений, которые не были предварительно загружены («позднее» означает после)
Поговорим об этой таблице.
Сценарии получают разные приоритеты в зависимости от того, являются ли они асинхронными, отложенными или заблокированными, в зависимости от их положения в файле:
- Скрипты, которые блокируют сеть до первого ресурса изображения, имеют промежуточный приоритет сети.
- Сценарии, которые блокируют сеть после первого ресурса изображения, имеют низкий сетевой приоритет
- Асинхронные / отложенные / вставленные скрипты (независимо от того, где они находятся) имеют очень низкий сетевой приоритет
Изображения в области просмотра имеют более высокий приоритет, чем изображения не в области просмотра, поэтому в определенной степени Chrome будет пытаться лениво загрузить эти изображения, которых нет в области просмотра. Изображения с более низким приоритетом отображаются в области просмотра , Приоритет изображения будет увеличен (но учтите, что приоритет изображения не изменится после завершения макета).
использовать “as” Ресурсы, предварительно загруженные с атрибутами, будут иметь тот же приоритет ресурса, что и тип ресурса, который они запрашивают. Например, preload as =“style” Получит высший приоритет, а as =“script” Получит низкий или средний приоритет. Эти ресурсы также следуют тому жеСтратегия CSP(Например, скрипты script-src ограничение).
Без “as” Атрибутивный preload Приоритет будет равен асинхронному запросу.
Если вы хотите знать атрибуты приоритета различных ресурсов при загрузке, из инструментов разработчика Timeline/Performance Связанную информацию можно увидеть в сетевой области области:
В разделе «Приоритет» на панели «Сеть»
Будет ли этот метод загрузки тратить лишнюю пропускную способность пользователя?
Использование предварительной загрузки или предварительной выборки может лишить пользователя полосы пропускания, особенно если ресурсы не кэшированы.
Не используется preload Ресурсы в Chrome console Через 3 секунды после события загрузки появится предупреждение.
Причина этого предупреждения в том, что вы можете использовать preload Попробуйте предварительно загрузить и кэшировать другие ресурсы для повышения производительности, но если эти предварительно загруженные ресурсы не используются, то вы делаете дополнительную работу без причины. На мобильных устройствах это равносильно потере пользовательского трафика, поэтому обратите внимание на предварительно загруженный контент.
Какие обстоятельства приведут ко второму приобретению?
preload с участием prefetch Это очень простой инструмент, вы можете легко получить его дважды случайно.
Не используйте «предварительную выборку» в качестве резервной копии для «предварительной загрузки». Они подходят для различных сценариев и часто приводят к вторичным выборкам, которые не соответствуют ожиданиям. Использовать preload Чтобы получить текущую задачу, в противном случае используйте prefetch Чтобы получить задания на будущее, не используйте их вместе.
Используйте атрибут «as» для предварительной загрузки, иначе он вам не поможет.
Если вы указываете preload Не дает действительного “as” , Со временем получится дважды.
Предварительно загруженные шрифты без перекрестного происхождения тоже будут получены дважды, Убедитесь, что вы используете preload Добавить при получении шрифта crossorigin Атрибут, иначе он будет загружен повторно. Его запрос использует анонимную междоменную модель. Даже если шрифт и страница находятся в одном домене, рекомендуется. Это также относится к приобретению других доменных имен (например, асинхронное приобретение по умолчанию).
Наконец, хотя это не приведет к двум приобретениям, обычно это хорошее предложение:
Не добавляйте предзагрузку ко всем запрошенным ресурсам, используйте preload Чтобы сообщить браузеру о некоторых очень необходимых ресурсах, чтобы он мог их получить раньше.
Я должен добавить все ресурсы в шапку страницы preload ?
Это хороший пример инструмента, а не правила. preload Количество файлов зависит от содержимого сети при загрузке других ресурсов, пропускной способности пользователя и других сетевых условий.
как можно скорее preload Файлы, которые могут понадобиться на странице, для скриптов, preload Ваш ключевой пакет очень хорош, потому что он разделяет получение и выполнение и использует только Не буду этого делать, потому что это закроет окно onload событие. Вы можете preload Изображения, стили, шрифты и мультимедиа. Самым важным является то, что вы, как автор страницы, имеете больший контроль над получением информации, необходимой для страницы заранее.
Обладает ли предварительная выборка какими-либо магическими свойствами, о которых вам следует знать? Да,
В Chrome, если пользователь уходит со страницы, в то время как запросы предварительной выборки для других страниц все еще выполняются, эти запросы не будут завершены.
Кроме того, независимо от кешируемости ресурса, prefetch Запрос хранится в неуказанном кэше сетевого стека не менее 5 минут.
Я использую настраиваемую предварительную загрузку в JS. Чем она отличается от исходного заголовка rel = "preload" или preload?
preload Разделение для получения ресурсов от обработки и выполнения JS. Таким образом, в теге объявлена предварительная загрузка, которая будет сканироваться сканером предварительной загрузки Chrome. Это означает, что во многих случаях синтаксический анализатор HTML получит предварительную загрузку (с указанным приоритетом) еще до того, как синтаксический анализатор HTML достигнет тега, что делает его более мощным, чем пользовательская реализация предварительной загрузки.
После того, как код развернут, о возможных ошибках невозможно узнать в режиме реального времени. Для устранения этих ошибок впоследствии много времени было потрачено на отладку журнала. Кстати, я хотел бы порекомендовать полезный инструмент для мониторинга ошибок.Fundebug。
Используйте push, когда вы знаете точный порядок загрузки ресурсов и позволяете сервисному работнику перехватывать запросы, которые могут вызвать повторную отправку кэшированных ресурсов. Использовать preload Вы можете сделать время начала загрузки ресурса ближе к начальному запросу - это полезно для всех источников получения ресурсов.
Мы предполагаем, что браузер загружает страницу, на странице есть файл CSS, а файл CSS ссылается на библиотеку шрифтов. В этом сценарии
Для предварительной загрузки сервер не будет активно проталкивать файл шрифта, а шрифт предварительной загрузки будет получен только после того, как браузер получит страницу, как показано на следующем рисунке:
Хотя толчок эффективен, он не похож на preload Это приспособится ко всем ситуациям.
Отправка содержимого, которое нельзя использовать для сторонних ресурсов, путем немедленной отправки ресурсов, также эффективно сокращает приоритет собственных ресурсов браузера. Это должно улучшить производительность вашего приложения, если вы точно знаете, что делаете. Если это не ясно, вы можете частично потерять производительность.
1: Предварительная нагрузка не используется 2: Предварительная нагрузка используется
Как судить о поддержке?
Можно судить о следующем фрагменте кода Ситуация поддержки:
FilamentGroup также имеетдетектор предварительной нагрузки В качестве их библиотеки асинхронной загрузки CSSloadCSS часть.
Могу ли я использовать предварительную загрузку, чтобы стили CSS вступили в силу немедленно?
Конечно, предварительная загрузка поддерживает теги на основе асинхронной загрузки, используйте Таблицу стилей можно использовать onload Событие сразу применяется к текущему документу:
На каких веб-сайтах также широко используется предварительная загрузка?
И другие популярные веб-сайты, такие как LifeHacker и JCPenny, используют его для асинхронной загрузки CSS (через Filament GrouploadCSS):
Основная идея состоит в том, чтобы поддерживать артефакты с высокой степенью детализации (а не объединять их как единое целое), чтобы любое приложение могло загружать зависимости или предварительно загружать ресурсы по запросу и помещать их в кеш.
Как текущий браузер поддерживает процедуры предварительной загрузки и предварительной выборки?
Связанное чтение
О Fundebug
Интеллектуальная рекомендация
Java.nio.Buffer flip () метод jdk Ошибка перевода на китайский язык
Когда я сегодня читал «Идеи программирования на Java», я столкнулся с методом java.nio.Buffer flip (). Дело в том, что «[color = red] переворачивает этот буфер. Сначала установите ог.
Предварительное понимание регулярных выражений Python (4)
Сегодня я продолжу делиться базовыми знаниями о регулярных выражениях Python. В основном я представляю использование специального символа "<>". Ниже приведено конкретное руководство. .
Все белое Введение Сверток Neural Network (CNN)
Использование внутреннего соединения, левого соединения, правого соединения в оракуле
Левое-правое соединение фактически говорит, какая таблица является результатом нашего совместного запроса ~ 1. Взаимосвязь проста select A.*, B.* from A,B where A.id = B.id select A.*, B.* from.
[Код очень подробный] POJ 2492 A Bug's Life (и проверьте коллекцию)
1. Описание заголовка 2. Инструкции по анализу алгоритмов и руководство по написанию кода. Похожие темы:POJ 1182 Решение проблемы пищевой цепи Наблюдается m насекомых и n вязок. Насекомые u и v могут .
Немного истории
Мультиплексирование
В современных браузерах количество одновременных TCP-соединений ограничено. Поэтому страницы с большим количеством статического контента загружаются не так быстро, как хотелось бы.
Приоритеты
В первом подходе каждый поток получает определённый вес. Потом на основе веса сервер распределяет нагрузку между потоками. Такой подход уже использовался в протоколе SPDY.
Nginx
После этого откройте конфигурационный файл /etc/nginx/nginx.conf и найдите в секции server следующую строку:
и замените её на:
Сохраните внесённые изменения и перезагрузите Nginx:
Apache
После этого перезапустите Apache. Вот и всё — для базовой настройки этого вполне достаточно.
Объединение изображений в спрайты
Спрайт возвращался в ответ на единственный запрос. Даже если пользователь заходил на страницу, на которой находится всего одно небольшое изображение, нужно было загрузить весь спрайт.
Встраивание изображений с помощью DataURI
Конкатенация JS и CSS
Однако при использовании конкатенации может возникнуть та же проблема, что и со спрайтами: зайдя на какую-то одну страницу сайта, пользователь загрузит все используемые на нём СSS- и JS-файлы (при этом очень вероятно, что большинство из этих файлов ему никогда не понадобятся). Конечно, можно тщательно отбирать файлы для каждой страницы сайта, но это будет занимать слишком много времени.
Ещё одна сложность заключается в том, что все элементы конкатенированного файла нужно вычищать из кэша одновременно. Невозможно сделать так, чтобы для одних элементов была выставлена одна дата истечения срока действия, а для других (которые к тому же и используются гораздо чаще) — другая. Если изменить хотя бы одну строку в CSS — срок действия истечёт сразу у всех элементов.
Доменное шардирование
Когда переходить?
Полезные ссылки
В заключение приведём для заинтересованных читателей несколько полезных ссылок по теме:
-
; — краткая, но информативная выдержка из спецификаций по ссылке выше; , написанные разработчиком утилиты curl Даниэлем Стернбергом (см. также русский перевод); .
Читателей, которые по тем или иным причинам не могут оставлять комментарии здесь, приглашаем в наш блог.
Читайте также:
- Как изменить максимальное значение в диаграмме excel
- Браузер находится под удаленным управлением selenium
- Как изменить автора презентации в powerpoint
- Свердловские эсеры перед выборами провели акцию протеста с помощью фотошопа
- Как узнать язык браузера если navigator language определяет только предпочитаемый язык