Эта статья не длинная, в основном для того, чтобы прояснить две маленькие вещи. Эти две мелочи в основном покрывают 80% системы оптимизации производительности веб-страницы (не смею сказать всю), так что каждый может увидеть суть некоторых явлений.
предисловие
Все должно начаться с купленного мной дерьмового сервера.Дешево очень дешево, 99 юаней, но только 1M пропускной способности.
Я дам тебе сегодняпропускная способность сети(далее "пропускная способность"), вы можете подумать, что я занимаюсь интерфейсом, и это не мое дело. Но однажды у этого дерьма будут тонкие 🤏 отношения с тобой. Цель этой статьи — объяснитьпропускная способностьзнаний в сочетании с ограниченным количеством одновременных запросов браузерахарактеристика, чтобы проанализировать методы оптимизации производительности внешнего интерфейса, такие как изображения спрайтов, сокращение HTTP-запросов, маршрутизация асинхронной загрузки, преобразование изображений в CDN, сжатие статических ресурсов и т. д., а также то, для чего все это в конечном счете.
Введение в пропускную способность
Я подумал, что это может быть недостаточно точно, поэтому я искал Baidu, чтобы найти какое-либо хорошее определение. оооооооооооооооооооооооооооооооооооооооооооооооооооооооооотирада. Здесь я кратко резюмирую на примере из Википедии.
«Если вы сравните городские автомобильные дороги с сетью, там будут однополосные, двухполосные, четырехполосные и восьмиполосные. , и, наконец, прибыть в пункт назначения».
Несколько ключевых слов появляются в приведенном выше сценарии:
- городской трафик:Интернет
- Ширина всей полосы:пропускная способность
- Однополосные, двухполосные, четырехполосные, восьмиполосные:Пропускная способность
- Твоя машина:Информация о сетевой передаче
а такжепропускная способностьИспользуется для передачи информации, информация должна иметь определенное значение, мы называем этопоток цифровой информации.поток цифровой информацииЕдиницаbit(биты), единицей времени являетсяs(секунды), поэтому описаниепропускная способностьЕдиницаbit/s(бит/сек). Представьте себе скорость загрузки 1 бит/с в секунду, она вот-вот взорвет вашу мать 💥 . Сегодняшние скорости телекоммуникационного широкополосного доступа в Интернет колеблются от 512 Кбит/с (килобит в секунду) до 10 Мбит/с (мегабит в секунду). Ethernet еще быстрее, со скоростью выше 10 Мбит/с (мегабит в секунду).
Кб и Кб на самом деле разные.Строгого разграничения между большим количеством данных нет.На самом деле это не строго. Прописная буква B отличается от строчной буквы b, заглавная буква B обозначает байт, байт, строчная буква b обозначает бит, бит. 1 Б = 8 Б
То есть, 100-мегапиксельная широкополосная связь, с которой мы обычно работаем, преобразование:
100 M b/s = (100 * 1024) K b/s = (100 * 1024 / 8) KB/s = 12800 KB/s = 12.5 MB/s
Я хвастаюсь, моя семья имеет дело с 100-мегабитным широкополосным доступом, и я не нашел скорость сети 12,5 МБ / с (просто задержите дыхание, China Mobile, вы мне это даете).
Позже я узнал, что произошло недоразумение 😂 . Вышеупомянутый расчет является только идеальным, но реальность такова, что на него влияют различные факторы, такие как «производительность компьютера пользователя, качество сетевого оборудования, использование ресурсов, пиковый период сети, пропускная способность веб-сайта, потери на линии, затухание сигнала» и другие факторы Фактическая скорость сети не будет такой быстрой, как идеальная.
Срок эксплуатации яростный, как тигр, и если приглядеться, мой убогий сервер с полосой пропускания 1М передает данные со скоростью 128 КБ/с (в идеальных условиях).
Лимит одновременных запросов браузера
После разговора о пропускной способности давайте взглянем на браузер,Тот же доменСколько запросов сетевых ресурсов может быть сделано одновременно. Возьмем для примера Google Chrome, их 6. Я нашел авторитетные данные в 2008 году 😱 (удивлен):
Изображение из:адрес
Обратите внимание, что я сказал ключевое слово вышеТот же доменКоличество параллелизма в . ты хочешь спросить меняТот же доменЧто это такое, можно отказаться от фронтенда (не проверяйте!!).
Начальная точка
Поняв два вышеупомянутых знания, я начал задавать вопросы.
Спрайт
Зачем нужны спрайт-карты? В изображении спрайта, когда много иконок, есть десятки маленьких иконок. Если эти значки заменить на загрузку одиночного изображения, при условии, что на главной странице нужно 100 таких маленьких значков, и одновременно загружается 100 изображений. Количество одновременных запросов для Google Chrome равно 6, вы говорите, взорвется он или нет (конечно это не так уж и преувеличено, я просто немного преувеличиваю, чтобы вас напугать).
Уменьшить HTTP-запросы — добавить кеширование и т. д.
Зачем сокращать HTTP-запросы? еще нетпропускная способность сервера а такжеПараллелизм браузераположи это там. Если есть частые одновременные запросы, многие люди выполняют большое количество одновременных запросов одновременно, а пропускная способность сервера невелика (полоса очень узкая), это вызовет перегрузку трафика. (Конечно, балансировка нагрузки и запуск нескольких процессов могут решить эту проблему).
Маршруты загружаются асинхронно
Цель асинхронной загрузки — уменьшить размер статических ресурсов, загружаемых в первый раз, и нет необходимости загружать домашнюю страницу, когда другие ресурсы страницы не требуются. Цель уменьшения объема статических ресурсов, во-первых, низкая скорость сети, и загрузка будет очень медленной; во-вторых, статические ресурсы слишком велики, и время отклика будет больше, когда пропускная способность сервера мала. .
Ресурсы изображений в CDN
Ресурсы изображений передаются в CDN, цель — несогласие с сайтомосновной доменЗахватите ресурсы. Google Chrome, упомянутый ранееТот же доменКоличество одновременных запросов ниже равно 6, ударьте по доске! ! ! вы помещаете ресурсы изображения восновной доменДалее он захватит сетевые ресурсы. Таким образом, вы увидите множество веб-сайтов, таких как Nuggets, которые размещают изображения по ссылкам CDN под другим доменом. Он даже будет размещен в нескольких разных доменах.
Сжимайте статические ресурсы и подпакеты
Сжатие статических ресурсов и субподрядные операции должны учитывать серверпропускная способностьОбъем передаваемой информации ограничен в единицу времени, поэтому после сжатия ресурсный объем одного запроса становится меньше, а естественная скорость становится быстрее.
Есть еще много, я не буду их упоминать (не думайте о них), перейдите в окно поиска Nuggets и введите «оптимизация производительности», их слишком много.
Суммировать
Оптимизация производительности веб-страниц обширна и глубока. Я просто анализирую этот вопрос со своей точки зрения. Если у вас есть более глубокое понимание, вы можете дать несколько советов в области комментариев.