Разработка фронтенд-рендеринга

Прежде чем говорить о том, как ESR (Edge Side Rendering) ускоряет рендеринг, нам необходимо понять историю развития внешнего рендеринга и то, как оптимизация показателей производительности внешнего интерфейса была поставлена на повестку дня. это происходит естественно.

На самом деле, весь метод рендеринга внешнего интерфейса постоянно обновляется с развитием технологии внешнего интерфейса, который можно условно разделить на следующие процессы.

Эпоха SSR (рендеринга на стороне сервера) (JSP, PHP)

Самый ранний внешний рендеринг (до запуска Ajax в 2005 году) был смешан с внутренним, таким как JSP, PHP и т. д. Однако совмещение методов написания front-end и back-end приводит к низкой эффективности разработки, например, при смене стиля приходится заново перекомпилировать, и страница будет сильно переписана.

Эра CSR (рендеринга на стороне клиента)

После технологии Ajax и кеширования статических ресурсов через CDN фронтенд рендеринга SPA+CSR получил развитие как на дрожжах, в этом режиме фронтенд берет на себя всю логику, наполнение и маршрутизацию контента, а также часть загрузки данных загружается из серверной части через приобретение Ajax, поэтому решает проблему разделения труда на клиентской и серверной части. Конкретную временную шкалу запроса можно увидеть на следующем рисунке.

Однако, поскольку запрос полностью асинхронный, один из них не подходит для SEO, а другой заключается в том, что для завершения рендеринга во внешнем интерфейсе требуется объединение данных обработки HTML + JS, и время белого экрана на первом экране будет больше, особенно на некоторых недорогих моделях.Еще более тревожно.

Эпоха SSR (узел)

Позже, с развитием технологии полного стека под руководством Node, передняя часть вернулась к исходной дороге SSR, но на этот раз возвращение было по спирали вверх. Во-первых, передняя и задняя части полностью написаны на основе синтаксиса JS, а большая часть кода может использоваться повторно. Во-вторых, сценарий оптимизирован для SEO. После рендеринга сервера напрямую возвращается окончательный HTML-код, что сокращает время ожидания. белого экрана и вызвано слишком большим количеством асинхронных запросов.Проблемы с производительностью также могут быть решены на стороне сервера, что может эффективно избежать многократного сбора данных и заполнения контента, а браузер может связывать только соответствующую логику и события JS. Конкретную временную шкалу запроса можно увидеть на следующем рисунке.

Эра ESR (Edge Side Rendering)

Позже, с развитием граничных вычислений, поскольку узел CDN находится ближе к пользователю и имеет преимущество в более короткой сетевой задержке, мы можем разделить динамическое и статическое содержимое страницы, кэшировать статическое содержимое в CDN и вернуть его в пользователь быстро, а затем сохраняет статический контент в узле CDN.Инициирование запроса динамического контента в Интернете, а затем сращивание динамического контента и статической части в виде потока, что еще больше улучшает первую загрузку экрана пользователя время, особенно в маргинальных областях или слабой сетевой среде.Это также снижает нагрузку на исходный сервер SSR.

Принципы и преимущества

Как только что упоминалось, ESR использует возможности граничных вычислений, чтобы разделить возвращенный контент на статическую и динамическую части и вернуть его в виде потока. Статическая часть зависит от возможности кэширования CDN, чтобы сначала вернуть ее пользователю, а затем продолжить инициировать запросы динамических данных на узле CDN, объединить их после статической части и продолжить поток обратно. Поэтому его преимущества также очевидны:

TTFB (время до первого байта) очень короткое: поскольку статический контент кэшируется в CDN, он будет быстро возвращен пользователю.
FP (First Paint) очень короткий: после возврата статического контента уже можно запускать парсинг HTML и загрузку и выполнение JS и CSS.
FMP (First Meaningful Paint) очень короткий: поскольку запрос динамического содержимого инициируется в CDN, по сравнению с прямым соединением между клиентом и сервером запрос уменьшает установление TCP-соединения и накладные расходы на передачу по сети, а также потому, что динамическая часть передается в виде фрагментов. FMP будет очень коротким, например, первый результат поиска на сайте поиска будет отображаться первым.

Примеры сценариев применения

Сценарий 1. Разверните службы SSR непосредственно на граничных узлах, а центральные службы предоставят интерфейсы данных.

Служба SSR перемещается непосредственно на периферию для развертывания. Конкретный процесс выглядит следующим образом.

Сценарий 2. Пограничная служба считывает кэшированный статический HTML, а центральная служба предоставляет динамический HTML.

Служба SSR развертывается в центре, а HTML-контент передается обратно на край (с использованием HTTP-кодирования передачи: механизм передачи в виде фрагментов). Статическая и динамическая части должны быть разделены. Конкретный процесс выглядит следующим образом.

Пограничная служба: запрашивайте статический HTML и возвращайте, запрашивая центральную службу SSR, получайте динамическое содержимое и возвращайте
Служба SSR: удалите статический HTML и верните динамическую часть в пограничную службу

Пример

Взяв в качестве примера демонстрационный веб-сайт, верхнюю навигацию можно рассматривать как статическую часть, кэшированную в пограничной CDN, а карточку внизу — как динамическую часть, которая возвращается в центральный сервис для получения данных.

При сравнении Demo видно, что ESR имеет очевидные преимущества перед SSR, его статическая верхняя направляющая рисуется первой, а динамические данные возвращаются быстрее, чем SSR.

Кроме того, в сочетании со следующей статистикой заглубленных точек преимущества ESR дополнительно подтверждаются.

Заключение и перспективы

Техническая реализация:ESR подходит для сцен с высокой производительностью рендеринга страниц.На базе SSR используются граничные вычисления для дополнительной оптимизации времени рендеринга первого экрана и уменьшения времени ожидания белого экрана страниц пользователей;

Способ развертывания:Текущий метод реализации в основном полагается на пограничный faas для развертывания сервисов ESR, который имеет преимущества быстрого доступа, эластичного расширения и сокращения, а также низких затрат на эксплуатацию и обслуживание; развертывание ER (среда выполнения js) предоставляется позже, и пользователи не нужно заботиться о граничных узлах, а нужно сосредоточиться только на коде Сам по себе измененный код может быть загружен и опубликован.По сравнению со службой узла, среда выполнения js может обеспечить более высокую эффективность работы

Технологические перспективы:ESR в настоящее время основан на SSR и объединен с периферийными вычислениями для повышения производительности. В будущем мы объединим возможности ER и CDN, чтобы провести больше исследований в направлении Jamstack. Заинтересованные студенты, следите за обновлениями.