Приветствую всех вСообщество облачных технологий Tencent, получить больше крупной технической практики Tencent по галантерее ~
Введение :Я занимаюсь фронтендом более 6 лет.От начального арта до рефакторинга и фронтенд разработки с уклоном в сторону разработки логики js, я исследовал и учился в индустрии фронтенда.Теперь я буду делюсь своим многолетним опытом.Я систематически организую и пишу тематические статьи по оптимизации производительности.Надеюсь, она вам немного поможет, и вы можете выдвигать различные мнения и предложения.
автор:Лю Юнган
Фронтенд-инженер — это профессия, которая только постепенно стала цениться интернет-компаниями в последние 5-6 лет.Можно сказать, что это развивающаяся отрасль.Я использую простую интеллект-карту, чтобы вернуть вас к разработке фронт- конечные технологии и их будущее.
В эпоху 1.0 и говорить нечего, в эпоху html и css, когда можно использовать js для разработки калькулятора, это будет слишком круто. Эпоха 2.0 - лучшая эпоха.Расцветают новые технологии и новые идеи, которые можно назвать передовой промышленной революцией.Статус передового персонала полностью признан, и порог также в определенной степени повышен . Оптимизация производительности внешнего интерфейса включает в себя относительно глубокое понимание от сервера до протокола и самой среды хостинга.В настоящее время отрасль в основном обобщает 35 золотых военных правил для оптимизации производительности внешнего интерфейса на основе Yahoo (Блог Woohoo.cn на.com/частное предприятие/afraid/3655…для справки. Сегодня я хотел бы поделиться опытом и мыслями об оптимизации производительности внешнего интерфейса в целом за эти годы, а также дать вам общее представление о некоторых текущих распространенных методах оптимизации производительности внешнего интерфейса и отправной точке для делать это. Первоначальный замысел статьи в основном состоит в том, чтобы просмотреть и упорядочить некоторые базовые знания по оптимизации производительности, без глубокого анализа конкретных технических моментов.
Прежде чем я представлю тему, позвольте мне начать с общей темы:
«Что происходит с момента, когда пользователь вводит URI, до момента, когда страница отображается в клиенте браузера пользователя?»
Вот простая схема для описания шагов:
Цель веб-оптимизации — сделать так, чтобы пользователи использовали наши сервисы быстрее, проще и эффективнее, а для фронтенд-разработки — сделать наши ресурсы меньше, упорядоченнее, а контент — более ранним и интерактивным. .
Существует хорошо известный 28 принцип оптимизации веб-производительности, то есть время, необходимое для обработки ресурсов с сервера и их отправки в браузер клиента (шаг 6 на приведенном выше рисунке), составляет около 20% всего процесса, то есть Повышение эффективности пространства, которое может быть оптимизировано на стороне сервера, не будет очевидным Оптимизация производительности переднего плана стала ключевой областью оптимизации веб-производительности Я буду думать по-своему, исходя из следующих измерений (с 35 воинскими уставами) должны пересекаться) и резюме:
1. Среда хостинга браузера
1. Преодолеть ограничение блокировки рендеринга однопоточного парсинга
Браузер представляет собой однопоточный режим синтаксического анализа для синтаксического анализа и отображения HTML-текста, полученного с сервера. Процесс загрузки CSS блокирует последующую загрузку ресурсов скрипта, а загрузка скрипта также блокирует последующий синтаксический анализ структуры DOM, что приводит к сохранению страницы. Со временем одно из 35 военных правил Yahoo состоит в том, что файлы стилей помещаются в начало, а файлы сценариев помещаются в конец узла DOM, чтобы уменьшить блокировку. Вот еще несколько оптимизаций для файлов скриптов:
- Для Js-скриптов, не требующих манипулирования DOM (основное соображение состоит в том, что скриптам, которым необходимо манипулировать DOM, часто требуется получение некоторой информации о стиле), их можно загружать путем динамического создания скриптов, а динамически загружаемые скрипты не блокируют загрузку последующих Ресурсы.
- Загрузка файла сценария может быть помечена атрибутом отсрочки или асинхронности для предотвращения блокировки (различия между ними см. в разделе)
2. Используйте функцию пузырьков событий
Пузырьковая функция модели событий браузера (модель событий браузера неясна, самопоиск и понимание). Я думаю, что это один из самых замечательных дизайнов, который решает проблему, которую браузер заставляет разработчиков регистрироваться с объектом DOM из-за асинхронный анализ модели DOM Проблема в том, что обратный вызов события не может найти объект.
Существует три уровня регистрации событий браузера: регистрация событий уровня DOM 0 (с использованием встроенного атрибута события DOM-элемента onclick для регистрации обратных вызовов событий), регистрация событий уровня DOM 1 (с использованием API-интерфейса объекта DOM-элемента onclick для внешней регистрации обратных вызовов событий). , Регистрация событий уровня DOM 2 (с использованием API addEventListner/attachEvent объекта элемента DOM для внешней регистрации обратных вызовов событий). Для оптимизации производительности здесь предлагается использовать уровень DOM2 для регистрации обратных вызовов в родительском теге целевого DOM (большинство фреймворков регистрируют прослушиватели событий единообразно в теге body), чтобы закрыть запись прослушивателя событий и сохранить ссылку на узел DOM.
3. Избегайте ошибок производительности файлов cookie
Cookie — это наиболее распространенная схема кэширования, используемая внешним интерфейсом для проверки состояния входа в систему. домен, здесь необходимо его оптимизировать.Поскольку запросы ресурсов, такие как css, js и изображения, не требуют информации о файлах cookie, это приведет к необоснованной трате пропускной способности запроса (представьте, что наш размер файла cookie предполагается равным 10 КБ, а 100 запросов размер почти 1 млн. При высокой степени параллелизма наша текущая пропускная способность сети также является значительной нагрузкой). Метод обработки решения для оптимизации производительности без файлов cookie заключается в развертывании наших интерфейсных ресурсов css, js и изображений на экзотическом сервере статических ресурсов CDN.
В качестве примера возьмем трансграничный денежный перевод в Гонконге, за который я в настоящее время отвечаю.
Запросы ресурсов по пути страницы:
Запрос на загрузку ресурсов CDN:
При сравнении запросов ресурсов, развернутых отдельно от CDN, информация о файлах cookie не включается.
4. Преодолеть ограничение на количество одновременных подключений в браузере
Браузеры имеют функцию ограничения одновременных подключений для доменов, а не для страниц.Техническое решение оптимизации хэша домена состоит в том, чтобы развернуть домены разделения ресурсов отдельно, но поскольку слишком много делений домена увеличит избыточные накладные расходы DNS, преобладающий метод здесь: число меньше чем 3. В настоящее время в нашем бизнесе денежных переводов Гонконг-Филиппины есть только два доменных имени, развернутых отдельно, один основной сайт и одна CDN. Я лично предлагаю, чтобы ресурсы изображений в CDN можно было разделить на отдельное доменное имя для развертывания. Почему мы извлекаем картинки отдельно?
5. Используйте оборудование графического процессора для ускорения рендеринга в браузере
В некоторых случаях, когда процесс рендеринга интерфейса занимает много времени, вы можете использовать свойство CSS3, чтобы включить GPU для ускорения рендеринга нашего DOM. Это очень просто включить. Обычно я использую -webkit-transform: translateZ(0) false 3D, чтобы вызвать системную функцию рендеринга с GPU-ускорением, я дам простое объяснение, почему это происходит:
Для нашего браузера получите нашу текстовую строку html и начните анализировать ее в дереве DOM по порядку и сопоставьте синхронно проанализированный CSS для создания дерева рендеринга (он не соответствует узлам дерева DOM один к одному, например как display:none Узел не будет вставлен в дерево рендеринга)
Источник изображениясегмент fault.com/ah/119000000…
Браузер представляет узлы дерева рендеринга в виде слоя, так что слои складываются вместе для создания макета, что немного похоже на концепцию наложения слоев в ps (ее можно отобразить в 3D с помощью инструментов разработчика браузера Firefox). для большей интуитивности), при нормальных обстоятельствах Любое изменение размера узла приведет к перекомпоновке и перерисовке макета (перекомпоновка и перерисовка являются факторами, вызывающими наибольшую потерю производительности при рендеринге в браузере). , но есть ситуация, когда Composite Layers напрямую передается отдельному процессу синтезатора в нашем GPU, и его собственные изменения не вызовут изменения положения других слоев, и не вызовут переупорядочения и перерисовки. Атрибут transform 3d может незаметно сказать нашему браузеру, что синтаксический анализ элемента как составного слоя должен быть передан отдельному процессу.
Примечание: здесь есть принцип, мы не можем злоупотреблять нашим ускорением, потому что слишком сильное аппаратное ускорение будет потреблять больше памяти пользователя, а также будет потреблять больше энергии.Вообще, рекомендуется включить анимацию css3.
2. Размер HTTP
1. Уменьшите количество http-запросов
а. Доступ к решениям
- Слияние CSS и скрипта: gulp и webpack можно легко решить с помощью скрипта задачи. В настоящее время наша команда использует наш собственный инструмент для создания внешнего интерфейса, чтобы сотрудничать с нашей библиотекой Dust для выполнения задачи по упаковке ресурсов перед выпуском. использованный глоток.
- css sprites sprite image: Объедините несколько небольших изображений, обычно используемых на веб-сайте, в большое изображение и найдите свое собственное изображение с помощью двухмерного координатного позиционирования background-position в стиле. Здесь есть принцип: как правило, используются значки и изображения, которые имеют высокий уровень повторного использования на веб-сайте и которые нелегко изменить, например, кнопки и небольшие фоновые изображения, выложенные плиткой.
- font-icon значок шрифта: использование библиотеки значков шрифтов является очень инновационным способом, потому что это вектор, он решает проблему увеличения пикселей растрового изображения и становится виртуальным, опыт очень хороший, его проще использовать, чем тот же вектор SVG, семейство шрифтов css можно использовать как обычную настройку шрифта, Taobao является пионером в этой области в Китае и имеет свой собственный набор очень открытыхПлатформа библиотеки векторных иконок. Многие собственные маленькие значки Taobao отображаются со значками шрифта.
Передача изображения в кодировке base64: После того, как изображение закодировано в base64, браузер может уменьшить собственный http-запрос, но из-за некоторых собственных дефектов им нельзя злоупотреблять (даже маленькое изображение будет иметь большую строку символов после кодирования, что увеличивает размер наш CSS, и производительность не падает. литры), мое предложение - кодировать иконки, которые являются общими для всего сайта или которые слишком малы для интеграции в карту Sprite.Конечно, есть много разных сценариев для всех, чтобы весить.
Ленивая загрузка изображения: В основном для уменьшения загрузки одноразовых изображений выше сгиба. Конкретный метод заключается в установке частного встроенного атрибута data-image для изображения или метки (конечно, вы можете определить его самостоятельно) для хранения адресной информации целевого изображения, отслеживания события прокрутки браузера и размещения адреса изображения в изображение, когда метка достигает видимой области браузера.Отображается в атрибуте src или как фоновое изображение стиля метки. Метод домашней страницы Taobao заключается в использовании div для отложенной загрузки изображения и отображения окончательного изображения через фоновое изображение.
Перед отображением изображения:
После показа изображения:
б. Механизм кэширования
- Схема кэширования протокола: Используйте управление кешем заголовка протокола кэширования http для выполнения кэширования 304 или более точные настройки ETAG для установки схемы кэширования на основе времени модификации ресурса. Однако в настоящее время более эффективным или экстремальным подходом является использование max-expire-time, чтобы установить максимальное время кэширования ресурсов равным длинному кэшу в 1 год, а метод обновления без наложения является обычной практикой в крупных компаниях. Таким образом, каждый раз, когда запрашивается ресурс, он считывается только из кеша клиента (статус: 200, размер: из кеша), вместо того, чтобы выполнять http-запрос к серверу для получения статуса 304. Или сделайте в качестве примера скриншот длинного кеша изображений домашней страницы Taobao:
- Схема кэширования приложения appCache: кэш автономных приложений — это относительно эффективное решение для автономных приложений, предоставляемое h5, использующее navigator.online, объект window.applicationCache, файл конфигурации server.appcache (ранее .manifest), чтобы гарантировать, что автономные мобильные веб-приложения могут использоваться как обычно, если делать автономные данные, добавьте window.localStorage для сохранения автономных данных. Вот краткое описание шагов, необходимых для доступа к автономным приложениям:
1. Установите атрибут manifest в html-тег страницы, которую необходимо кэшировать в автономном режиме, и укажите кешированный файл конфигурации cache.appcahe (можно установить любое расширение, главное, чтобы mime-тип был настроен на стороне сервера как текст/кэш-манифест).
2. Создайте файл конфигурации cache.appcache, указанный на предыдущем шаге, и настройте ресурсы в соответствии со следующими инструкциями на снимке экрана.
3. Настройте mime-тип отображения расширения файла конфигурации на стороне сервера как text/cache-manifest.
Оффлайн-решение appcache слишком много критиковали, и доступов в настоящее время не так много, и есть тенденция постепенного превращения в изгоя.Здесь предлагается всем взвесить
- Решение PWA (прогрессивные веб-приложения): новый набор автономных веб-решений, предложенный Google, который использует файлы конфигурации manifest.json и объекты window.serviceWorker для реализации решений автономных приложений, таких как собственные приложения. , здесь не представлен).
2. Уменьшите размер HTTP-запросов данных
а. Доступ к решениям
css, скрипт, сжатие изображений: это можно сделать, определив задачи сценария в сценариях автоматизации gulp или webpack.
На сервере включено сжатие gzip:Как правило, на сервере теперь включено сжатие Gzip, и степень сжатия обычно составляет более 30%, и эффект все еще хороший.
Исходное изображение:
После сжатия Gzip:
- Схема динамического ответа сервера изображений: эта схема соответствует представленной выше схеме развертывания ресурсов образа с отдельным доменным именем в хэше домена измерения среды хоста. Ресурсы изображений являются очень большими накладными расходами в ресурсах запроса веб-сайта. В прошлом вы могли создать каталог изображений на сервере статических ресурсов и хранить его. С развитием служб веб-сайта изображения не только сталкиваются с давлением диверсификации и высокого параллелизма, но также столкнуться с давлением диверсификации и высокого параллелизма.На wap-сайте терминала необходимо динамически адаптировать размер изображения под экраны с различным разрешением для экономии полосы пропускания. Отдельная архитектура сервера изображений имеет определенную степень сложности (если рассматривать механизмы аварийного восстановления и кэширования в условиях высокого параллелизма, то не меньше, чем построение большого кластера веб-сайтов, здесьЕсть статья, которую рекомендуется прочитать всем.), здесь мы обсуждаем только функцию сервера (называемого сервером вырезания изображений), который отвечает за службу вырезания изображений.Сервер вырезания изображений обеспечивает спокойный вызов URL-адреса для внешнего мира, напримерwww.xxx.com/xxx путь к картинке.../…Скажите серверу выреза сжать изображение xxx по пути к изображению xxx до размера изображения 130 * 120 и вернуть его. Этот сервис можно создать с помощью узла, с которым мы знакомы во внешнем интерфейсе, и, конечно, он может также быть предоставлено PHP.
б. Схема предварительной загрузки нарезки страницы
Последняя часть контента в измерении статических ресурсов для оптимизации производительности предназначена для страницы. Необходимо рассмотреть вопрос о том, как вывести модуль страницы как можно быстрее и сократить время простоя. Схема BigPipe, применяемая facebook, является очень хорошей идеей для справки, и Taobao также имеет соответствующую схему нарезки для домашней страницы, разделяя страницу на разумные блоки и устанавливая соответствующий механизм между сервером и клиентом, так что каждый блок страницы Параллельно на сервере.Сварка концов завершена и выплюнуть.В настоящее время у меня нет глубокого понимания этого куска.Вот просто предложение для bigPipe для вашего ознакомления.
3. Параметр TCP
Некоторым характеристикам трехэтапного рукопожатия и медленного старта в TCP-соединении суждено стать серьезным фактором, ограничивающим эффективность использования канала соединения. Поскольку http является прикладным протоколом, основанным на TCP, учет аспектов уровня TCP следует рассматривать из истории разработки нескольких версий http:
- http1.0 период:Соединение tcp основано на одноканальном последовательном методе ожидания ответа на запрос (клиент должен переустанавливать соединение каждый раз при отправке запроса), который генерируется в соответствии с определенным историческим фоном, а низкая эффективность трудно поддается анализу. идти в ногу со временем.Он был переработан на основе 1.0 в 1999. Версия 1.1 была выпущена и используется до сих пор.
- http1.1 период:Добавление keep Alive к информации заголовка запроса поддерживает соединение (конечно, статус 100 добавляется для экономии полосы пропускания, функций кэширования и т. д.), позволяя многократно отправлять различные запросы приложений в течение срока службы канала соединения, уменьшая ресурс соединения. использование ресурсов в определенной степени.Эффективность является проблемой, но когда пользователи просматривают веб-страницы дольше, чем период активности подключения, им все равно приходится заново создавать эти запросы.В контексте эффективного использования ресурсов крупными технологическими компаниями в условиях высокой Параллелизм и высокая доступность, версия 1.1 по-прежнему трудно удовлетворить потребности крупных компаний.Требования к эффективному использованию сетевых ресурсов в условиях производительности.
Google (он же Google, Niubi) взял на себя инициативу в разработке нового прикладного протокола SPDY на основе TCP в 2009 году, который решил болевые точки оптимизации запросов мультиплексирования и отправки сервера, а также заложил основу для последующего запуска http2.0. .
Оптимизации, которые мы можем сделать: уменьшить количество ненужных запросов (удалить 404 мертвых соединения, использовать наш механизм длинного кэша для 304 запросов) для оптимизации и попытаться уменьшить количество ненужных запросов на соединение.
В-четвертых, реализация кода
Учитывая гибкость самого языка js, а также развитие привычек каждого человека, трудно иметь хороший способ проверить эффективность реализации кода разработчика (в настоящее время более высокая скорость с помощью способа RBI для контроля времени выполнения кода), больше предложения, у нас есть лучшее предложение, которое можно сделать, чтобы поделиться.
ограничение на один поток: Используйте асинхронный обратный вызов и многопоточный API, чтобы решить проблему недостаточного использования накладных расходов памяти, вызванных одним потоком в языке js. Можно использовать некоторые существующие асинхронные обратные вызовы, такие как settimeout, setinterval, requestAnimationframe (рекомендуется), мульти- многопоточный метод API имеет WebWork. Здесь мы рекомендуем Concurrent.Thread.js, многопоточную front-end библиотеку, разработанную разработчиком в Японии (это многопоточность, смоделированная автором с помощью setTimeout и setInterval, которые можно поискать и понять самостоятельно).
Сосредоточьтесь на оптимизации структуры циклов в коде.: Что касается самого кода, то большинство факторов, влияющих на эффективность выполнения, — это увеличение временной и пространственной сложности, вызванное неразумной структурой цикла и дизайном алгоритма. Вот два скриншота кода из реального проекта для сравнения:
Требуется функция экземпляра: реализовать эффект разделения поля ввода пробелом через каждые 4 символа.
Неэффективная реализация с использованием цикла for:
Улучшенный способ:
- Разумное использование шаблонов проектирования для оптимизации структуры кода: Разумное использование шаблонов проектирования (нельзя злоупотреблять) может сыграть роль в оптимизации памяти и повысить эффективность выполнения, например, использование синглетонов и простых фабрик при создании объектов запросов xhr: создайте простую фабрику для предоставления объектов xhr наружу , и используйте замыкания внутри фабрики Откройте одноэлементную очередь массива для хранения объекта xhr.Когда вызывающей стороне нужен объект xhr, фабрика достанет объект xhr, чье состояние готовности неактивно (0/4) из очереди, в противном случае он будет воссоздан и помещен в очередь. В приложениях с большим количеством запросов ajax-объектов накладные расходы памяти на создание xhr могут быть сэкономлены в наибольшей степени.Вот простая диаграмма, описывающая идею:
- Некоторые другие предложения по оптимизации:Например, уменьшение количества раз, когда js часто использует узлы DOM (первоначально предполагалось, что это будет помещено в измерение хост-среды), чтобы уменьшить перестановку и перерисовку браузера; например, для объектов тегов DOM (в основном, для ссылки на объект DOM в IE будет переработан и пропущен GC)), а переменные ссылочного типа внутри замыкания должны быть освобождены вовремя после их использования, чтобы избежать утечек памяти.
5. Логика взаимодействия с продуктом
Оптимизация производительности обычно начинается с технической точки зрения, но одна из наших целей — «упростить использование пользователями» — также является частью оптимизации производительности. Когда дефекты технической производительности неизбежны, как исполнитель реализации взаимодействия с интерфейсом, мы должны сотрудничать с разработчиками продукта и взаимодействия, чтобы предложить лучшее решение интерактивной логики, которое, по нашему мнению, лучше, чтобы наша загрузка данных была меньше, чтобы пользователи могли воспринимать ждем , чтобы сделать наши советы более удобными для человека. (Интерактивные дизайнеры более профессиональны, и я не смею здесь шутить)
Внешний вид Outlook в эпоху Web3.0:
В конце статьи я выскажу свои догадки об эпохе Web3.0. Web3.0 еще не получил четкого определения в отрасли.Вы можете смело предполагать будущий облик фронтенд-индустрии. Позвольте мне сначала YY здесь, широкое применение искусственного интеллекта и больших данных должно быть лучшей возможностью подтолкнуть интерфейс в эпоху 3.0, что вызовет новую революцию во фронтенде:
- Браузер превратился в системную экосистему (насчет того, какой именно браузер сейчас сказать сложно, есть тренд на то, чтобы PWA-решения Google Chrome предоставлялись фронтенд-решениям для разработки приложений, и не будет необходимости устанавливать систему в будущее). Фронтенд больше не является переносчиком данных.В веб-сфере весьма вероятно, что помимо инженеров, которые обслуживают базу данных на нижнем уровне (в основном в сфере облачных вычислений), в внешний интерфейс должен быть экосистемой браузерной системы (о боже, есть ощущение, что ты переворачиваешь раба и становишься хозяином O (∩_∩) O~~).
- Традиционный язык семантической гипертекстовой разметки HTML с трудом переносил больше информационных данных. HTML5 продолжает активно развиваться и уже не является просто языком разметки, предназначенным для браузеров. Он может стать кросс-платформенным стандартным уровнем представления информации с разнообразными представлениями информации. Это беспрецедентно, и в то время это не могло называться html.
- http2.0 стал широко опробованным стандартом и был дополнительно углублен Уровень проверки безопасности аналогичен идее децентрализации блокчейна для достижения максимальной безопасности (оценивается, что https будет упразднен).
- js стал общепризнанным кросс-платформенным стандартным языком реализации (в настоящее время кроссплатформенная базовая форма интерфейса уже существует). С широким продвижением и глубоким улучшением Es6 он может быть не таким гибким, как сейчас, но больше похоже на квалифицированный стандартный "расширенный" скриптовый язык.
(Вышеуказанные догадки являются сугубо личным пониманием, авторитетной сертификации нет, каждый может говорить свободно)
Связанное Чтение
Передовая изоморфная прямолинейная практика под сотнями миллионов посещений
Специальный метод тестирования Tencent
Эта статья была разрешена автором для публикации в сообществе Tencent Cloud Technology Community, укажите это при перепечатке.Источник статьи
Исходная ссылка: https://cloud.tencent.com/community/article/879614