การเรนเดอร์หน้ามักจะแบ่งออกเป็นการแสดงผลส่วนหน้าและการแสดงผลส่วนท้าย การเรนเดอร์ส่วนหน้าหมายถึงเซิร์ฟเวอร์ที่ส่งคืนเฟรมเวิร์กและเทมเพลต HTML และส่วนหน้าจะดึงข้อมูลและแสดงผลเทมเพลตผ่านคำขอ Ajax แบบอะซิงโครนัสและปรับเปลี่ยน DOM แบบไดนามิกเพื่อสร้างหน้าสุดท้าย การเรนเดอร์ฝั่งเซิร์ฟเวอร์คือเมื่อเซิร์ฟเวอร์ดึงข้อมูลบนแบ็กเอนด์และแสดงผลหน้าสมบูรณ์และส่งกลับไปยังไคลเอนต์ ทั้งสองวิธีมีประโยชน์ของตนเอง การเรนเดอร์แบ็คเอนด์นำผลประโยชน์เช่นการเพิ่มเวลาหน้าจอแรกลดจำนวนคำขอและเป็นประโยชน์ต่อ SEO อย่างไรก็ตามการเรนเดอร์โดยตรงแบ็กเอนด์แบบดั้งเดิมจำเป็นต้องรอจนกว่าหน้าเว็บทั้งหมดจะถูกแสดงผลก่อนกลับไปที่ไคลเอนต์ หากบล็อกดึงข้อมูลอย่างช้าๆซึ่งมีผลต่อความเร็วในการเรนเดอร์สำหรับผู้ใช้ก็จะกลายเป็นอีกต่อไปในขณะที่รอ สามารถย้อนกลับการเรนเดอร์ได้เหมือนกับการเรนเดอร์ AJAX front-end และการแสดงผลฝั่งเซิร์ฟเวอร์แบบดั้งเดิมในบล็อกและภูมิภาคจะมีการให้บริการด้านล่างด้านล่าง-การแสดงผลส่วนหน้าเว็บ
ก่อนอื่นมาดูวิธีการแสดงผลแบบดั้งเดิม:
const http = reghed ("http"); const fs = reghed ("fs"); var tpl1 = '<! doctype html> <html> <head> <title> test render </title> </head> <body> helloWord <p> data1 </p>'; html = ''; var server = http.createserver ((req, res) => {ถ้า (req.url! == "/favicon.ico") {res.writehead (200, {'content-type': 'text/html'}; Res.end (tpl1.replace (// $ data1/g, data1) + tpl2.replace (// $ data2/g, data2)); - }}) ฟัง (3000, '127.0.0.1'); ฟังก์ชั่น getDataOne (fn) {settimeout (() => { FN ('111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 FN ('22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222ด้านบนเราให้ตัวอย่างง่ายๆในการส่งคืนหน้าโดยไปที่ http://127.0.0.1:3000 เมื่อแสดงหน้าหน้ามี 2 การดำเนินการที่ใช้เวลา 5 วินาทีซึ่งสามารถสันนิษฐานได้ว่าเป็น IO หรือการดึงข้อมูล ในเวลานี้เวลาที่เราสังเกตหน้าส่งคืนคือ 10 วินาทีซึ่งหมายความว่าใช้เวลา 10 วินาทีสำหรับผู้ใช้ในการดูหน้า
ต่อไปเราเปลี่ยนวิธีการแสดงผลแบ็กเอนด์และเปลี่ยนเป็นการแสดงผลแบบแบ่งส่วน
const http = reghed ("http"); const fs = require ("fs"); var server = http.createServer ((req, res) => {ถ้า (req.url! == "/favicon.ico") {res.writehead }); getDataOne ((data1) => {res.write ('<! Res.end ('<p> $ data2 </p> </body> </html>' แทนที่ (// $ data2/g, data2)); - - - - - - }) ฟัง (3000, '127.0.0.1'); ฟังก์ชั่น getDataOne (fn1) {settimeout (() => { FN1 ('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 FN2 ('2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222โดยการตั้งค่าส่วนหัว HTTP: การเข้ารหัสการถ่ายโอน: chunked, เวทมนตร์ของการส่งแบบแบ่งส่วนถูกเปิดใช้งาน วิธีการเข้ารหัสนี้มีอยู่ใน http1.1 โดยทั่วไปขนาดข้อมูลไม่สามารถกำหนดได้เมื่อเซิร์ฟเวอร์สร้างการตอบสนอง HTTP ในเวลานี้ความยาวไม่สามารถเขียนล่วงหน้าด้วยความยาวเนื้อหาและต้องสร้างความยาวข้อความตามเวลาจริง โดยทั่วไปเซิร์ฟเวอร์ใช้การเข้ารหัสแบบก้อน
เมื่อทำการส่งการเข้ารหัสแบบก้อนมีการเข้ารหัสการถ่ายโอนที่หัวของข้อความตอบกลับและถูกกำหนดเป็น chunked ซึ่งบ่งชี้ว่าเนื้อหาจะถูกส่งโดยใช้การเข้ารหัสแบบก้อน มาดูเอฟเฟกต์ที่แก้ไขแล้ว:
แม้ว่าเวลาการถ่ายโอนหน้าโดยรวมจะไม่เปลี่ยนแปลงด้วยวิธีนี้เราได้ลดเวลาตอบสนองลงครึ่งหนึ่งลดเวลารอคอยของผู้ใช้ ในธุรกิจเฉพาะเราสามารถพูดได้ว่าชิ้นส่วนที่ผู้ใช้จำเป็นต้องเห็นก่อนจะเป็นเอาต์พุตล่วงหน้าและกระบวนการแบ็กเอนด์ส่วนระยะยาวของแบ็กเอนด์ไปยังเอาต์พุตซึ่งเป็นข้อได้เปรียบของการแสดงผลการส่งสัญญาณแบบแบ่งส่วน โปรดทราบว่าหากเซิร์ฟเวอร์เป็น NGINX เป็นไปได้ว่าการแสดงผลแบบแบ่งส่วนอาจไม่ถูกต้องเนื่องจากการตั้งค่าบัฟเฟอร์และต้องปรับขนาดบัฟเฟอร์