С развитием фронтенд-технологий методы фронтенд-рендеринга постоянно обновляются.Появление граничных вычислений привело к тому, что фронтенд-рендеринг вступил в эпоху краевого рендеринга (ESR) из эпохи SSR (узлов). Эта статья в основном знакомит с разработкой и эволюцией внешнего рендеринга, а также с принципами, преимуществами и сценариями применения краевого рендеринга. Основное содержание следующее:
- Разработка фронтенд-рендеринга
- Принципы и преимущества рендеринга кромок
- Примеры сценариев применения
- Резюме и перспективы
01 Разработка фронтенд-рендеринга
Прежде чем говорить о внешнем рендеринге границ, нам необходимо понять историю развития внешнего рендеринга и то, как оптимизация показателей производительности внешнего интерфейса была поставлена на повестку дня.
На самом деле, весь метод рендеринга внешнего интерфейса постоянно обновляется с развитием технологий внешнего интерфейса, которые можно условно разделить на следующие процессы.
Эпоха SSR (рендеринга на стороне сервера) (JSP, PHP)
Самый ранний внешний рендеринг (до запуска Ajax в 2005 году) был смешан с внутренним, таким как JSP, PHP и т. д. Однако совмещение методов написания front-end и back-end приводит к низкой эффективности разработки, например, при смене стиля приходится заново перекомпилировать, и страница будет сильно переписана.
Эра CSR (рендеринга на стороне клиента)
После технологии Ajax и кеширования статических ресурсов через CDN фронтенд рендеринга SPA+CSR получил развитие как на дрожжах, в этом режиме фронтенд берет на себя всю логику, наполнение и маршрутизацию контента, а также часть загрузки данных обгоняет Ajax с тыла, поэтому очень хорошо решает проблему разделения труда на front-end и back-end. Конкретную временную шкалу запроса можно увидеть на следующем рисунке.
Однако, поскольку запрос полностью асинхронный, один из них неблагоприятен для SEO, а другой заключается в том, что для завершения рендеринга на внешнем интерфейсе требуется объединение данных обработки HTML + JS, а время белого экрана первого экрана будет больше, особенно на некоторых недорогих моделях.Еще более тревожно.
Эпоха SSR (узла)
Позже, с развитием технологии полного стека под руководством Node, передняя часть вернулась к исходной дороге SSR, но на этот раз возвращение было по спирали вверх.
Во-первых, внешний и внутренний интерфейсы основаны на синтаксисе JS, а большая часть кода может использоваться повторно. Во-вторых, сцена SEO дружественна. После рендеринга сервера напрямую возвращается окончательный HTML-код, что снижает время ожидания белого экрана и производительность, вызванная слишком большим количеством асинхронных запросов.Проблема может быть решена сервером, и он может эффективно избежать многократного сбора данных и заполнения контента.Браузер может связывать только связанную логику и события JS. Конкретную временную шкалу запроса можно увидеть на следующем рисунке.
Эра ESR (Edge Side Rendering)
Позже, с развитием граничных вычислений, поскольку узлы граничных вычислений ближе к пользователям и имеют преимущество в более короткой задержке в сети, мы можем разделить страницы на статические и динамические, кэшировать статический контент в CDN и быстро возвращать его пользователям, а затем в edge На вычислительном узле инициируется запрос динамического контента, а затем динамический контент и статическая часть сращиваются в виде потока, что дополнительно улучшает время загрузки первого экрана пользователя, особенно в граничных зонах или слабой сети среды., в дополнение к снижению нагрузки на исходный сервер SSR.
02 Принципы и преимущества рендеринга кромок
Как я только что упомянул, граничный рендеринг заключается в использовании возможностей граничных вычислений для разделения возвращаемого контента на статическую и динамическую части и возврата его в виде потока, что в конечном итоге ускоряет рендеринг. Среди них статическая часть опирается на способность кэширования CDN сначала возвращаться к пользователю, а затем продолжает инициировать запросы динамических данных на граничных вычислительных узлах, соединяясь после статической части, и продолжает возвращаться обратно. Поэтому его преимущества также очевидны:
- TTFB (время до первого байта) очень короткое: поскольку статический контент кэшируется в CDN, он будет быстро возвращен пользователю.
- FP (First Paint) очень короткий: после возврата статического контента уже можно запускать парсинг HTML и загрузку и выполнение JS и CSS.
- FMP (First Meaningful Paint) очень короткий: поскольку запрос динамического содержимого инициируется на граничном вычислительном узле, по сравнению с прямым соединением между клиентом и сервером запрос снижает затраты на установление TCP-соединения и передачу по сети, а также потому, что динамическая часть разбивается на части. Если форма передается обратно, FMP будет очень коротким, например, первый результат поиска на сайте поиска будет отображаться первым.
В целом, по сравнению с традиционным центральным рендерингом, периферийный рендеринг имеет преимущества более широкого распределения узлов и более близкого расстояния до пользователей, что позволяет пользователям получать ресурсы веб-сайта для рендеринга за более короткое время и в то же время может снизить давление запросов. центральных сервисов, тем самым добиться эффекта ускорения рендеринга + распределенной вычислительной мощности.
03 Примеры сценариев применения
Сценарий 1. Разверните службы SSR непосредственно на граничных узлах, а центральные службы предоставят интерфейсы данных.
Непосредственно переместите службу SSR в пограничное развертывание, конкретный процесс выглядит следующим образом.
Сценарий 2. Пограничная служба считывает кэшированный статический HTML, а центральная служба предоставляет динамический HTML.
Служба SSR развертывается в центре, а HTML-контент передается обратно на край (с использованием HTTP-кодирования передачи: механизм передачи в виде фрагментов). Статическая и динамическая части должны быть разделены. Конкретный процесс выглядит следующим образом.
- Пограничная служба: запрашивайте статический HTML и возвращайте, а также запрашивайте центральную службу SSR, получайте динамическое содержимое и возвращайте
- Служба SSR: удалите статический HTML и верните динамическую часть в пограничную службу
Пример
Взяв в качестве примера демонстрационный веб-сайт, верхнюю навигацию можно рассматривать как статическую часть, кэшированную в пограничной CDN, а следующую карту — как динамическую часть, возвращающую центральную службу для получения данных.
При сравнении Demo можно обнаружить, что рендеринг краев (ESR) имеет очевидные преимущества перед SSR: его статическая верхняя направляющая отрисовывается первой, а динамические данные сзади также быстрее, чем возврат SSR.
Кроме того, в сочетании со следующей статистикой скрытых точек преимущества рендеринга краев (ESR) дополнительно подтверждаются.
04 Резюме и перспективы
- Техническая реализация: Пограничный рендеринг (ESR) подходит для сцен с высокой производительностью рендеринга страниц.С помощью граничных вычислений на основе SSR дополнительно оптимизируется время рендеринга первого экрана, а также сокращается время ожидания белого экрана страниц пользователей;
- Метод развертывания: Текущий метод реализации в основном полагается на пограничный FaaS для развертывания сервисов пограничного рендеринга (ESR), преимущества которого заключаются в быстром доступе, гибком расширении и сокращении, а также низких затратах на эксплуатацию и обслуживание.Позднее функция пограничного режима (пограничная среда выполнения JS) предоставляется развертывание, и пользователям не нужно заботиться о граничных узлах, просто сосредоточьтесь на самом коде, измените код для загрузки и публикации, по сравнению со службой узла, среда выполнения JS может обеспечить более высокую эффективность работы;
- Обзор технологий: Edge Rendering (ESR) в настоящее время является улучшением производительности на основе SSR в сочетании с граничными вычислениями; в будущем команда внешнего интерфейса Volcano Engine объединит функции и возможности граничных вычислений, чтобы провести больше исследований в направлении бессерверного интерфейса. развертывание Заинтересованные студенты уважение Пожалуйста, с нетерпением ждем.