Рендеринг страниц обычно делится на рендеринг переднего конца и рендеринг на заднем плане. Передний рендеринг относится к тому, что сервер возвращает HTML-структуру и шаблон, а фронт-конечности вытягивает данные и отдает шаблон через асинхронный запрос Ajax и динамически модифицирует DOM, чтобы сформировать окончательную страницу. Рендеринг на стороне сервера-это когда сервер получает данные на бэкэнд и отображает полную страницу и возвращается к клиенту. Эти два метода имеют свои преимущества. Бэк-энда рендеринг приносит такие преимущества, как увеличение времени первого экрана, сокращение количества запросов и выгода SEO. Тем не менее, традиционное прямое бэкэнд прямое рендеринг требует ожидания, пока вся веб -страница не будет отображена до возвращения к клиенту. Если блок медленно получает данные, что влияет на скорость рендеринга, то для пользователей он также станет длиннее во время ожидания. Можно может быть первым рендеринг, что и передний рендеринг AJAX, и традиционное рендеринг на стороне сервера в блоках и регионах будет предоставлено ниже-рендеринг сегмента веб-страницы.
Во -первых, давайте посмотрим на традиционный метод рендеринга:
const http = require ("http"); const fs = require ("fs"); var tpl1 = '<! doctype html> <html> <Head> <title> тест рендерин html = ''; var server = http.createserver ((req, res) => {if (req.url! == "/favicon.ico") {res.writehead (200, {'content-type': 'text/html'}); getDataOne ((data1) => {getDATATATATATATATATATATATATATATATATATAT res.end (tpl1.replace (// $ data1/g, data1) + tpl2.replace (// $ data2/g, data2); }}); }}). Слушайте (3000, '127.0.0.1'); функция getDataOne (fn) {setTimeout (() => { FN ('1111111111111111111111111111111Я111111111111111111111111111er11111111111h11111Ж11111Ж11111Ж1111111Ж11111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er FN ('22222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222Выше мы даем простой пример для возврата страницы, посетив http://127.0.0.1:3000. При рендеринге страницы есть 2 операции, которые занимают 5 секунд, которые можно предположить, что это IO или притяжение данных. В настоящее время, когда мы наблюдаем, что страница возврата составляет 10 секунд, что означает, что пользователь требуется 10 секунд, чтобы увидеть страницу.
Затем мы преобразуем метод рендеринга бэкэнд и изменем его на сегментированный рендеринг.
const http = require ("http"); const fs = require ("fs"); var server = http.createserver ((req, res) => {if (req.url! == "/favicon.ico") {res.WriteHead (200, {'content-type': 'text/htmling', 'charing' encodInding ', chancedInding', chanceDINDING ': }); res.end ('<p> $ data2 </p> </body> </html>'. Заменить (// $ data2/g, data2); }); }); }); }); }); }); }). Слушайте (3000, '127.0.0.1'); функция getDataOne (fn1) {setTimeout (() => { FN1 ('111111111111111111111111111111111h1111111Ж11111Ж111Я11111111111111111111111111111er111111111Я111111111111111111111111111111111111111111111111111.11111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er FN2 ('22222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222Установив заголовок http: кодирование передачи: отбрасывается, магия сегментированной передачи включена. Этот метод кодирования существует в http1.1. Как правило, размер информации не может быть определен, когда сервер генерирует ответы HTTP. В настоящее время длина не может быть записана заранее с длиной контента, и длина сообщения должна генерироваться в реальном времени. Сервер обычно использует кодирование кусочков.
При выполнении передачи кодирования кодировки, в головке ответного сообщения наблюдается кодирование передачи и определяется как Chunked, указывая на то, что содержимое будет передано с использованием кодирования Chunked. Давайте посмотрим на модифицированный эффект:
Хотя общее время передачи страницы не изменилось, таким образом, мы сократили время отклика вдвое, сократив время ожидания пользователя. В конкретном бизнесе мы можем сказать, что части, которые пользователи должны видеть в первую очередь, выводятся заранее, и процесс бэкэнда долгосрочных частей бэкэнд до вывода, который является преимуществом сегментированного рендеринга передачи. Обратите внимание, что если сервер является nginx, возможно, что сегментированный рендеринг может быть недействительным из -за настройки буфера, а размер буфера необходимо скорректировать.